当前位置：首页 > React

react使用antd实现表格

2026-01-27 13:20:04React

安装依赖

确保项目中已安装 antd 和 react。若未安装，可通过以下命令安装：

npm install antd react react-dom

引入组件

在需要使用表格的组件中，引入 Table 和相关必要的组件：

import { Table } from 'antd';

定义数据源

准备表格的数据源（dataSource）和列配置（columns）。数据源通常是对象数组，列配置定义每列的标题、数据键和渲染方式：

const dataSource = [
  { key: '1', name: 'John', age: 32 },
  { key: '2', name: 'Jane', age: 28 },
];

const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
];

渲染表格

在组件中直接使用 Table 组件，传入 dataSource 和 columns：

function MyTable() {
  return <Table dataSource={dataSource} columns={columns} />;
}

添加分页

通过 pagination 属性启用分页功能，可自定义分页配置：

<Table 
  dataSource={dataSource} 
  columns={columns} 
  pagination={{ pageSize: 5 }} 
/>

自定义样式

通过 className 或内联样式调整表格外观。例如，设置表格边框：

<Table 
  dataSource={dataSource} 
  columns={columns} 
  bordered 
/>

高级功能

排序：在列配置中添加 sorter 属性。
筛选：使用 filters 和 onFilter 实现列筛选。
行选择：通过 rowSelection 添加复选框。

示例代码整合：

react使用antd实现表格

import { Table } from 'antd';

const dataSource = [
  { key: '1', name: 'John', age: 32 },
  { key: '2', name: 'Jane', age: 28 },
];

const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age', sorter: (a, b) => a.age - b.age },
];

function App() {
  return (
    <Table 
      dataSource={dataSource} 
      columns={columns} 
      pagination={{ pageSize: 5 }} 
      bordered 
    />
  );
}