# mui-tables

> Pluggable table library built on top of Material-UI components

Latest version **2.0.4** (published 2019-03-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install mui-tables
pnpm add mui-tables
yarn add mui-tables
bun add mui-tables
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.4 |
| Published | 2019-03-08 |
| First published | 2019-02-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 241.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | Parker Self |
| Maintainers | parkerself22 |
| Keywords | react, reactjs, mui-table, mui-tables, material-ui, mui |

## Links

- npm: https://www.npmjs.com/package/mui-tables
- Repository: https://github.com/parkerself22/mui-tables
- Homepage: https://parkerself.gitbook.io/mui-table
- Issues: https://github.com/parkerself22/mui-tables/issues
- npm.io page: https://npm.io/package/mui-tables

## Dependencies (7)

- [moment](https://npm.io/package/moment.md) ^2.22.2
- [warning](https://npm.io/package/warning.md) ^4.0.2
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [lodash.get](https://npm.io/package/lodash.get.md) ^4.4.2
- [lodash.has](https://npm.io/package/lodash.has.md) ^4.5.2
- [@date-io/moment](https://npm.io/package/@date-io/moment.md) ^1.1.0
- [material-ui-pickers](https://npm.io/package/material-ui-pickers.md) ^2.2.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.4 (latest) — 2019-03-08
- 2.0.3 — 2019-03-05
- 2.0.2 — 2019-02-28
- 2.0.1 — 2019-02-28
- 2.0.0 — 2019-02-22
- 1.1.0 — 2019-02-22
- 1.0.12 — 2019-02-20
- 1.0.11 — 2019-02-15
- 1.0.10 — 2019-02-15
- 1.0.9 — 2019-02-15
- 1.0.8 — 2019-02-14
- 1.0.7 — 2019-02-14
- 1.0.6 — 2019-02-14
- 1.0.5 — 2019-02-14
- 1.0.4 — 2019-02-14
- … 4 more at https://npm.io/package/mui-tables/versions

## README

# Overview \| MUI Tables

[![Travis \(.org\)](https://img.shields.io/travis/parkerself22/mui-tables.svg?logo=travis)](https://travis-ci.org/parkerself22/mui-tables) [![npm](https://img.shields.io/npm/v/mui-tables.svg?color=F94048&label=mui-tables&logo=npm) ](https://www.npmjs.com/package/mui-tables) [![codecov](https://codecov.io/gh/parkerself22/mui-table/branch/master/graph/badge.svg)](https://codecov.io/gh/parkerself22/mui-table) [![npm](https://img.shields.io/npm/dw/mui-tables.svg?logo=npm)](https://www.npmjs.com/package/mui-tables)

### [DOCUMENTATION SITE](https://parkerself.gitbook.io/mui-table/)

MUI Tables is a highly-pluggable table library built on top of the fantastic [Material-UI component library](https://github.com/mui-org/material-ui). 

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!**](https://s3.amazonaws.com/mui-table/index.html)

![Example with Summary, Date Toolbar, Filters, ](docs/.gitbook/assets/image%20%2810%29.png)

## Installation

```bash
npm i --save mui-tables
```

#### Peer Dependencies:

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

## **Features**

| **Feature** | Description |
| :--- | :--- |
| [Custom Components](docs/features/custom-components.md) | Multiple options to hook into component rendering, all supplied with the full context of the table |
| [Event Hooks](docs/features/event-hooks.md) | Hook into specific table events such as search and filter changes, row selection, and more |
| Summary Row | No config required summary row with two formats, more on the way. |
| [Automatic Duplicate Handling](docs/features/row-merging-and-duplication.md) | Specify whether duplicate rows should be displayed, merged, or hidden. |
| Built In Date Toolbar | No custom toolbar required, just specify change handlers and date values. |
| Localization | Full control over almost every text label. |
| Typescript Support | Typings included. Never guess what data you're hooks will be passed. |
| Styling | Override styles using MUIThemeProvider. |

## Example Usage

![Intro Example](docs/.gitbook/assets/image%20%287%29.png)

```jsx
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](docs/options/options.md)

## Built With

* [@material-ui](https://material-ui.com) - Component Library
* [material-ui-pickers](https://www.npmjs.com/package/material-ui-pickers) - Date Picker Components

## Contributing

Coming soon...

## Versioning

We use [SemVer](http://semver.org/) for versioning. For the versions available, [see the releases on this repository](https://github.com/parkerself22/mui-tables/releases).

## Authors

* [**Parker Self**](https://github.com/parkerself22) - _Initial work_ 

## License

This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/parkerself22/mui-tables/blob/master/LICENSE) file for details

---
_Source: https://npm.io/package/mui-tables · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
