2.0.4 • Published 5 years ago

mui-tables v2.0.4

Weekly downloads
5
License
MIT
Repository
github
Last release
5 years ago

Overview | MUI Tables

Travis (.org) npm codecov npm

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!

Example with Summary, Date Toolbar, Filters,

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

FeatureDescription
Custom ComponentsMultiple options to hook into component rendering, all supplied with the full context of the table
Event HooksHook into specific table events such as search and filter changes, row selection, and more
Summary RowNo config required summary row with two formats, more on the way.
Automatic Duplicate HandlingSpecify whether duplicate rows should be displayed, merged, or hidden.
Built In Date ToolbarNo custom toolbar required, just specify change handlers and date values.
LocalizationFull control over almost every text label.
Typescript SupportTypings included. Never guess what data you're hooks will be passed.
StylingOverride styles using MUIThemeProvider.

Example Usage

Intro Example

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} />
);

Props / Options

See Here

Built With

Contributing

Coming soon...

Versioning

We use SemVer for versioning. For the versions available, see the releases on this repository.

Authors

License

This project is licensed under the MIT License - see the LICENSE.md file for details

2.0.4

5 years ago

2.0.3

5 years ago

2.0.2

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.1.0

5 years ago

1.0.12

5 years ago

1.0.11

5 years ago

1.0.10

5 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago