MUI-Datatables - Datatables for Material-UI

MUI-Datatables is a data tables component built on Material-UI V1. It comes with features like filtering, view/hide columns, search, export to CSV download, printing, pagination, and sorting. On top of the ability to customize styling on most views, there are two responsive modes "stacked" and "scroll" for mobile/tablet devices.

Install

npm install mui-datatables --save

Demo

Usage

import MUIDataTable from "mui-datatables";

const columns = ["Name", "Company", "City", "State"];

const data = [
 ["Joe James", "Test Corp", "Yonkers", "NY"],
 ["John Walsh", "Test Corp", "Hartford", "CT"],
 ["Bob Herm", "Test Corp", "Tampa", "FL"],
 ["James Houston", "Test Corp", "Dallas", "TX"],
];

const options = {
  filterType: 'checkbox',
};

<MUIDataTable 
  title={"Employee List"} 
  data={data} 
  columns={columns} 
  options={options} 
/>

API

<MUIDataTable />

The component accepts the following props:

|Name|Type|Description |:--:|:-----|:-----| |title|array|Title used to caption table |columns|array|Columns used to describe table. Must be an array of simple strings |data|array|Data used to describe table. Must be an array of simple strings |options|object|Options used to describe table

Options:

|Name|Type|Default|Description |:--:|:-----|:--|:-----| |styles|object||Extend or override default styling |filterType |string|'dropdown'|Choice of filtering view. Options are "checkbox" or "dropdown" |pagination|boolean|true|Enable/disable pagination |caseSensitive |boolean|false|Enable/disable case sensitivity for search |responsive|string|'stacked'|Enable/disable responsive table views. Options: 'stacked', 'scroll' |rowsPerPage|number|10|Number of rows allowed per page |rowsPerPageOptions|array|[10,15,20]|Options to provide in pagination for number of rows a user can select |rowHover|boolean|true|Enable/disable hover style over rows |sort|boolean|true|Show/hide sort icon from toolbar |filter|boolean|true|Show/hide filter icon from toolbar |search|boolean|true|Show/hide search icon from toolbar |print|boolean|true|Show/hide print icon from toolbar |download|boolean|true|Show/hide download icon from toolbar

Customize Styling

In the options object, you have the ability to customize styling to your liking with the 'styles' property. Here are the following sections you can customize:

Table of Contents

• Table

• Toolbar

• FilterList

• Pagination

An example of how we would target FilterList would look like:

const options = {
  filter: true,
  filterType: 'checkbox',
  styles: {
    filterList: {
      root: {
        color: "#FF0000"
      },
      chip: {
        color: "#FEFEF0"
      },
    },
  }
};

<MUIDataTable 
  title={"some title"} 
  data={data} 
  columns={columns} 
  options={options} 
/>

Styling Table

const options = {
  styles: {
    table: {          
      head: {
        row: {
        },            
        cell: {
          root: {
          },
          sortLabel: {
          },
        }
      },
      body: {
        row: {
        },
        cell: {
          root: {
          }
        }
      },
    },
  }
};

Styling Toolbar

const options = {
  styles: {
    toolbar: {
      root: {},
      spacer: {
      },
      actions: {
      },
      titleRoot: {
      },
      titleText: {
      },
      icon: {
      },
      iconActive: {
      },
      search: {
      },
      searchIcon: {
      },
      searchText: {
      },
      clearIcon: {
      },
    },
  }
};

Styling FilterList

const options = {
  styles: {
    filterList: {
      root: {
      },
      chip: {
      },
    },
  }
};

Styling Pagination

const options = {
  styles: {  
    pagination: {
    }
  }
};

License

The files included in this repository are licensed under the MIT license.