From 3e3694c2c767cadfd7dc150396b345b7f6a6f9a7 Mon Sep 17 00:00:00 2001
From: Hova25 <hovannes.markarian@gmail.com>
Date: Fri, 11 Apr 2025 19:37:17 +0200
Subject: [PATCH 1/3] fix(table): header sticky in virtualized table +
 topContent and bottom content placement fix

---
 .changeset/violet-years-rhyme.md              |   5 +
 .../table/src/virtualized-table-body.tsx      |   2 +-
 .../table/src/virtualized-table.tsx           | 114 +++++++++---------
 .../table/stories/table.stories.tsx           |   8 ++
 4 files changed, 73 insertions(+), 56 deletions(-)
 create mode 100644 .changeset/violet-years-rhyme.md

diff --git a/.changeset/violet-years-rhyme.md b/.changeset/violet-years-rhyme.md
new file mode 100644
index 0000000000..54a80a8af0
--- /dev/null
+++ b/.changeset/violet-years-rhyme.md
@@ -0,0 +1,5 @@
+---
+"@heroui/table": minor
+---
+
+fix(table): Header sticky in virtualized table + topContent and bottom content placement fix in virtualized table
diff --git a/packages/components/table/src/virtualized-table-body.tsx b/packages/components/table/src/virtualized-table-body.tsx
index 0ff1d651bc..d673ce15f9 100644
--- a/packages/components/table/src/virtualized-table-body.tsx
+++ b/packages/components/table/src/virtualized-table-body.tsx
@@ -157,7 +157,7 @@ const VirtualizedTableBody = forwardRef<"tbody", VirtualizedTableBodyProps>((pro
           </TableRow>
         );
       })}
-
+      <tr />
       {loadingContent}
       {emptyContent}
     </Component>
diff --git a/packages/components/table/src/virtualized-table.tsx b/packages/components/table/src/virtualized-table.tsx
index 1fbef2a004..bba4af9c2c 100644
--- a/packages/components/table/src/virtualized-table.tsx
+++ b/packages/components/table/src/virtualized-table.tsx
@@ -81,71 +81,75 @@ 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()}>
-                <TableRowGroup ref={headerRef} classNames={values.classNames} slots={values.slots}>
-                  {collection.headerRows.map((headerRow) => (
-                    <TableHeaderRow
-                      key={headerRow?.key}
-                      classNames={values.classNames}
-                      node={headerRow}
-                      slots={values.slots}
-                      state={values.state}
-                    >
-                      {[...headerRow.childNodes].map((column) =>
-                        column?.props?.isSelectionCell ? (
-                          <TableSelectAllCheckbox
-                            key={column?.key}
-                            checkboxesProps={values.checkboxesProps}
-                            classNames={values.classNames}
-                            color={values.color}
-                            disableAnimation={values.disableAnimation}
-                            node={column}
-                            selectionMode={values.selectionMode}
-                            slots={values.slots}
-                            state={values.state}
-                          />
-                        ) : (
-                          <TableColumnHeader
-                            key={column?.key}
-                            classNames={values.classNames}
-                            node={column}
-                            slots={values.slots}
-                            state={values.state}
-                          />
-                        ),
-                      )}
-                    </TableHeaderRow>
-                  ))}
-                  <Spacer as="tr" tabIndex={-1} y={1} />
-                </TableRowGroup>
-                <VirtualizedTableBody
-                  checkboxesProps={values.checkboxesProps}
+          {topContentPlacement === "inside" && topContent}
+          <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
+                  key={headerRow?.key}
                   classNames={values.classNames}
-                  collection={values.collection}
-                  color={values.color}
-                  disableAnimation={values.disableAnimation}
-                  isSelectable={values.isSelectable}
-                  rowVirtualizer={rowVirtualizer}
-                  selectionMode={values.selectionMode}
+                  node={headerRow}
                   slots={values.slots}
                   state={values.state}
