Nuclear Package Magnet

    @datical/dat-resizable-column

    0.0.1 • Public • Published

    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

    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

    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

    Keywords

    none

    Install

    npm i @datical/dat-resizable-column

    DownloadsWeekly Downloads

    11

    Version

    0.0.1

    License

    none

    Unpacked Size

    27.1 kB

    Total Files

    21

    Last publish

    Collaborators

    • datical-dev
    • tabuckner