Table

Used for data collection, display, analysis, and processing.

Install

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

Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.

Examples

• Basic: The simplest usage.
• Selection: Table enable selection, you can set rowSelection.type to use checkbox and radio.
• Expandable row: When the content is too long, you can set the expanded row by expandedRowRender. If the return value is null, the expand button will not be rendered.
• Expand props: The icon, width, title, expandable etc. of the expanded column can be customized through expandProps. Tip: whether to expandable or not is determined by the return value of expandedRowRender. If too many expandedRowRender calculations block page render, it is recommended to use expandProps.rowExpandable.
• Nested Table: Examples of nested tables, click the expand button to display the sub tables in the expanded area.
• Tree Data: There is a children field in data, or set as a custom field by childrenColumnName to display tree data.
• Attributes: You can easily open or close the properties of the table.
• Sort and filter: Configure the sorter of Column to sort the table. Configure the filters of Column to filter the table. sorter is a sorting function. You can also specify sorter to true, so that you can customize the sorting through the onChange event of Table. filters is an array containing the information to be filtered, which needs to be used with onFilter. You can also use the onChange event of the Table for custom filtering or server-side filtering. Default sort and filter: You can specify the default sort and filter by specifying defaultFilters and defaultSortOrder.
• Custom filter dropdown: Custom filter dropdown.
• Multiple sorter: column.sorter supports passing in an object that has a multiple property that can be used to sort multiple columns. multiple is of type number. The larger the number, the higher the sorting priority. ** Note: ** Multiple column sorting with sortOrder when used, in order to maintain state consistency, all specified sorter columns need to specify sortOrder (can be undefined), while needing to pay attention to the mutual exclusion relationship between columns.
• Custom pagination: Custom pagination, by setting total, pageSize, and onChange to dynamically update table data. When the pagination setting simple is true, the simple pagination style will be applied. For the specific settings of pagination, please refer to the pagination component document. Through renderPagination, you can customize the pagination render.
• Custom cell content: The content of the cell can be customized through the render field in columns.
• Fixed columns: Specify fixed: "left" or fixed: "right" in column to fix the column to the left or right. To set the column of fixed, you also need to set width. Note: To be used with scroll={{ x: number }}, there needs to be a column in columns that does not set the width and is adaptive, otherwise there will be style problems.
• Customize style: There are many ways to customize the row and column styles. rowClassName can customize the style of each row, and Column.className can customize the style of columns. In addition, there are headerCellStyle and bodyCellStyle to customize the styles of the columns of the table header and table body.
• Group columns: children can be nested in columns for group columns.
• Cell merge: Used for cell merging, the header can only be column merged.
• Editable cell: Editable cell.
• Custom operation column: You can customize the operation column through components, including adding new columns, adjusting the order of columns, etc.
• Big Data: Built-in virtual scrolling logic, set virtualized=true to enable. Note: After enabling virtual scrolling, do not set the width for each column. Make sure that one column is adaptive, otherwise there may be misalignment between the header and the body.
• No Data Element: When the table has no data, a centered prompt message will be displayed by default. You can customize the display content when there is no data by using the noDataElement property.
• Summary: The usage of summary.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

API

Table

RowSelection

The detailed parameters of rowSelection.

ExpandProps

The detailed parameters of expandProps.

Column

The column describes the data object and is an item in 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"
>;

Hide Pagination

If you want to hide pagination when the number of pages is less than or equal to one page, you can configure pagination.hideOnSinglePage = true. If you want to configure it globally, You can configure the tablePagination.hideOnSinglePage = true of the ConfigProvider component.

onRow

onRow, onHeaderRow, onCell, onHeaderCell have the same usage.

<Table
  onRow={(record, index) => {
    return {
      onClick: (event) => {}, // Click on the body row
      onDoubleClick: (event) => {},
      onContextMenu: (event) => {},
      onMouseEnter: (event) => {},
      onMouseLeave: (event) => {},
    };
  }}
  onHeaderRow={(column, index) => {
    return {
      onClick: (event) => {}, // Click on the head row
      onDoubleClick: (event) => {},
      onContextMenu: (event) => {},
      onMouseEnter: (event) => {},
      onMouseLeave: (event) => {},
    };
  }}
/>