# 表格

- 页面: https://jiguang132.com/zh/resources/material-ui/docs/table
- 资源: Material UI (https://jiguang132.com/zh/resources/material-ui.md)
- 全部指南: https://jiguang132.com/zh/resources/material-ui/docs.md

渲染语义表格，由宿主管理行数据、排序和分页。

本指南覆盖默认 Emotion 环境的 Material UI Core；扩展包与额外示例按清单单独标注。

## 使用场景与业务边界

Core Table 不是 MUI X DataGrid，也不会自动虚拟化；保留表头语义，并单独实现数据操作。

## 原生组成与范围

`Table`, `TableBody`, `TableCell`, `TableContainer`, `TableFooter`, `TableHead`, `TablePagination`, `TableRow`, `TableSortLabel`

保持 Material UI 原生组合与类型，不替换为 JGuang／Base UI／Radix 同名 API。示例条目不是额外组件。

## 原生安装与初始化

```bash
npm install @mui/material@9.4.0 @emotion/react@11.14.0 @emotion/styled@11.14.1
```

采用原生 npm 包与 Emotion，不提供虚构的 JGuang UI Registry 地址。将示例放在原生 ThemeProvider 内，按项目选择 CssBaseline 或 ScopedCssBaseline。先检查 React、现有 Provider、锁文件与 SSR 配置；不要覆盖用户文件或忽略 peer 冲突。本批实际验收 React 19.2.8；React 18 及以下须匹配 react-is。完整初始化规则见随附的双语 setup 文档。

## 关键原生参数

仅解释本指南选出的关键参数，不是平铺的通用 API。原生继承来源、slot 结构、可空值与泛型仍按固定源码保留。

| 所属组件.属性 | 用途说明 | 声明来源 |
| --- | --- | --- |
| `Table.size` | 所属组件的原生尺寸：控件使用枚举，Grid 使用响应式跨列值。 | `Table` |
| `Table.stickyHeader` | 在有效滚动容器内启用原生吸顶表头。 | `Table` |
| `TableCell.scope` | 原生 TableCell 表头关联，例如 col 或 row。 | `TableCell` |
| `TableSortLabel.active` | 标记原生排序指示处于激活状态，宿主仍须对行数据排序。 | `TableSortLabel` |
| `TableSortLabel.direction` | 所属组件的原生方向枚举，布局、排序和过渡方向不同。 | `TableSortLabel` |

## 可运行原生示例

下列机器键只选择示例入口，不会作为通用 variant 属性传入每个组件。原生示例 JSX 与数据保持上游原文；JGuang 编写的验收示例明确标注。

- 基础表格 · `BasicTable` · 上游原生示例
- 紧凑表格 · `DenseTable` · 上游原生示例
- 排序与选择 · `EnhancedTable` · 上游原生示例
- 定制样式 · `CustomizedTables` · 上游原生示例
- 自定义分页操作 · `CustomPaginationActionsTable` · 上游原生示例
- 吸顶表头 · `StickyHeadTable` · 上游原生示例
- 列分组 · `ColumnGroupingTable` · 上游原生示例
- 可展开表格行 · `CollapsibleTable` · 上游原生示例
- 合并单元格 · `SpanningTable` · 上游原生示例
- 表格说明 · `AccessibleTable` · 上游原生示例

## 尚未支持的额外示例

这些条目仍保留在上游清单中，不静默跳过，也不展示为已完成预览。需要补充依赖／框架验收后再纳入可运行列表。

- 数据表格扩展 · `DataTable`: `@mui/x-data-grid`
- 虚拟表格扩展 · `ReactVirtualizedTable`: `react-virtuoso`, `chance`

## 真实使用示例

固定版本的未修改原生示例；复制时同时保留所需的局部辅助文件。

```tsx
import 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: string,
  calories: number,
  fat: number,
  carbs: number,
  protein: number,
) {
  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-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow
              key={row.name}
              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
            >
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{row.carbs}</TableCell>
              <TableCell align="right">{row.protein}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

```

## 示例依赖边界

`@mui/material/Table`, `@mui/material/TableBody`, `@mui/material/TableCell`, `@mui/material/TableContainer`, `@mui/material/TableHead`, `@mui/material/TableRow`, `@mui/material/Paper`, `react`, `@mui/material/styles`, `@mui/material/Box`, `@mui/material/TablePagination`, `@mui/material/TableSortLabel`, `@mui/material/Toolbar`, `@mui/material/Typography`, `@mui/material/Checkbox`, `@mui/material/IconButton`, `@mui/material/Tooltip`, `@mui/material/FormControlLabel`, `@mui/material/Switch`, `@mui/icons-material/Delete`, `@mui/icons-material/FilterList`, `@mui/utils`, `@mui/material/TableFooter`, `@mui/icons-material/FirstPage`, `@mui/icons-material/KeyboardArrowLeft`, `@mui/icons-material/KeyboardArrowRight`, `@mui/icons-material/LastPage`, `@mui/material/Collapse`, `@mui/icons-material/KeyboardArrowDown`, `@mui/icons-material/KeyboardArrowUp`

直接导入 Icons／System／Utils 的示例需要匹配 9.4.0 包。局部数据与辅助文件属于示例闭包，不是额外组件。远程图片和模拟操作不提供后端。

## 固定上游 API 元数据参考

以下表格保留上游元数据，不是重新推断的通用类型体系。条件泛型、继承属性与回调细节以以下源码声明为准。主题默认配置可能覆盖元数据默认值。

### Table

```tsx
import Table from '@mui/material/Table';
import { Table } from '@mui/material';
```

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `children` | 否 | `node` | — |
| `classes` | 否 | `object` | — |
| `component` | 否 | `elementType` | — |
| `padding` | 否 | `'checkbox' \| 'none' \| 'normal'` | `'normal'` |
| `size` | 否 | `'medium' \| 'small' \| string` | `'medium'` |
| `stickyHeader` | 否 | `bool` | `false` |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |



### TableBody

```tsx
import TableBody from '@mui/material/TableBody';
import { TableBody } from '@mui/material';
```

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `children` | 否 | `node` | — |
| `classes` | 否 | `object` | — |
| `component` | 否 | `elementType` | — |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |



### TableCell

```tsx
import TableCell from '@mui/material/TableCell';
import { TableCell } from '@mui/material';
```

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `align` | 否 | `'center' \| 'inherit' \| 'justify' \| 'left' \| 'right'` | `'inherit'` |
| `children` | 否 | `node` | — |
| `classes` | 否 | `object` | — |
| `component` | 否 | `elementType` | — |
| `padding` | 否 | `'checkbox' \| 'none' \| 'normal'` | — |
| `scope` | 否 | `string` | — |
| `size` | 否 | `'medium' \| 'small' \| string` | — |
| `sortDirection` | 否 | `'asc' \| 'desc' \| false` | — |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |
| `variant` | 否 | `'body' \| 'footer' \| 'head' \| string` | — |



### TableContainer

```tsx
import TableContainer from '@mui/material/TableContainer';
import { TableContainer } from '@mui/material';
```

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `children` | 否 | `node` | — |
| `classes` | 否 | `object` | — |
| `component` | 否 | `elementType` | — |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |



### TableFooter

```tsx
import TableFooter from '@mui/material/TableFooter';
import { TableFooter } from '@mui/material';
```

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `children` | 否 | `node` | — |
| `classes` | 否 | `object` | — |
| `component` | 否 | `elementType` | — |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |



### TableHead

```tsx
import TableHead from '@mui/material/TableHead';
import { TableHead } from '@mui/material';
```

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `children` | 否 | `node` | — |
| `classes` | 否 | `object` | — |
| `component` | 否 | `elementType` | — |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |



### TablePagination

```tsx
import TablePagination from '@mui/material/TablePagination';
import { TablePagination } from '@mui/material';
```

原生继承: `TableCell`. 父级与 DOM 属性未被伪造为本组件新属性。

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `count` | 是 | `integer` | — |
| `onPageChange` | 是 | `func` | — |
| `page` | 是 | `integer` | — |
| `rowsPerPage` | 是 | `integer` | — |
| `ActionsComponent` | 否 | `elementType` | `TablePaginationActions` |
| `classes` | 否 | `object` | — |
| `component` | 否 | `elementType` | — |
| `disabled` | 否 | `bool` | `false` |
| `getItemAriaLabel` | 否 | `func` | `function defaultGetAriaLabel(type) { return `Go to ${type} page`; }` |
| `labelDisplayedRows` | 否 | `func` | `function defaultLabelDisplayedRows({ from, to, count }) { return `${formatNumber(from)}–${formatNumber(to)} of ${count !== -1 ? formatNumber(count) : `more than ${formatNumber(to)}`}`; }` |
| `labelRowsPerPage` | 否 | `node` | `'Rows per page:'` |
| `onRowsPerPageChange` | 否 | `func` | — |
| `rowsPerPageOptions` | 否 | `Array<number \| { label: string, value: number }>` | `[10, 25, 50, 100]` |
| `showFirstButton` | 否 | `bool` | `false` |
| `showLastButton` | 否 | `bool` | `false` |
| `slotProps` | 否 | `{ actions?: { firstButton?: object, firstButtonIcon?: object, lastButton?: object, lastButtonIcon?: object, nextButton?: object, nextButtonIcon?: object, previousButton?: object, previousButtonIcon?: object }, displayedRows?: func \| object, menuItem?: func \| object, root?: func \| object, select?: object, selectLabel?: func \| object, spacer?: func \| object, toolbar?: func \| object }` | `{}` |
| `slots` | 否 | `{ actions?: { firstButton?: elementType, firstButtonIcon?: elementType, lastButton?: elementType, lastButtonIcon?: elementType, nextButton?: elementType, nextButtonIcon?: elementType, previousButton?: elementType, previousButtonIcon?: elementType }, displayedRows?: elementType, menuItem?: elementType, root?: elementType, select?: elementType, selectLabel?: elementType, spacer?: elementType, toolbar?: elementType }` | `{}` |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |



### TableRow

```tsx
import TableRow from '@mui/material/TableRow';
import { TableRow } from '@mui/material';
```

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `children` | 否 | `node` | — |
| `classes` | 否 | `object` | — |
| `component` | 否 | `elementType` | — |
| `hover` | 否 | `bool` | `false` |
| `selected` | 否 | `bool` | `false` |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |



### TableSortLabel

```tsx
import TableSortLabel from '@mui/material/TableSortLabel';
import { TableSortLabel } from '@mui/material';
```

原生继承: `ButtonBase`. 父级与 DOM 属性未被伪造为本组件新属性。

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `active` | 否 | `bool` | `false` |
| `children` | 否 | `node` | — |
| `classes` | 否 | `object` | — |
| `direction` | 否 | `'asc' \| 'desc'` | `'asc'` |
| `hideSortIcon` | 否 | `bool` | `false` |
| `IconComponent` | 否 | `elementType` | `ArrowDownwardIcon` |
| `slotProps` | 否 | `{ icon?: func \| object, root?: func \| object }` | `{}` |
| `slots` | 否 | `{ icon?: elementType, root?: elementType }` | `{}` |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |


## 原生源码声明

声明与 import 从固定源码提取，不平铺联合类型或外部继承。英文注释／类型属于原始源码参考，不代表上游正文已全文翻译。共享类型仍位于原生包中。

### vendor/src/Table/Table.d.ts

```ts
import * as React from 'react';

import { SxProps } from '@mui/system';

import { OverridableStringUnion } from '@mui/types';

import { Theme } from '../styles';

import { OverridableComponent, OverrideProps } from '../OverridableComponent';

import { TableClasses } from './tableClasses';

export interface TablePropsSizeOverrides {}

export interface TableOwnProps {
  /**
   * The content of the table, normally `TableHead` and `TableBody`.
   */
  children?: React.ReactNode;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<TableClasses> | undefined;
  /**
   * Allows TableCells to inherit padding of the Table.
   * @default 'normal'
   */
  padding?: 'normal' | 'checkbox' | 'none' | undefined;
  /**
   * Allows TableCells to inherit size of the Table.
   * @default 'medium'
   */
  size?: OverridableStringUnion<'small' | 'medium', TablePropsSizeOverrides> | undefined;
  /**
   * Set the header sticky.
   * @default false
   */
  stickyHeader?: boolean | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

export interface TableTypeMap<
  AdditionalProps = {},
  RootComponent extends React.ElementType = 'table',
> {
  props: AdditionalProps & TableOwnProps;
  defaultComponent: RootComponent;
}

declare const Table: OverridableComponent<TableTypeMap>;

export type TableProps<
  RootComponent extends React.ElementType = TableTypeMap['defaultComponent'],
  AdditionalProps = {},
> = OverrideProps<TableTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
  component?: React.ElementType | undefined;
};
```

### vendor/src/TableBody/TableBody.d.ts

```ts
import * as React from 'react';

import { SxProps } from '@mui/system';

import { Theme } from '../styles';

import { OverridableComponent, OverrideProps } from '../OverridableComponent';

import { TableBodyClasses } from './tableBodyClasses';

export interface TableBodyOwnProps {
  /**
   * The content of the component, normally `TableRow`.
   */
  children?: React.ReactNode;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<TableBodyClasses> | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

export interface TableBodyTypeMap<
  AdditionalProps = {},
  RootComponent extends React.ElementType = 'tbody',
> {
  props: AdditionalProps & TableBodyOwnProps;
  defaultComponent: RootComponent;
}

declare const TableBody: OverridableComponent<TableBodyTypeMap>;

export type TableBodyProps<
  RootComponent extends React.ElementType = TableBodyTypeMap['defaultComponent'],
  AdditionalProps = {},
> = OverrideProps<TableBodyTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
  component?: React.ElementType | undefined;
};
```

### vendor/src/TableCell/TableCell.d.ts

```ts
import * as React from 'react';

import { OverridableStringUnion } from '@mui/types';

import { SxProps } from '@mui/system';

import { Theme } from '../styles';

import { InternalStandardProps as StandardProps } from '../internal';

import { TableCellClasses } from './tableCellClasses';

export interface TableCellPropsSizeOverrides {}

export interface TableCellPropsVariantOverrides {}

export interface TableCellProps extends StandardProps<TableCellBaseProps, 'align'> {
  /**
   * Set the text-align on the table cell content.
   *
   * Monetary or generally number fields **should be right aligned** as that allows
   * you to add them up quickly in your head without having to worry about decimals.
   * @default 'inherit'
   */
  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify' | undefined;
  /**
   * The content of the component.
   */
  children?: React.ReactNode;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<TableCellClasses> | undefined;
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component?: React.ElementType<TableCellBaseProps> | undefined;
  /**
   * Sets the padding applied to the cell.
   * The prop defaults to the value (`'default'`) inherited from the parent Table component.
   */
  padding?: 'normal' | 'checkbox' | 'none' | undefined;
  /**
   * Set scope attribute.
   */
  scope?: TableCellBaseProps['scope'] | undefined;
  /**
   * Specify the size of the cell.
   * The prop defaults to the value (`'medium'`) inherited from the parent Table component.
   */
  size?: OverridableStringUnion<'small' | 'medium', TableCellPropsSizeOverrides> | undefined;
  /**
   * Set aria-sort direction.
   */
  sortDirection?: SortDirection | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
  /**
   * Specify the cell type.
   * The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components.
   */
  variant?:
    OverridableStringUnion<'head' | 'body' | 'footer', TableCellPropsVariantOverrides> | undefined;
}

export type TableCellBaseProps = React.ThHTMLAttributes<HTMLTableCellElement> &
  React.TdHTMLAttributes<HTMLTableCellElement>;

export type SortDirection = 'asc' | 'desc' | false;

export default function TableCell(props: TableCellProps): React.JSX.Element;
```

### vendor/src/TableContainer/TableContainer.d.ts

```ts
import * as React from 'react';

import { SxProps } from '@mui/system';

import { Theme } from '../styles';

import { OverridableComponent, OverrideProps } from '../OverridableComponent';

import { TableContainerClasses } from './tableContainerClasses';

export interface TableContainerOwnProps {
  /**
   * The content of the component, normally `Table`.
   */
  children?: React.ReactNode;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<TableContainerClasses> | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

export interface TableContainerTypeMap<
  AdditionalProps = {},
  RootComponent extends React.ElementType = 'div',
> {
  props: AdditionalProps & TableContainerOwnProps;
  defaultComponent: RootComponent;
}

declare const TableContainer: OverridableComponent<TableContainerTypeMap>;

export type TableContainerProps<
  RootComponent extends React.ElementType = TableContainerTypeMap['defaultComponent'],
  AdditionalProps = {},
> = OverrideProps<TableContainerTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
  component?: React.ElementType | undefined;
};
```

### vendor/src/TableFooter/TableFooter.d.ts

```ts
import * as React from 'react';

import { SxProps } from '@mui/system';

import { Theme } from '../styles';

import { OverridableComponent, OverrideProps } from '../OverridableComponent';

import { TableFooterClasses } from './tableFooterClasses';

export interface TableFooterOwnProps {
  /**
   * The content of the component, normally `TableRow`.
   */
  children?: React.ReactNode;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<TableFooterClasses> | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

export interface TableFooterTypeMap<
  AdditionalProps = {},
  RootComponent extends React.ElementType = 'tfoot',
> {
  props: AdditionalProps & TableFooterOwnProps;
  defaultComponent: RootComponent;
}

declare const TableFooter: OverridableComponent<TableFooterTypeMap>;

export type TableFooterProps<
  RootComponent extends React.ElementType = TableFooterTypeMap['defaultComponent'],
  AdditionalProps = {},
> = OverrideProps<TableFooterTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
  component?: React.ElementType | undefined;
};
```

### vendor/src/TableHead/TableHead.d.ts

```ts
import * as React from 'react';

import { SxProps } from '@mui/system';

import { Theme } from '../styles';

import { OverridableComponent, OverrideProps } from '../OverridableComponent';

import { TableHeadClasses } from './tableHeadClasses';

export interface TableHeadOwnProps {
  /**
   * The content of the component, normally `TableRow`.
   */
  children?: React.ReactNode;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<TableHeadClasses> | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

export interface TableHeadTypeMap<
  AdditionalProps = {},
  RootComponent extends React.ElementType = 'thead',
> {
  props: AdditionalProps & TableHeadOwnProps;
  defaultComponent: RootComponent;
}

declare const TableHead: OverridableComponent<TableHeadTypeMap>;

export type TableHeadProps<
  RootComponent extends React.ElementType = TableHeadTypeMap['defaultComponent'],
  AdditionalProps = {},
> = OverrideProps<TableHeadTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
  component?: React.ElementType | undefined;
};
```

### vendor/src/TablePagination/TablePagination.d.ts

```ts
import * as React from 'react';

import { SxProps } from '@mui/system';

import { Theme } from '../styles';

import { OverridableComponent, OverrideProps } from '../OverridableComponent';

import {
  TablePaginationActionsProps,
  TablePaginationActionsSlots,
} from '../TablePaginationActions';

import { TableCellProps } from '../TableCell';

import { SelectProps } from '../Select';

import { TablePaginationClasses } from './tablePaginationClasses';

import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';

import { ToolbarProps } from '../Toolbar';

import { MenuItemProps } from '../MenuItem';

export interface LabelDisplayedRowsArgs {
  from: number;
  to: number;
  count: number;
  page: number;
}

export interface TablePaginationRootSlotPropsOverrides {}

export interface TablePaginationToolbarSlotPropsOverrides {}

export interface TablePaginationSpacerSlotPropsOverrides {}

export interface TablePaginationSelectLabelSlotPropsOverrides {}

export interface TablePaginationSelectSlotPropsOverrides {}

export interface TablePaginationMenuItemSlotPropsOverrides {}

export interface TablePaginationDisplayedRowsSlotPropsOverrides {}

export interface TablePaginationActionsSlotPropsOverrides {}

export interface TablePaginationSlots {
  /**
   * The component that renders the root slot.
   * [Follow this guide](https://mui.com/material-ui/api/table-cell/#props) to learn more about the requirements for this component.
   * @default TableCell
   */
  root: React.ElementType;
  /**
   * The component that renders the toolbar slot.
   * [Follow this guide](https://mui.com/material-ui/api/toolbar/#props) to learn more about the requirements for this component.
   * @default Toolbar
   */
  toolbar: React.ElementType;
  /**
   * The tag that renders the spacer slot.
   * @default 'div'
   */
  spacer: React.ElementType;
  /**
   * The tag that renders the selectLabel slot.
   * @default 'p'
   */
  selectLabel: React.ElementType;
  /**
   * The component that renders the select slot.
   * [Follow this guide](https://mui.com/material-ui/api/select/#props) to learn more about the requirements for this component.
   * @default Select
   */
  select: React.ElementType;
  /**
   * The component that renders the select slot.
   * [Follow this guide](https://mui.com/material-ui/api/menu-item/#props) to learn more about the requirements for this component.
   * @default MenuItem
   */
  menuItem: React.ElementType;
  /**
   * The tag that renders the displayedRows slot.
   * @default 'p'
   */
  displayedRows: React.ElementType;
  /**
   * The slots that passed to the actions slot.
   */
  actions: TablePaginationActionsSlots;
}

export type TablePaginationSlotsAndSlotProps = CreateSlotsAndSlotProps<
  TablePaginationSlots,
  {
    /**
     * Props forwarded to the root slot.
     * By default, the available props are based on the [TableCell](https://mui.com/material-ui/api/table-cell/#props) component.
     */
    root: SlotProps<
      React.ElementType<TableCellProps>,
      TablePaginationRootSlotPropsOverrides,
      TablePaginationOwnerState
    >;
    /**
     * Props forwarded to the toolbar slot.
     * By default, the available props are based on the [Toolbar](https://mui.com/material-ui/api/toolbar/#props) component.
     */
    toolbar: SlotProps<
      React.ElementType<ToolbarProps>,
      TablePaginationToolbarSlotPropsOverrides,
      TablePaginationOwnerState
    >;
    /**
     * Props forwarded to the spacer slot.
     * By default, the available props are based on the div element.
     */
    spacer: SlotProps<'div', TablePaginationSpacerSlotPropsOverrides, TablePaginationOwnerState>;
    /**
     * Props forwarded to the selectLabel slot.
     * By default, the available props are based on the paragraph element.
     */
    selectLabel: SlotProps<
      'p',
      TablePaginationSelectLabelSlotPropsOverrides,
      TablePaginationOwnerState
    >;
    /**
     * Props forwarded to the select slot.
     * By default, the available props are based on the [Select](https://mui.com/material-ui/api/select/#props) component.
     */
    select: Partial<SelectProps> & TablePaginationSelectSlotPropsOverrides;
    /**
     * Props forwarded to the menuItem slot.
     * By default, the available props are based on the [MenuItem](https://mui.com/material-ui/api/menu-item/#props) component.
     */
    menuItem: SlotProps<
      React.ElementType<MenuItemProps>,
      TablePaginationMenuItemSlotPropsOverrides,
      TablePaginationOwnerState
    >;
    /**
     * Props forwarded to the displayedRows slot.
     * By default, the available props are based on the paragraph element.
     */
    displayedRows: SlotProps<
      'p',
      TablePaginationDisplayedRowsSlotPropsOverrides,
      TablePaginationOwnerState
    >;
    /**
     * Props forwarded to the actions slot.
     */
    actions: TablePaginationActionsProps['slotProps'] & TablePaginationActionsSlotPropsOverrides;
  }
>;

export type TablePaginationBaseProps = Omit<TableCellProps, 'classes' | 'component' | 'children'>;

export interface TablePaginationOwnProps extends TablePaginationBaseProps {
  /**
   * The component used for displaying the actions.
   * Either a string to use a HTML element or a component.
   * @default TablePaginationActions
   */
  ActionsComponent?: React.ElementType<TablePaginationActionsProps> | undefined;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<TablePaginationClasses> | undefined;
  /**
   * The total number of rows.
   *
   * To enable server side pagination for an unknown number of items, provide -1.
   */
  count: number;
  /**
   * If `true`, the component is disabled.
   * @default false
   */
  disabled?: boolean | undefined;
  /**
   * Accepts a function which returns a string value that provides a user-friendly name for the current page.
   * This is important for screen reader users.
   *
   * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
   * @param {string} type The link or button type to format ('first' | 'last' | 'next' | 'previous').
   * @returns {string}
   * @default function defaultGetAriaLabel(type) {
   *   return `Go to ${type} page`;
   * }
   */
  getItemAriaLabel?: ((type: 'first' | 'last' | 'next' | 'previous') => string) | undefined;
  /**
   * Customize the displayed rows label. Invoked with a `{ from, to, count, page }`
   * object.
   *
   * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
   * @default function defaultLabelDisplayedRows({ from, to, count }) {
   *   return `${formatNumber(from)}–${formatNumber(to)} of ${count !== -1 ? formatNumber(count) : `more than ${formatNumber(to)}`}`;
   * }
   */
  labelDisplayedRows?: ((paginationInfo: LabelDisplayedRowsArgs) => React.ReactNode) | undefined;
  /**
   * Customize the rows per page label.
   *
   * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
   * @default 'Rows per page:'
   */
  labelRowsPerPage?: React.ReactNode;
  /**
   * Callback fired when the page is changed.
   *
   * @param {React.MouseEvent<HTMLButtonElement> | null} event The event source of the callback.
   * @param {number} page The page selected.
   */
  onPageChange: (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void;
  /**
   * Callback fired when the number of rows per page is changed.
   *
   * @param {React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>} event The event source of the callback.
   */
  onRowsPerPageChange?:
    React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> | undefined;
  /**
   * The zero-based index of the current page.
   */
  page: number;
  /**
   * The number of rows per page.
   *
   * Set -1 to display all the rows.
   */
  rowsPerPage: number;
  /**
   * Customizes the options of the rows per page select field. If less than two options are
   * available, no select field will be displayed.
   * Use -1 for the value with a custom label to show all the rows.
   * @default [10, 25, 50, 100]
   */
  rowsPerPageOptions?: ReadonlyArray<number | { value: number; label: string }> | undefined;
  /**
   * If `true`, show the first-page button.
   * @default false
   */
  showFirstButton?: boolean | undefined;
  /**
   * If `true`, show the last-page button.
   * @default false
   */
  showLastButton?: boolean | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

export interface TablePaginationOwnerState extends TablePaginationOwnProps {}

export interface TablePaginationTypeMap<AdditionalProps, RootComponent extends React.ElementType> {
  props: AdditionalProps & TablePaginationOwnProps & TablePaginationSlotsAndSlotProps;
  defaultComponent: RootComponent;
}

declare const TablePagination: OverridableComponent<
  TablePaginationTypeMap<{}, React.JSXElementConstructor<TablePaginationBaseProps>>
>;

export type TablePaginationProps<
  RootComponent extends React.ElementType = React.JSXElementConstructor<TablePaginationBaseProps>,
  AdditionalProps = {},
> = OverrideProps<TablePaginationTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
  component?: React.ElementType | undefined;
};
```

### vendor/src/TableRow/TableRow.d.ts

```ts
import * as React from 'react';

import { SxProps } from '@mui/system';

import { Theme } from '../styles';

import { OverridableComponent, OverrideProps } from '../OverridableComponent';

import { TableRowClasses } from './tableRowClasses';

export interface TableRowOwnProps {
  /**
   * Should be valid `<tr>` children such as `TableCell`.
   */
  children?: React.ReactNode;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<TableRowClasses> | undefined;
  /**
   * If `true`, the table row will shade on hover.
   * @default false
   */
  hover?: boolean | undefined;
  /**
   * If `true`, the table row will have the selected shading.
   * @default false
   */
  selected?: boolean | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

export interface TableRowTypeMap<
  AdditionalProps = {},
  RootComponent extends React.ElementType = 'tr',
> {
  props: AdditionalProps & TableRowOwnProps;
  defaultComponent: RootComponent;
}

declare const TableRow: OverridableComponent<TableRowTypeMap>;

export type TableRowProps<
  RootComponent extends React.ElementType = TableRowTypeMap['defaultComponent'],
  AdditionalProps = {},
> = OverrideProps<TableRowTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
  component?: React.ElementType | undefined;
};
```

### vendor/src/TableSortLabel/TableSortLabel.d.ts

```ts
import * as React from 'react';

import { SxProps } from '@mui/system';

import { Theme } from '../styles';

import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';

import { OverrideProps } from '../OverridableComponent';

import { TableSortLabelClasses } from './tableSortLabelClasses';

import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';

export interface TableSortLabelRootSlotPropsOverrides {}

export interface TableSortLabelIconSlotPropsOverrides {}

export interface TableSortLabelSlots {
  /**
   * The component that renders the root slot.
   * @default span
   */
  root?: React.ElementType | undefined;
  /**
   * The component that renders the icon slot.
   * @default ArrowDownwardIcon
   */
  icon?: React.ElementType | undefined;
}

export type TableSortLabelSlotsAndSlotProps = CreateSlotsAndSlotProps<
  TableSortLabelSlots,
  {
    /**
     * Props forwarded to the root slot.
     */
    root: SlotProps<
      React.ElementType<React.HTMLAttributes<HTMLSpanElement>>,
      TableSortLabelRootSlotPropsOverrides,
      TableSortLabelOwnerState
    >;
    /**
     * Props forwarded to the icon slot.
     */
    icon: SlotProps<
      React.ElementType<React.SVGAttributes<SVGSVGElement>>,
      TableSortLabelIconSlotPropsOverrides,
      TableSortLabelOwnerState
    >;
  }
>;

export interface TableSortLabelOwnerState extends TableSortLabelOwnProps {}

export interface TableSortLabelOwnProps {
  /**
   * If `true`, the label will have the active styling (should be true for the sorted column).
   * @default false
   */
  active?: boolean | undefined;
  /**
   * Label contents, the arrow will be appended automatically.
   */
  children?: React.ReactNode;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<TableSortLabelClasses> | undefined;
  /**
   * The current sort direction.
   * @default 'asc'
   */
  direction?: 'asc' | 'desc' | undefined;
  /**
   * Hide sort icon when active is false.
   * @default false
   */
  hideSortIcon?: boolean | undefined;
  /**
   * Sort icon to use.
   * @default ArrowDownwardIcon
   */
  IconComponent?:
    | React.JSXElementConstructor<{
        className: string;
      }>
    | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

export type TableSortLabelTypeMap<
  AdditionalProps = {},
  RootComponent extends React.ElementType = 'span',
> = ExtendButtonBaseTypeMap<{
  props: AdditionalProps & TableSortLabelOwnProps & TableSortLabelSlotsAndSlotProps;
  defaultComponent: RootComponent;
}>;

declare const TableSortLabel: ExtendButtonBase<TableSortLabelTypeMap>;

export type TableSortLabelProps<
  RootComponent extends React.ElementType = TableSortLabelTypeMap['defaultComponent'],
  AdditionalProps = {},
> = OverrideProps<TableSortLabelTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
  component?: React.ElementType | undefined;
};
```

## 安装后验收

执行严格类型检查、生产构建和实际交互。检查键盘标签／焦点、原生支持的禁用／错误／只读语义、深浅色、窄屏和减少动画。按真实宿主数据检查回调，不把复制提示词当作安装完成。初始化工具还需检查服务端 HTML 与无告警水合。

## 来源与许可

https://github.com/mui/material-ui/tree/809a7717b4c050ba3f69b75300689f07c050a16e

MIT · @mui/material@9.4.0. 保留上游原始内容与许可证。上游完整原文保留于 vendor/docs，不标为全文中文化。

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt