JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 62
  • Score
    100M100P100Q86351F
  • License MIT

Package Exports

  • ngrx-data-grid

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngrx-data-grid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ngrx-data-grid

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

Build Status Coverage Status

Features

  • Pagination
  • Sorting
  • Column selection
  • 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
                     .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
}, 
{
    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