[BUG] - Table has a Spacer causing issue when Wanting to Create a custom Table Design

[Hurly77]

NextUI Version

2.2.9

Describe the bug

I'm customizing the <Table/> component and attempting to apply my own classNames to alter the header appearance to a more standard style. However, after overriding the default classNames, I'm observing a gap following the headers, as shown in the attached screenshot. This seems to be caused by the <Spacer as="tr" tabIndex={-1} y={1} /> component that is part of the Table component's structure. https://github.com/nextui-org/nextui/blob/main/packages/components/table/src/table.tsx.

I'm wondering if it would be possible to add an additional Prop like withoutSpacer

It seems like it would be pretty simple to implement

{props?.withoutSpacer ? null :  <Spacer as="tr" tabIndex={-1} y={1} />}

Here is an Example of my Custom Table:

Here is a full Code Example

import { faker } from "@faker-js/faker";
import { Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from "@nextui-org/react";
import React from "react";
type TableColType = {
  uid: string;
  name: string;
};

type TableRowType = {
  id: string;
  name: string;
  age: number;
  address: string;
};

export default function NextUICustomTable() {
  const fakeTableColumns: TableColType[] = [
    { uid: "name", name: "Name" },
    { uid: "age", name: "Age" },
    { uid: "address", name: "Address" },
  ];

  const tableRows: TableRowType[] = React.useMemo(() => {
    return Array.from({ length: 5 }, () => ({
      id: faker.string.uuid(),
      name: faker.person.fullName(),
      age: faker.number.int({ min: 18, max: 72 }),
      address: faker.location.streetAddress(),
    }));
  }, []);

  const renderTableColumn = React.useCallback((col: TableColType) => {
    switch (col.uid) {
      default:
        return col.name;
    }
  }, []);

  const renderTableCell = React.useCallback((row: TableRowType, key: React.Key) => {
    const value = row[key as keyof TableRowType];
    switch (key) {
      default:
        return value;
    }
  }, []);

  return (
    <Table
      radius="sm"
      classNames={{
        table: "p-0 m-0",
        thead: "[&>tr]:first:shadow-none [&>tr]:first:rounded-none border-b-2 border-default-200",
        th: "bg-transparent font-bold text-lg text-green-500 border-r-2 border-default-200 last:border-none pb-0 rounded-none first:rounded-t-none first:rounded-b-none last:rounded-t-none last:rounded-b-none last:rounded-t-none",
        base: "h-full max-w-5xl h-fit",
        td: "text-lg border-r-2 last:border-none border-default-200",
        wrapper: "bg-background dark:bg-default-100 max-w-5xl",
        tbody: "border-t",
        tr: "even:bg-green-500 even:bg-opacity-50 data-[selected=true]:bg-default-100",
      }}
    >
      <TableHeader columns={fakeTableColumns}>
        {(col) => <TableColumn key={col.uid}>{renderTableColumn(col)}</TableColumn>}
      </TableHeader>
      {
        <TableBody items={tableRows}>
          {(tableRow) => (
            <TableRow key={tableRow.id}>
              {(columnKey) => <TableCell>{renderTableCell(tableRow, columnKey)}</TableCell>}
            </TableRow>
          )}
        </TableBody>
      }
    </Table>
  );
}

There is a work around how ever it is not Ideal.

React.useEffect(() => {
    // removes an odd spacer that appears in the table header
    if (typeof window !== "undefined") {
      const elm = document.querySelector("table > thead > tr[tabindex='-1']");
      if (elm) {
        elm.remove();
      }
    }
  }, []);

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Create a new NextJS Project
2. npm i @nextui-org/react framer-motion
3. Create a Table with @nextui-org/react
4. use the code snippet in the issue if you need
5. Observer

I don't think it is necessarily an issue you'd need to try and reproduce as it is already clear to me what the problem is.

Expected behavior

Spacer would be optional

Screenshots or Videos

Operating System Version

Ubuntu 22.04.3 LTS

Browser

Chrome

[RobinGiel]

Hi @Hurly77 there is a second tr indeed in the Table Header, I used this tailwindcss to disable that margin-top:
[&>tr:last-child]:!mt-0

taken from the example: classNames={{ base: 'max-h-[520px]', table: 'min-h-[400px]', thead: '[&>tr:last-child]:!mt-0

[ziracmo]

Hello! I have the same issue concerning the table header.

I had to add a class to remove this space. [&>tr:last-child]:!h-0

A full fix is [&>tr:last-child]:!mt-0 [&>tr:last-child]:!h-0

[elanclarkson]

A thead row shouldn't be used for layout spacing - it is semantically illogical and creates invalid HTML without a th.

That said... There doesn't appear to be any ideal way to achieve this spacing anyway. https://stackoverflow.com/questions/9258754/spacing-between-thead-and-tbody

... So thanks for the hacks to get around this spacer which is also unwanted in my project! In my case I added the following to the classNames property on the <Table> component: { thead: "[&>tr:last-child]:hidden" }.

[lidforce]

added the following to the classNames property on the <Table> component: { thead: "[&>tr:last-child]:hidden" }.

@elanclarkson, thanks, i was looking for a solution for such a case and thanks to you i found it <3