From c7418bdcc4b32d01ac4e8370283ee1264c91aaca Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Thu, 27 Nov 2025 15:36:51 +0530
Subject: [PATCH 1/3] fix (datatable): hide header if data is not present

---
 apps/www/src/app/examples/page.tsx            | 102 ++++++++++++++++++
 .../data-table/components/content.tsx         |   8 +-
 2 files changed, 108 insertions(+), 2 deletions(-)

diff --git a/apps/www/src/app/examples/page.tsx b/apps/www/src/app/examples/page.tsx
index c5d95758..76df5278 100644
--- a/apps/www/src/app/examples/page.tsx
+++ b/apps/www/src/app/examples/page.tsx
@@ -5,6 +5,7 @@ import {
   AvatarGroup,
   Button,
   Callout,
+  DataTable,
   DatePicker,
   Dialog,
   DropdownMenu,
@@ -1957,6 +1958,107 @@ const Page = () => {
             </Flex>
           </Flex>
 
+          <Text
+            size='large'
+            weight='medium'
+            style={{ marginTop: '32px', marginBottom: '16px' }}
+          >
+            DataTable Examples
+          </Text>
+
+          <Flex direction='column' gap={6}>
+            <Flex direction='column' gap={3}>
+              <DataTable
+                data={[
+                  {
+                    id: '1',
+                    name: 'John Doe',
+                    email: 'john@example.com',
+                    role: 'Admin'
+                  },
+                  {
+                    id: '2',
+                    name: 'Jane Smith',
+                    email: 'jane@example.com',
+                    role: 'User'
+                  },
+                  {
+                    id: '3',
+                    name: 'Bob Johnson',
+                    email: 'bob@example.com',
+                    role: 'User'
+                  }
+                ]}
+                columns={[
+                  {
+                    accessorKey: 'name',
+                    header: 'Name',
+                    enableColumnFilter: true
+                  },
+                  {
+                    accessorKey: 'email',
+                    header: 'Email',
+                    enableColumnFilter: true
+                  },
+                  {
+                    accessorKey: 'role',
+                    header: 'Role',
+                    enableColumnFilter: true
+                  }
+                ]}
+                mode='client'
+                defaultSort={{ name: 'name', order: 'asc' }}
+              >
+                <DataTable.Toolbar />
+                <DataTable.Content
+                  emptyState={
+                    <EmptyState
+                      icon={<FilterIcon />}
+                      heading='No users found'
+                      subHeading="We couldn't find any matches for that keyword or filter. Try alternative terms or check for typos."
+                    />
+                  }
+                />
+              </DataTable>
+            </Flex>
+
+            <Flex direction='column' gap={3}>
+              <DataTable
+                data={[]}
+                columns={[
+                  {
+                    accessorKey: 'name',
+                    header: 'Name',
+                    enableColumnFilter: true
+                  },
+                  {
+                    accessorKey: 'email',
+                    header: 'Email',
+                    enableColumnFilter: true
+                  },
+                  {
+                    accessorKey: 'role',
+                    header: 'Role',
+                    enableColumnFilter: true
+                  }
+                ]}
+                mode='client'
+                defaultSort={{ name: 'name', order: 'asc' }}
+              >
+                <DataTable.Toolbar />
+                <DataTable.Content
+                  emptyState={
+                    <EmptyState
+                      icon={<FilterIcon />}
+                      heading='No users found'
+                      subHeading="We couldn't find any matches for that keyword or filter. Try alternative terms or check for typos."
+                    />
+                  }
+                />
+              </DataTable>
+            </Flex>
+          </Flex>
+
           <Flex justify='center' style={{ marginTop: 40 }}>
             <Button type='submit'>Submit button</Button>
           </Flex>
diff --git a/packages/raystack/components/data-table/components/content.tsx b/packages/raystack/components/data-table/components/content.tsx
index 703b6895..1b3cd863 100644
--- a/packages/raystack/components/data-table/components/content.tsx
+++ b/packages/raystack/components/data-table/components/content.tsx
@@ -218,12 +218,16 @@ export function Content({
 
   const visibleColumnsLength = table.getVisibleLeafColumns().length;
 
+  const hasData = rows?.length > 0 || isLoading;
+
   return (
     <div className={classNames.root}>
       <Table className={classNames.table}>
-        <Headers headerGroups={headerGroups} className={classNames.header} />
+        {hasData && (
+          <Headers headerGroups={headerGroups} className={classNames.header} />
+        )}
         <Table.Body className={classNames.body}>
-          {rows?.length || isLoading ? (
+          {hasData ? (
             <>
               <Rows
                 rows={rows}

From a7d3690ba483ef41100a28bc7e6b01d2da6ec2db Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Thu, 27 Nov 2025 15:56:22 +0530
Subject: [PATCH 2/3] fix: remove bottom hr when empty state is visible

---
 .../raystack/components/data-table/components/content.tsx    | 5 ++++-
 .../raystack/components/data-table/data-table.module.css     | 4 ++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/raystack/components/data-table/components/content.tsx b/packages/raystack/components/data-table/components/content.tsx
index 1b3cd863..605a7eb5 100644
--- a/packages/raystack/components/data-table/components/content.tsx
+++ b/packages/raystack/components/data-table/components/content.tsx
@@ -246,7 +246,10 @@ export function Content({
             </>
           ) : (
             <Table.Row>
-              <Table.Cell colSpan={visibleColumnsLength}>
+              <Table.Cell
+                colSpan={visibleColumnsLength}
+                className={styles.emptyStateCell}
+              >
                 {emptyState || <DefaultEmptyComponent />}
               </Table.Cell>
             </Table.Row>
diff --git a/packages/raystack/components/data-table/data-table.module.css b/packages/raystack/components/data-table/data-table.module.css
index ab013ab3..c36969fa 100644
--- a/packages/raystack/components/data-table/data-table.module.css
+++ b/packages/raystack/components/data-table/data-table.module.css
@@ -60,3 +60,7 @@
 .cell {
   background: inherit;
 }
+
+.emptyStateCell {
+  border-bottom: none;
+}
\ No newline at end of file

From a729274ceddccde8975a7f8e675531776ec650f7 Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Thu, 27 Nov 2025 15:56:54 +0530
Subject: [PATCH 3/3] chore: add empty space

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

diff --git a/packages/raystack/components/data-table/data-table.module.css b/packages/raystack/components/data-table/data-table.module.css
index c36969fa..48599d62 100644
--- a/packages/raystack/components/data-table/data-table.module.css
+++ b/packages/raystack/components/data-table/data-table.module.css
@@ -63,4 +63,4 @@
 
 .emptyStateCell {
   border-bottom: none;
-}
\ No newline at end of file
+}