Skip to content

netceteragroup/ngrx-data-grid

Repository files navigation

ngrx-data-grid

Highly-customizable grid based on the Angular and the NgRx framework.

Build Status Coverage Status

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

$ npm install --save ngrx-data-grid
or
$ yarn add ngrx-data-grid

Usage

Configuration

Import the module inside your module:

@NgModule({
    imports: [
        ... other imports
        NgRxDataGridModule
    ]
})

In the component create configuration for the grid:

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:

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.

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.

<ngrx-data-grid [config]="gridConfig"
                [gridName]="gridName">
</ngrx-data-grid>

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 to see how you may contribute to the project.

License

MIT © Netcetera