ericpyle/mui-table

Improved Material-UI table

mui-table

Simplified use of Material UI visual components with data and columns props.

For examples of <MuiTable> in action, see demo or view the source

Note: 1.x.x version based on react-virtualized is now available as mui-virtualized-table

Props

Property	Type	Required	Default	Description
data	array	✓		Data to render using defined columns
columns	array	✓		Defines the columns in the table. Column format: {'name', 'header', 'onHeaderClick', 'cell', cellProps } name: Name of header header: (optional) Name to display instead 'name' onHeaderClick: (optional) Callback when header is clicked on (has precendence over onHeaderClick on table cell: (optional) Callback for rendering associated column cell data. Passes the row data for the associated cell.
rowProps	object or func			Pass initial props to TableRow to all rows (header or body)(ex. cellProps={{ padding: 'dense' }}). Specifying same property within the column definition cellProps will override. Can also be a function which is passed column, rowData similiarly to onCellClick
headerRowProps	object or func			Identical to rowProps, but only passed to rows in the TableHead
bodyRowProps	object or func			Identical to rowProps, but only passed to rows in the TableBody
cellProps	object or func			Pass initial props to TableCell to all cells (header or body)(ex. cellProps={{ padding: 'dense' }}). Specifying same property within the column definition cellProps will override. Can also be a function which is passed column, rowData similiarly to onCellClick
headerCellProps	object or func			Identical to cellProps, but only passed to cells in the TableHead
bodyCellProps	object or func			Identical to cellProps, but only passed to cells in the TableBody
includeHeaders	bool		false	Add header row to top of data. Useful to also set fixedRowCount to 1
onHeaderClick	func			Called with column definition of header clicked on. Useful to set sort data and set orderBy and orderDirection
onCellClick	func			Called with column definition and row data when non-header cell is clicked on (ex. onCellClick={(column, data) => alert(data[column.name])})
pagination	object			If defined, will add pagination to bottom of table and pass props to Material-UI's TablePagination component. Must set count, onChangePage, page, and rowsPerPage if defined.
addPlaceholderRows	boolean		false	Will add additional rows to keep page sizes consistent. Useful when using pagination and you want to reduce the height on non-full pages (will move paginator on different length results)
orderBy	string			If defined, will show column's header with matching name using TableSortLabel
orderDirection	string		'desc'	The order of the sort direction

Running Storybook

This project has some storybook stories.

To run storybook, you have to install the story dependencies first:

$ cd stories
$ yarn install
$ cd ..

Then use yarn to run the storybook script:

$ yarn storybook