From 5ea479f6c464ab5e9a62a0cb15e034638ea8dfd5 Mon Sep 17 00:00:00 2001
From: Alpha Xek <116849110+alphaxek@users.noreply.github.com>
Date: Fri, 15 Mar 2024 17:50:36 +0530
Subject: [PATCH] fix(table striped): isStriped prop fix for multiple computed
 values in `td`  (#2509)

* fix(table striped): multiple computed values in `td`

Fixed `Table` rendering the contents of the cell beneath the stripe for the multiple computed values

* fix(table striped): multiple computed values in `td`

* fix(table striped): changeset fix

* fix(table striped): changeset description enhancement

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

---------

Co-authored-by: Alpha <116849110+alpha-xek@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 .changeset/empty-eels-compare.md            | 5 +++++
 packages/core/theme/src/components/table.ts | 1 +
 2 files changed, 6 insertions(+)
 create mode 100644 .changeset/empty-eels-compare.md

diff --git a/.changeset/empty-eels-compare.md b/.changeset/empty-eels-compare.md
new file mode 100644
index 000000000..d27f06ada
--- /dev/null
+++ b/.changeset/empty-eels-compare.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/table": patch
+---
+
+Fixed an issue where the `Table` component incorrectly rendered cell contents beneath the stripe when multiple computed values were provided in a `td` (table cell) element.
diff --git a/packages/core/theme/src/components/table.ts b/packages/core/theme/src/components/table.ts
index fd86cd4c8..b1643bef3 100644
--- a/packages/core/theme/src/components/table.ts
+++ b/packages/core/theme/src/components/table.ts
@@ -185,6 +185,7 @@ const table = tv({
         td: [
           "group-data-[odd=true]:before:bg-default-100",
           "group-data-[odd=true]:before:opacity-100",
+          "group-data-[odd=true]:before:-z-10",
         ],
       },
     },