# react-mui-data-table

> Eash to use DataTable library using ReactJS & MaterialUI

Latest version **1.1.8** (published 2020-12-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-mui-data-table
pnpm add react-mui-data-table
yarn add react-mui-data-table
bun add react-mui-data-table
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.8 |
| Published | 2020-12-21 |
| First published | 2020-12-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 5 |
| Unpacked size | 187.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | mansoo.app |
| Keywords | reactjs, materialui, javascript, datatable |

## Links

- npm: https://www.npmjs.com/package/react-mui-data-table
- Repository: https://github.com/cheonsoo/react-mui-data-table
- Homepage: https://github.com/cheonsoo/react-mui-data-table#readme
- Issues: https://github.com/cheonsoo/react-mui-data-table/issues
- npm.io page: https://npm.io/package/react-mui-data-table

## Dependencies (5)

- [lodash](https://npm.io/package/lodash.md) ^4.17.20
- [node-sass](https://npm.io/package/node-sass.md) ^5.0.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^4.11.2
- [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^4.11.2

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.1.8 (latest) — 2020-12-21
- 1.1.6 — 2020-12-15
- 1.1.5 — 2020-12-15
- 1.1.4 — 2020-12-15
- 1.1.3 — 2020-12-15
- 1.1.2 — 2020-12-15
- 1.1.0 — 2020-12-15
- 1.0.1 — 2020-12-13
- 1.0.0 — 2020-12-12

## README

# react-mui-data-table

> Eash to use DataTable library using ReactJS & MaterialUI
Support row editing (Textbox & Combobox)

[![NPM](https://img.shields.io/npm/v/mui-data-table.svg)](https://www.npmjs.com/package/mui-data-table) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

![mui-data-table](https://user-images.githubusercontent.com/4275074/102222192-7342d900-3f26-11eb-8f0b-908b0dfc7aa4.png)
![mui-data-table](https://user-images.githubusercontent.com/4275074/102190733-bc316800-3efb-11eb-909a-859360c20fd6.png)
![mui-data-table](https://user-images.githubusercontent.com/4275074/102190745-c05d8580-3efb-11eb-9c3c-77026c14e6b5.png)

## Install

```bash
npm install --save react-mui-data-table
```

## Usage

```jsx
import React from 'react';
import { MUITable } from 'mui-data-table';

const customStyle = {
  width: '98%',
  '& .rmdt-table': {
    width: '100%',
    height: '100%',
    boxShadow: 'none',
    '& .MuiTable-root': {}
  }
};

const COLUMNS = [
  {
    _id: '_id',
    label: 'ID',
    display: false
  },
  {
    _id: 'col1',
    label: 'COL1',
    width: 100,
    format: function (val) {
      return (
        <div
          className='rmdt-cell-inner'
          style={{ fontWeight: 'bold', color: '#2478FF' }}
        >
          {val}
        </div>
      );
    }
  },
  {
    _id: 'col2',
    label: 'COL2',
    width: 100,
    editable: true,
    editType: 'combobox',
    items: [
      { key: 'y', value: 'Y' },
      { key: 'y', value: 'N' }
    ]
  },
  {
    _id: 'col3',
    label: 'COL3',
    width: 100,
    editable: true
  },
  {
    _id: 'col4',
    label: 'COL4',
    width: 150,
    subHeader: [
      {
        _id: 'col4_1',
        label: 'COL4_1',
        format: (val) => `${numberFormat(val)}$`
      },
      {
        _id: 'col4_2',
        label: 'COL4_2'
      },
      {
        _id: 'col4_3',
        label: 'COL4_3'
      }
    ]
  },
  {
    _id: 'col5',
    label: 'COL5',
    width: 100,
    format: (val) => numberFormat(val)
  }
];

const numberFormat = (val) => {
  if (this === 0) return 0;
  const reg = /(^[+-]?\d+)(\d{3})/;
  val = val.toString();
  while (reg.test(val)) val = val.replace(reg, `$1,$2`);
  return val;
};

const DataTable = () => {
  const getItems = () => {
    const items = [];
    for (let i = 0; i < 25; i++) {
      let o = {
        _id: `ID ${i}`,
        col1: `COL1 ${i}`,
        col2: `COL2 ${i}`,
        col3: `COL3 ${i}`,
        col4: `COL4 ${i}`,
        col4_1: parseInt(Math.random() * 10000),
        col4_2: `COL4_2 ${i}`,
        col4_3: `COL4_3 ${i}`,
        col5: parseInt(Math.random() * 10000000)
      };
      items.push(o);
    }
    return items;
  };

  return (
    <div
      className='react-mui-data-table-container'
      style={{ width: '1200px', height: '1000px', padding: '20px' }}
    >
      <MUITable
        className='custom-style-rmdt' // You can import css file and force it to be applied to the css
        customStyle={customStyle} // This will be added under the rmdt class
        items={getItems()}
        columns={COLUMNS}
        checkBox={true} // {true || false}
        count={true} // {true || false}
        pagination={true} // {true || false}
        border={true} // {true || false}
        labelRowsPerPage={({ rowsPerPage }) =>
          `Rows in one page (${rowsPerPage})`
        }
        labelItemCount={(items, rowsPerPage, page) =>
          `Total: ${items.length}, ${rowsPerPage * page + 1} ~ ${
            rowsPerPage * page + rowsPerPage
          }`
        }
        labelDisplayedRows={({ page, rowsPerPage }) =>
          `${page}, ${rowsPerPage}`
        }
        onCheck={(selected) => console.log(selected)}
        onCheckAll={(selected) => console.log(selected)}
        handleData={(row) => console.log(row)}
      />
    </div>
  );
};

export default DataTable;
```

## Version History
Version 1.1.8
New Features
- Checkbox Single Selection

Version 1.1.7
Bug Fix
- When using format with ComboBox

Version 1.1.5
New Features
- React components format in columns.js

Version 1.1.4
New Features
- customStyle={} // Will be added under 'rmdt class'. Write css in material ui style format.

Version 1.1.2
New Features
- border={true || false}

Version 1.1.0
New Features
- labelRowsPerPage
- labelItemCount
- labelDisplayedRows

## License

MIT © [](https://github.com/)

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