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 headerheader: (optional) Name to display instead 'name'onHeaderClick: (optional) Callback when header is clicked on (has precendence over onHeaderClick on tablewidth: (optional) Width of cellminWidth: (optional) Minimum width of cellcell: (optional) Callback for rendering associated column cell data. Passes the row data for the associated cell. | | cellProps | object | func | | | Pass initial props to TableCell (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 | | 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 | | calculated 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 storybook