react-aggrid-framework-components

0.1.3 • Public • Published

react-aggrid-framework-components

travis build version MIT License dependencies peer dependencies downloads issues

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

Package Sidebar

Install

npm i react-aggrid-framework-components

Weekly Downloads

3

Version

0.1.3

License

MIT

Unpacked Size

1.78 MB

Total Files

20

Last publish

Collaborators

  • m_hasbie