Data table implementation for react material-ui
Mui data table was borne out of a need to integrate Material design data tables with react material ui. It achieves this by extending the table component already provided by material ui with new behaviour.
Mui data table is still in active development and there is still a plan to add even more features to make it more robust and flexible.
- Pagination
- Search / Filter
- Custom renderer / formatter
- React
- Material-ui
Mui data table is a React component and as such, you'd need to have react installed before installing this package. You'll also need to ensure that you are using the material-ui component library in your application.
Mui data table is available as an npm package, you can install from the command line using this command:
npm install mui-data-table --saveMui data table is designed to be easy to use. It has a ridiculously simple api and all you have to do is to pass a configuration object as a property and that is all the setup you need to get started.
import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { MuiDataTable } from 'mui-data-table';
const data = [
{ id: 1, name: 'Chikwa Eligson', age: 24, location: 'Lagos', level: 'stage-1', mood: 'happy' },
{ id: 2, name: 'Bamidele Johnson', age: 18, location: 'Anambra', level: 'stage-4', mood: 'anxious' },
{ id: 3, name: 'John Lee', age: 20, location: 'Abuja', level: 'stage-2', mood: 'indifferent' },
{ id: 4, name: 'Binta Pelumi', age: 22, location: 'Jos', level: 'stage-3', mood: 'sad' },
{ id: 5, name: 'Cassidy Ferangamo', age: 30, location: 'Lagos', level: 'stage-4', mood: 'angry' },
{ id: 6, name: 'Damian Swaggbag', age: 35, location: 'PortHarcourt', level: 'stage-1', mood: 'bitter' },
{ id: 7, name: 'Loveth Sweetstick', age: 20, location: 'Imo', level: 'stage-3', mood: 'happy' },
{ id: 8, name: 'Zzaz Zuzzi', age: 19, location: 'Bayelsa', level: 'stage-2', mood: 'party-mood' },
{ id: 9, name: 'Ian Sweetmouth', age: 18, location: 'Enugu', level: 'stage-4', mood: 'happy' },
{ id: 10, name: 'Elekun Bayo', age: 21, location: 'Zamfara', level: 'stage-4', mood: 'anxious' },
];
const config = {
paginated: true,
search: 'name',
data: data,
columns: [
{ property: 'id', title: 'S/N'},
{ property: 'name', title: 'Name' },
{ property: 'age', title: 'Age' },
{ property: 'location', title: 'Location' },
{ property: 'level', title: 'level' },
{ title: 'Mood', renderAs: function (data) {
return `${data.name} is in a ${data.mood} mood.`;
}},
]
};
class App extends React.Component {
render() {
return (
<MuiThemeProvider>
<MuiDataTable config={config} />
</MuiThemeProvider>
);
}
}
ReactDOM.render(<App />, document.querySelector('#root'));This will populate the table with the data specified in the data array with pagination and filtering turned on.
| Attribute | Type | Default | Description |
|---|---|---|---|
| paginated | boolean or object | false | Determines if the generated table should be paginated. When it is passed the boolean value true, it paginates the table using the defaults: 5 rows per page and the table contains options to switch to 10 or 15 per page. You can also pass it an object with two available properties: rowsPerPage and menuOptions. rowsPerPage takes a number and will be used to determine how many values in the data object should be displayed per page while menuOptions which takes an array of numbers is used to populate the select field component with menu items, if this property is not declared or is set to false, the select field component will not show up on the table. You can check the demo to see how it is used. |
| search | string | empty string ('') | Determines which property from the data object should be used to filter the values in the table when search is made. You can filter using multiple columns by seperating each value in the string with a pipe(|) e.g: 'name|mood|location'. |
| data | array (containing only objects) | empty array ([]) | Determines the data that is used to populate the table with values. |
| column | array (containing only objects) | Determines the mapping between the data object, table headers, table columns and table rows. |
The column attribute is used to determine how data in the data object should be displayed within the table.
| Attribute | Type | Default | Description |
|---|---|---|---|
| property | string | Determines the attribute in the data object to be used to populate a column. It is ignored if a renderAs attribute is present as well. |
|
| title | string | Determines the header name for a particular column. It can be set to an empty string or totally removed if the header doesn't need to have a name. | |
| renderAs | function | Overwrites the property attribute and is used instead to display data for a particular column. It takes one argument which is passed down from the data object. The argument will contain one individual object from the data object at a time and the renderAs method will be used to format the data before displaying it on the table |
Feature requests can be made using Github issues
Pull requests are totally encouraged and you are welcome to contribute to the development of mui-data-table. Please do raise an issue before making a pull request so as to determine if a particular feature is already being worked on or is currently out of the scope of this project.
- Fork mui-data-table
- Create a feature branch (git checkout -b my-new-fature)
- Write tests if the feature needs to be tested
- Ensure the code lints successfully
- Commit your changes
- Push to your branch
- Make a pull request
mui-data-table is released under the MIT License and by contributing, you agree that your contributions will be licensed under it.