@datical/dat-resizable-column

dat-resizable-column

Resizable column directive for @angular/material tables. Applies in-line css styles where necessary to emulate resizable column behaviors seen in more common spreadsheet oriented offerings. Borrows from some of the observer logic of the @angular/cdk Table class in an effort to improve performance.

Getting Started

TLDR; StackBlitz Demo

Prerequisites

Designed to work with Angular 8 and Angular Material. Expects these and the CDK as peer-dependencies.

Installing

Simply install via NPM

npm install --save @datical/dat-resizable-column

Or with Yarn

yarn add @datical/dat-resizable-column

Basic Usage

Import The Module

import { DatResizableColumnModule } from '@datical/dat-resizable-column';
//...

@NgModule({
  //...
  imports: [
    //...
    DatResizableColumnModule,
    //...
  ],
  //...
  bootstrap: [AppComponent]
})
export class AppModule { }

Add The Directive to Your Template

<table mat-table [dataSource]="dataSource" datResizableColumn>
  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="['position', 'name', 'weight', 'symbol']"></tr>
  <tr mat-row *matRowDef="let row; columns: ['position', 'name', 'weight', 'symbol'];"></tr>
</table>

Sticky Columns

...add writeup

Performance Warning

Mat Sort and Mat Paginator

...add writeup

API

Inputs

DatResizableColumnConfig

Running the tests

This project was created using the Angular CLI. To run the tests associated with the published package:

yarn test dat-resizable-column

Deployment

Managed by Datical.

Built With

• Angular
• Angular Material
• Angular Material CDK

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Taylor Buckner - Initial work - tabuckner

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• @angular/components team for the inspiration