[Feature request] We need a new component <Table.HeadRow>

[raky291]

• I have searched the Issues to see if this bug has already been reported
• I have tested the latest version

Summary

Hi, I'm trying to implement the @tanstack/react-table library with the Table component, but the tr in the <Table.Head> component is not accessible, and is hardcoded inside the component. Can make a new component for that element please? Regards.

https://github.com/themesberg/flowbite-react/blob/main/packages/ui/src/components/Table/TableHead.tsx#L29

Here is an example and the link to the library
https://tanstack.com/table/latest/docs/introduction

export default function Table<T>({ data, columns }: TableProps<T>) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <table>
      <thead>
        {table.getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id}> {/* Here, I want to have access to the tr so I can make header groups */}
            {headerGroup.headers.map((header) => (
              <th key={header.id}>
                {flexRender(
                  header.column.columnDef.header,
                  header.getContext()
                )}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map((row) => (
          <tr key={row.id}>
            {row.getVisibleCells().map((cell) => (
              <td key={cell.id}>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

[SutuSebastian]

Known issue, and also very annoying one. Hopefully we can get this one out in the next release, but users might not be happy since its a breaking change that puts some work on their end. In the end, its for the greater good.

[vaidikpatil5]

In the updated TableHead component, we will remove the hardcoded and allow passing custom elements, such as , directly as children. This will provide flexibility, enabling us to fully customize the structure of the table header. By doing this, we can add additional elements or modify the based on specific needs, making the component adaptable to various use cases. can u assign this issue to me @SutuSebastian @rluders
reguars.

[vaidikpatil5]

TableHead Component
Props:

renderHead (() => JSX.Element): A function that returns the header rows and cells for the table. This function should render the elements for the table header, along with the header cells ().
Description:

The TableHead component is used to render the table header. It accepts a renderHead function that should be used to dynamically generate the header rows and cells. This allows for greater flexibility in how table headers are rendered, particularly when dealing with dynamic or complex table structures.

import React from "react";
import { useReactTable, flexRender, getCoreRowModel } from "@tanstack/react-table";

// Define the props for the Table component
interface TableProps<T> {
  data: T[];
  columns: any[];
  renderHead?: (headerGroups: any) => React.ReactNode; // Add renderHead prop
}

export default function Table<T>({ data, columns, renderHead }: TableProps<T>) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  // Default renderHead function if none provided
  const defaultRenderHead = (headerGroups: any) => (
    <>
      {headerGroups.map((headerGroup: any) => (
        <tr key={headerGroup.id}>
          {headerGroup.headers.map((header: any) => (
            <th key={header.id}>
              {flexRender(header.column.columnDef.header, header.getContext())}
            </th>
          ))}
        </tr>
      ))}
    </>
  );

  return (
    <table>
      <thead>
        {renderHead ? renderHead(table.getHeaderGroups()) : defaultRenderHead(table.getHeaderGroups())}
      </thead>
      <tbody>
        {table.getRowModel().rows.map((row) => (
          <tr key={row.id}>
            {row.getVisibleCells().map((cell) => (
              <td key={cell.id}>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

@raky291

[vaidikpatil5]

https://github.com/themesberg/flowbite-react/pull/1487#issue-2519071118

[raky291]

Hi, thanks for your reply @vaidikpatil5 , but I already created a PR adding a component and it also supports the flowbite theme, and the PR has already been reviewed by @rluders . Is there any reason for not implementing my changes ?

[pkyPeter]

Hey guys, any update on this issue?
Thanks.