From 4084f3a16ec630805773399da3499589edfa1839 Mon Sep 17 00:00:00 2001 From: paanSinghCoder Date: Tue, 10 Mar 2026 12:35:49 +0530 Subject: [PATCH 1/6] style (dataTable): reduce left padding for group title and right left padding for toolbar --- .../components/data-table/data-table.module.css | 10 +++++----- packages/raystack/components/table/table.module.css | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) 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 diff --git a/packages/raystack/components/table/table.module.css b/packages/raystack/components/table/table.module.css index 6e9f3eb46..a6b30d5d7 100644 --- a/packages/raystack/components/table/table.module.css +++ b/packages/raystack/components/table/table.module.css @@ -57,7 +57,7 @@ .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); From 3879374e9a7bfb43f533605cc38d87fc980be885 Mon Sep 17 00:00:00 2001 From: paanSinghCoder Date: Tue, 10 Mar 2026 12:37:34 +0530 Subject: [PATCH 2/6] improvement (data-table): type casting --- .../data-table/utils/filter-operations.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/raystack/components/data-table/utils/filter-operations.tsx b/packages/raystack/components/data-table/utils/filter-operations.tsx index 7b185614c..20242946b 100644 --- a/packages/raystack/components/data-table/utils/filter-operations.tsx +++ b/packages/raystack/components/data-table/utils/filter-operations.tsx @@ -65,18 +65,18 @@ export const filterOperationsMap: FilterFunctionsMap = { ); }, contains: (row, columnId, filterValue: FilterValue, _addMeta) => { - const columnValue = (row.getValue(columnId) as string).toLowerCase(); - const filterStr = (filterValue.value as string).toLowerCase(); + const columnValue = String(row.getValue(columnId)).toLowerCase(); + const filterStr = String(filterValue.value).toLowerCase(); return columnValue.includes(filterStr); }, starts_with: (row, columnId, filterValue: FilterValue, _addMeta) => { - const columnValue = (row.getValue(columnId) as string).toLowerCase(); - const filterStr = (filterValue.value as string).toLowerCase(); + const columnValue = String(row.getValue(columnId)).toLowerCase(); + const filterStr = String(filterValue.value).toLowerCase(); return columnValue.startsWith(filterStr); }, ends_with: (row, columnId, filterValue: FilterValue, _addMeta) => { - const columnValue = (row.getValue(columnId) as string).toLowerCase(); - const filterStr = (filterValue.value as string).toLowerCase(); + const columnValue = String(row.getValue(columnId)).toLowerCase(); + const filterStr = String(filterValue.value).toLowerCase(); return columnValue.endsWith(filterStr); } }, From 64115bf83893782f139759e367fa3ca81b606455 Mon Sep 17 00:00:00 2001 From: paanSinghCoder Date: Tue, 10 Mar 2026 13:15:59 +0530 Subject: [PATCH 3/6] fix: intersection Observer recreation on each render --- .../data-table/components/content.tsx | 39 ++++++++++--------- .../components/virtualized-content.tsx | 2 +- 2 files changed, 22 insertions(+), 19 deletions(-) diff --git a/packages/raystack/components/data-table/components/content.tsx b/packages/raystack/components/data-table/components/content.tsx index 4cc3d3e66..c7850639d 100644 --- a/packages/raystack/components/data-table/components/content.tsx +++ b/packages/raystack/components/data-table/components/content.tsx @@ -139,7 +139,7 @@ function Rows({ > {cells.map(cell => { const columnDef = cell.column.columnDef as DataTableColumnDef< - unknown, + TData, unknown >; return ( @@ -184,36 +184,39 @@ export function Content({ const lastRowRef = useRef(null); const observerRef = useRef(null); - const handleObserver = useCallback( - (entries: IntersectionObserverEntry[]) => { - const target = entries[0]; - if (target.isIntersecting && !isLoading) { - loadMoreData(); - } - }, - [loadMoreData, isLoading] - ); + /* Refs keep callback stable so observer is only recreated when mode/rows.length change; */ + const loadMoreDataRef = useRef(loadMoreData); + const isLoadingRef = useRef(isLoading); + loadMoreDataRef.current = loadMoreData; + isLoadingRef.current = isLoading; + + const handleObserver = useCallback((entries: IntersectionObserverEntry[]) => { + const target = entries[0]; + if (!target?.isIntersecting) return; + if (isLoadingRef.current) return; + const loadMore = loadMoreDataRef.current; + if (loadMore) loadMore(); + }, []); useEffect(() => { if (mode !== 'server') return; if (observerRef.current) { observerRef.current.disconnect(); + observerRef.current = null; } + const lastRow = lastRowRef.current; + if (!lastRow) return; + observerRef.current = new IntersectionObserver(handleObserver, { threshold: 0.1 }); - const lastRow = lastRowRef.current; - if (lastRow) { - observerRef.current.observe(lastRow); - } + observerRef.current.observe(lastRow); return () => { - if (observerRef.current && lastRow) { - observerRef.current.unobserve(lastRow); - observerRef.current.disconnect(); - } + observerRef.current?.disconnect(); + observerRef.current = null; }; }, [mode, rows.length, handleObserver]); diff --git a/packages/raystack/components/data-table/components/virtualized-content.tsx b/packages/raystack/components/data-table/components/virtualized-content.tsx index 3eb137eb3..22a9920bb 100644 --- a/packages/raystack/components/data-table/components/virtualized-content.tsx +++ b/packages/raystack/components/data-table/components/virtualized-content.tsx @@ -133,7 +133,7 @@ function VirtualRows({ > {cells.map(cell => { const columnDef = cell.column.columnDef as DataTableColumnDef< - unknown, + TData, unknown >; return ( From a9bbd27753c418a296abae418a36ebfe1fbb00d9 Mon Sep 17 00:00:00 2001 From: paanSinghCoder Date: Tue, 10 Mar 2026 13:34:29 +0530 Subject: [PATCH 4/6] docs(datatable): add performance note for stable columns reference --- apps/www/src/content/docs/components/datatable/index.mdx | 2 ++ 1 file changed, 2 insertions(+) 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 { accessorKey: string; // Key to access data From 3659ff664d199554d66eb63262bd2e85e4c9894a Mon Sep 17 00:00:00 2001 From: paanSinghCoder Date: Tue, 10 Mar 2026 17:15:03 +0530 Subject: [PATCH 5/6] revert: typecasting --- .../data-table/utils/filter-operations.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/raystack/components/data-table/utils/filter-operations.tsx b/packages/raystack/components/data-table/utils/filter-operations.tsx index 20242946b..7b185614c 100644 --- a/packages/raystack/components/data-table/utils/filter-operations.tsx +++ b/packages/raystack/components/data-table/utils/filter-operations.tsx @@ -65,18 +65,18 @@ export const filterOperationsMap: FilterFunctionsMap = { ); }, contains: (row, columnId, filterValue: FilterValue, _addMeta) => { - const columnValue = String(row.getValue(columnId)).toLowerCase(); - const filterStr = String(filterValue.value).toLowerCase(); + const columnValue = (row.getValue(columnId) as string).toLowerCase(); + const filterStr = (filterValue.value as string).toLowerCase(); return columnValue.includes(filterStr); }, starts_with: (row, columnId, filterValue: FilterValue, _addMeta) => { - const columnValue = String(row.getValue(columnId)).toLowerCase(); - const filterStr = String(filterValue.value).toLowerCase(); + const columnValue = (row.getValue(columnId) as string).toLowerCase(); + const filterStr = (filterValue.value as string).toLowerCase(); return columnValue.startsWith(filterStr); }, ends_with: (row, columnId, filterValue: FilterValue, _addMeta) => { - const columnValue = String(row.getValue(columnId)).toLowerCase(); - const filterStr = String(filterValue.value).toLowerCase(); + const columnValue = (row.getValue(columnId) as string).toLowerCase(); + const filterStr = (filterValue.value as string).toLowerCase(); return columnValue.endsWith(filterStr); } }, From 33cd22b42d074b471f116b4a38bda124533804e5 Mon Sep 17 00:00:00 2001 From: paanSinghCoder Date: Tue, 10 Mar 2026 17:33:55 +0530 Subject: [PATCH 6/6] revert: css as present in other PR --- apps/www/src/content/docs/components/datatable/index.mdx | 2 -- packages/raystack/components/data-table/data-table.module.css | 4 ++-- packages/raystack/components/table/table.module.css | 2 +- 3 files changed, 3 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 3dd1d6f19..0dcf6b202 100644 --- a/apps/www/src/content/docs/components/datatable/index.mdx +++ b/apps/www/src/content/docs/components/datatable/index.mdx @@ -156,8 +156,6 @@ 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 { 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 50d507bbf..57c66f97f 100644 --- a/packages/raystack/components/data-table/data-table.module.css +++ b/packages/raystack/components/data-table/data-table.module.css @@ -1,5 +1,5 @@ .toolbar { - padding: var(--rs-space-3) 0; + padding: var(--rs-space-3) var(--rs-space-7) var(--rs-space-3) var(--rs-space-5); align-self: stretch; border-bottom: 0.5px solid var(--rs-color-border-base-primary); @@ -142,7 +142,7 @@ align-items: center; background: var(--rs-color-background-base-secondary); font-weight: 500; - padding: var(--rs-space-3); + padding: var(--rs-space-3) var(--rs-space-4); } .stickyLoaderContainer { diff --git a/packages/raystack/components/table/table.module.css b/packages/raystack/components/table/table.module.css index a6b30d5d7..6e9f3eb46 100644 --- a/packages/raystack/components/table/table.module.css +++ b/packages/raystack/components/table/table.module.css @@ -57,7 +57,7 @@ .sectionHeader > th { color: var(--rs-color-foreground-base-primary); - padding: var(--rs-space-3); + padding: var(--rs-space-3) var(--rs-space-7); /* Body/Small Plus */ font-size: var(--rs-font-size-small);