# yadt

> Yet another Material UI DataTable

Latest version **0.0.19** (published 2018-06-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install yadt
pnpm add yadt
yarn add yadt
bun add yadt
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.19 |
| Published | 2018-06-02 |
| First published | 2018-05-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 48.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Lee Machin |
| Maintainers | mrlee |

## Links

- npm: https://www.npmjs.com/package/yadt
- Repository: https://github.com/leemachin/yadt
- npm.io page: https://npm.io/package/yadt

## Dependencies (2)

- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^1.0.0
- [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^1.0.0

## Recent versions

- 0.0.19 (latest) — 2018-06-02
- 0.0.17 — 2018-05-27
- 0.0.16 — 2018-05-27
- 0.0.15 — 2018-05-26
- 0.0.14 — 2018-05-26
- 0.0.13 — 2018-05-26
- 0.0.11 — 2018-05-26
- 0.0.10 — 2018-05-26
- 0.0.9 — 2018-05-26
- 0.0.8 — 2018-05-26
- 0.0.7 — 2018-05-26
- 0.0.6 — 2018-05-26
- 0.0.5 — 2018-05-26
- 0.0.4 — 2018-05-26
- 0.0.3 — 2018-05-26
- … 1 more at https://npm.io/package/yadt/versions

## README

# yadt

Yet Another Material UI DataTable (not ready for use) for React

![npm](https://img.shields.io/npm/v/yadt.svg?style=flat-square) ![Travis](https://img.shields.io/travis/leemachin/yadt.svg?style=flat-square)

---

## Installation

For npm lovers:

```console
npm install yadt
```

For yarn lovers:

```console
yarn add yadt
```

---

## Usage

YADT will render any data you throw at it, but it requires you to convert your data into a particular structure. If you use Typescript or Flow, this may make some sense.

```typescript
type Column = {
  name: string
}

type Row = {
  id: string | number
  parentId?: Row['id'];
  columns: Cell[]
}

type Cell = {
  name: Column['name'];
  value: any
}

type Columns: Column[]
type Rows: Row[]
```

### Contrived example

```javascript
import DataTable from 'yadt'

const columns = [
  { name: 'Name' },
  { name: 'Number of Thingies', kind: 'numeric' },
  { name: 'Money in Bitcoin Wallet', kind: 'numeric' }
]

const rows = [
  {
    id: 123,
    columns: [
      { name: 'Name', value: 'Hector Beefcliff' },
      { name: 'Number of Thingies', value: 34789 },
      { name: 'Money in Bitcoin Wallet', value: 0 }
    ]
  },
    {
    id: 456,
    columns: [
      { name: 'Name', value: 'Noel Edmonds' },
      { name: 'Number of Thingies', value: 100 },
    ]
  }
]

<DataTable
  columns={columns}
  rows={rows}
/>
```

## Intended Behaviours

### Missing fields

YADT will render a value for each column whenever one is found, and otherwise an empty cell. This means you don't
have to fill in the blanks in your dataset before passing it in to the component.

### Expandable groups

If `expandable` is set on the data table component and you set a previous row `id` as a later row's `parentId`, YADT will hide all of those rows and instead show a toggle button on the parent row to make them appear. These child rows will have a slight hint to show that they belong to a group, and any other row can be a parent of other expandable ones if you want multiple levels of nesting.

### Selectable rows

If `selectable` is set on the data table component, every row will contain a checkbox in order to facilitate bulk operations on the dataset. If `expandable` is also set and the row is expanded, the row checkbox will function as a select all option. If the row isn't expanded, it will select only the row.

### Sorting / Pagination

Nothing special there.

### Resizing

Columns by default will adapt to the minimum possible width allowed to prevent truncation and unnecessary space wastage on wide tables. This behaviour can either be disabled so you can have your own control over how wide columns are, or you can set `resizable` to allow the user to adjust the widths as you would in a spreadsheet.

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