mui-datatables-searchable-components2

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.