Skip to main content

Introduction

🚀 MUI-Datatables is a responsive datatables component built on top of Material-UI.

📦 Out of the box, it has various responsive modes like simple, standard and vertical.

ℹ It comes with various features such as searching, filtering, sorting, pagination, resizable columns, view/hide columns, draggable columns, exporting, printing, selectable rows, expandable rows and easy to customize with the help of material ui.

Fast Track ⏱️​

Get started by installing mui-datatables as a dependency.

Install mui-datatables​

MUI Datatables is available as a package on NPM for use in a Node application:

npm install mui-datatables

Required Packages​

With mui-datatables you also need to have these @mui-material , @mui/icons-materials and @mui/styles dependencies installed in your node application.

npm install @mui-material @mui/icons-materials @mui/styles

Usage​

The below is sample of mui-datatables with minimal configuration.

import MUIDataTable from "mui-datatables";
import {
  createTheme,
  StyledEngineProvider,
  ThemeProvider
} from "@mui/material/styles";

const columns = [
  {
    name: "hero",
    label: "Superhero",
    options: {
      filter: true,
      sort: true
    }
  },
  {
    name: "name",
    label: "Name",
    options: {
      filter: true,
      sort: false
    }
  }
];

const data = [
  {name: "Bruce Wayne", hero: "Batman"},
  {name: "Clark kent", hero: "Superman"},
  {name: "Arthur Curry", hero: "Aquaman"}
];

const options = {
  responsive: "standard"
};

export default function App() {
  return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={createTheme()}>
        <MUIDataTable
          title={"Superheros List"}
          data={data}
          columns={columns}
          options={options}
        />
      </ThemeProvider>
    </StyledEngineProvider>
  );
}

The output of code is in this sandbox:

Features​

Update the features of mui-datatables

Staying Informed​

Social media links.

Something Missing ?​

If you find issues with the documentation or have suggestions on how to improve the documentation or the project in general, please file an issue for us.