README.md

mui-virtualized-table

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

For examples of <MuiVirtualizedTable> 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