React Antd(Ant Design)提供了丰富的组件库,其中包含了表格(Table)组件的使用。下面是使用React Antd表格的基本步骤:
首先,确保你已经安装了React和Antd。
在需要使用表格的组件中引入Antd和表格组件:
import React from 'react';
import { Table } from 'antd';
定义表格的列配置和数据源:
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
];
const data = [
{
key: '1',
name: 'John Doe',
age: 28,
address: '123 ABC Street',
},
{
key: '2',
name: 'Jane Smith',
age: 32,
address: '456 XYZ Street',
},
];
在组件中使用表格组件,并传入列配置和数据源:
const MyTable = () => {
return <Table columns={columns} dataSource={data} />;
};
最后,在需要展示表格的地方使用这个组件:
const App = () => {
return (
<div>
<h1>My Table</h1>
<MyTable />
</div>
);
};
以上是React Antd表格的基本用法。你可以根据自己的需求进行定制和扩展,比如添加分页、排序、筛选等功能。更多详细的用法和配置请查阅Antd官方文档。