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-ui gives 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.