antd 实现表头配置显示
import React, { useState } from 'react';
import { Table, Button, Modal, Checkbox } from 'antd';
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '地址',
dataIndex: 'address',
key: 'address',
},
];
const data = [
{
key: '1',
name: '张三',
age: 18,
address: '北京市',
},
{
key: '2',
name: '李四',
age: 20,
address: '上海市',
},
{
key: '3',
name: '王五',
age: 22,
address: '广州市',
},
];
const HeaderConfigTable = () => {
const [visible, setVisible] = useState(false);
const [checkedColumns, setCheckedColumns] = useState(columns.map((column) => column.key));
const handleOk = () => {
setVisible(false);
};
const handleCancel = () => {
setVisible(false);
};
const handleCheckboxChange = (checkedValues) => {
setCheckedColumns(checkedValues);
};
const showModal = () => {
setVisible(true);
};
return (
<>
<Button onClick={showModal}>表头配置</Button>
<Table columns={columns.filter((column) => checkedColumns.includes(column.key))} dataSource={data} />
<Modal title="表头配置" visible={visible} onOk={handleOk} onCancel={handleCancel}>
<Checkbox.Group options={columns.map((column) => ({ label: column.title, value: column.key }))} value={checkedColumns} onChange={handleCheckboxChange} />
</Modal>
</>
);
};
export default HeaderConfigTable;