Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hyojin/material-ui-datatables
An another React Data tables component.
https://github.com/hyojin/material-ui-datatables
datatables material-design material-ui material-ui-datatables react react-component
Last synced: about 1 month ago
JSON representation
An another React Data tables component.
- Host: GitHub
- URL: https://github.com/hyojin/material-ui-datatables
- Owner: hyojin
- License: mit
- Created: 2016-11-08T08:36:28.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-23T16:09:25.000Z (about 6 years ago)
- Last Synced: 2024-07-22T15:26:42.982Z (about 2 months ago)
- Topics: datatables, material-design, material-ui, material-ui-datatables, react, react-component
- Language: JavaScript
- Homepage:
- Size: 401 KB
- Stars: 165
- Watchers: 11
- Forks: 58
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Material-UI-Datatables
[](https://www.npmjs.com/package/material-ui-datatables)
[](https://travis-ci.org/hyojin/material-ui-datatables)
[](https://coveralls.io/github/hyojin/material-ui-datatables?branch=master)
An another React Data tables component.
Material-UI-Datatables is a custom [React](https://facebook.github.io/react/) component using awesome [Material-UI](http://www.material-ui.com/). It provides rendering data and emitting events
such as filter and column sort and pagination which may help you dealing with your data. But it doesn't provide features all done within the component. Most parts of this component are stateless, which means you need to implement your logic for the events.
**Now material-ui provides [example code](https://material-ui-1dab0.firebaseapp.com/demos/tables/) of data tables component with it's v1.0.0 package**
## Installation
```sh
npm install material-ui-datatables
```
or
```sh
yarn add material-ui-datatables
```
## Demo
[Demo](https://hyojin.github.io/material-ui-datatables/)
## Status
Work in progress
## Usage
```jsx
import React, {Component} from 'react';
import DataTables from 'material-ui-datatables';
const TABLE_COLUMNS = [
{
key: 'name',
label: 'Dessert (100g serving)',
}, {
key: 'calories',
label: 'Calories',
},
...
];
const TABLE_DATA = [
{
name: 'Frozen yogurt',
calories: '159',
fat: '6.0',
carbs: '24',
...
}, {
name: 'Ice cream sandwich',
calories: '159',
fat: '6.0',
carbs: '24',
...
},
...
];
class MyComponent extends Component {
...
handleFilterValueChange = (value) => {
// your filter logic
}
handleSortOrderChange = (key, order) => {
// your sort logic
}
render() {
return (
);
}
}
```
## Properties
| Name | Type | Default | Description |
|----------------------|-----------|-------------------|----------------------------------------------|
| columns | array | | Array of column settings [object](https://github.com/hyojin/material-ui-datatables#column-settings) |
| count | number | 0 | |
| data | array | | |
| enableSelectAll | bool | false | |
| filterHintText | string | 'Search' | |
| filterValue | string | '' | |
| footerToolbarStyle | object | | |
| headerToolbarMode | string | 'default' | 'default' or 'filter' |
| height | string | 'inherit' | |
| initialSort | object | | {column: 'column key', order: 'asc or desc'} |
| multiSelectable | bool | false | |
| onCellClick | function | | |
| onCellDoubleClick | function | | |
| onFilterValueChange | function | | Should set 'showHeaderToolbar' to true first |
| onNextPageClick | function | | |
| onPreviousPageClick | function | | |
| onRowSelection | function | | |
| onRowSizeChange | function | | |
| onSortOrderChange | function | | |
| page | number | 1 | |
| rowSize | number | 10 | |
| rowSizeLabel | string | 'Rows per page:' | |
| rowSizeList | array | [10, 30, 50, 100] | |
| selectable | bool | false | |
| selectedRows | array | [] | |
| showCheckboxes | bool | false | |
| showFooterToolbar | bool | true | |
| showHeaderToolbar | bool | false | |
| showHeaderToolbarFilterIcon | bool | true | |
| showRowHover | bool | false | |
| showRowSizeControls | bool | false | |
| summaryLabelTemplate | function | | |
| tableBodyStyle | object | | |
| tableHeaderColumnStyle | object | | |
| tableHeaderStyle | object | | |
| tableRowColumnStyle | object | | |
| tableRowStyle | object | | |
| tableStyle | object | | |
| tableWrapperStyle | object | | |
| title | string | | Should set 'showHeaderToolbar' to true first |
| titleStyle | object | | Should set 'showHeaderToolbar' to true first |
| toolbarIconRight | node | | Can be an array of IconButton nodes |
## Column settings
| Name | Type | Default | Description |
|----------------------|-----------|-------------------|----------------------------------------------|
| key | string | | |
| label | string | | |
| sortable | bool | false | |
| tooltip | string | | |
| className | string | | |
| render | function | | |
| alignRight | bool | | |
| style | object | | Inline column styles |
### Setting example
```javascript
{
key: 'name',
label: 'Dessert (100g serving)',
sortable: true,
tooltip: 'Dessert (100g serving)',
className: 'important-column',
style: {
width: 250,
},
render: (name, all) =>
{name}
}
```
## License
MIT