# mui-react-tables
> Tables for React with Material UI
Latest version **1.1.2** (published 2018-11-29) · MIT license · 0 weekly downloads
## Install
```sh
npm install mui-react-tables
pnpm add mui-react-tables
yarn add mui-react-tables
bun add mui-react-tables
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.1.2 |
| Published | 2018-11-29 |
| First published | 2018-11-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 26.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | alxbbnk |
| Maintainers | asrbbnk |
| Keywords | react, material-ui, table, react-material |
## Links
- npm: https://www.npmjs.com/package/mui-react-tables
- Repository: https://github.com/alxbbnk/mui-react-tables
- Homepage: https://github.com/alxbbnk/mui-react-tables#readme
- Issues: https://github.com/alxbbnk/mui-react-tables
- npm.io page: https://npm.io/package/mui-react-tables
## Dependencies (1)
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
## Alternatives
- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads
## Recent versions
- 1.1.2 (latest) — 2018-11-29
- 1.1.1 — 2018-11-28
- 1.1.0 — 2018-11-28
- 1.0.4 — 2018-11-26
- 1.0.3 — 2018-11-26
- 1.0.2 — 2018-11-26
- 1.0.1 — 2018-11-26
- 1.0.0 — 2018-11-26
## README
# Flexible data tables built on Material UI framework
[](https://badge.fury.io/js/mui-react-tables)
[](https://travis-ci.com/alxbbnk/mui-react-tables)
[](https://github.com/asrbbnk/mui-react-tables/blob/master/LICENSE)
------------
This project is an extension for Material UI Tables to provide features such as sorting and filtering.
## Demo
[](https://codesandbox.io/s/6x4067oq7r)
## Install
`npm i mui-react-tables`
## Usage
```javascript
import React from "react";
import MUITable from "mui-react-tables";
function App() {
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 (
);
}
```
## 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
```javascript
import React from 'react';
import PropTypes from 'prop-types';
export class RangeNumberFIlter extends React.Component {
static propTypes = {
filter: PropTypes.object,
column: PropTypes.object.isRequired,
registerSelectedFilters: PropTypes.func,
};
componentDidMount() {
this.props.registerSelectedFilters(() => {
return [this.state.min, this.state.max];
});
this.setState({
min: this.props.filter.active[0],
max: this.props.filter.active[1],
});
}
state = {
min: null,
max: null,
};
render() {
return (
...
);
}
}
```
### Contributing
Contributions are always welcome
---
_Source: https://npm.io/package/mui-react-tables · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._