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

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="Typeahead.css">

Usage example

import { AgGridReact } from 'ag-grid-react';
import { SelectFilter, SelectFloatingFilter, MultiSelectFilter, MultiSelectFloatingFilter } from 'react-aggrid-framework-components';

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 ?',
			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,
	}
};
		
<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