ag-grid-react-components

AgGrid framework components for React, powered by TypeScript.

Installation

1. npm install -S ag-grid-react-components

Usage

RankFilter

1. import RankFilter

import { RankFilter } from 'ag-grid-react-components'

1. set RankFilter to columnDef.filterFramework

<AgGridReact
    columnDefs={[
        {
            field: 'field1',
            headerName: 'Rank Filter',
            filterFramework: RankFilter,
        },
    ]}
    {...props}
/>

Result

Server-side

'rank' filter type can be handled by sqlalchemy-ag-grid with Python + Flask + SQLAlchemy stack.

SetFilter

1. import setFilterFactory

import { setFilterFactory } from 'ag-grid-react-components'

1. create SetFilter by setFilterFactory() and set it to columnDef.filterFramework

<AgGridReact
    columnDefs={[
        {
            field: 'field2',
            headerName: 'Set Filter',
            filterFramework: setFilterFactory([
                {key: '', label: ''},
                {key: 'a', label: 'A'},
                {key: 'b', label: 'B'},
                {key: 'c', label: 'C'},
            ]),
        },
    ]}
    {...props}
/>

Result

Test

1. git clone https://github.com/ytkj/ag-grid-react-components.git
2. cd ag-grid-react-components
3. npm install
4. npm test
5. open http://localhost:3000 in your browser.