Cannot use Table.HeadCell outside Table.Head

[lars-jpeg]

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

Steps to reproduce

1. Try to call Table.HeadCell outside Table.Head -> You get an error "useTableHeadContext should be used within the TableHeadContext provider!"

Current behavior

Requiring that HeadCell can only be used within Table.Head means that we cannot use the Table components to create tables where we have the first column acting as a table header - such as the tables outlined in the examples here: W3Schools - HTML Table Headers.

Expected behavior

No errors when calling Table.HeadCell outside Table.Head so that we can create tables with the first column acting as the tables head.

Fix?

The HeaderContext seems to be doing only theme related stuff. Can we move the context into TableContext instead?

[lancegliser]

I'm running into similar issues in the other direction. According to Axe ruleset's https://dequeuniversity.com/rules/axe/4.5/empty-table-header we shouldn't be using a th in the header for a column without a heading. Should be td. An example of this might be something like a favorite icon, actions menu, type etc.

[lancegliser]

A quick cheat I used, you might be able to do the same until they give us an as.

import { FC } from "react";
import { twMerge } from "tailwind-merge";
import { TableHeadCellProps as FlowbiteTableHeadCellProps, getTheme } from "flowbite-react";

export type TableHeadCellProps = FlowbiteTableHeadCellProps & {
  as?: "td" | "th";
};
export const TableHeadCell: FC<TableHeadCellProps> = ({ as = "th", ...props }) => {
  const tableTheme = getTheme().table;

  const Element = as;
  return <Element {...props} className={twMerge(tableTheme.head.cell.base, props.className)} />;
};

<Table.Head>
  <TableHeadCell as="td" className="px-0 group-first/head:first:rounded-none" />
  <Table.HeadCell className="min-w-48 pl-2">{t("projects.about.name")}</Table.HeadCell>