https://github.com/netceteragroup/ngrx-data-grid
https://github.com/netceteragroup/ngrx-data-grid
angular datagrid datatable grid javascript ngrx typescript
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/netceteragroup/ngrx-data-grid
- Owner: netceteragroup
- License: mit
- Created: 2019-07-18T08:49:47.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-06-19T19:03:41.000Z (almost 2 years ago)
- Last Synced: 2025-05-05T05:04:33.378Z (11 months ago)
- Topics: angular, datagrid, datatable, grid, javascript, ngrx, typescript
- Language: TypeScript
- Size: 10 MB
- Stars: 8
- Watchers: 7
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# ngrx-data-grid
Highly-customizable grid based on the [Angular](https://angular.io/) and the [NgRx](https://ngrx.io/) framework.
[](https://github.com/netceteragroup/ngrx-data-grid/actions/workflows/build.yml)
[](https://coveralls.io/github/netceteragroup/ngrx-data-grid?branch=master)
## Features
* Pagination
* Sorting
* Column selection
* Column resizing
* Column reordering
* Row selection (single and multiple)
* Customizable filtering
* Customizable column width
* Customizable cell content
* Customizable nested grid
* Update of the grid data
## Installing
```bash
$ npm install --save ngrx-data-grid
or
$ yarn add ngrx-data-grid
```
## Usage
### Configuration
Import the module inside your module:
```typescript
@NgModule({
imports: [
... other imports
NgRxDataGridModule
]
})
```
In the component create configuration for the grid:
```typescript
const gridConfig = GridConfigBuilder.gridConfig()
.withSelection(SelectionType.Checkbox) // multiple selection of rows
.withColumnReorder() // enable column reordering
.withColumnResize() // enable column resizing
.build();
```
Also for each column create an individual configuration. Here comes the customization into play:
```typescript
const columnsConfig = [{
headerName: 'First Name',
field: 'firstName',
visible: true,
sortAvailable: true,
filterAvailable: true,
filter: {
component: MyCustomFilterComponent // custom component to implement the filtering
},
component: MyCustomComponent, // custom component to render the cell,
width: 150, // sets the column width,
hideInSelection: true // hides the column from the column selection list
},
{
headerName: 'Last Name',
field: 'lastName',
visible: true,
sortAvailable: false,
filterAvailable: false,
valueGetter: (dataItem) => ... //customize the cell content
}];
```
### Initialization
Dispatch the init action to initialize the grid.
``` typescript
const data = ... // data to be rendered in the grid
const gridName = ... // name of the grid
this.store.dispatch(new initGrid({
gridName,
data,
columnsConfig,
numberOfItemsPerPage
}));
```
### HTML rendering
Add HTML tag to render the grid on the appropriate place.
```html
```
## Demo
Github pages: https://netceteragroup.github.io/ngrx-data-grid
Stackblitz: https://netceteragroup.github.io/ngrx-data-grid/stackblitz.html
## Contributing
Please refer to our individual [contributing guide](https://github.com/netceteragroup/ngrx-data-grid/blob/master/CONTRIBUTING.md) to see how you may contribute to the project.
## License
MIT © [Netcetera](https://github.com/netceteragroup)