https://github.com/evolkmann/ngx-material-data-table

Base class and tools for professional data tables based on Angular Material
https://github.com/evolkmann/ngx-material-data-table

angular angular-material data-table

Last synced: 10 months ago
JSON representation

Base class and tools for professional data tables based on Angular Material

• Host: GitHub
• URL: https://github.com/evolkmann/ngx-material-data-table
• Owner: evolkmann
• Created: 2021-01-07T16:09:45.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2025-04-16T11:50:22.000Z (10 months ago)
• Last Synced: 2025-04-23T19:24:39.037Z (10 months ago)
• Topics: angular, angular-material, data-table
• Language: TypeScript
• Homepage:
• Size: 10.9 MB
• Stars: 5
• Watchers: 0
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

          
# ngx-material-data-table

[![npm](https://img.shields.io/npm/v/@volkmann-design-code/ngx-material-data-table)](https://www.npmjs.com/package/@volkmann-design-code/ngx-material-data-table)

[![Build Status](https://github.com/evolkmann/ngx-material-data-table/workflows/ci/badge.svg)](https://github.com/evolkmann/ngx-material-data-table/actions)

This class enables you to create functional tables quickly based on

[`@angular/material/table`](https://material.angular.io/components/table)

without the need to write a lot of boilerplate code.

It includes the following features:

- Observable based data source

- Extendable config based on page, pageSize and optional orderBy

- Live persistance of table config in a query param

- Restoring of table config based on query param

- Clean component, just pass all options in the constructor

- Optional select column that works across pages via

  [``](./projects/ngx-material-data-table/src/lib/selection-cell/selection-cell.component.ts)

- Reuse Angular lifecycle hooks via

  [`NgxMaterialDataTableHooks`](./projects/ngx-material-data-table/src/lib/lifecycle-hooks.ts)

## Demo

![demo gif](./docs/images/demo.gif)

### Run it yourself

1. `npm i`

2. `npm start`

3. Open [http://localhost:4200](http://localhost:4200)

## Installation

1. Make sure you have installed all peer dependencies and that you have a working

  [Angular Material Setup](https://material.angular.io/guide/getting-started)

  before using this component.

2. `npm i -E ngx-material-data-table`

3. Integrate the library in your project [as in the demo](./projects/demo)

## Contributing

Contributions via issues or Pull Requests are welcome!

When making commits, please follow the commit message guidelines from

[conventionalcommits.org](https://www.conventionalcommits.org).

This makes it easy to auto-generate a changelog.

Have a look at previous commits in this repo for examples.

## Publishing

To make a new version:

- `npx standard-version --dry-run` (use appropriate options for the desired release and remove dry run)

- `git push --follow-tags origin master`

- `npm run build`

- `npm publish --access public`