表格 Table

用于数据收集展示、分析整理、操作处理。

安装

npm install @arco-design/web-react@2.66.18

在入口引入 @arco-design/web-react/dist/css/arco.css，用 ConfigProvider 设置语言。React 19 项目还需在入口最先引入 @arco-design/web-react/es/_util/react-19-adapter，否则 Message、Modal 等命令式 API 无法渲染。

示例

• 基础用法：最基础的用法。
• 开启选择：表格开启选择，可以设置 rowSelection.type 来使用复选框和单选框。 checkbox - 复选框。 radio - 单选框。
• 展开行：当内容过长，可以通过expandedRowRender设置展开行。如果返回值是 null，不会渲染展开按钮。
• 定制展开参数：可以通过 expandProps 定制展开列的图标，宽度，标题，是否展开等。 Tip: 正常情况下，是否展开是由 expandedRowRender 返回值决定的，如果过多的 expandedRowRender 计算导致卡顿，建议使用 expandProps.rowExpandable。
• 嵌套子表格：嵌套子表格的例子，点击展开按钮可以在展开区域展示子表格。
• 树形数据展示：树形数据展示的例子，data 里有 children 字段, 或者通过 childrenColumnName 设置成自定义字段。
• 表格属性：在这里，你可以方便的打开或关闭表格的属性，来看一下吧。
• 排序和筛选：配置 Column 的 sorter，可以对表格进行排序。 配置 Column 的 filters，可以对表格进行筛选。 sorter 为一个排序函数，当然，你也可以指定 sorter 为 true，这样你可以通过 Table 的 onChange 事件进行自定义排序。 filters 为一个数组，包含着要筛选的信息，需要配合 onFilter 使用。当然也可以配合 Table 的 onChange 事件进行自定义筛选或者服务端筛选。 默认排序和筛选：通过指定 defaultFilters 和 defaultSortOrder 可以指定默认的排序和筛选。
• 自定义筛选菜单：自定义筛选菜单。
• 多列排序：column.sorter 支持传入一个对象，指定该对象的 multiple 属性可以实现多列排序的效果。multiple为number类型，数字越大代表排序优先级越高。 注意： 多列排序配合 sortOrder 使用时，为保持状态一致性，所有指定了sorter的列都需要同时指定sortOrder（可为undefined），同时需要注意列之间的互斥关系。
• 自定义分页：自定义分页，通过设置 total，pageSize，通过 onChange 来动态更新表格数据。当分页设置 simple 为 true 时，会应用简单分页样式。关于 pagination 的具体设置可查看pagination 组件文档。通过 renderPagination 可以自定义分页渲染部分。
• 自定义单元格内容：通过 columns 中的 render 字段，可以自定义单元格的内容
• 固定列：在 column 中指定 fixed: "left" 或 fixed: "right"，可将列固定到左侧或右侧，设置 fixed 的列，也需要设置 width。 注意： 要配合 scroll={{ x: number }} 使用，columns 中需要有一列不设置宽度，自适应，不然会有样式问题。
• 自定义样式：有多种方式定制行列样式，rowClassName 可以对每一行进行样式定制，Column.className 可以对列进行样式定制。此外，还有 headerCellStyle, bodyCellStyle， 对表头和表格主体的列进行样式定制。
• 表头分组：columns 内可以嵌套 children，用于表头分组。
• 单元格合并：用于单元格合并，表头只能进行列合并。
• 可编辑单元格：可编辑单元格。
• 定制前置操作列：可以通过 components 来定制前置操作列，包括新增列、调整列的顺序等。
• 大数据：内置虚拟滚动逻辑，设置 virtualized=true 开启。 注意： 开启虚拟滚动之后，不要给每一列都设置宽度，要保证有一列自适应，不然可能出现表头表身对不齐的情况。
• 自定义空状态：当表格无数据时，默认会展示一个居中的提示信息。你可以通过 noDataElement 属性来自定义无数据时的展示内容。
• 总结栏：总结栏 summary 的用法。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

API

Table

RowSelection

<Table> 参数 rowSelection 的详细参数。

ExpandProps

<Table> 参数 expandProps 的详细参数。

Column

列描述数据对象，是 columns 中的一项。

ComponentsProps

export type ComponentsProps = {
  table?: any;
  header?: {
    operations?: (nodes: {
      selectionNode?: ReactNode;
      expandNode?: ReactNode;
    }) => {
      name?: string;
      node?: ReactNode;
      width?: number;
    }[];
    wrapper?: any;
    thead?: any;
    row?: any;
    th?: any;
    cell?: any;
  };
  body?: {
    operations?: (nodes: {
      selectionNode?: ReactNode;
      expandNode?: ReactNode;
    }) => {
      name?: string;
      node?: ReactNode | ((record) => ReactNode); // 2.17.0
      width?: number;
    }[];
    wrapper?: any;
    tbody?: any;
    row?: any;
    td?: any;
    cell?: any;
  };
};

SorterInfo

export interface SorterInfo {
  direction?: SortDirection;
  field?: string | number;
  sorterFn?: SorterFn;
  priority?: number;
}

SortDirection

export declare type SortDirection = "descend" | "ascend";

SorterFn

export type SorterFn = (a: any, b: any) => number;

RowCallbackProps

export type RowCallbackProps = {
  onClick?: (event) => void;
  onDoubleClick?: (event) => void;
  onContextMenu?: (event) => void;
  onMouseEnter?: (event) => void;
  onMouseLeave?: (event) => void;
  onHandleSave?: (row) => void;
  [name: string]: any;
};

AvailableVirtualListProps

export type AvailableVirtualListProps = Pick<
  VirtualListProps<any>,
  | "height"
  | "itemHeight"
  | "threshold"
  | "isStaticItemHeight"
  | "scrollOptions"
  | "onScroll"
  | "wrapperChild"
>;

隐藏分页

如果想在页数小于或等于一页时隐藏分页，可以配置 pagination.hideOnSinglePage = true，如果想全局配置， 可以配置 ConfigProvider 组件的 tablePagination.hideOnSinglePage = true。

onRow 用法

onRow, onHeaderRow, onCell, onHeaderCell 用法一致。

<Table
  onRow={(record, index) => {
    return {
      onClick: (event) => {}, // 点击表身行
      onDoubleClick: (event) => {},
      onContextMenu: (event) => {},
      onMouseEnter: (event) => {},
      onMouseLeave: (event) => {},
    };
  }}
  onHeaderRow={(column, index) => {
    return {
      onClick: (event) => {}, // 点击表头行
      onDoubleClick: (event) => {},
      onContextMenu: (event) => {},
      onMouseEnter: (event) => {},
      onMouseLeave: (event) => {},
    };
  }}
/>