README
@latticejs/ag-grid
An ag-Grid component to customise the behaviour of the grid.
Install
npm install @latticejs/ag-grid --save-dev
Features
- Use ag-Grid to customise Grid.
- Storybook
- ag-Grid with MUI Theme
- No
react-script
usage
Usage
import React, { Component } from 'react';
import LatticeAgGgrid from '@latticejs/ag-grid';
import '@latticejs/ag-grid/styles/lattice-ag-grid-style.css';
export class AgGrid extends Component {
getGrid(gridObj) {
console.log(gridObj);
}
render() {
return (
<LatticeAgGgrid
animateRows
enableSorting
enableFilter
enableColResize
rowDragManaged
pagination
paginationAutoPageSize
columnDefs="Pass your column definition"
rowData="Pass your ag-grid data array coming from api here"
rowSelection="multiple"
afterGridCreated={this.getGrid}
>
</LatticeAgGgrid>
);
}
}
The above snippet will render a basic ag-Grid with a material look'n'feel. It also support themes (dark, light).
API
animateRows
boolean
| Defaults totrue
enableSorting
boolean
| Defaults totrue
enableFilter
boolean
| Defaults totrue
enableColResize
boolean
| Defaults totrue
rowDragManaged
boolean
| Defaults totrue
pagination
boolean
| Defaults totrue
paginationAutoPageSize
boolean
| Defaults totrue
columnDefs
- Pass your array of objects containing ag-Grid header column names.
rowData
- Set your row data containing array of objects in state and pass it to rowData props .
rowSelection
Pass either
multiple
orsingle
in this prop.
afterGridCreated
- This prop is used to get the reference of lattice ag-Grid so that user can use the properties of ag-Grid by using
getGrid()
function.
gridContainerStyle
- To append inline style to the grid container.
gridContainerStyle: { height: Pass height.. }
You can also pass other props. Here are the reference of props list references.