resizable-mat-columns

Turns angular material table columns to resizable

Installation

NPM

npm install resizable-mat-columns

Import the module

import { ResizableMatColumnsModule } from "resizable-mat-columns";

@NgModule({
  declarations: [
   //some declarations
  ],
  imports: [
    //some imports
    ResizableMatColumnsModule
  ],
})

On a HTML table tag put the resizable directive

<table mat-table resizable>...</table>

And every column header change from

<th mat-header-cell *matHeaderCellDef>...</th>

to

<th resizable-mat-header *matHeaderCellDef>...</th>

That wasn't so hard, isn't it?

Table parameters

| Name | Type | Description | |:--------------------|:-------|:-------------------------------------------| | min-columns-width | number | Minimum width of columns. Default 50 |

Demo

You can try out a demo by clicking here.

Source

https://github.com/yan-libs/resizable-mat-columns/tree/develop/projects/resizable-mat-columns