@128technology/mui-virtualized-table 中文文档教程

发布于 4年前 浏览 32 项目主页 更新于 3年前

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

PropertyTypeRequiredDefaultDescription
dataarrayData to render using defined columns
columnsarrayDefines 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
minWidth: (optional) Minimum width of cell
cell: (optional) Callback for rendering associated column cell data. Passes the row data for the associated cell.
cellPropsobjectfunc
widthnumberVisible width of table. Will scroll horizontally if sum of column widths are greater than defined width
columnWidthnumber or funcStatic 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
heightnumbercalculated from data.length or pagination.rowsPerPage if definedVisible height of table. Will scroll vertically if sum of column heights are great than defined height
maxHeightnumber0Maximum height of table. Useful when using calculated
fitHeightToRowsbooleanfalseAlways 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)
rowHeightnumber48Height of rows
fixedRowCountnumber0Number of rows to remain fixed at the top of the viewport (freeze rows). Based on columns definition order
fixedColumnCountnumber0Number of columns to remain fixed at the left of the viewport (freeze columns). Based on columns definition order
includeHeadersboolfalseAdd header row to top of data. Useful to also set fixedRowCount to 1
onHeaderClickfuncCalled with column definition of header clicked on. Useful to set sort data and set orderBy and orderDirection
onCellClickfuncCalled with column definition and row data when non-header cell is clicked on (ex. onCellClick={(event, { column, rowData, data} ) => alert(rowData[column.name])})
onCellDoubleClickfuncCalled with column definition and row data when non-header cell is double clicked on (ex. onCellDoubleClick={(event, { column, rowData, data} ) => alert(rowData[column.name])})
onCellContextMenufuncCalled with column definition when non-header cell is right clicked on (ex. onCellContextMenu={(event, { column }) => alert(column.name)})
paginationobjectIf 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.
orderBystringIf defined, will show column's header with matching name using TableSortLabel
orderDirectionstring'desc'The order of the sort direction
resizableboolEnable 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

PropertyTypeRequiredDefaultDescription
dataarrayData to render using defined columns
columnsarrayDefines 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
minWidth: (optional) Minimum width of cell
cell: (optional) Callback for rendering associated column cell data. Passes the row data for the associated cell.
cellPropsobjectfunc
widthnumberVisible width of table. Will scroll horizontally if sum of column widths are greater than defined width
columnWidthnumber or funcStatic 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
heightnumbercalculated from data.length or pagination.rowsPerPage if definedVisible height of table. Will scroll vertically if sum of column heights are great than defined height
maxHeightnumber0Maximum height of table. Useful when using calculated
fitHeightToRowsbooleanfalseAlways 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)
rowHeightnumber48Height of rows
fixedRowCountnumber0Number of rows to remain fixed at the top of the viewport (freeze rows). Based on columns definition order
fixedColumnCountnumber0Number of columns to remain fixed at the left of the viewport (freeze columns). Based on columns definition order
includeHeadersboolfalseAdd header row to top of data. Useful to also set fixedRowCount to 1
onHeaderClickfuncCalled with column definition of header clicked on. Useful to set sort data and set orderBy and orderDirection
onCellClickfuncCalled with column definition and row data when non-header cell is clicked on (ex. onCellClick={(event, { column, rowData, data} ) => alert(rowData[column.name])})
onCellDoubleClickfuncCalled with column definition and row data when non-header cell is double clicked on (ex. onCellDoubleClick={(event, { column, rowData, data} ) => alert(rowData[column.name])})
onCellContextMenufuncCalled with column definition when non-header cell is right clicked on (ex. onCellContextMenu={(event, { column }) => alert(column.name)})
paginationobjectIf 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.
orderBystringIf defined, will show column's header with matching name using TableSortLabel
orderDirectionstring'desc'The order of the sort direction
resizableboolEnable 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
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文