mui-virtualized-table

Combination of Material UI visual components with react-virtualized for improved performance and features with a simple API.

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

Features

• Uses windowing for performance (via react-virtualized)
• Freeze rows and/or columns
• Fixed or variable (%) column widths
• Resizable columns

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', 'width', '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 width: (optional) Width of cell cell: (optional) Callback for rendering associated column cell data. Passes the row data for the associated cell.
cellProps	object	func
width	number	✓		Visible width of table. Will scroll horizontally if sum of column widths are greater than defined width
columnWidth	number or func			Static column widths if number, calulated based on columns definitons if not specificed, or can pass in a function to peform own calcuation based on data
height	number		calculted from data.length or pagination.rowsPerPage if defined	Visible height of table. Will scroll vertically if sum of column heights are great than defined height
maxHeight	number		0	Maximum height of table. Useful when using calculated
fitHeightToRows	boolean		false	Always fit the content height to row data. Only useful when using pagination and you want to reduce the height on non-full pages (will move paginator on different length results)
rowHeight	number		48	Height of rows
fixedRowCount	number		0	Number of rows to remain fixed at the top of the viewport (freeze rows). Based on columns definition order
fixedColumnCount	number		0	Number of columns to remain fixed at the left of the viewport (freeze columns). Based on columns definition order
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={(event, { column, rowData, data} ) => alert(rowData[column.name])})
onCellDoubleClick	func			Called with column definition and row data when non-header cell is double clicked on (ex. onCellDoubleClick={(event, { column, rowData, data} ) => alert(rowData[column.name])})
onCellContextMenu	func			Called with column definition when non-header cell is right clicked on (ex. onCellContextMenu={(event, { column }) => alert(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.
orderBy	string			If defined, will show column's header with matching name using TableSortLabel
orderDirection	string		'desc'	The order of the sort direction
resizable	bool			Enable column resizing handles

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 install
$ yarn storybook