尧图网站建设 
Material UI Table 组件实战从基础表格到分页、排序、虚拟滚动与无障碍实现【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui本篇技术指南基于 Material UI 官方 Table 组件文档及其配套源码系统讲解 React 表格组件家族Table、TableHead、TableBody、TableCell、TablePagination、TableSortLabel等的组成与使用方式覆盖基础表格、稠密表格、排序与多选、自定义分页、吸顶表头、列分组、可折叠行、跨行跨列、虚拟滚动和无障碍访问等全部核心场景并结合开源仓库源码说明上下文继承、aria-sort映射等底层机制读完后你能独立构建从静态数据展示到高性能大数据表格的完整方案。一、Table 组件家族总览Material UI 中的 Table 是一组围绕原生table语义封装的组件集合官方文档table.md将其设计目标概括为以易于扫视的方式展示数据帮助用户发现模式与洞察表格可以嵌入卡片等主要内容中并可包含配套可视化、导航以及查询与操作数据的工具。各组件及其默认渲染的 HTML 元素如下组件默认渲染元素职责TableContainerdiv外层包装为Table提供横向滚动能力Tabletable表格主元素TableHeadthead表头行容器TableBodytbody表体行容器TableRowtr行可用于TableHead/TableBody/TableFooterTableCellth或td单元格在TableHead内默认渲染th在TableBody内默认渲染tdTableFootertfoot可选的表尾行容器TablePagination基于TableCell分页控件TableSortLabel行内控件列头排序控件支持升序/降序切换对应的源码目录结构为 packages/mui-material/src/TableTable 核心实现、TableCell、TablePagination、TableSortLabel等平级目录全部由mui/material包导出。二、基础表格与上下文继承机制2.1 基础示例仓库中最简洁的完整示例见 BasicTable.tsximport Table from mui/material/Table; import TableBody from mui/material/TableBody; import TableCell from mui/material/TableCell; import TableContainer from mui/material/TableContainer; import TableHead from mui/material/TableHead; import TableRow from mui/material/TableRow; import Paper from mui/material/Paper; function createData(name, calories, fat, carbs, protein) { return { name, calories, fat, carbs, protein }; } const rows [ createData(Frozen yoghurt, 159, 6.0, 24, 4.0), createData(Ice cream sandwich, 237, 9.0, 37, 4.3), createData(Eclair, 262, 16.0, 24, 6.0), createData(Cupcake, 305, 3.7, 67, 4.3), createData(Gingerbread, 356, 16.0, 49, 3.9), ]; export default function BasicTable() { return ( TableContainer component{Paper} Table sx{{ minWidth: 650 }} aria-labelsimple table TableHead TableRow TableCellDessert (100g serving)/TableCell TableCell alignrightCalories/TableCell TableCell alignrightFatnbsp;(g)/TableCell TableCell alignrightCarbsnbsp;(g)/TableCell TableCell alignrightProteinnbsp;(g)/TableCell /TableRow /TableHead TableBody {rows.map((row) ( TableRow key{row.name} sx{{ :last-child td, :last-child th: { border: 0 } }} TableCell componentth scoperow {row.name} /TableCell TableCell alignright{row.calories}/TableCell TableCell alignright{row.fat}/TableCell TableCell alignright{row.carbs}/TableCell TableCell alignright{row.protein}/TableCell /TableRow ))} /TableBody /Table /TableContainer ); }几个关键细节TableContainer component{Paper}表示容器根节点渲染为Paper从而获得卡片式外观与横向滚动支持sx{{ minWidth: 650 }}配合容器形成横向滚动aria-labelsimple table为无caption的表格提供可访问名称首列componentth scoperow将数据列标记为行头这是官方示例中的无障碍约定详见第七节。2.2 源码解析Table 如何把 padding/size 下发给单元格Table的核心实现在 Table.js。其默认 props 为Prop默认值说明componenttable根节点元素若替换为其他组件会自动补roletablepaddingnormal取值normal/checkbox/none被TableCell继承sizemedium取值medium/small即稠密表格被TableCell继承stickyHeaderfalse表头吸顶开关const table React.useMemo( () ({ padding, size, stickyHeader }), [padding, size, stickyHeader], ); return ( TableContext.Provider value{table} TableRoot as{component} role{component defaultComponent ? null : table} ... / /TableContext.Provider );可以看到Table通过 TableContext 将{ padding, size, stickyHeader }三元组下发给整棵子树并且当component不是table时自动补充roletable以保持 ARIA 语义。同时stickyHeader开启时根节点样式从border-collapse: collapse切换为separate见 Table.js L43-L50这是position: sticky表头单元格能正确生效的前提。2.3 源码解析TableCell 的 th/td 自动切换TableCell的实现见 TableCell.js它同时消费两级上下文TableContext来自Table的padding/size/stickyHeaderTablelvl2Context来自TableHead/TableBody/TableFooter的varianthead/body/footer。核心逻辑const isHeadCell tablelvl2 tablelvl2.variant head; let component; if (componentProp) { component componentProp; } else { component isHeadCell ? th : td; } let scope scopeProp; // scope is not a valid attribute for td/ elements. if (component td) { scope undefined; } else if (!scope isHeadCell) { scope col; }由此可以确认三件事TableCell放在TableHead内自动渲染th放在TableBody内自动渲染td与官方文档描述一致表头单元格在未显式指定scope时自动补scopecol而td上scope不是合法属性HTML 规范会被主动移除padding和size若未在单元格上显式指定会回落到Table的上下文值——这解释了为什么稠密表格只需在Table上设置一次sizesmall即可全局生效。此外TableCell还负责无障碍排序语义传入sortDirectionasc | desc时自动映射为aria-sortascending | descendingTableCell.js L224-L227供TableSortLabel场景直接使用。单元格样式方面sizesmall时内边距从 16px 收窄为6px 16pxpaddingcheckbox时列宽固定 48px 防止复选框列被撑开TableCell.js L92-L115。三、稠密表格与大数据场景的选型3.1 Dense table稠密表格只需将size设为small即可通过上文所述的上下文继承机制让所有单元格收窄内边距参考示例 DenseTable.tsxTable sizesmall {/* 其余结构与基础表格一致 */} /Table3.2 何时改用 DataGrid官方文档明确提示Table与原生table元素近似映射这一约束使得构建功能丰富的数据表格筛选、批量编辑、树形结构等较为吃力而面向大量表格数据场景的DataGrid组件mui/x-data-grid以更有约束力的结构换取更强大的能力。仓库中的演示 DataTable.tsx 即为对照示例import { DataGrid, GridCell, GridColDef } from mui/x-data-grid; const columns: GridColDef[] [ { field: id, headerName: ID, width: 70 }, { field: firstName, headerName: First name, width: 130 }, // ... ]; const paginationModel { page: 0, pageSize: 5 }; function renderRowHeaderCell(props: GridCellProps) { return ( GridCell {...props} role{props.column.field fullName ? rowheader : gridcell} / ); } export default function DataTable() { return ( Paper sx{{ height: 400, width: 100% }} DataGrid rows{rows} columns{columns} initialState{{ pagination: { paginationModel } }} pageSizeOptions{[5, 10]} checkboxSelection slots{{ cell: renderRowHeaderCell }} sx{{ border: 0 }} / /Paper ); }选型结论结构化、展示型、行数可控的表格用Table家族需要复杂数据处理能力排序、选择、分页模型、自定义 valueGetter 等时用 DataGrid。注意 DataGrid 使用 ARIA role 而非原生表格元素其行头需通过rolerowheader自定义示例中的renderRowHeaderCell即演示了这一点。四、排序与选择EnhancedTable官方 Sorting selecting 示例EnhancedTable.tsx演示了一个完整的功能表格Checkbox行选择、自定义Toolbar、TableSortLabel列头排序以及TablePagination分页。其中有两条官方文档强调的布局要点表格固定宽度以演示横向滚动为Table设置固定minWidth后内容超宽时由TableContainer提供滚动。分页控件必须放在表格之外为防止分页控件随横向滚动被卷走TablePagination被放置在Table之外另一示例 CustomPaginationActionsTable.tsx 则展示了把分页放在TableFooter内部的写法。TableSortLabel的典型用法列头点击切换排序方向order/onSortClick受控TableCell sortDirection{order_by name ? order : false} paddingnone TableSortLabel active{order_by name} direction{order_by name ? order : asc} onClick{createSortHandler(name)} Name /TableSortLabel /TableCell其中sortDirection由TableCell源码自动转译为aria-sort屏幕阅读器可正确播报当前列的排序状态无需手动维护 ARIA 属性。五、TablePagination 分页控件深入TablePagination的完整实现见 TablePagination.js它是一个基于TableCell的组件官方注释建议放在TableFooter内使用。关键参数结合源码逐项核实Prop默认值说明count必填整数总行数传-1表示服务端分页、总行数未知此时显示文案变为 more than N 且页码范围校验自动跳过page必填整数当前页从 0 开始开发模式下page超出0 ~ ceil(count/rowsPerPage)-1会抛出MUI: The page prop of a TablePagination is out of range警告rowsPerPage必填整数每页行数-1表示显示全部行onPageChange必填翻页回调(event, page) voidonRowsPerPageChange—每页行数变更回调rowsPerPageOptions[10, 25, 50, 100]每页行数下拉选项见下方两种形式选项少于 2 个时下拉整体不渲染ActionsComponentTablePaginationActions翻页按钮区组件可完全替换为自定义实现showFirstButton/showLastButtonfalse是否显示首页/末页按钮colSpan1000当根节点为TableCell/td时使分页行横跨整张表格labelDisplayedRows(v) \${from}–${to} of ${count}| 自定义显示行数文案接收{ from, to, count, page }labelRowsPerPageRows per page:每页行数标签支持国际化替换getItemAriaLabel(type) \Go to ${type} page翻页按钮的无障碍名称slots/slotProps{}针对root、toolbar、spacer、select、menuItem、displayedRows、actions等内部槽位的组件与 props 定制源码中的两处实现细节值得注意TablePagination.js L189-L202let colSpan; if (component TableCell || component td) { colSpan colSpanProp || 1000; // col-span over everything }放在表格内时分页行自动横跨全部列视觉上是整行一条分隔带count -1时getLabelDisplayedRowsTo返回(page 1) * rowsPerPage文案呈现 more than N这正是服务端分页场景的官方支持方式。5.1 自定义 rowsPerPageOptionsrowsPerPageOptions接受两种数组元素形式table.md 原文即给出这两种写法源码 TablePagination.js L294-L302 中rowsPerPageOption.label ? ... : rowsPerPageOption的三元表达式与之对应// 形式一纯数字数组数字同时作为选项的 label 与 value TablePagination rowsPerPageOptions{[10, 50]} / // 形式二对象数组value 为取值、label 为展示文本 // 适合 All 这类非数字标签value-1 即显示全部行 TablePagination rowsPerPageOptions{[10, 50, { value: -1, label: All }]} /5.2 自定义分页按钮ActionsComponent通过ActionsComponent可整体替换翻页按钮区。官方示例 CustomPaginationActionsTable.tsx 中实现了TablePaginationActions组件将TablePagination放入TableFooter内部并自定义按钮样式该组件接收count、page、rowsPerPage、onPageChange、showFirstButton、showLastButton、getItemAriaLabel、disabled等 props见 TablePagination.js L314-L326因此自定义实现与内置实现在接口上完全兼容可平滑替换。六、吸顶表头、列分组、折叠行与跨行列6.1 Sticky header吸顶表头StickyHeadTable示例StickyHeadTable.tsx的核心结构TableContainer sx{{ maxHeight: 440 }} Table stickyHeader aria-labelsticky table ... /Table /TableContainer原理源码证据Table在stickyHeader下将根节点样式切为border-collapse: separateTable.js L43-L50否则position: sticky在collapse边框模型下在多数浏览器中不可靠TableCell依据variant head table.stickyHeaderTableCell.js L218为表头单元格叠加position: sticky; top: 0; z-index: 2及背景色TableCell.js L158-L165背景色用于遮挡滚动到表头下方的内容。因此stickyHeader必须与一个有高度上限的滚动容器TableContainer sx{{ maxHeight }}或页面级滚动配合使用。6.2 Column grouping列分组通过在一个TableHead中渲染多行TableRow实现多层列头配合colSpan分组上层标题ColumnGroupingTable.tsxTableHead TableRow TableCell aligncenter colSpan{2} sx{{ py: 1 }} Breakfast /TableCell TableCell aligncenter colSpan{2} sx{{ py: 1 }} Dinner /TableCell /TableRow TableRow TableCell sx{{ borderColor: divider }}Calories/TableCell TableCell sx{{ borderColor: divider }}Carbs (g)/TableCell TableCell sx{{ borderColor: divider }}Calories/TableCell TableCell sx{{ borderColor: divider }}Carbs (g)/TableCell /TableRow /TableHead6.3 Collapsible table可折叠行CollapsibleTable示例CollapsibleTable.tsx使用Collapse组件实现展开更多信息的行在隐藏列中放一个IconButton切换open状态Collapse in{open}控制一个占满整行colSpan的子行高度动画展开/收起。要点是展开行同样是一个TableRow 单格TableCell colSpan{5}内部再嵌套内容块。6.4 Spanning table跨行跨列SpanningTable示例SpanningTable.tsx演示原生rowSpan/colSpan在TableRow/TableCell上直接可用无需额外 API。6.5 Virtualized table虚拟滚动ReactVirtualizedTable示例ReactVirtualizedTable.tsx展示如何将 react-virtuoso 与Table组件结合官方示例渲染 200 行并可轻松扩展到更大规模通过只渲染可视区域内的行来解决大数据量下的渲染性能问题。适用前提是数据行高度固定或变化可控且数据为客户端内存中的数组若行数巨大且需要服务端加载优先考虑 DataGrid 或服务端分页count{-1}。七、无障碍Accessibility官方文档引用了 WAI 表格教程作为参考依据并给出两条关键实践。7.1 行头与列头Row and column headers表头单元格用于标识每行/每列的数据屏幕阅读器会利用这种关联在导航表格时提供上下文。TableCell在TableHead内自动渲染thscopecol在TableBody内自动渲染td当某个表体单元格承载了该行标识信息时应显式将其渲染为行头TableRow TableCell componentth scoperow {row.name} /TableCell TableCell{row.calories}/TableCell /TableRow官方建议行头应选择有语义的值如人名、产品名而非任意索引一行中可以有多个行头单元格例如同时存在名和姓两列时。这与第二节源码中显式component优先于上下文推导的逻辑TableCell.jsL193-L198完全一致。对于 DataGrid因其使用 ARIA role 而非原生表格元素行头需通过自定义 cell 渲染rolerowheader参见第三节renderRowHeaderCell示例。7.2 Captioncaption相当于表格的标题多数屏幕阅读器会播报 caption 内容帮助用户定位表格、理解其主题并决定是否阅读。AccessibleTable示例AccessibleTable.tsx即为演示。样式上Table已内置caption的排版body2字号、次要文字色、底部对齐见 Table.js L36-L42Table sx{{ minWidth: 650 }} captionList of materials/caption ... /Table注意基础示例BasicTable未用 caption因此通过aria-label提供等价的可访问名称两者取其一即可保证屏幕阅读器能识别表格。八、主题定制与类名官方 CustomizedTables 示例CustomizedTables.tsx演示了通过sx与主题components覆盖修改表格边框、圆角、单元格背景等外观可参考定制指南页面了解components.MuiTable/MuiTableCell等 styleOverrides 机制各组件的 class key如MuiTable-root、MuiTableCell-stickyHeader、MuiTableCell-paddingCheckbox、MuiTablePagination-actions等由tableClasses.ts/tableCellClasses.ts/tablePaginationClasses.ts生成可用于精准 CSS 选择。九、小结场景推荐方案简单静态数据展示TableContainerTable 头/体结构aria-label或caption提供名称密集信息Table sizesmall上下文自动下发至所有单元格排序/多选/分页TableSortLabelaria-sort自动TablePagination放表格外防横向滚动或放入TableFooter服务端分页count{-1}rowsPerPageOptions含{ value: -1, label: All }长表格stickyHeader 限高滚动容器复杂数据表编辑、树、分组迁移到mui/x-data-grid的 DataGrid客户端超大数组react-virtuoso 虚拟滚动示例所有示例源码均可在 docs/data/material/components/table/ 目录按BasicTable.tsx、DenseTable.tsx、EnhancedTable.tsx、StickyHeadTable.tsx、ColumnGroupingTable.tsx、CollapsibleTable.tsx、SpanningTable.tsx、ReactVirtualizedTable.tsx、CustomPaginationActionsTable.tsx、CustomizedTables.tsx、AccessibleTable.tsx查看组件实现集中在 packages/mui-material/src/Table/、TableCell/、TablePagination/三个目录便于按本文结论对照阅读。【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Material UI Table 组件实战：从基础表格到分页、排序、虚拟滚动与无障碍实现
Material UI Table 组件实战从基础表格到分页、排序、虚拟滚动与无障碍实现【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui本篇技术指南基于 Material UI 官方 Table 组件文档及其配套源码系统讲解 React 表格组件家族Table、TableHead、TableBody、TableCell、TablePagination、TableSortLabel等的组成与使用方式覆盖基础表格、稠密表格、排序与多选、自定义分页、吸顶表头、列分组、可折叠行、跨行跨列、虚拟滚动和无障碍访问等全部核心场景并结合开源仓库源码说明上下文继承、aria-sort映射等底层机制读完后你能独立构建从静态数据展示到高性能大数据表格的完整方案。一、Table 组件家族总览Material UI 中的 Table 是一组围绕原生table语义封装的组件集合官方文档table.md将其设计目标概括为以易于扫视的方式展示数据帮助用户发现模式与洞察表格可以嵌入卡片等主要内容中并可包含配套可视化、导航以及查询与操作数据的工具。各组件及其默认渲染的 HTML 元素如下组件默认渲染元素职责TableContainerdiv外层包装为Table提供横向滚动能力Tabletable表格主元素TableHeadthead表头行容器TableBodytbody表体行容器TableRowtr行可用于TableHead/TableBody/TableFooterTableCellth或td单元格在TableHead内默认渲染th在TableBody内默认渲染tdTableFootertfoot可选的表尾行容器TablePagination基于TableCell分页控件TableSortLabel行内控件列头排序控件支持升序/降序切换对应的源码目录结构为 packages/mui-material/src/TableTable 核心实现、TableCell、TablePagination、TableSortLabel等平级目录全部由mui/material包导出。二、基础表格与上下文继承机制2.1 基础示例仓库中最简洁的完整示例见 BasicTable.tsximport Table from mui/material/Table; import TableBody from mui/material/TableBody; import TableCell from mui/material/TableCell; import TableContainer from mui/material/TableContainer; import TableHead from mui/material/TableHead; import TableRow from mui/material/TableRow; import Paper from mui/material/Paper; function createData(name, calories, fat, carbs, protein) { return { name, calories, fat, carbs, protein }; } const rows [ createData(Frozen yoghurt, 159, 6.0, 24, 4.0), createData(Ice cream sandwich, 237, 9.0, 37, 4.3), createData(Eclair, 262, 16.0, 24, 6.0), createData(Cupcake, 305, 3.7, 67, 4.3), createData(Gingerbread, 356, 16.0, 49, 3.9), ]; export default function BasicTable() { return ( TableContainer component{Paper} Table sx{{ minWidth: 650 }} aria-labelsimple table TableHead TableRow TableCellDessert (100g serving)/TableCell TableCell alignrightCalories/TableCell TableCell alignrightFatnbsp;(g)/TableCell TableCell alignrightCarbsnbsp;(g)/TableCell TableCell alignrightProteinnbsp;(g)/TableCell /TableRow /TableHead TableBody {rows.map((row) ( TableRow key{row.name} sx{{ :last-child td, :last-child th: { border: 0 } }} TableCell componentth scoperow {row.name} /TableCell TableCell alignright{row.calories}/TableCell TableCell alignright{row.fat}/TableCell TableCell alignright{row.carbs}/TableCell TableCell alignright{row.protein}/TableCell /TableRow ))} /TableBody /Table /TableContainer ); }几个关键细节TableContainer component{Paper}表示容器根节点渲染为Paper从而获得卡片式外观与横向滚动支持sx{{ minWidth: 650 }}配合容器形成横向滚动aria-labelsimple table为无caption的表格提供可访问名称首列componentth scoperow将数据列标记为行头这是官方示例中的无障碍约定详见第七节。2.2 源码解析Table 如何把 padding/size 下发给单元格Table的核心实现在 Table.js。其默认 props 为Prop默认值说明componenttable根节点元素若替换为其他组件会自动补roletablepaddingnormal取值normal/checkbox/none被TableCell继承sizemedium取值medium/small即稠密表格被TableCell继承stickyHeaderfalse表头吸顶开关const table React.useMemo( () ({ padding, size, stickyHeader }), [padding, size, stickyHeader], ); return ( TableContext.Provider value{table} TableRoot as{component} role{component defaultComponent ? null : table} ... / /TableContext.Provider );可以看到Table通过 TableContext 将{ padding, size, stickyHeader }三元组下发给整棵子树并且当component不是table时自动补充roletable以保持 ARIA 语义。同时stickyHeader开启时根节点样式从border-collapse: collapse切换为separate见 Table.js L43-L50这是position: sticky表头单元格能正确生效的前提。2.3 源码解析TableCell 的 th/td 自动切换TableCell的实现见 TableCell.js它同时消费两级上下文TableContext来自Table的padding/size/stickyHeaderTablelvl2Context来自TableHead/TableBody/TableFooter的varianthead/body/footer。核心逻辑const isHeadCell tablelvl2 tablelvl2.variant head; let component; if (componentProp) { component componentProp; } else { component isHeadCell ? th : td; } let scope scopeProp; // scope is not a valid attribute for td/ elements. if (component td) { scope undefined; } else if (!scope isHeadCell) { scope col; }由此可以确认三件事TableCell放在TableHead内自动渲染th放在TableBody内自动渲染td与官方文档描述一致表头单元格在未显式指定scope时自动补scopecol而td上scope不是合法属性HTML 规范会被主动移除padding和size若未在单元格上显式指定会回落到Table的上下文值——这解释了为什么稠密表格只需在Table上设置一次sizesmall即可全局生效。此外TableCell还负责无障碍排序语义传入sortDirectionasc | desc时自动映射为aria-sortascending | descendingTableCell.js L224-L227供TableSortLabel场景直接使用。单元格样式方面sizesmall时内边距从 16px 收窄为6px 16pxpaddingcheckbox时列宽固定 48px 防止复选框列被撑开TableCell.js L92-L115。三、稠密表格与大数据场景的选型3.1 Dense table稠密表格只需将size设为small即可通过上文所述的上下文继承机制让所有单元格收窄内边距参考示例 DenseTable.tsxTable sizesmall {/* 其余结构与基础表格一致 */} /Table3.2 何时改用 DataGrid官方文档明确提示Table与原生table元素近似映射这一约束使得构建功能丰富的数据表格筛选、批量编辑、树形结构等较为吃力而面向大量表格数据场景的DataGrid组件mui/x-data-grid以更有约束力的结构换取更强大的能力。仓库中的演示 DataTable.tsx 即为对照示例import { DataGrid, GridCell, GridColDef } from mui/x-data-grid; const columns: GridColDef[] [ { field: id, headerName: ID, width: 70 }, { field: firstName, headerName: First name, width: 130 }, // ... ]; const paginationModel { page: 0, pageSize: 5 }; function renderRowHeaderCell(props: GridCellProps) { return ( GridCell {...props} role{props.column.field fullName ? rowheader : gridcell} / ); } export default function DataTable() { return ( Paper sx{{ height: 400, width: 100% }} DataGrid rows{rows} columns{columns} initialState{{ pagination: { paginationModel } }} pageSizeOptions{[5, 10]} checkboxSelection slots{{ cell: renderRowHeaderCell }} sx{{ border: 0 }} / /Paper ); }选型结论结构化、展示型、行数可控的表格用Table家族需要复杂数据处理能力排序、选择、分页模型、自定义 valueGetter 等时用 DataGrid。注意 DataGrid 使用 ARIA role 而非原生表格元素其行头需通过rolerowheader自定义示例中的renderRowHeaderCell即演示了这一点。四、排序与选择EnhancedTable官方 Sorting selecting 示例EnhancedTable.tsx演示了一个完整的功能表格Checkbox行选择、自定义Toolbar、TableSortLabel列头排序以及TablePagination分页。其中有两条官方文档强调的布局要点表格固定宽度以演示横向滚动为Table设置固定minWidth后内容超宽时由TableContainer提供滚动。分页控件必须放在表格之外为防止分页控件随横向滚动被卷走TablePagination被放置在Table之外另一示例 CustomPaginationActionsTable.tsx 则展示了把分页放在TableFooter内部的写法。TableSortLabel的典型用法列头点击切换排序方向order/onSortClick受控TableCell sortDirection{order_by name ? order : false} paddingnone TableSortLabel active{order_by name} direction{order_by name ? order : asc} onClick{createSortHandler(name)} Name /TableSortLabel /TableCell其中sortDirection由TableCell源码自动转译为aria-sort屏幕阅读器可正确播报当前列的排序状态无需手动维护 ARIA 属性。五、TablePagination 分页控件深入TablePagination的完整实现见 TablePagination.js它是一个基于TableCell的组件官方注释建议放在TableFooter内使用。关键参数结合源码逐项核实Prop默认值说明count必填整数总行数传-1表示服务端分页、总行数未知此时显示文案变为 more than N 且页码范围校验自动跳过page必填整数当前页从 0 开始开发模式下page超出0 ~ ceil(count/rowsPerPage)-1会抛出MUI: The page prop of a TablePagination is out of range警告rowsPerPage必填整数每页行数-1表示显示全部行onPageChange必填翻页回调(event, page) voidonRowsPerPageChange—每页行数变更回调rowsPerPageOptions[10, 25, 50, 100]每页行数下拉选项见下方两种形式选项少于 2 个时下拉整体不渲染ActionsComponentTablePaginationActions翻页按钮区组件可完全替换为自定义实现showFirstButton/showLastButtonfalse是否显示首页/末页按钮colSpan1000当根节点为TableCell/td时使分页行横跨整张表格labelDisplayedRows(v) \${from}–${to} of ${count}| 自定义显示行数文案接收{ from, to, count, page }labelRowsPerPageRows per page:每页行数标签支持国际化替换getItemAriaLabel(type) \Go to ${type} page翻页按钮的无障碍名称slots/slotProps{}针对root、toolbar、spacer、select、menuItem、displayedRows、actions等内部槽位的组件与 props 定制源码中的两处实现细节值得注意TablePagination.js L189-L202let colSpan; if (component TableCell || component td) { colSpan colSpanProp || 1000; // col-span over everything }放在表格内时分页行自动横跨全部列视觉上是整行一条分隔带count -1时getLabelDisplayedRowsTo返回(page 1) * rowsPerPage文案呈现 more than N这正是服务端分页场景的官方支持方式。5.1 自定义 rowsPerPageOptionsrowsPerPageOptions接受两种数组元素形式table.md 原文即给出这两种写法源码 TablePagination.js L294-L302 中rowsPerPageOption.label ? ... : rowsPerPageOption的三元表达式与之对应// 形式一纯数字数组数字同时作为选项的 label 与 value TablePagination rowsPerPageOptions{[10, 50]} / // 形式二对象数组value 为取值、label 为展示文本 // 适合 All 这类非数字标签value-1 即显示全部行 TablePagination rowsPerPageOptions{[10, 50, { value: -1, label: All }]} /5.2 自定义分页按钮ActionsComponent通过ActionsComponent可整体替换翻页按钮区。官方示例 CustomPaginationActionsTable.tsx 中实现了TablePaginationActions组件将TablePagination放入TableFooter内部并自定义按钮样式该组件接收count、page、rowsPerPage、onPageChange、showFirstButton、showLastButton、getItemAriaLabel、disabled等 props见 TablePagination.js L314-L326因此自定义实现与内置实现在接口上完全兼容可平滑替换。六、吸顶表头、列分组、折叠行与跨行列6.1 Sticky header吸顶表头StickyHeadTable示例StickyHeadTable.tsx的核心结构TableContainer sx{{ maxHeight: 440 }} Table stickyHeader aria-labelsticky table ... /Table /TableContainer原理源码证据Table在stickyHeader下将根节点样式切为border-collapse: separateTable.js L43-L50否则position: sticky在collapse边框模型下在多数浏览器中不可靠TableCell依据variant head table.stickyHeaderTableCell.js L218为表头单元格叠加position: sticky; top: 0; z-index: 2及背景色TableCell.js L158-L165背景色用于遮挡滚动到表头下方的内容。因此stickyHeader必须与一个有高度上限的滚动容器TableContainer sx{{ maxHeight }}或页面级滚动配合使用。6.2 Column grouping列分组通过在一个TableHead中渲染多行TableRow实现多层列头配合colSpan分组上层标题ColumnGroupingTable.tsxTableHead TableRow TableCell aligncenter colSpan{2} sx{{ py: 1 }} Breakfast /TableCell TableCell aligncenter colSpan{2} sx{{ py: 1 }} Dinner /TableCell /TableRow TableRow TableCell sx{{ borderColor: divider }}Calories/TableCell TableCell sx{{ borderColor: divider }}Carbs (g)/TableCell TableCell sx{{ borderColor: divider }}Calories/TableCell TableCell sx{{ borderColor: divider }}Carbs (g)/TableCell /TableRow /TableHead6.3 Collapsible table可折叠行CollapsibleTable示例CollapsibleTable.tsx使用Collapse组件实现展开更多信息的行在隐藏列中放一个IconButton切换open状态Collapse in{open}控制一个占满整行colSpan的子行高度动画展开/收起。要点是展开行同样是一个TableRow 单格TableCell colSpan{5}内部再嵌套内容块。6.4 Spanning table跨行跨列SpanningTable示例SpanningTable.tsx演示原生rowSpan/colSpan在TableRow/TableCell上直接可用无需额外 API。6.5 Virtualized table虚拟滚动ReactVirtualizedTable示例ReactVirtualizedTable.tsx展示如何将 react-virtuoso 与Table组件结合官方示例渲染 200 行并可轻松扩展到更大规模通过只渲染可视区域内的行来解决大数据量下的渲染性能问题。适用前提是数据行高度固定或变化可控且数据为客户端内存中的数组若行数巨大且需要服务端加载优先考虑 DataGrid 或服务端分页count{-1}。七、无障碍Accessibility官方文档引用了 WAI 表格教程作为参考依据并给出两条关键实践。7.1 行头与列头Row and column headers表头单元格用于标识每行/每列的数据屏幕阅读器会利用这种关联在导航表格时提供上下文。TableCell在TableHead内自动渲染thscopecol在TableBody内自动渲染td当某个表体单元格承载了该行标识信息时应显式将其渲染为行头TableRow TableCell componentth scoperow {row.name} /TableCell TableCell{row.calories}/TableCell /TableRow官方建议行头应选择有语义的值如人名、产品名而非任意索引一行中可以有多个行头单元格例如同时存在名和姓两列时。这与第二节源码中显式component优先于上下文推导的逻辑TableCell.jsL193-L198完全一致。对于 DataGrid因其使用 ARIA role 而非原生表格元素行头需通过自定义 cell 渲染rolerowheader参见第三节renderRowHeaderCell示例。7.2 Captioncaption相当于表格的标题多数屏幕阅读器会播报 caption 内容帮助用户定位表格、理解其主题并决定是否阅读。AccessibleTable示例AccessibleTable.tsx即为演示。样式上Table已内置caption的排版body2字号、次要文字色、底部对齐见 Table.js L36-L42Table sx{{ minWidth: 650 }} captionList of materials/caption ... /Table注意基础示例BasicTable未用 caption因此通过aria-label提供等价的可访问名称两者取其一即可保证屏幕阅读器能识别表格。八、主题定制与类名官方 CustomizedTables 示例CustomizedTables.tsx演示了通过sx与主题components覆盖修改表格边框、圆角、单元格背景等外观可参考定制指南页面了解components.MuiTable/MuiTableCell等 styleOverrides 机制各组件的 class key如MuiTable-root、MuiTableCell-stickyHeader、MuiTableCell-paddingCheckbox、MuiTablePagination-actions等由tableClasses.ts/tableCellClasses.ts/tablePaginationClasses.ts生成可用于精准 CSS 选择。九、小结场景推荐方案简单静态数据展示TableContainerTable 头/体结构aria-label或caption提供名称密集信息Table sizesmall上下文自动下发至所有单元格排序/多选/分页TableSortLabelaria-sort自动TablePagination放表格外防横向滚动或放入TableFooter服务端分页count{-1}rowsPerPageOptions含{ value: -1, label: All }长表格stickyHeader 限高滚动容器复杂数据表编辑、树、分组迁移到mui/x-data-grid的 DataGrid客户端超大数组react-virtuoso 虚拟滚动示例所有示例源码均可在 docs/data/material/components/table/ 目录按BasicTable.tsx、DenseTable.tsx、EnhancedTable.tsx、StickyHeadTable.tsx、ColumnGroupingTable.tsx、CollapsibleTable.tsx、SpanningTable.tsx、ReactVirtualizedTable.tsx、CustomPaginationActionsTable.tsx、CustomizedTables.tsx、AccessibleTable.tsx查看组件实现集中在 packages/mui-material/src/Table/、TableCell/、TablePagination/三个目录便于按本文结论对照阅读。【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考