This package has been deprecated

    Author message:

    This package is no longer maintained. Please use mui-datatables or material-ui-datatables


    0.1.7 • Public • Published

    Mui Data Table

    Data table implementation for react material-ui

    CircleCI Coverage Status npm version

    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 --save


    Mui 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.

    Example Usage

    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 `${} is in a ${data.mood} mood.`;
      viewSearchBarOnload: true // set to true or false. Default it is set to false. Shows the search bar or not depending on the value set
    class App extends React.Component {
      render() {
        return (
            <MuiDataTable config={config} />
    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.

    Configuration options

    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.

    Column configuration

    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.

    1. Fork mui-data-table
    2. Create a feature branch (git checkout -b my-new-fature)
    3. Write tests if the feature needs to be tested
    4. Ensure the code lints successfully
    5. Commit your changes
    6. Push to your branch
    7. 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.


    npm i mui-data-table

    DownloadsWeekly Downloads






    Unpacked Size

    31.9 kB

    Total Files


    Last publish


    • blueyedgeek