Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 2 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 4 years ago)
- Default Branch: master
- Last Pushed: 2024-10-26T07:22:00.000Z (3 months ago)
- Last Synced: 2024-11-29T09:58:44.144Z (about 2 months ago)
- Topics: angular, angular-material, data-table
- Language: TypeScript
- Homepage:
- Size: 7.36 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 8
-
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/ngx-material-data-table)](https://www.npmjs.com/package/ngx-material-data-table)
[![Build Status](https://github.com/exportarts/ngx-material-data-table/workflows/ci/badge.svg)](https://github.com/exportarts/ngx-material-data-table/actions)
[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=exportarts_ngx-material-data-table&metric=alert_status)](https://sonarcloud.io/dashboard?id=exportarts_ngx-material-data-table)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.