表格

表格以行和列的形式显示数据集。

简介

Joy UI Table 组件允许您使用纯 HTML 结构在 JSX 中组装表格。

基础知识

Joy UI Table 将基于使用 <thead>、<tbody> 和 <tfoot> 元素的表格结构应用样式。

import Table from '@mui/joy/Table';

自定义

列宽

使用 sx prop 定位表头并提供宽度（数字或百分比）。

没有明确宽度的列将平均展开以填充剩余区域。

内联样式

控制列宽的另一种方法是在 <th> 元素上使用 内联样式

<thead>
  <tr>
    <th style={{ width: '40%' }}>Column 1</th>
    <th style={{ width: '64px' }}>Column 2</th>
  </tr>
</thead>

对齐

使用 sx prop 使用适当的 CSS 选择器定位列，并应用 text-align 属性。

// target cells that are not the first in their respective rows.
<Table sx={{ '& tr > *:not(:first-child)': { textAlign: 'right' } }}>

Variants

Table 支持 Joy UI 的四种全局 variants：plain（默认）、outlined、soft 和 solid。

Sizes

该组件有三种尺寸：sm、md（默认）和 lg。

Stripe

要在行之间创建对比，请使用 stripe prop 和 odd 或 even 值。

Hover

要在鼠标悬停在表格主体某行上时突出显示该行，请将 hoverRow prop 设置为 true。

Border

使用 borderAxis prop 控制边框外观。

添加自定义边框

使用 extendTheme() 函数，根据 borderAxis prop 自定义表格主题。

import { CssVarsProvider, extendTheme } from '@mui/joy/styles';

const theme = extendTheme({
  components: {
    JoyTable: {
      styleOverrides: {
        root: ({ ownerState }) => ({
          ...(ownerState.borderAxis === 'header' && {
            // this example applies borders between <thead> and <tbody>
            '& thead th:not([colspan])': {
              borderBottom: '2px solid var(--TableCell-borderColor)',
            },
          }),
        });
      }
    }
  }
})

<CssVarsProvider theme={theme}>…</CssVarsProvider>

对于 TypeScript，您必须通过模块扩充添加新值

// this could be any file that's included in your tsconfig.json
declare module '@mui/joy/Table' {
  interface TablePropsBorderAxisOverrides {
    header: true;
  }
}

Sticky header 和 footer

将 stickyHeader 设置为 true，以便在用户滚动表格时始终将表头固定在顶部。

将 stickyFooter 设置为 true，以便始终将表尾固定在表格底部。

Caption

通过插入 <caption> 元素作为 Table 的第一个子元素，添加一个标题来总结 Table 的内容。

Footer

使用 <tfoot> 向 Table 添加页脚。

Row head

将 scope="row" 设置为 <tbody> 内的 <th> 元素，以应用与列标题相同的样式。下面的演示说明了一个常见的用例：将第一列设置为与标题样式匹配。

行和列跨度

使用 rowSpan 和 columnSpan 将单元格扩展到多行或多列。

文本省略号

要截断文本，请将 noWrap 设置为 true。表头单元格始终会截断文本，以保持表头的高度可预测。

CSS 变量 Playground

试用 Table 组件可用的 CSS 变量，看看设计如何变化。您可以使用这些通过 sx prop 和主题自定义组件。

与 Sheet 一起使用

import Sheet from @mui/joy/Sheet 当 Table 成为 Sheet 组件的子组件时，表头背景将继承自 Sheet。

颜色反转

启用颜色反转后，Table 的样式将根据其variant 进行调整。

常见示例

排序和选择

使用表单组件（例如 Button、Select 和 Switch）来创建排序和选择功能。

首列和尾列固定

可折叠行

应用全局 variants

使用 theme.variants.* 将全局 variant 样式应用于 Table。

滚动阴影

受 Lea Verou 关于 CSS 滚动阴影 这篇文章的启发，阴影在 Table 上滚动时出现和隐藏。

API

请参阅下面的文档，以获取此处提到的组件的所有可用 props 和类的完整参考。

• <Table />