如何使用react的Table组件
安装依赖
确保项目已安装Ant Design库，它是React中常用的UI组件库，包含Table组件。通过npm或yarn安装：
npm install antd
# 或
yarn add antd基本用法
引入Table组件及必要样式，通过dataSource和columns定义数据与列配置：
import { Table } from 'antd';
import 'antd/dist/antd.css';
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' },
];
function App() {
return <Table dataSource={dataSource} columns={columns} />;
}自定义列渲染
通过render函数自定义列内容，例如添加链接或按钮：
const columns = [
{
title: 'Action',
key: 'action',
render: (_, record) => (
<a onClick={() => alert(record.name)}>Edit</a>
),
},
];分页配置
Table默认支持分页，可通过pagination属性调整：
<Table
dataSource={dataSource}
columns={columns}
pagination={{ pageSize: 5, showSizeChanger: true }}
/>排序与筛选
在列配置中添加sorter和filters实现排序与筛选：
const columns = [
{
title: 'Age',
dataIndex: 'age',
key: 'age',
sorter: (a, b) => a.age - b.age,
filters: [
{ text: 'Under 30', value: 30 },
{ text: 'Over 30', value: 50 },
],
onFilter: (value, record) => record.age < value,
},
];异步加载数据
结合useState和useEffect实现动态数据加载：
import { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://api.example.com/data')
.then(res => res.json())
.then(data => setData(data));
}, []);
return <Table dataSource={data} columns={columns} />;
}行选择功能
通过rowSelection配置多选或单选：
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(selectedRows);
},
};
<Table rowSelection={rowSelection} dataSource={dataSource} columns={columns} />样式调整
使用className或内联样式覆盖默认样式：
<Table
dataSource={dataSource}
columns={columns}
style={{ backgroundColor: '#f0f0f0' }}
/>
