From 59202f897dc1f1b48e5a79a36c6e4a97e5ef3061 Mon Sep 17 00:00:00 2001
From: Tucker McCoy <tuckermmccoy@gmail.com>
Date: Thu, 12 Feb 2026 14:57:39 -0500
Subject: [PATCH 1/2] feat(ui): added emptyState prop to table for handling no
 data and keeping formatting

---
 packages/demo/src/components/demo/table.tsx   | 44 ++++++++++++++++++-
 .../demo/src/content/components/table.mdx     | 22 ++++++++++
 packages/ui/package.json                      |  2 +-
 .../ui/src/components/table/table.module.css  |  4 ++
 packages/ui/src/components/table/table.tsx    | 42 ++++++++++++------
 5 files changed, 97 insertions(+), 17 deletions(-)

diff --git a/packages/demo/src/components/demo/table.tsx b/packages/demo/src/components/demo/table.tsx
index d942ac72..5f04fff9 100644
--- a/packages/demo/src/components/demo/table.tsx
+++ b/packages/demo/src/components/demo/table.tsx
@@ -1,5 +1,11 @@
-import { Button, SortButton, Table, Badge } from "@eqtylab/equality";
 import type { Elevation } from "@eqtylab/equality";
+import {
+  Badge,
+  Button,
+  EmptyTableState,
+  SortButton,
+  Table,
+} from "@eqtylab/equality";
 
 interface TableDemoProps {
   variant?:
@@ -7,7 +13,9 @@ interface TableDemoProps {
     | "clickable"
     | "with-actions"
     | "with-border"
-    | "with-sorter";
+    | "with-sorter"
+    | "empty-state"
+    | "empty-state-custom";
   elevation: Elevation;
 }
 
@@ -187,6 +195,38 @@ export const TableDemo = ({
     );
   }
 
+  if (variant === "empty-state") {
+    return (
+      <Table
+        columns={columns}
+        rows={[]}
+        border
+        elevation={elevation}
+        emptyState="No data available"
+      />
+    );
+  }
+
+  if (variant === "empty-state-custom") {
+    return (
+      <Table
+        columns={columns}
+        rows={[]}
+        border
+        elevation={elevation}
+        emptyState={
+          <EmptyTableState
+            icon="SearchX"
+            title="No Members Found"
+            description="Try refining your search terms or clearing filters."
+            showClearButton
+            onClear={() => {}}
+          />
+        }
+      />
+    );
+  }
+
   if (variant === "with-sorter") {
     const columns_with_sorter = [
       {
diff --git a/packages/demo/src/content/components/table.mdx b/packages/demo/src/content/components/table.mdx
index e6a7d035..3088fc13 100644
--- a/packages/demo/src/content/components/table.mdx
+++ b/packages/demo/src/content/components/table.mdx
@@ -25,6 +25,18 @@ import { ELEVATION } from "@eqtylab/equality";
 
 <TableDemo client:only="react" variant="with-sorter" />
 
+### Empty State
+
+When `rows` is empty and `emptyState` is provided, the table keeps column headers visible and renders the empty state content spanning all columns.
+
+<TableDemo client:only="react" variant="empty-state" />
+
+### Empty State with Custom Component
+
+The `emptyState` prop accepts any `ReactNode`, so you can pass a custom component like `EmptyTableState`.
+
+<TableDemo client:only="react" variant="empty-state-custom" />
+
 ## Style Options
 
 ### With Border
@@ -94,3 +106,13 @@ import { ELEVATION } from "@eqtylab/equality";
   variant="with-border"
   elevation={ELEVATION.FLOATING}
 />
+
+## Props
+
+| Name         | Description                                                  | Type                                              | Default | Required |
+| ------------ | ------------------------------------------------------------ | ------------------------------------------------- | ------- | -------- |
+| `columns`    | Column definitions with key, content, and optional className | `TableColumn[]`                                   |         | ✅       |
+| `rows`       | Row data with key, cells, and optional onClick/className     | `TableRowData[]`                                  |         | ✅       |
+| `border`     | Adds a border and rounded corners around the table           | `boolean`                                         | `false` | ❌       |
+| `elevation`  | Controls the shadow and border elevation level               | `sunken`, `base`, `raised`, `overlay`, `floating` | `base`  | ❌       |
+| `emptyState` | Content rendered when rows is empty, spanning all columns    | `ReactNode`                                       |         | ❌       |
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 51db95f9..27b2b4f8 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -2,7 +2,7 @@
   "name": "@eqtylab/equality",
   "description": "EQTYLab's component and token-based design system",
   "homepage": "https://equality.eqtylab.io/",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "license": "Apache-2.0",
   "keywords": [
     "component library",
diff --git a/packages/ui/src/components/table/table.module.css b/packages/ui/src/components/table/table.module.css
index b58d1b96..e19e65a3 100644
--- a/packages/ui/src/components/table/table.module.css
+++ b/packages/ui/src/components/table/table.module.css
@@ -17,6 +17,10 @@
   @apply overflow-hidden rounded-md;
 }
 
+.table-empty-state {
+  @apply text-foreground-secondary py-8 text-center;
+}
+
 /* ELEVATION */
 
 .table--sunken {
diff --git a/packages/ui/src/components/table/table.tsx b/packages/ui/src/components/table/table.tsx
index 668676af..58fd486e 100644
--- a/packages/ui/src/components/table/table.tsx
+++ b/packages/ui/src/components/table/table.tsx
@@ -38,6 +38,7 @@ interface TableProps extends VariantProps<typeof tableElevationVariants> {
   rows: TableRowData[];
   className?: string;
   border?: boolean;
+  emptyState?: React.ReactNode;
 }
 
 const tableElevationVariants = generateElevationVariants(styles, 'table', ELEVATION.BASE);
@@ -48,7 +49,10 @@ const Table = ({
   className,
   border = false,
   elevation = ELEVATION.BASE,
+  emptyState,
 }: TableProps) => {
+  const isEmpty = rows.length === 0;
+
   return (
     <div
       className={cn(
@@ -68,21 +72,31 @@ const Table = ({
             ))}
           </TableRow>
         </TableHeader>
-        <TableBody>
-          {rows.map((row) => (
-            <TableRow
-              key={row.key}
-              className={cn(row.className, row.onClick && styles['table-row-clickable'])}
-              onClick={row.onClick}
-            >
-              {row.cells.map((cell) => (
-                <TableCell key={cell.key} className={cell.className}>
-                  {cell.content}
-                </TableCell>
-              ))}
+        {isEmpty && emptyState ? (
+          <TableBody>
+            <TableRow>
+              <TableCell colSpan={columns.length} className={styles['table-empty-state']}>
+                {emptyState}
+              </TableCell>
             </TableRow>
-          ))}
-        </TableBody>
+          </TableBody>
+        ) : (
+          <TableBody>
+            {rows.map((row) => (
+              <TableRow
+                key={row.key}
+                className={cn(row.className, row.onClick && styles['table-row-clickable'])}
+                onClick={row.onClick}
+              >
+                {row.cells.map((cell) => (
+                  <TableCell key={cell.key} className={cell.className}>
+                    {cell.content}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        )}
       </TableContainer>
     </div>
   );

From 44fbc4cad335233db35e1611aa745f79b37a7afc Mon Sep 17 00:00:00 2001
From: Tucker McCoy <tuckermmccoy@gmail.com>
Date: Thu, 12 Feb 2026 15:06:10 -0500
Subject: [PATCH 2/2] fix(ui): fixed wrong text type

---
 packages/ui/src/components/table/table.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/table/table.module.css b/packages/ui/src/components/table/table.module.css
index e19e65a3..e600bf5a 100644
--- a/packages/ui/src/components/table/table.module.css
+++ b/packages/ui/src/components/table/table.module.css
@@ -18,7 +18,7 @@
 }
 
 .table-empty-state {
-  @apply text-foreground-secondary py-8 text-center;
+  @apply text-text-secondary py-8 text-center;
 }
 
 /* ELEVATION */