From db6ad74dab1c81b792dd4591b9dd399cd9f10aba Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Mon, 6 Apr 2026 17:37:20 +0530
Subject: [PATCH] feat(datatable): add bottom selected text

---
 .../docs/components/datatable/index.mdx       | 13 ++++
 .../docs/components/datatable/props.ts        |  6 ++
 .../data-table/__tests__/data-table.test.tsx  | 54 +++++++++++++++
 .../data-table/components/content.tsx         | 65 ++++++++++++++++++-
 .../data-table/data-table.module.css          | 31 +++++++++
 .../components/data-table/data-table.tsx      |  3 +
 .../data-table/data-table.types.tsx           |  2 +
 .../components/data-table/utils/index.tsx     | 24 +++++++
 8 files changed, 195 insertions(+), 3 deletions(-)

diff --git a/apps/www/src/content/docs/components/datatable/index.mdx b/apps/www/src/content/docs/components/datatable/index.mdx
index 47ac6fee2..e865648c1 100644
--- a/apps/www/src/content/docs/components/datatable/index.mdx
+++ b/apps/www/src/content/docs/components/datatable/index.mdx
@@ -235,6 +235,7 @@ When grouping is enabled, you can make the current group label stick under the t
 ```tsx
 function ServerTable() {
   const [data, setData] = useState([]);
+  const [totalRowCount, setTotalRowCount] = useState<number | undefined>();
   const [query, setQuery] = useState();
   const [isLoading, setIsLoading] = useState(false);
   const handleQueryChange = async (query: DataTableQuery) => {
@@ -242,11 +243,13 @@ function ServerTable() {
     setQuery(query);
     const response = await fetchData(query);
     setData(response.data);
+    setTotalRowCount(response.totalRowCount);
     setIsLoading(false);
   };
   return (
     <DataTable
       data={data}
+      totalRowCount={totalRowCount}
       query={query}
       columns={columns}
       isLoading={isLoading}
@@ -259,6 +262,16 @@ function ServerTable() {
 }
 ```
 
