fix(table): sticky header & content placement in virtualized table (#5184)

* fix(table): header sticky in virtualized table + topContent and bottom content placement fix

* fix(table): header sticky in virtualized table PR return

* chore(changeset): revise changeset msg

---------

Co-authored-by: աӄա <wingkwong.code@gmail.com>

.changeset/violet-years-rhyme.md

@@ -0,0 +1,5 @@
+---
+"@heroui/table": patch
+---
+
+fix(table): Header sticky in virtualized table + topContent and bottom content placement fix in virtualized table (#5149)

packages/components/table/src/virtualized-table.tsx

@@ -81,16 +81,22 @@ const VirtualizedTable = forwardRef<"table", TableProps>((props, ref) => {
     overscan: 5,
   });
 
+  const tableProps = getTableProps();
+
   return (
     <div {...getBaseProps()}>
       {/* We need to add p-1 to make the shadow-sm visible */}
+      {topContentPlacement === "outside" && topContent}
       <Wrapper>
-        <>
-          {topContentPlacement === "outside" && topContent}
-          <div style={{height: `calc(${rowVirtualizer.getTotalSize() + headerHeight}px)`}}>
         <>
           {topContentPlacement === "inside" && topContent}
-              <Component {...getTableProps()}>
+          <Component
+            {...tableProps}
+            style={{
+              height: `calc(${rowVirtualizer.getTotalSize() + headerHeight}px)`,
+              ...tableProps.style,
+            }}
+          >
             <TableRowGroup ref={headerRef} classNames={values.classNames} slots={values.slots}>
               {collection.headerRows.map((headerRow) => (
                 <TableHeaderRow
@@ -142,10 +148,8 @@ const VirtualizedTable = forwardRef<"table", TableProps>((props, ref) => {
           </Component>
           {bottomContentPlacement === "inside" && bottomContent}
         </>
-          </div>
-          {bottomContentPlacement === "outside" && bottomContent}
-        </>
       </Wrapper>
+      {bottomContentPlacement === "outside" && bottomContent}
     </div>
   );
 });

packages/components/table/stories/table.stories.tsx

@@ -1160,6 +1160,14 @@ export const Virtualized = {
   },
 };
 
+export const VirtualizedWithHeaderSticky = {
+  ...Virtualized,
+  args: {
+    ...Virtualized.args,
+    isHeaderSticky: true,
+  },
+};
+
 export const TenThousandRows = {
   render: VirtualizedTemplate,
   args: {

packages/core/theme/src/components/table.ts

@@ -55,7 +55,7 @@ const table = tv({
     ],
     table: "min-w-full h-auto",
     thead: "[&>tr]:first:rounded-lg",
-    tbody: "",
+    tbody: "after:block",
     tr: ["group/tr", "outline-none", ...dataFocusVisibleClasses],
     th: [
       "group/th",