How to customize Table header when isHeaderSticky prop applied?

[Aux9]

If we applied isHeaderSticky prop on a Table, it would add another style like some kind of shadow or outline or maybe sort of border, how can we remove that?

My code to produce the picture above is:

<Table
    removeWrapper
    isHeaderSticky                    
    classNames={{ 
      th: ["!rounded-none", "!shadow-none", "!border-none"],          
    }}
    >
    <TableHeader>
      <TableColumn key="name">NAME</TableColumn>
      <TableColumn key="role">ROLE</TableColumn>
      <TableColumn key="status">STATUS</TableColumn>
    </TableHeader>
    <TableBody items={items} emptyContent={"No permits found"}>              
    </TableBody>
  </Table>

I'm using (Vite + ReactJS + Tailwind CSS v3 + HeroUi).

I tried this:

classNames={{ 
th: ["!border-none", "!rounded-none", "!shadow-none"], 
}}

but it's not working, so any idea please?

[dharmveer97]

---

Solution:

I've solved this issue in my case, and this might work for you as well! This solution is specifically for light mode, but you can adjust the classes accordingly for dark mode. For example, you can use:

text-white dark:text-white

Also, if there are extra classes, feel free to remove them based on your setup. In my case, the issue was related to the outline, which was preventing the border from appearing correctly.

Here’s what my main component looks like:

'use client';

import { Table, cn as clsx } from '@heroui/react';

const TableGroup = ({
  children,
  bottomContent,
  topContent,
  sortDescriptor,
  onSortChange,
  onRowAction,
  ...props
}) => {
  const commonClasses = {
    resetBorders: '!border-none !shadow-none',
    transparent:
      '!outline-[2px_solid_transparent] !outline-transparent !outline-offset-0',
    whiteBackground: '!bg-white',

    // this is only for custom sorting table header aligning arrow button in one line
    sortableStyle:
      'data-[sortable=true]:flex data-[sortable=true]:justify-center data-[sortable=true]:items-center',
  };
  return (
    <Table
      {...props}
      aria-label="table with custom cells, pagination and sorting"
      isHeaderSticky
      bottomContentPlacement="outside"
      classNames={{
        wrapper: clsx(
          commonClasses.transparent,
          commonClasses.whiteBackground,
          commonClasses.resetBorders,
          'max-h-[382px] md:max-h-[67vh]',
        ),
        thead: clsx(
          commonClasses.resetBorders,
          commonClasses.transparent,
          commonClasses.whiteBackground,
        ),
        th: clsx(
          commonClasses.resetBorders,
          commonClasses.transparent,
          commonClasses.whiteBackground,
          commonClasses.sortableStyle,
          '!rounded-s-none !rounded-e-none',
        ),
        tr: clsx(
          commonClasses.resetBorders,
          commonClasses.transparent,
          commonClasses.whiteBackground,
          commonClasses.sortableStyle,
        ),
      }}
      onRowAction={onRowAction}
      topContentPlacement="outside"
      bottomContent={bottomContent}
      sortDescriptor={sortDescriptor}
      topContent={topContent}
      onSortChange={onSortChange}
    >
      {children}
    </Table>
  );
};

export default TableGroup;

If you're facing a similar issue, try adjusting your outline styles or ensuring that your border classes are correctly applied. Hope this helps! 🚀

---