Overview | MUI Tables

DOCUMENTATION SITE

MUI Tables is a highly-pluggable table library built on top of the fantastic Material-UI component library.

While multiple libraries already provide many of the features included, few (in my opinion) provide as much abstraction on top of the data management aspect of building and using tables. The goal for MUI Tables is to make data management as painless as possible while providing as many customization options as possible.

Play with the Configurable Demo here!

Installation

npm i --save mui-tables

Peer Dependencies:

{
    "@material-ui/core": ">= 3.9.0",
    "@material-ui/icons": ">= 3.0.0",
    "react": ">= 16.8.1"
}

Features

Example Usage

import React from 'react';
import MUITable from 'mui-tables';

const data = [
    { name: 'Bob', demographics: { age: 29, gender: "male" } },
    { name: 'Alice', demographics: { age: 34, gender: "female" } }
];

const columns = {
    static: [
        {
            name: 'name',
            title: 'Name',
            calculateCellDefinition: (entry) => ({
                display: entry.name,
                value: entry.name
            })
        },
        {
            name: 'age',
            title: 'Age',
            calculateCellDefinition: (entry) => ({
                // Never ask a woman's age fool!
                display: entry.demographics.gender === "female" ? "❓" : entry.demographics.age,
                value: entry.demographics.age
            })
        }
    ]
};

export const IntroExample = () => (
    <MUITable data={data} title={'Intro Table'} columns={columns} loading={false} />
);