Flexible data tables built on Material UI framework
This project is an extension for Material UI Tables to provide features such as sorting and filtering.
Demo
Install
npm i mui-react-tables
Usage
;; { const columns = title: "Id" property: "id" sort: true title: "Name" property: "name" filter: true title: "Job Title" property: "jobTitle" filter: true ; const rows = id: 1 name: "Alex" jobTitle: "Developer" id: 2 name: "Mike" jobTitle: "Team Leader" ; return <MUITable columns=columns rows=rows /> ;}
Props
Name | Type | Description |
---|---|---|
columns | array | Must be represented by an array of objects each of which describes the properties of a column. See below for details |
rows | array | Table rows |
onFilterChange | function | Callback function, called after changing filters for a column. Pass arguments to the callback function: column, active filter values for column. For exapmle: *(column, activeFilters) => { . ... } * |
onSortChange | function | Sorting callback function. Pass arguments to the callback function: column, direction. Direction: 'asc' or 'desc' |
Column options
Name | Type | Description |
---|---|---|
title | string | Required. Title of a column |
field | string | Path to the value in the current item. Mandatory property for provide sorting and filtering by column |
sort | boolean | Default: false. Indicates whether the sorting is available by column |
filter | boolean | Default: false. Indicates whether the filtering is available by column |
formatter | function | To customize of the data format. Pass arguments to the function: current value and row data. For example: (value, row) => { ... }. Should return content |
filterList | function/array | To customize filter values. |
filterPredicate | function | Custom filter method. Should return boolean |
filterType | function | Custom filter type. For example, if you want to filter a range of values you can define your own filter type (and predicate). See below for details |
Custom filter type
The first point to use a custom filter type is to determine how to retrieve selected filter values from your filter type. You must register a callback function that returns an array with the selected filter values (called when the popover is closed).
For example:
this.props.registerSelectedFilters (() => {return 'array of selected filter values}}
Passed props to custom filter type:
Name | Type | Description |
---|---|---|
filter | object | Contains info about active filter values(filter.active), and filter values list (filter.list) |
columns | object | Info about column. See above |
registerSelectedFilters | function | For defining how to retrieve selected filter values after editing filter for column. See above |
Example custom filter type
;; Component static propTypes = filter: PropTypesobject column: PropTypesobjectisRequired registerSelectedFilters: PropTypesfunc ; { thisprops; this; } state = min: null max: null ; { return <ReactFragment> ... </ReactFragment> ; }
Contributing
Contributions are always welcome