+### Filter Summary Footer
+
+- In `mode="client"`, footer count is computed from in-memory rows and shown as:
+  `X items hidden by filters`
+- In `mode="server"`:
+  - if `totalRowCount` is provided, footer shows the same numeric pattern
+  - if `totalRowCount` is missing, footer shows:
+    `Some items might be hidden by filters`
+- `Clear Filters` clears both active filters and search.
+
 ### Custom Styling
 
 ```tsx
diff --git a/apps/www/src/content/docs/components/datatable/props.ts b/apps/www/src/content/docs/components/datatable/props.ts
index ee8cb3e08..7b5f2e46f 100644
--- a/apps/www/src/content/docs/components/datatable/props.ts
+++ b/apps/www/src/content/docs/components/datatable/props.ts
@@ -7,6 +7,12 @@ export interface DataTableProps {
   /** Table data (Required) */
   data: Array<T>;
 
+  /**
+   * Total rows available on server.
+   * Used in server mode to show hidden-by-filter count in footer.
+   */
+  totalRowCount?: number;
+
   /**
    * Data processing mode
    * @defaultValue "client"
diff --git a/packages/raystack/components/data-table/__tests__/data-table.test.tsx b/packages/raystack/components/data-table/__tests__/data-table.test.tsx
index daeedfb54..0094d290c 100644
--- a/packages/raystack/components/data-table/__tests__/data-table.test.tsx
+++ b/packages/raystack/components/data-table/__tests__/data-table.test.tsx
@@ -445,6 +445,60 @@ describe('DataTable', () => {
       // If data is displayed, it means hasData is true, which means shouldShowFilters would be true
       expect(screen.getByText('John Doe')).toBeInTheDocument();
     });
+
+    it('shows server hidden count when totalRowCount is provided', () => {
+      render(
+        <DataTable
+          data={mockData}
+          columns={columnsWithFilters}
+          defaultSort={{ name: 'name', order: 'asc' }}
+          mode='server'
+          totalRowCount={10}
+          query={{
+            filters: [
+              {
+                name: 'name',
+                operator: 'neq',
+                value: 'John Doe'
+              }
+            ]
+          }}
+        >
+          <DataTable.Content />
+        </DataTable>
+      );
+
+      expect(screen.getByText('7')).toBeInTheDocument();
+      expect(screen.getByText('items hidden by filters')).toBeInTheDocument();
+      expect(screen.getByText('Clear Filters')).toBeInTheDocument();
+    });
+
+    it('shows generic server hidden message when totalRowCount is missing', () => {
+      render(
+        <DataTable
+          data={mockData}
+          columns={columnsWithFilters}
+          defaultSort={{ name: 'name', order: 'asc' }}
+          mode='server'
+          query={{
+            filters: [
+              {
+                name: 'name',
+                operator: 'neq',
+                value: 'John Doe'
+              }
+            ]
+          }}
+        >
+          <DataTable.Content />
+        </DataTable>
+      );
+
+      expect(
+        screen.getByText('Some items might be hidden by filters')
+      ).toBeInTheDocument();
+      expect(screen.getByText('Clear Filters')).toBeInTheDocument();
+    });
   });
 
   describe('Display Settings Reset', () => {
diff --git a/packages/raystack/components/data-table/components/content.tsx b/packages/raystack/components/data-table/components/content.tsx
index 08020f679..05fdc73bd 100644
--- a/packages/raystack/components/data-table/components/content.tsx
+++ b/packages/raystack/components/data-table/components/content.tsx
@@ -1,12 +1,13 @@
 'use client';
 
-import { TableIcon } from '@radix-ui/react-icons';
+import { Cross2Icon, TableIcon } from '@radix-ui/react-icons';
 import type { HeaderGroup, Row } from '@tanstack/react-table';
 import { flexRender } from '@tanstack/react-table';
 import { cx } from 'class-variance-authority';
 import { useCallback, useEffect, useRef } from 'react';
 
 import { Badge } from '../../badge';
+import { Button } from '../../button';
 import { EmptyState } from '../../empty-state';
 import { Flex } from '../../flex';
 import { Skeleton } from '../../skeleton';
@@ -18,7 +19,12 @@ import {
   GroupedData
 } from '../data-table.types';
 import { useDataTable } from '../hooks/useDataTable';
-import { hasActiveQuery } from '../utils';
+import {
+  countLeafRows,
+  getClientHiddenLeafRowCount,
+  hasActiveQuery,
+  hasActiveTableFiltering
+} from '../utils';
 
 function Headers<TData>({
   headerGroups = [],
@@ -180,12 +186,14 @@ export function Content({
     onRowClick,
     table,
     mode,
+    totalRowCount,
     isLoading,
     loadMoreData,
     loadingRowCount = 3,
     tableQuery,
     defaultSort,
-    stickyGroupHeader = false
+    stickyGroupHeader = false,
+    updateTableQuery
   } = useDataTable();
 
   const headerGroups = table?.getHeaderGroups();
@@ -246,6 +254,26 @@ export function Content({
       ? (emptyState ?? <DefaultEmptyComponent />)
       : null;
 
+  const hiddenLeafRowCount =
+    mode === 'client'
+      ? getClientHiddenLeafRowCount(table)
+      : totalRowCount !== undefined
+        ? Math.max(0, totalRowCount - countLeafRows(rows))
+        : null;
+  const hasActiveFiltering = !isLoading && hasActiveTableFiltering(table);
+  const showFilterSummary =
+    hasActiveFiltering &&
+    (mode === 'server' ||
+      (typeof hiddenLeafRowCount === 'number' && hiddenLeafRowCount > 0));
+
+  const handleClearFilters = useCallback(() => {
+    updateTableQuery(prev => ({
+      ...prev,
+      filters: [],
+      search: ''
+    }));
+  }, [updateTableQuery]);
+
   return (
     <div className={cx(styles.contentRoot, classNames.root)}>
       <Table className={classNames.table}>
@@ -283,6 +311,37 @@ export function Content({
           )}
         </Table.Body>
       </Table>
+      {showFilterSummary ? (
+        <Flex
+          className={styles.filterSummaryFooter}
+          justify='center'
+          align='center'
+        >
+          {mode === 'server' && hiddenLeafRowCount === null ? (
+            <span className={styles.filterSummaryLabel}>
+              Some items might be hidden by filters
+            </span>
+          ) : (
+            <Flex align='center' gap={2}>
+              <span className={styles.filterSummaryCount}>
+                {hiddenLeafRowCount}
+              </span>
+              <span className={styles.filterSummaryLabel}>
+                items hidden by filters
+              </span>
+            </Flex>
+          )}
+          <Button
+            variant='text'
+            color='neutral'
+            size='small'
+            trailingIcon={<Cross2Icon />}
+            onClick={handleClearFilters}
+          >
+            Clear Filters
+          </Button>
+        </Flex>
+      ) : null}
     </div>
   );
 }
diff --git a/packages/raystack/components/data-table/data-table.module.css b/packages/raystack/components/data-table/data-table.module.css
index 2bec0978f..a092ca268 100644
--- a/packages/raystack/components/data-table/data-table.module.css
+++ b/packages/raystack/components/data-table/data-table.module.css
@@ -47,6 +47,37 @@
   flex: 1;
 }
 
+.filterSummaryFooter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--rs-space-4);
+  width: 100%;
+  padding: var(--rs-space-9) 0;
+  box-sizing: border-box;
+}
+
+.filterSummaryCount {
+  color: var(--rs-color-foreground-base-primary);
+  font-family: var(--rs-font-body);
+  font-size: var(--rs-font-size-small);
+  font-style: normal;
+  font-weight: var(--rs-font-weight-medium);
+  line-height: var(--rs-line-height-small);
+  letter-spacing: var(--rs-letter-spacing-small);
+}
+
+.filterSummaryLabel {
+  color: var(--rs-color-foreground-base-secondary);
+  font-family: var(--rs-font-body);
+  font-size: var(--rs-font-size-small);
+  font-style: normal;
+  font-weight: var(--rs-font-weight-regular);
+  line-height: var(--rs-line-height-small);
+  letter-spacing: var(--rs-letter-spacing-small);
+}
+
 .contentRoot {
   height: 100%;
   overflow: auto;
diff --git a/packages/raystack/components/data-table/data-table.tsx b/packages/raystack/components/data-table/data-table.tsx
index 2e7c5516b..d1957af19 100644
--- a/packages/raystack/components/data-table/data-table.tsx
+++ b/packages/raystack/components/data-table/data-table.tsx
@@ -41,6 +41,7 @@ function DataTableRoot<TData, TValue>({
   query,
   mode = 'client',
   isLoading = false,
+  totalRowCount,
   loadingRowCount = 3,
   defaultSort,
   children,
@@ -194,6 +195,7 @@ function DataTableRoot<TData, TValue>({
       updateTableQuery,
       onDisplaySettingsReset,
       defaultSort,
+      totalRowCount,
       loadingRowCount,
       onRowClick,
       shouldShowFilters,
@@ -209,6 +211,7 @@ function DataTableRoot<TData, TValue>({
     updateTableQuery,
     onDisplaySettingsReset,
     defaultSort,
+    totalRowCount,
     loadingRowCount,
     onRowClick,
     shouldShowFilters,
diff --git a/packages/raystack/components/data-table/data-table.types.tsx b/packages/raystack/components/data-table/data-table.types.tsx
index 649236403..3edf07fc9 100644
--- a/packages/raystack/components/data-table/data-table.types.tsx
+++ b/packages/raystack/components/data-table/data-table.types.tsx
@@ -107,6 +107,7 @@ export interface DataTableProps<TData, TValue> {
   query?: DataTableQuery; // Initial query (will be transformed to internal format)
   mode?: DataTableMode;
   isLoading?: boolean;
+  totalRowCount?: number;
   loadingRowCount?: number;
   onTableQueryChange?: (query: DataTableQuery) => void;
   defaultSort: DataTableSort;
@@ -156,6 +157,7 @@ export type TableContextType<TData, TValue> = {
   mode: DataTableMode;
   defaultSort: DataTableSort;
   tableQuery?: InternalQuery;
+  totalRowCount?: number;
   loadingRowCount?: number;
   onDisplaySettingsReset: () => void;
   updateTableQuery: (fn: TableQueryUpdateFn) => void;
diff --git a/packages/raystack/components/data-table/utils/index.tsx b/packages/raystack/components/data-table/utils/index.tsx
index 1ae74255a..05d3ef2c7 100644
--- a/packages/raystack/components/data-table/utils/index.tsx
+++ b/packages/raystack/components/data-table/utils/index.tsx
@@ -1,3 +1,4 @@
+import type { Row, Table } from '@tanstack/react-table';
 import { TableState } from '@tanstack/table-core';
 import dayjs from 'dayjs';
 
@@ -314,6 +315,29 @@ export function dataTableQueryToInternal(query: DataTableQuery): InternalQuery {
   };
 }
 
+/** Leaf count from the row tree. Do not use `model.flatRows` here: with `filterFromLeafRows`, TanStack's filtered model leaves `flatRows` empty while `rows` is correct. */
+export function countLeafRows<T>(rows: Row<T>[]): number {
+  return rows.reduce(
+    (n, row) => n + (row.subRows?.length ? countLeafRows(row.subRows) : 1),
+    0
+  );
+}
+
+/** Difference between pre- and post-filter leaf rows (client mode only). */
+export function getClientHiddenLeafRowCount<T>(table: Table<T>): number {
+  const pre = table.getPreFilteredRowModel();
+  const post = table.getFilteredRowModel();
+  return Math.max(0, countLeafRows(pre.rows) - countLeafRows(post.rows));
+}
+
+export function hasActiveTableFiltering<T>(table: Table<T>): boolean {
+  const state = table.getState();
+  if (state.columnFilters?.length > 0) return true;
+  const gf = state.globalFilter;
+  if (gf === undefined || gf === null) return false;
+  return String(gf).trim() !== '';
+}
+
 export function getDefaultTableQuery(
   defaultSort: DataTableSort,
   oldQuery: DataTableQuery = {}