OnClick listener on cell element using TanStack Table using React

Question

I am working on a project in React and implement table. On table header cell click, I want to show an alert , that will display some information. I tried to find some help adding click listener on header cell but did not find any help. here is my code. 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

How i can solve this? any one can help me on this please?

Answer 1

I achieved this by passing a parameter to inventoryColumns.

const inventoryColumns = (onItemClick) => [
  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={onItemClick}>Name</div>,
  }),
]

and passed parameter like this

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

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

Answer 2

You can add a onClick handler on header like this

const inventoryColumns = [
  // ... other columns
  inventoryColumnHelper.accessor('name', {
    id: 'inventory-name',
    cell: (info) => (
      <div className="space-y-1">
        <div>{info.getValue()}</div>
      </div>
    ),
    header: () => (
      <div onClick={() => onHeaderClick('name')}>>
        NAME
      </div>
    ),
  }),
]

And you should the handler

function Inventories() {
  // ... other code

  const onHeaderClick = (key) => {
    alert('Some message here ' + key);
  }

  // ... rest of the component
}