可以通过设置fixed属性来固定表头,同时将滚动条包裹在一个滚动区域中。示例代码如下:
import React, { useState } from 'react';
import { Table, Input, Button } from 'antd';
const { Search } = Input;
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
fixed: 'left',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
{
title: 'Action',
key: 'action',
fixed: 'right',
render: () => (
),
},
];
const data = [];
for (let i = 0; i < 50; i++) {
data.push({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
});
}
const TableExample = () => {
const [searchText, setSearchText] = useState('');
const [searchedColumn, setSearchedColumn] = useState('');
const handleSearch = (selectedKeys, confirm, dataIndex) => {
confirm();
setSearchText(selectedKeys[0]);
setSearchedColumn(dataIndex);
};
const handleReset = clearFilters => {
clearFilters();
setSearchText('');
};
const getColumnSearchProps = dataIndex => ({
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
style={{ marginBottom: 8, display: 'block' }}
/>
上一篇:Antd表格根据动态数据进行分组
下一篇:AntD表格和每个卡片的输入字段
相关内容