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
Usage example
;; const bool = true: 'Yes' false: 'No'; const fruit = lemon: 'Lemon' orange: 'Orange' grapefruit: 'Grapefruit' apple: 'Apple' mangosteen: 'Mangosteen' durian: 'Durian'; const options = 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 ?' boolvalue 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 ; <div className="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