yadt v0.0.19
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.