跳到内容跳到内容
🚀 影响 Joy UI 2025 年的路线图！参与最新的开发者调查

表格API

React Table 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。

演示

导入

import Table from '@mui/joy/Table';
// or
import { Table } from '@mui/joy';

通过阅读有关最小化 bundle size 的指南，了解它们之间的区别。

Props

名称类型默认值描述
borderAxis'both'
| 'bothBetween'
| 'none'
| 'x'
| 'xBetween'
| 'y'
| 'yBetween'
| string		'xBetween'

在表格单元格上显示边框的轴。

childrennode-

表格的子元素

color'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'
| string		'neutral'

组件的颜色。它支持对该组件有意义的主题颜色。

要了解如何添加自己的颜色，请查看主题组件—扩展颜色。

componentelementType-

用于根节点的组件。可以是用于 HTML 元素的字符串或组件。

hoverRowboolfalse

如果 true，表格行将在悬停时着色。

noWrapboolfalse

如果 true，主体单元格将不会换行，而是会使用文本溢出省略号截断。
注意：表头单元格始终使用溢出省略号截断。

size'sm'
| 'md'
| 'lg'
| string		'md'

组件的大小。它接受 'sm' 和 'lg' 之间的主题值。

要了解如何向组件添加自定义尺寸，请查看主题组件—扩展尺寸。

slotProps{ root?: func
| object }		{}

用于内部每个插槽的 props。

slots{ root?: elementType }{}

用于内部每个插槽的组件。

有关更多详细信息，请参见下面的插槽 API。

stickyFooterboolfalse

如果 true，页脚始终出现在溢出表格的底部。

stickyHeaderboolfalse

如果 true，表头始终出现在溢出表格的顶部。

stripe'odd'
| 'even'
| string		-

表格主体的奇数行或偶数行将具有微妙的背景颜色。

sxArray<func
| object
| bool>
| func
| object		-

允许定义系统覆盖以及其他 CSS 样式的系统 prop。

有关更多详细信息，请参见`sx` 页面。

variant'outlined'
| 'plain'
| 'soft'
| 'solid'
| string		'plain'

要使用的全局 variant。

要了解如何添加自己的 variant，请查看主题组件—扩展 variants。

ref 被转发到根元素。

主题默认 props

您可以使用 JoyTable 通过主题更改此组件的默认 props。

插槽

要了解如何自定义插槽，请查看覆盖组件结构指南。

插槽名称类名默认组件描述
root.MuiTable-root'table'渲染根组件的组件。

CSS 类

这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时，它们会应用于组件的插槽。

类名规则名称描述
.MuiTable-borderAxisBothborderAxisBoth如果 borderAxis="both"，则应用于根元素的类名。
.MuiTable-borderAxisBothBetweenborderAxisBothBetween如果 borderAxis="bothBetween"，则应用于根元素的类名。
.MuiTable-borderAxisNoneborderAxisNone如果 borderAxis="none"，则应用于根元素的类名。
.MuiTable-borderAxisXborderAxisX如果 borderAxis="x"，则应用于根元素的类名。
.MuiTable-borderAxisXBetweenborderAxisXBetween如果 borderAxis="xBetween"，则应用于根元素的类名。
.MuiTable-borderAxisYborderAxisY如果 borderAxis="y"，则应用于根元素的类名。
.MuiTable-borderAxisYBetweenborderAxisYBetween如果 borderAxis="yBetween"，则应用于根元素的类名。
.MuiTable-colorContextcolorContext当颜色反转被触发时，应用于根元素的类名。
.MuiTable-colorDangercolorDanger如果 color="danger"，则应用于根元素的类名。
.MuiTable-colorNeutralcolorNeutral如果 color="neutral"，则应用于根元素的类名。
.MuiTable-colorPrimarycolorPrimary如果 color="primary"，则应用于根元素的类名。
.MuiTable-colorSuccesscolorSuccess如果 color="success"，则应用于根元素的类名。
.MuiTable-colorWarningcolorWarning如果 color="warning"，则应用于根元素的类名。
.MuiTable-hoverRowhoverRow如果 hoverRow 为 true，则应用于根元素的类名。
.MuiTable-noWrapnoWrap如果 noWrap 为 true，则应用于根元素的类名。
.MuiTable-sizeLgsizeLg如果 size="lg"，则应用于根元素的类名。
.MuiTable-sizeMdsizeMd如果 size="md"，则应用于根元素的类名。
.MuiTable-sizeSmsizeSm如果 size="sm"，则应用于根元素的类名。
.MuiTable-stickyFooterstickyFooter如果 stickyFooter 为 true，则应用于根元素的类名。
.MuiTable-stickyHeaderstickyHeader如果 stickyHeader 为 true，则应用于根元素的类名。
.MuiTable-variantOutlinedvariantOutlined如果 variant="outlined"，则应用于根元素的类名。
.MuiTable-variantPlainvariantPlain如果 variant="plain"，则应用于根元素的类名。
.MuiTable-variantSoftvariantSoft如果 variant="soft"，则应用于根元素的类名。
.MuiTable-variantSolidvariantSolid如果 variant="solid"，则应用于根元素的类名。

您可以使用以下自定义选项之一来覆盖组件的样式

源代码

如果您在此页面中没有找到所需的信息，请考虑查看组件的实现以获取更多详细信息。