mui-datatables-searchable-components2 v1.0.8

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:

Options:

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.