yadt

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

Installation

For npm lovers:

npm install yadt

For yarn lovers:

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.

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

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.