@128technology/mui-virtualized-table 中文文档教程
mui-virtualized-table
Material UI 可视化组件与 react-virtualized 的组合,以通过简单的 API 改进性能和功能。
有关
的示例,请参阅演示 或查看 < a href="https://github.com/techniq/mui-virtualized-table/tree/master/stories">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 | ||
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
这个项目有一些 storybook 故事。
要运行 storybook,您必须先安装 story 依赖项:
$ cd stories
$ yarn install
$ cd ..
然后使用 yarn 运行 storybook
脚本:
$ yarn storybook
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 | ||
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