# Table

- Page: https://jiguang132.com/resources/material-ui/docs/table
- Resource: Material UI (https://jiguang132.com/resources/material-ui.md)
- All guides: https://jiguang132.com/resources/material-ui/docs.md

Render semantic tables with host-managed rows, sorting and pagination.

This guide covers Material UI Core with the default Emotion engine; extensions and additional demos are explicitly classified.

## Use case and business boundary

Core Table is not MUI X DataGrid or automatic virtualization; preserve header scope and implement data operations separately.

## Native composition and scope

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

Preserve native Material UI composition and types; do not substitute JGuang UI/Base UI/Radix APIs. Example entries are not extra components.

## Native installation and initialization

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

Use native npm and Emotion, not an invented JGuang UI Registry URL. Place examples inside native ThemeProvider; choose CssBaseline or ScopedCssBaseline for the project. Inspect React, existing providers, lockfile and SSR first. Never overwrite files or conceal peer conflicts. This batch verified React 19.2.8; React 18 and below require matching react-is. See the included bilingual setup guide.

## Practical native parameters

These selected parameters are not a flattened universal API. Preserve the native declaring owner, slot structure, nullable values and generics.

| Owner.prop | Practical role | Declaration source |
| --- | --- | --- |
| `Table.size` | Owning native size: enum for controls, responsive column span for Grid. | `Table` |
| `Table.stickyHeader` | Enable a native sticky table header within a valid scroll container. | `Table` |
| `TableCell.scope` | Native TableCell header association, for example col or row. | `TableCell` |
| `TableSortLabel.active` | Mark a native sort affordance active; the host still sorts rows. | `TableSortLabel` |
| `TableSortLabel.direction` | Owning native direction enum; layout, sorting and transition directions differ. | `TableSortLabel` |

## Runnable native examples

Machine keys select example entries, not universal variant props. Native demo JSX/data stay unchanged; JGuang-authored acceptance fixtures are explicitly labelled.

- Basic table · `BasicTable` · upstream native demo
- Dense table · `DenseTable` · upstream native demo
- Sorting & selecting · `EnhancedTable` · upstream native demo
- Customization · `CustomizedTables` · upstream native demo
- Custom pagination actions · `CustomPaginationActionsTable` · upstream native demo
- Sticky header · `StickyHeadTable` · upstream native demo
- Column grouping · `ColumnGroupingTable` · upstream native demo
- Collapsible table · `CollapsibleTable` · upstream native demo
- Spanning table · `SpanningTable` · upstream native demo
- Caption · `AccessibleTable` · upstream native demo

## Explicitly unsupported additional examples

These remain in the upstream inventory, not silently skipped or presented as working previews. Additional dependency/framework acceptance is required.

- Data table · `DataTable`: `@mui/x-data-grid`
- Virtualized table · `ReactVirtualizedTable`: `react-virtuoso`, `chance`

## Actual usage example

Unmodified pinned native demo; copy its required local helper files together.

```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>
  );
}

```

## Example dependency boundaries

`@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`

Direct Icons/System/Utils example imports require their matching 9.4.0 packages. Relative data/helpers are part of the example closure, not extra components. Remote images and simulated operations do not supply a backend.

## Pinned upstream API metadata reference

These tables retain the upstream metadata, not a newly inferred generic type system. Conditional generics, inherited props and callback details are defined by the source declarations below. Theme defaults may override metadata defaults.

### Table

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

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `children` | no | `node` | — |
| `classes` | no | `object` | — |
| `component` | no | `elementType` | — |
| `padding` | no | `'checkbox' \| 'none' \| 'normal'` | `'normal'` |
| `size` | no | `'medium' \| 'small' \| string` | `'medium'` |
| `stickyHeader` | no | `bool` | `false` |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |



### TableBody

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

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `children` | no | `node` | — |
| `classes` | no | `object` | — |
| `component` | no | `elementType` | — |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |



### TableCell

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

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `align` | no | `'center' \| 'inherit' \| 'justify' \| 'left' \| 'right'` | `'inherit'` |
| `children` | no | `node` | — |
| `classes` | no | `object` | — |
| `component` | no | `elementType` | — |
| `padding` | no | `'checkbox' \| 'none' \| 'normal'` | — |
| `scope` | no | `string` | — |
| `size` | no | `'medium' \| 'small' \| string` | — |
| `sortDirection` | no | `'asc' \| 'desc' \| false` | — |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |
| `variant` | no | `'body' \| 'footer' \| 'head' \| string` | — |



### TableContainer

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

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `children` | no | `node` | — |
| `classes` | no | `object` | — |
| `component` | no | `elementType` | — |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |



### TableFooter

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

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `children` | no | `node` | — |
| `classes` | no | `object` | — |
| `component` | no | `elementType` | — |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |



### TableHead

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

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `children` | no | `node` | — |
| `classes` | no | `object` | — |
| `component` | no | `elementType` | — |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |



### TablePagination

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

Native inheritance: `TableCell`. Parent/DOM props are not fabricated as additional own props.

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `count` | yes | `integer` | — |
| `onPageChange` | yes | `func` | — |
| `page` | yes | `integer` | — |
| `rowsPerPage` | yes | `integer` | — |
| `ActionsComponent` | no | `elementType` | `TablePaginationActions` |
| `classes` | no | `object` | — |
| `component` | no | `elementType` | — |
| `disabled` | no | `bool` | `false` |
| `getItemAriaLabel` | no | `func` | `function defaultGetAriaLabel(type) { return `Go to ${type} page`; }` |
| `labelDisplayedRows` | no | `func` | `function defaultLabelDisplayedRows({ from, to, count }) { return `${formatNumber(from)}–${formatNumber(to)} of ${count !== -1 ? formatNumber(count) : `more than ${formatNumber(to)}`}`; }` |
| `labelRowsPerPage` | no | `node` | `'Rows per page:'` |
| `onRowsPerPageChange` | no | `func` | — |
| `rowsPerPageOptions` | no | `Array<number \| { label: string, value: number }>` | `[10, 25, 50, 100]` |
| `showFirstButton` | no | `bool` | `false` |
| `showLastButton` | no | `bool` | `false` |
| `slotProps` | no | `{ 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` | no | `{ 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` | no | `Array<func \| object \| bool> \| func \| object` | — |



### TableRow

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

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `children` | no | `node` | — |
| `classes` | no | `object` | — |
| `component` | no | `elementType` | — |
| `hover` | no | `bool` | `false` |
| `selected` | no | `bool` | `false` |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |



### TableSortLabel

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

Native inheritance: `ButtonBase`. Parent/DOM props are not fabricated as additional own props.

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `active` | no | `bool` | `false` |
| `children` | no | `node` | — |
| `classes` | no | `object` | — |
| `direction` | no | `'asc' \| 'desc'` | `'asc'` |
| `hideSortIcon` | no | `bool` | `false` |
| `IconComponent` | no | `elementType` | `ArrowDownwardIcon` |
| `slotProps` | no | `{ icon?: func \| object, root?: func \| object }` | `{}` |
| `slots` | no | `{ icon?: elementType, root?: elementType }` | `{}` |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |


## Native source declarations

Declarations/imports are extracted from pinned source without flattening unions or external inheritance. Original English comments/types are source reference, not a claim of translated upstream prose. Shared types stay in their native packages.

### 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;
};
```

## Post-install acceptance

Run strict types, production build and real interactions. Check keyboard labels/focus, disabled/error/read-only semantics where natively supported, both themes, narrow screens and reduced motion. Verify callbacks against the real host data; do not declare installation complete from copying a prompt. Initialization fixtures also require server HTML and warning-free hydration.

## Source and license

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

MIT · @mui/material@9.4.0. Vendor originals and license are preserved. Full original upstream prose remains in vendor/docs and is not represented as fully translated.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt