react-aggrid-framework-components

Ag-Grid custom built framework components for ag-grid-react.

Select, Multi-select filter components for Ag-Grid.

Installation

Install via NPM

npm install --save react-aggrid-framework-components

Install dependencies.

npm install --save react-bootstrap-typeahead underscore underscore.string

Include css files from the src\css folder in your project

<linkrel="stylesheet" href="bootstrap.min.css"><linkrel="stylesheet" href="Typeahead.css">

Usage example

import{AgGridReact}from'ag-grid-react';import{SelectFilter,SelectFloatingFilter,MultiSelectFilter,MultiSelectFloatingFilter}from'react-aggrid-framework-components';constbool={true: 'Yes',false: 'No'};constfruit={lemon: 'Lemon',orange: 'Orange',grapefruit: 'Grapefruit',apple: 'Apple',mangosteen: 'Mangosteen',durian: 'Durian',};constoptions={domLayout: 'autoHeight',enableColResize: true,enableFilter: true,columnDefs: [{field: 'fruit',headerName: 'Fruit',filter: 'multiSelectFilter',filterParams: {options: fruit},floatingFilterComponent: 'multiSelectFloatingFilter',floatingFilterComponentParams: {options: fruit,suppressFilterButton: true}},{field: 'citrus',headerName: 'Citrus ?',valueFormatter: ({ value })=>(bool[value]),filter: 'selectFilter',filterParams: {options: bool},floatingFilterComponent: 'selectFloatingFilter',floatingFilterComponentParams: {options: bool,suppressFilterButton: true}}],rowData: [{fruit: 'lemon',citrus: true},{fruit: 'orange',citrus: true},{fruit: 'grapefruit',citrus: true},{fruit: 'apple',citrus: false},{fruit: 'mangosteen',citrus: false},{fruit: 'durian',citrus: false},],gridOptions: {context: {componentParent: this,},floatingFilter: true},frameworkComponents: {selectFilter: SelectFilter,selectFloatingFilter: SelectFloatingFilter,multiSelectFilter: MultiSelectFilter,multiSelectFloatingFilter: MultiSelectFloatingFilter,}};<divclassName="ag-theme-material"style={{width: '100%',minHeight: '200px'}}><AgGridReact{...options}/></div>

Props

options

Object containing key => value pair for Select and MultiSelect filters (refer usage example).

License

MIT License