91 lines
2.9 KiB
JavaScript
91 lines
2.9 KiB
JavaScript
import React, {Component} from "react";
|
|
|
|
import {AgGridReact} from "ag-grid-react";
|
|
|
|
import "ag-grid-enterprise";
|
|
|
|
import PartialMatchFilter from "./PartialMatchFilter";
|
|
|
|
export default class FilterComponentExample extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
rowData: FilterComponentExample.createRowData(),
|
|
columnDefs: FilterComponentExample.createColumnDefs(),
|
|
};
|
|
}
|
|
|
|
onGridReady = (params) => {
|
|
this.gridApi = params.api;
|
|
this.columnApi = params.columnApi;
|
|
|
|
this.gridApi.sizeColumnsToFit();
|
|
};
|
|
|
|
onClicked = () => {
|
|
this.gridApi.getFilterInstance("name").getFrameworkComponentInstance().componentMethod("Hello World!");
|
|
};
|
|
|
|
static createColumnDefs() {
|
|
return [
|
|
{
|
|
field: "row",
|
|
width: 400,
|
|
suppressMenu: true
|
|
},
|
|
{
|
|
headerName: "Filter Component",
|
|
field: "name",
|
|
filterFramework: PartialMatchFilter,
|
|
width: 400,
|
|
menuTabs: ['filterMenuTab']
|
|
}
|
|
];
|
|
}
|
|
|
|
static createRowData() {
|
|
return [
|
|
{"row": "Row 1", "name": "Michael Phelps"},
|
|
{"row": "Row 2", "name": "Natalie Coughlin"},
|
|
{"row": "Row 3", "name": "Aleksey Nemov"},
|
|
{"row": "Row 4", "name": "Alicia Coutts"},
|
|
{"row": "Row 5", "name": "Missy Franklin"},
|
|
{"row": "Row 6", "name": "Ryan Lochte"},
|
|
{"row": "Row 7", "name": "Allison Schmitt"},
|
|
{"row": "Row 8", "name": "Natalie Coughlin"},
|
|
{"row": "Row 9", "name": "Ian Thorpe"},
|
|
{"row": "Row 10", "name": "Bob Mill"},
|
|
{"row": "Row 11", "name": "Willy Walsh"},
|
|
{"row": "Row 12", "name": "Sarah McCoy"},
|
|
{"row": "Row 13", "name": "Jane Jack"},
|
|
{"row": "Row 14", "name": "Tina Wills"}
|
|
];
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div style={{height: 400, width: 900}}
|
|
className="ag-fresh">
|
|
<h1>Filter Component Example</h1>
|
|
<button style={{marginBottom: 10}} onClick={this.onClicked} className="btn btn-primary">Filter Instance
|
|
Method
|
|
</button>
|
|
<AgGridReact
|
|
// properties
|
|
columnDefs={this.state.columnDefs}
|
|
rowData={this.state.rowData}
|
|
|
|
enableFilter
|
|
suppressMenuHide
|
|
|
|
// events
|
|
onGridReady={this.onGridReady}>
|
|
</AgGridReact>
|
|
<h4>The filter on the Filter Component column uses a Custom React Filter Component</h4>
|
|
<p>This filter will allow partial matches - for example enter "m p" which will match Michael Phelps.</p>
|
|
</div>
|
|
);
|
|
}
|
|
};
|