# Overview | MUI Tables
[](https://travis-ci.org/parkerself22/mui-tables) [ ](https://www.npmjs.com/package/mui-tables) [](https://codecov.io/gh/parkerself22/mui-table)[](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)**!**
## Installation
```bash
npm i --save mui-tables
```
#### Peer Dependencies:
{% code title="" %}
```javascript
{
"@material-ui/core": ">= 3.9.0",
"@material-ui/icons": ">= 3.0.0",
"react": ">= 16.8.1"
}
```
{% endcode %}
## **Features**
| **Feature** | Description |
| ------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- |
| [Custom Components](https://parkerself.gitbook.io/mui-table/features/custom-components) | Multiple options to hook into component rendering, all supplied with the full context of the table |
| [Event Hooks](https://parkerself.gitbook.io/mui-table/features/event-hooks) | 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](https://parkerself.gitbook.io/mui-table/features/row-merging-and-duplication) | 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
{% code title="" %}
```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 = () => (
);
```
{% endcode %}
## Props / Options
[See Here](https://parkerself.gitbook.io/mui-table/options/options)
## 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
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://parkerself.gitbook.io/mui-table/master.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.