Table: Sticky/Fixed action columns/cells

[jimmailcamp]

I would like to have a function where you could have sticky/fixed columns in the table so I can have table actions that are always in viewport.

Right now I've placed them as the first column, but ideally they are at the end of the table and always sticky on the x axis.

Definitly a nice to have!

[revoyrm]

+1

[revoyrm]

This is something other tables support - it would be really nice to have here

[Ejdyz]

This would be really useful, for example something like prime react did:

https://primereact.org/treetable/#frozen_columns

[rileybutterfield]

+1 this would be super helpful!

[timotheedorand]

You just need to add custom className to the correct slot.

import {
    Table
} from "@heroui/react";
...
 const classNames = React.useMemo(
        () => ({
          
            th:
                // Sticky positioning for first and last columns
                "first:sticky first:left-0 first:z-20 first:bg-gray-50",
                "last:sticky last:right-0 last:z-20 last:bg-gray-50",
            ],
            td: [              
                // Sticky positioning for first and last columns
                "first:sticky first:left-0 first:z-10 first:bg-white",
                "last:sticky last:right-0 last:z-10 last:bg-white",
                // Add shadow to distinguish sticky columns
                "first:shadow-[2px_0_4px_-1px_rgba(0,0,0,0.1)]",
                "last:shadow-[-2px_0_4px_-1px_rgba(0,0,0,0.1)]",
            ]
        }),
        [spreadsheetMode]
    );

    return (
        <Table
              classNames={classNames}
          >