React中使用TanStack Table为表头单元格添加点击事件

我正在开发一个React项目并实现表格功能，希望点击表头单元格时弹出提示框显示相关信息。尝试查找为表头单元格添加点击监听器的方法但未找到有效帮助，以下是我的代码，请求提供解决方法：

Inventories.js

import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
import { Table } from '@/components'
import { queries } from '@/utils/queries'

const inventoryColumnHelper = createColumnHelper()
const inventoryColumns = [
  inventoryColumnHelper.accessor('id', {
    header: () => 'ID',
    cell: (info) => <span className="font-semibold">{info.getValue()}</span>,
  }),
  inventoryColumnHelper.accessor('name', {
    id: 'inventory-name',
    cell: (info) => (
      <div className="space-y-1">
        <div>{info.getValue()}</div>
      </div>
    ),
    header: () => 'NAME',
    // On Name header Click , I want to show a popup.
    // onHeaderClick()
  }),
]

function Inventories() {
  const query = useQuery(queries.inventories.all())
  const table = useReactTable({
    data: query.data?.data.rows ?? [],
    columns: inventoryColumns,
    getCoreRowModel: getCoreRowModel(),
    paginateExpandedRows: false,
  })

  const onHeaderClick = () => {
    console.log('Console this message to show header click')
  }

  return (
    <>
      <div className="mt-6 opacity-40 transition-all">
        <div className="block">
          <Table table={table} onRowClick={(row) => console.log('Row Click:', row)} />
        </div>
      </div>
    </>
  )
}

export default Inventories

解决方法 #

方案1：在列定义的header组件中直接绑定点击事件 #

修改name列的header配置，将文本包裹在可点击元素中，并绑定点击逻辑：

function Inventories() {
  const onHeaderClick = () => {
    console.log('Console this message to show header click')
    alert('NAME表头被点击') // 替换为你的提示框逻辑
  }

  const inventoryColumns = [
    inventoryColumnHelper.accessor('id', {
      header: () => 'ID',
      cell: (info) => <span className="font-semibold">{info.getValue()}</span>,
    }),
    inventoryColumnHelper.accessor('name', {
      id: 'inventory-name',
      cell: (info) => (
        <div className="space-y-1">
          <div>{info.getValue()}</div>
        </div>
      ),
      // 给表头元素添加点击事件
      header: () => <div onClick={onHeaderClick}>NAME</div>,
    }),
  ]

  // 其余代码不变
}

方案2：通过React Table全局配置监听表头点击 #

如果需要监听所有表头的点击，或者需要获取点击的列信息，可以在useReactTable的配置中添加onHeaderClick选项：

const table = useReactTable({
  data: query.data?.data.rows ?? [],
  columns: inventoryColumns,
  getCoreRowModel: getCoreRowModel(),
  paginateExpandedRows: false,
  // 全局表头点击事件
  onHeaderClick: (info) => {
    console.log('点击的列ID:', info.column.id)
    // 仅针对name列触发提示
    if (info.column.id === 'inventory-name') {
      alert('NAME表头被点击')
    }
  },
})

注意事项 #

如果你使用的是自定义Table组件，需要确保组件内部渲染表头单元格时，正确传递点击事件。示例自定义组件内的表头渲染逻辑：

{table.getHeaderGroups().map(headerGroup => (
  <tr key={headerGroup.id}>
    {headerGroup.headers.map(header => (
      <th 
        key={header.id} 
        onClick={() => table.options.onHeaderClick?.({ column: header.column })}
      >
        {header.isPlaceholder ? null : header.renderHeader()}
      </th>
    ))}
  </tr>
))}

内容的提问来源于stack exchange，提问作者Nadeem Yousaf