From b89ba08ae06bf0140f0bc92f10e9a09c1484cdba Mon Sep 17 00:00:00 2001
From: WK <wingkwong.code@gmail.com>
Date: Thu, 4 Dec 2025 23:13:46 +0800
Subject: [PATCH] fix(table): virtualized table in firefox by replacing Spacer
 with css (#5963)

* chore(deps): remove spacer and bump theme peer dependency

* refactor(table): remove spacer

* fix(theme): replace spacer by css

* chore(changeset): add changeset

* chore(changeset): update changeset message
---
 .changeset/brown-taxis-share.md                     | 6 ++++++
 packages/components/table/package.json              | 3 +--
 packages/components/table/src/table.tsx             | 2 --
 packages/components/table/src/virtualized-table.tsx | 2 --
 packages/core/theme/src/components/table.ts         | 2 +-
 pnpm-lock.yaml                                      | 3 ---
 6 files changed, 8 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/brown-taxis-share.md

diff --git a/.changeset/brown-taxis-share.md b/.changeset/brown-taxis-share.md
new file mode 100644
index 000000000..3bf4420b9
--- /dev/null
+++ b/.changeset/brown-taxis-share.md
@@ -0,0 +1,6 @@
+---
+"@heroui/table": patch
+"@heroui/theme": patch
+---
+
+fix(table): virtualized table in firefox by replacing Spacer with css (#2108, #5479)
diff --git a/packages/components/table/package.json b/packages/components/table/package.json
index 641461087..1c3cb7d99 100644
--- a/packages/components/table/package.json
+++ b/packages/components/table/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
-    "@heroui/theme": ">=2.4.17",
+    "@heroui/theme": ">=2.4.23",
     "@heroui/system": ">=2.4.18"
   },
   "dependencies": {
@@ -44,7 +44,6 @@
     "@heroui/react-utils": "workspace:*",
     "@heroui/shared-icons": "workspace:*",
     "@heroui/shared-utils": "workspace:*",
-    "@heroui/spacer": "workspace:*",
     "@react-aria/focus": "3.21.2",
     "@react-aria/interactions": "3.25.6",
     "@react-aria/table": "3.17.8",
diff --git a/packages/components/table/src/table.tsx b/packages/components/table/src/table.tsx
index 783afdff3..d5e73db86 100644
--- a/packages/components/table/src/table.tsx
+++ b/packages/components/table/src/table.tsx
@@ -1,7 +1,6 @@
 import type {UseTableProps} from "./use-table";
 
 import {useCallback} from "react";
-import {Spacer} from "@heroui/spacer";
 import {forwardRef} from "@heroui/system";
 
 import {useTable} from "./use-table";
@@ -111,7 +110,6 @@ const Table = forwardRef<"table", TableProps>((props, ref) => {
                   )}
                 </TableHeaderRow>
               ))}
-              <Spacer as="tr" tabIndex={-1} y={1} />
             </TableRowGroup>
             <TableBody
               checkboxesProps={values.checkboxesProps}
diff --git a/packages/components/table/src/virtualized-table.tsx b/packages/components/table/src/virtualized-table.tsx
index 11eeafe55..3dc3f85ec 100644
--- a/packages/components/table/src/virtualized-table.tsx
+++ b/packages/components/table/src/virtualized-table.tsx
@@ -1,7 +1,6 @@
 import type {UseTableProps} from "./use-table";
 
 import {useCallback, useLayoutEffect, useRef, useState} from "react";
-import {Spacer} from "@heroui/spacer";
 import {forwardRef} from "@heroui/system";
 import {useVirtualizer} from "@tanstack/react-virtual";
 
@@ -128,7 +127,6 @@ const VirtualizedTable = forwardRef<"table", TableProps>((props, ref) => {
                   )}
                 </TableHeaderRow>
               ))}
-              <Spacer as="tr" tabIndex={-1} y={1} />
             </TableRowGroup>
             <VirtualizedTableBody
               checkboxesProps={values.checkboxesProps}
diff --git a/packages/core/theme/src/components/table.ts b/packages/core/theme/src/components/table.ts
index 5e4dd256b..9fab95be2 100644
--- a/packages/core/theme/src/components/table.ts
+++ b/packages/core/theme/src/components/table.ts
@@ -54,7 +54,7 @@ const table = tv({
       "overflow-auto",
     ],
     table: "min-w-full h-auto",
-    thead: "[&>tr]:first:rounded-lg",
+    thead: "[&>tr]:first:rounded-lg after:content-[''] after:table-row after:h-[5px]",
     tbody: "after:block",
     tr: ["group/tr", "outline-solid outline-transparent", ...dataFocusVisibleClasses],
     th: [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9b8234d1e..c47e1fafe 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2695,9 +2695,6 @@ importers:
       '@heroui/shared-utils':
         specifier: workspace:*
         version: link:../../utilities/shared-utils
-      '@heroui/spacer':
-        specifier: workspace:*
-        version: link:../spacer
       '@react-aria/focus':
         specifier: 3.21.2
         version: 3.21.2(react-dom@18.3.0(react@18.3.0))(react@18.3.0)