@ytkj/ag-grid-react-components

AgGrid framework components for React, powered by TypeScript.

Usage no npm install needed!

<script type="module">
  import ytkjAgGridReactComponents from 'https://cdn.skypack.dev/@ytkj/ag-grid-react-components';
</script>

README

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

RankFilter screenshot

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

SetFilter screenshot

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.