From fc232052365834ef49fee55b511ca3695ff5bb4e Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Tue, 10 Mar 2026 17:26:32 +0530
Subject: [PATCH 1/2] fix: css issue and docs

---
 .../src/content/docs/components/datatable/index.mdx    |  2 ++
 .../components/data-table/data-table.module.css        | 10 +++++-----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/apps/www/src/content/docs/components/datatable/index.mdx b/apps/www/src/content/docs/components/datatable/index.mdx
index 0dcf6b202..3dd1d6f19 100644
--- a/apps/www/src/content/docs/components/datatable/index.mdx
+++ b/apps/www/src/content/docs/components/datatable/index.mdx
@@ -156,6 +156,8 @@ function MyTable() {
 
 Columns can be configured with various options:
 
+**Performance:** Pass a stable `columns` reference (e.g. define at module scope or wrap in `useMemo`) so the table doesn't recompute filters, grouping, or sort state on every render.
+
 ```ts
 interface DataTableColumnDef<TData, TValue> {
   accessorKey: string; // Key to access data
diff --git a/packages/raystack/components/data-table/data-table.module.css b/packages/raystack/components/data-table/data-table.module.css
index 2b722bd67..50d507bbf 100644
--- a/packages/raystack/components/data-table/data-table.module.css
+++ b/packages/raystack/components/data-table/data-table.module.css
@@ -1,6 +1,5 @@
 .toolbar {
-  padding: var(--rs-space-3) var(--rs-space-7) var(--rs-space-3)
-    var(--rs-space-5);
+  padding: var(--rs-space-3) 0;
   align-self: stretch;
 
   border-bottom: 0.5px solid var(--rs-color-border-base-primary);
@@ -21,12 +20,13 @@
 .display-popover-properties-select {
   width: var(--select-width);
 }
+
 .display-popover-properties-select[with-icon-button] {
   /* Reduce Icon button with "--rs-space-7" and flex gap "--rs-space-2" */
   width: calc(var(--select-width) - var(--rs-space-7) - var(--rs-space-2));
 }
 
-.display-popover-properties-select > span {
+.display-popover-properties-select>span {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -142,7 +142,7 @@
   align-items: center;
   background: var(--rs-color-background-base-secondary);
   font-weight: 500;
-  padding: var(--rs-space-3) var(--rs-space-4);
+  padding: var(--rs-space-3);
 }
 
 .stickyLoaderContainer {
@@ -154,4 +154,4 @@
 
 .loaderRow {
   position: relative;
-}
+}
\ No newline at end of file

From b494338815d514d18488a60e01424d3ee453aa10 Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Tue, 10 Mar 2026 17:29:10 +0530
Subject: [PATCH 2/2] style: remove extra padding from table

---
 packages/raystack/components/table/table.module.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/raystack/components/table/table.module.css b/packages/raystack/components/table/table.module.css
index 6e9f3eb46..93a463865 100644
--- a/packages/raystack/components/table/table.module.css
+++ b/packages/raystack/components/table/table.module.css
@@ -23,7 +23,7 @@
   font-size: var(--rs-font-size-small);
   font-style: normal;
   font-weight: var(--rs-font-weight-medium);
-  line-height: var(--rs-line-height-small); /* 133.333% */
+  line-height: var(--rs-line-height-small);
   letter-spacing: var(--rs-letter-spacing-small);
 
   text-align: left;
@@ -57,12 +57,12 @@
 
 .sectionHeader > th {
   color: var(--rs-color-foreground-base-primary);
-  padding: var(--rs-space-3) var(--rs-space-7);
+  padding: var(--rs-space-3);
 
   /* Body/Small Plus */
   font-size: var(--rs-font-size-small);
   font-style: normal;
   font-weight: var(--rs-font-weight-medium);
-  line-height: var(--rs-line-height-small); /* 133.333% */
+  line-height: var(--rs-line-height-small);
   letter-spacing: var(--rs-letter-spacing-small);
 }