Data Grid - Filtering
Filtering helps view particular or related records in the Date Grid.
Column filtering
Benchmark
- https://ant.design/components/table/#components-table-demo-head
- https://material-table.com/#/docs/features/filtering
- https://ag-grid.com/javascript-grid-filtering/
- https://demos.telerik.com/kendo-ui/grid/filter-row
- https://www.telerik.com/kendo-react-ui/components/grid/filtering/
- https://ej2.syncfusion.com/react/demos/#/material/grid/filter-menu
- https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Filtering/React/Light/
- https://www.jqwidgets.com/react/react-grid/#https://www.jqwidgets.com/react/react-grid/react-grid-filtering.htm
- http://tabulator.info/docs/4.5/filter
Search
Name | Rating | Address | Phone | Country |
|---|
<DataGrid
style={{ maxHeight: 300, width: '100%' }}
columns={[
{ field: 'name', label: 'Name' },
{ field: 'rating', label: 'Rating' },
{ field: 'address', label: 'Address' },
{ field: 'phone', label: 'Phone' },
{ field: 'country', label: 'Country' },
]}
rowsData={data}
/>
Benchmark
- https://ag-grid.com/javascript-grid-filter-quick/
- https://material-table.com/#/docs/features/search
- https://demos.telerik.com/kendo-ui/grid/search-panel
- https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/searching/
- https://ej2.syncfusion.com/react/demos/#/material/grid/searching
- https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/filtering/