react-dt
Installation
yarn add @material-ui/core react-dt
Usage
Let's say that you have a todo list defined as:
const todos = [
{ title: 'Lorem ipsum', done: false },
{ title: 'Dolor sit', done: true },
{ title: 'Amet consectetur', done: false },
{ title: 'Adipiscing elit', done: true }
];react-dt (short for data table) allows you to show your data in a table based on material-ui.
import Table from 'react-dt';
const cols = [
{ prop: 'title', label: 'Title' },
{
prop: 'done',
label: 'Status',
render: prop => (prop ? 'Completed' : 'Pending') // render(prop, row, col, rowData)
}
];
<Table cols={cols} rows={todos} />;Can I access the props
material-uigives me?
<Table
cols={cols}
rows={todos}
+ props={{ /* .. */ }}
+ headProps={{ /* .. */ }}
+ headCellProps={{ /* .. */ }}
+ bodyProps={{ /* .. */ }}
+ rowProps={{ /* .. */ }}
+ cellProps={{ /* .. */ }}
/>Does it work in horizontal mode?
<Table
cols={cols}
- rows={todos}
+ rows={[todos[0]]} // limit to one todo, works for multiple records too
+ horizontal
/>Hmm, inline edits?
const cols = [
{
prop: 'done',
label: 'Status',
render: prop => (prop ? 'Completed' : 'Pending'),
+ editor: (value, row, col) => ( // editor(value, row, col, rowData)
+ <Checkbox
+ checked={value}
+ onChange={(e, checked) => update(checked, row, col)}
+ />
+ )
}
];
<Table
cols={cols}
rows={todos}
+ selectedRow={0} // first row = first record
+ selectedCol={2} // third column = `done` prop
/>Examples
Available here.
