react antd table点击表头事件onHeaderCell

在Ant Design的Table组件中，可以通过使用onHeaderCell属性来访问表头单元格，并绑定点击事件。

代码中对columns数组中的每个对象都调用了.map()方法，并对每个对象添加了onHeaderCell属性。这个属性接受一个函数，该函数返回一个对象，该对象的onClick属性是我们要处理的点击事件处理函数。当你点击表头时，handleHeaderCellClick函数将被调用，并且相关的列标题将会被打印到控制台。

import React from 'react';
import { Table } from 'antd';
 
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  // 其他列...
];
 
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
  },
  // 其他数据...
];
 
const App = () => {
  const handleHeaderCellClick = (column) => {
    console.log('Clicked column:', column.title);
  };
 
  return (
    <Table
      columns={columns.map((col) => ({
        ...col,
        onHeaderCell: (column) => ({
          onClick: () => handleHeaderCellClick(column),
        }),
      }))}
      dataSource={data}
    />
  );
};
 
export default App;