Question 267452 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – OnClick listener on cell element using TanStack Table using React

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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')
  }

  2. 0

    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
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search