A simple data table with virtual scrolling using Angular Material.

[]

This project extends 'angular material table' so that it can be used as a replacement for ngx-datatable in one of my projects. Unluckily ngx-datatable seems to be dead as it is still on angular v12 and an update to a more recent angular version is not in sight.

Nat-Datatable implements a table with virtual scrolling, sorting and filtering. Only a minimal set of the functionality of ngx-datatable is implemented.

Try out the live demo.

(back to top)

To use this package in your project just follow these simple steps.

The package can be used in Angular apps with Angular Material installed.

Install the package from npmjs

npm install @bepo65/mat-datatable

Configure your angular application module (e.g: app.module.ts):

...
import { MatDatatableModule } from 'mat-datatable';

@NgModule({
  ...
  imports: [
    ...
    MatDatatableModule
  ]
})

Add Mat-Datatable to your html file (e.g: app.component.html):

<div class="content-table">
  <mat-datatable #datatable
    [columnDefinitions]="columnDefinitions"
    [displayedColumns]="displayedColumns"
    [dataStoreProvider]="dataStore"
    [trackBy]="trackBy">
    loading...
  </mat-datatable>
</div>

The height of the element containing the mat-datatable must be set explicitly (e.g: app.component.scss):

.content-table {
  height: 400px;
  margin: 0 1em;
  overflow: auto;
}

Some properties of mat-datatable must be configured in the component class (e,g, app.component.ts):

export class AppComponent {
  ...
    protected dataStore = new MyTableDataStore<MyTableItem>();
    protected columnDefinitions: MatColumnDefinition<MyTableItem>[] = [
      {
        columnId: 'id',
        header: 'ID',
        cell: (row: DemoTableItem) => row?.userId?.toString(),
        footer: 'id'
      },
      {
        columnId: 'name',
        sortable: true,
        resizable: true,
        header: 'Name',
        cell: (row: DemoTableItem) => row?.firstName,
        footer: 'name'
      }

    ];
    protected displayedColumns: string[] = ['id', 'name'];

(back to top)

The component is based on Angular Material and uses Google Fonts and the Google Material Icons font. Both fonts are part of the project and not fetched via https.

(back to top)

Demo project to show all features of Mat-Datatable.

git clone [email protected]:BePo65/mat-datatable.git
cd mat-datatable
npm start

Navigate to https://localhost:4200

(back to top)

import { MatDatatable } from '@bepo65/mat-datatable';

Component to create an angular material table based datatable. The component is generic; the given type is used to define the object for the row data.

Interface for a component that fetches data from the datastore respecting sorting and filtering. The component is generic; the given type is used to define the object for the row data.

Interface for the definition of a single table column.

Interface for the definition of the sorting of 1 table column.

Interface defining the properties of a requests for a range of rows.

Interface defining the properties of a page of rows returned from the datastore.

The alignment of the content of a column

The definition of a parameter filtering for the column identified by the given 'fieldName'.

The definition of a parameter filtering for a range of values.

The definition of a parameter filtering for a single value.

The definition of a single sort parameter.

How many rows can be selected.

The direction of a sort.

import { MatDatatableHarness } from '@bepo65/mat-datatable/testing';

Abstract class used as base for harnesses that interact with a mat-datatable row.

Harness for interacting with a mat-datatable in tests.

Harness for interacting with an MDC-based Angular Material table footer cell.

Harness for interacting with a mat-datatable footer row.

Harness for interacting with an MDC-based Angular Material table header cell.

Harness for interacting with a mat-datatable header row.

Harness for interacting with a mat-multi-sort element in tests.

Harness for interacting with a mat-multi-sort header element in tests.

Harness for interacting with a mat-datatable cell in a row.

Harness for interacting with a mat-datatable row.

(back to top)

A set of criteria that can be used to filter a list of cell harness instances.

Text extracted from a table organized by columns.

This interface describes an object, whose keys are the names of the columns and whose values are an object with the following properties:

A set of criteria that can be used to filter a list of table harness instances.

Text extracted from a table row organized by columns.

This interface describes an object, whose keys are the names of the columns and whose values are the corresponding cell content.

A set of criteria that can be used to filter a list of row harness instances.

(back to top)

See the open issues for a full list of proposed features (and known issues).

(back to top)

• to make footer turn on / off dynamically it is not sufficient to wrap the footer cell and row definitions in ng-container. Details see stackoverflow. The demo uses ngx-rerender.

(back to top)

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

The project uses 'standard-version' to create the changelog. To enable this system, commit messages are linted before commits are executed by git.

To enable this system you have to run the following scripts in your local repository home directory:

npx husky install
npx husky add .husky/commit-msg "npx --no -- commitlint --edit $1"

The structure of commit messages is:

  <header>
  <BLANK LINE>
  <body>
  <BLANK LINE>
  <footer>

header

  <type>(<scope>): <short summary>

type and scope

• build: Changes that affect the build system or external dependencies (example scope: npm)
• docs: Documentation only changes
• feat: A new feature
• fix: A bug fix
• perf: A code change that improves performance
• refactor: A code change that neither fixes a bug nor adds a feature
• test: Adding missing tests or correcting existing tests (example scopes: demo, lib, e2e)

footer

  BREAKING CHANGE: ... (requires MAJOR in Semantic Versioning)

For details of the commit messages format see Contributing to Angular.

(back to top)

Copyright © 2024 Bernhard Pottler.

Distributed under the MIT License. See LICENSE for more information.

This project uses the fonts 'Roboto' and 'Material Icons' from the Google Fonts Library that are licensed under the Apache License Version 2.0.

(back to top)

As eslint V9 requires a fundamental change to the configuration files, the update will be done in a later version.

(back to top)