-                />
-              </Component>
-              {bottomContentPlacement === "inside" && bottomContent}
-            </>
-          </div>
-          {bottomContentPlacement === "outside" && bottomContent}
+                >
+                  {[...headerRow.childNodes].map((column) =>
+                    column?.props?.isSelectionCell ? (
+                      <TableSelectAllCheckbox
+                        key={column?.key}
+                        checkboxesProps={values.checkboxesProps}
+                        classNames={values.classNames}
+                        color={values.color}
+                        disableAnimation={values.disableAnimation}
+                        node={column}
+                        selectionMode={values.selectionMode}
+                        slots={values.slots}
+                        state={values.state}
+                      />
+                    ) : (
+                      <TableColumnHeader
+                        key={column?.key}
+                        classNames={values.classNames}
+                        node={column}
+                        slots={values.slots}
+                        state={values.state}
+                      />
+                    ),
+                  )}
+                </TableHeaderRow>
+              ))}
+              <Spacer as="tr" tabIndex={-1} y={1} />
+            </TableRowGroup>
+            <VirtualizedTableBody
+              checkboxesProps={values.checkboxesProps}
+              classNames={values.classNames}
+              collection={values.collection}
+              color={values.color}
+              disableAnimation={values.disableAnimation}
+              isSelectable={values.isSelectable}
+              rowVirtualizer={rowVirtualizer}
+              selectionMode={values.selectionMode}
+              slots={values.slots}
+              state={values.state}
+            />
+          </Component>
+          {bottomContentPlacement === "inside" && bottomContent}
         </>
       </Wrapper>
+      {bottomContentPlacement === "outside" && bottomContent}
     </div>
   );
 });
diff --git a/packages/components/table/stories/table.stories.tsx b/packages/components/table/stories/table.stories.tsx
index e39864156d..e34fa8cd52 100644
--- a/packages/components/table/stories/table.stories.tsx
+++ b/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: {

From a8b7960530db796c924184e3555df1e1da83aec1 Mon Sep 17 00:00:00 2001
From: Hova25 <hovannes.markarian@gmail.com>
Date: Sun, 13 Apr 2025 12:17:11 +0200
Subject: [PATCH 2/3] fix(table): header sticky in virtualized table PR return

---
 .changeset/violet-years-rhyme.md                         | 4 ++--
 packages/components/table/src/virtualized-table-body.tsx | 2 +-
 packages/core/theme/src/components/table.ts              | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.changeset/violet-years-rhyme.md b/.changeset/violet-years-rhyme.md
index 54a80a8af0..3ce8718db9 100644
--- a/.changeset/violet-years-rhyme.md
+++ b/.changeset/violet-years-rhyme.md
@@ -1,5 +1,5 @@
 ---
-"@heroui/table": minor
+"@heroui/table": patch
 ---
 
-fix(table): Header sticky in virtualized table + topContent and bottom content placement fix in virtualized table
+fix(table): Header sticky in virtualized table + topContent and bottom content placement fix in virtualized table ([#5149](https://github.com/heroui-inc/heroui/issues/5149))
diff --git a/packages/components/table/src/virtualized-table-body.tsx b/packages/components/table/src/virtualized-table-body.tsx
index d673ce15f9..0ff1d651bc 100644
--- a/packages/components/table/src/virtualized-table-body.tsx
+++ b/packages/components/table/src/virtualized-table-body.tsx
@@ -157,7 +157,7 @@ const VirtualizedTableBody = forwardRef<"tbody", VirtualizedTableBodyProps>((pro
           </TableRow>
         );
       })}
-      <tr />
+
       {loadingContent}
       {emptyContent}
     </Component>
diff --git a/packages/core/theme/src/components/table.ts b/packages/core/theme/src/components/table.ts
index 8aa34e835d..5d4d763d78 100644
--- a/packages/core/theme/src/components/table.ts
+++ b/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",

From ed4a5fccd655eb472b5432931d6c75a4cca796a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= <wingkwong.code@gmail.com>
Date: Fri, 18 Apr 2025 11:14:48 +0800
Subject: [PATCH 3/3] chore(changeset): revise changeset msg

---
 .changeset/violet-years-rhyme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/violet-years-rhyme.md b/.changeset/violet-years-rhyme.md
index 3ce8718db9..0ce5335155 100644
--- a/.changeset/violet-years-rhyme.md
+++ b/.changeset/violet-years-rhyme.md
@@ -2,4 +2,4 @@
 "@heroui/table": patch
 ---
 
-fix(table): Header sticky in virtualized table + topContent and bottom content placement fix in virtualized table ([#5149](https://github.com/heroui-inc/heroui/issues/5149))
+fix(table): Header sticky in virtualized table + topContent and bottom content placement fix in virtualized table (#5149)