feat(DataTable): Implement new DataTable component with hooks and optimized features

- Added DataTable component with support for virtual scrolling, row selection, and customizable columns.
- Introduced hooks for debouncing search input, managing row selection, and calculating column styles.
- Enhanced accessibility with keyboard navigation and selection checkboxes.
- Implemented skeleton loading state for better user experience during data fetching.
- Added DataTableSearch component for filtering data with debounced input.
- Created utility logger for improved debugging in development.
- Updated translations to support new UI elements and actions.

packages/client/src/components/DataTable/DataTable.hooks.ts

@@ -0,0 +1,135 @@
+import { useState, useEffect, useMemo } from 'react';
+import type { TableColumn } from './DataTable.types';
+
+export function useDebounced<T>(value: T, delay: number) {
+  const [debounced, setDebounced] = useState(value);
+
+  useEffect(() => {
+    const id = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(id);
+  }, [value, delay]);
+
+  return debounced;
+}
+
+export const useOptimizedRowSelection = (initialSelection: Record<string, boolean> = {}) => {
+  const [selection, setSelection] = useState(initialSelection);
+  return [selection, setSelection] as const;
+};
+
+export const useColumnStyles = <TData, TValue>(
+  columns: TableColumn<TData, TValue>[],
+  isSmallScreen: boolean,
+  containerRef: React.RefObject<HTMLDivElement>,
+) => {
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const updateWidth = () => {
+      setContainerWidth(container.clientWidth);
+    };
+
+    const resizeObserver = new ResizeObserver(updateWidth);
+    resizeObserver.observe(container);
+    updateWidth();
+
+    return () => resizeObserver.disconnect();
+  }, [containerRef]);
+
+  return useMemo(() => {
+    if (containerWidth === 0) {
+      return {};
+    }
+
+    const styles: Record<string, React.CSSProperties> = {};
+    let totalFixedWidth = 0;
+    const flexibleColumns: (TableColumn<TData, TValue> & { priority: number })[] = [];
+
+    columns.forEach((column) => {
+      const key = String(column.id ?? column.accessorKey ?? '');
+      const size = isSmallScreen ? column.meta?.mobileSize : column.meta?.size;
+
+      if (size) {
+        const width = parseInt(String(size), 10);
+        totalFixedWidth += width;
+        styles[key] = {
+          width: size,
+          minWidth: column.meta?.minWidth || size,
+        };
+      } else {
+        flexibleColumns.push({ ...column, priority: column.meta?.priority ?? 1 });
+      }
+    });
+
+    const availableWidth = containerWidth - totalFixedWidth;
+    const totalPriority = flexibleColumns.reduce((sum, col) => sum + col.priority, 0);
+
+    if (availableWidth > 0 && totalPriority > 0) {
+      flexibleColumns.forEach((column) => {
+        const key = String(column.id ?? column.accessorKey ?? '');
+        const proportion = column.priority / totalPriority;
+        const width = Math.max(Math.floor(availableWidth * proportion), 80); // min width of 80px
+        styles[key] = {
+          width: `${width}px`,
+          minWidth: column.meta?.minWidth ?? `${isSmallScreen ? 60 : 80}px`,
+        };
+      });
+    }
+
+    return styles;
+  }, [columns, containerWidth, isSmallScreen]);
+};
+
+export const useDynamicColumnWidths = useColumnStyles;
+
+export const useKeyboardNavigation = (
+  tableRef: React.RefObject<HTMLDivElement>,
+  rowCount: number,
+  onRowSelect?: (index: number) => void,
+) => {
+  const [focusedRowIndex, setFocusedRowIndex] = useState<number>(-1);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!tableRef.current?.contains(event.target as Node)) return;
+
+      switch (event.key) {
+        case 'ArrowDown':
+          event.preventDefault();
+          setFocusedRowIndex((prev) => Math.min(prev + 1, rowCount - 1));
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          setFocusedRowIndex((prev) => Math.max(prev - 1, 0));
+          break;
+        case 'Home':
+          event.preventDefault();
+          setFocusedRowIndex(0);
+          break;
+        case 'End':
+          event.preventDefault();
+          setFocusedRowIndex(rowCount - 1);
+          break;
+        case 'Enter':
+        case ' ':
+          if (focusedRowIndex >= 0 && onRowSelect) {
+            event.preventDefault();
+            onRowSelect(focusedRowIndex);
+          }
+          break;
+        case 'Escape':
+          setFocusedRowIndex(-1);
+          (event.target as HTMLElement).blur();
+          break;
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [tableRef, rowCount, focusedRowIndex, onRowSelect]);
+
+  return { focusedRowIndex, setFocusedRowIndex };
+};

packages/client/src/components/DataTable/DataTable.tsx

@@ -0,0 +1,439 @@
+import React, { useRef, useState, useEffect, useMemo, useCallback } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { ArrowUp, ArrowDown, ArrowDownUp } from 'lucide-react';
+import {
+  useReactTable,
+  getCoreRowModel,
+  flexRender,
+  type SortingState,
+  type VisibilityState,
+  type ColumnDef,
+  type CellContext,
+  type Row,
+} from '@tanstack/react-table';
+import type { DataTableProps } from './DataTable.types';
+import {
+  Table,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableCell,
+  TableRow,
+  Button,
+  Label,
+} from '~/components';
+import { SelectionCheckbox, MemoizedTableRow, SkeletonRows } from './DataTableComponents';
+import { useDebounced, useOptimizedRowSelection } from './DataTable.hooks';
+import { DataTableErrorBoundary } from './DataTableErrorBoundary';
+import { DataTableSearch } from './DataTableSearch';
+import { useMediaQuery, useLocalize } from '~/hooks';
+import { useToastContext } from '~/Providers';
+import { cn, logger } from '~/utils';
+import { Spinner } from '~/svgs';
+
+function DataTable<TData extends Record<string, unknown>, TValue>({
+  columns,
+  data,
+  className = '',
+  isLoading = false,
+  isFetching = false,
+  config,
+  filterValue = '',
+  onFilterChange,
+  defaultSort = [],
+  isFetchingNextPage = false,
+  hasNextPage = false,
+  fetchNextPage,
+  onReset,
+  sorting,
+  onSortingChange,
+  customActionsRenderer,
+}: DataTableProps<TData, TValue>) {
+  const localize = useLocalize();
+  const { showToast } = useToastContext();
+  const isSmallScreen = useMediaQuery('(max-width: 768px)');
+  const isDesktop = useMediaQuery('(min-width: 1024px)');
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+  const scrollTimeoutRef = useRef<number | null>(null);
+  const scrollRAFRef = useRef<number | null>(null);
+
+  const {
+    selection: { enableRowSelection = true, showCheckboxes = true } = {},
+    search: { enableSearch = true, debounce: debounceDelay = 300 } = {},
+    skeleton: { count: skeletonCount = 10 } = {},
+    virtualization: { overscan = 5 } = {},
+  } = config || {};
+
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+  const [optimizedRowSelection, setOptimizedRowSelection] = useOptimizedRowSelection();
+  const [error, setError] = useState<Error | null>(null);
+  const [searchTerm, setSearchTerm] = useState(filterValue);
+  const [internalSorting, setInternalSorting] = useState<SortingState>(defaultSort);
+  const [isScrollingFetching, setIsScrollingFetching] = useState(false);
+
+  const debouncedTerm = useDebounced(searchTerm, debounceDelay);
+  const finalSorting = sorting ?? internalSorting;
+
+  // Memoize column visibility calculations
+  const calculatedVisibility = useMemo(() => {
+    const newVisibility: VisibilityState = {};
+    if (isSmallScreen) {
+      columns.forEach((col: ColumnDef<TData, TValue> & { meta?: { hideOnMobile?: boolean } }) => {
+        if (col.id && col.meta?.hideOnMobile) {
+          newVisibility[col.id] = false;
+        }
+      });
+    }
+    return newVisibility;
+  }, [isSmallScreen, columns]);
+
+  useEffect(() => {
+    setColumnVisibility(calculatedVisibility);
+  }, [calculatedVisibility]);
+
+  const processedData = useMemo(
+    () =>
+      data.map((item, index) => {
+        if (item.id === null || item.id === undefined) {
+          logger.warn(
+            'DataTable Warning: A data row is missing a unique "id" property. Using index as a fallback. This can lead to unexpected behavior with selection and sorting.',
+            item,
+          );
+        }
+
+        return {
+          ...item,
+          _index: index,
+          _id: String(item.id ?? `row-${index}`),
+        };
+      }),
+    [data],
+  );
+
+  // Enhanced columns with desktop-only cell rendering
+  const enhancedColumns = useMemo(() => {
+    return columns.map((col) => {
+      const originalCol = col as ColumnDef<TData, TValue> & {
+        meta?: {
+          hideOnMobile?: boolean;
+          desktopOnly?: boolean;
+          className?: string;
+        };
+      };
+
+      if (originalCol.meta?.desktopOnly && originalCol.cell) {
+        const originalCell = originalCol.cell;
+        return {
+          ...originalCol,
+          cell: (props: CellContext<TData, TValue>) => {
+            if (!isDesktop) {
+              return null;
+            }
+            return typeof originalCell === 'function' ? originalCell(props) : originalCell;
+          },
+        };
+      }
+      return originalCol;
+    });
+  }, [columns, isDesktop]);
+
+  const tableColumns = useMemo(() => {
+    if (!enableRowSelection || !showCheckboxes) {
+      return enhancedColumns as ColumnDef<TData & { _id: string }, TValue>[];
+    }
+
+    const selectColumn: ColumnDef<TData & { _id: string }, boolean> = {
+      id: 'select',
+      header: ({ table }) => (
+        <div className="flex h-full items-center justify-center">
+          <SelectionCheckbox
+            checked={table.getIsAllRowsSelected()}
+            onChange={(value) => table.toggleAllRowsSelected(value)}
+            ariaLabel={localize('com_ui_select_all' as string)}
+          />
+        </div>
+      ),
+      cell: ({ row }) => (
+        <div className="flex h-full items-center justify-center">
+          <SelectionCheckbox
+            checked={row.getIsSelected()}
+            onChange={(value) => row.toggleSelected(value)}
+            ariaLabel={`Select row ${row.index + 1}`}
+          />
+        </div>
+      ),
+      meta: {
+        className: 'w-12',
+      },
+    };
+
+    return [
+      selectColumn,
+      ...(enhancedColumns as ColumnDef<TData & { _id: string }, TValue>[]),
+    ] as ColumnDef<TData & { _id: string }, TValue>[];
+  }, [enhancedColumns, enableRowSelection, showCheckboxes, localize]);
+
+  const table = useReactTable<TData & { _id: string }>({
+    data: processedData,
+    columns: tableColumns,
+    getRowId: (row) => row._id,
+    getCoreRowModel: getCoreRowModel(),
+    enableRowSelection,
+    enableMultiRowSelection: true,
+    manualSorting: true,
+    manualFiltering: true,
+    state: {
+      sorting: finalSorting,
+      columnVisibility,
+      rowSelection: optimizedRowSelection,
+    },
+    onSortingChange: onSortingChange ?? setInternalSorting,
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setOptimizedRowSelection,
+  });
+
+  const rowVirtualizer = useVirtualizer({
+    count: processedData.length,
+    getScrollElement: () => tableContainerRef.current,
+    estimateSize: useCallback(() => 50, []),
+    overscan,
+    measureElement:
+      typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1
+        ? (element) => element?.getBoundingClientRect().height ?? 50
+        : undefined,
+  });
+
+  const virtualRows = rowVirtualizer.getVirtualItems();
+  const totalSize = rowVirtualizer.getTotalSize();
+  const paddingTop = virtualRows.length > 0 ? (virtualRows[0]?.start ?? 0) : 0;
+  const paddingBottom =
+    virtualRows.length > 0 ? totalSize - (virtualRows[virtualRows.length - 1]?.end ?? 0) : 0;
+
+  const { rows } = table.getRowModel();
+  const headerGroups = table.getHeaderGroups();
+  const selectedCount = Object.keys(optimizedRowSelection).length;
+
+  const showSkeletons = isLoading || (isFetching && !isFetchingNextPage);
+  const shouldShowSearch = enableSearch && onFilterChange;
+
+  useEffect(() => {
+    setSearchTerm(filterValue);
+  }, [filterValue]);
+
+  useEffect(() => {
+    if (debouncedTerm !== filterValue && onFilterChange) {
+      onFilterChange(debouncedTerm);
+      setOptimizedRowSelection({});
+    }
+  }, [debouncedTerm, filterValue, onFilterChange, setOptimizedRowSelection]);
+
+  // Optimized scroll handler with RAF
+  const handleScroll = useCallback(() => {
+    if (scrollRAFRef.current !== null) {
+      cancelAnimationFrame(scrollRAFRef.current);
+    }
+
+    scrollRAFRef.current = requestAnimationFrame(() => {
+      if (scrollTimeoutRef.current !== null) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+
+      scrollTimeoutRef.current = window.setTimeout(() => {
+        if (
+          !fetchNextPage ||
+          !hasNextPage ||
+          isFetchingNextPage ||
+          isScrollingFetching ||
+          !tableContainerRef.current
+        ) {
+          return;
+        }
+
+        const { scrollTop, scrollHeight, clientHeight } = tableContainerRef.current;
+        const scrollBottom = scrollTop + clientHeight;
+        const threshold = scrollHeight - 200;
+
+        if (scrollBottom >= threshold) {
+          setIsScrollingFetching(true);
+          fetchNextPage().finally(() => {
+            setIsScrollingFetching(false);
+          });
+        }
+
+        scrollTimeoutRef.current = null;
+      }, 150); // Slightly increased debounce for better performance
+
+      scrollRAFRef.current = null;
+    });
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage, isScrollingFetching]);
+
+  useEffect(() => {
+    const scrollElement = tableContainerRef.current;
+    if (!scrollElement) return;
+
+    scrollElement.addEventListener('scroll', handleScroll, { passive: true });
+    return () => {
+      scrollElement.removeEventListener('scroll', handleScroll);
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+      if (scrollRAFRef.current) {
+        cancelAnimationFrame(scrollRAFRef.current);
+      }
+    };
+  }, [handleScroll]);
+
+  const handleReset = useCallback(() => {
+    setError(null);
+    setOptimizedRowSelection({});
+    setSearchTerm('');
+    onReset?.();
+  }, [onReset, setOptimizedRowSelection]);
+
+  if (error) {
+    return (
+      <DataTableErrorBoundary onReset={handleReset}>
+        <div className="flex flex-col items-center justify-center p-8">
+          <p className="mb-4 text-red-500">{error.message}</p>
+          <Button onClick={handleReset}>{localize('com_ui_retry' as string)}</Button>
+        </div>
+      </DataTableErrorBoundary>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'relative flex w-full flex-col overflow-hidden rounded-lg border border-border-light bg-background',
+        'h-[calc(100vh-8rem)] max-h-[80vh]',
+        className,
+      )}
+    >
+      <div className="flex w-full shrink-0 items-center gap-3 border-b border-border-light">
+        {shouldShowSearch && <DataTableSearch value={searchTerm} onChange={setSearchTerm} />}
+        {customActionsRenderer &&
+          customActionsRenderer({
+            selectedCount,
+            selectedRows: table.getSelectedRowModel().rows.map((r) => r.original),
+            table,
+            showToast,
+          })}
+      </div>
+
+      <div
+        ref={tableContainerRef}
+        className="overflow-anchor-none relative min-h-0 flex-1 overflow-auto will-change-scroll"
+        style={
+          {
+            WebkitOverflowScrolling: 'touch',
+            overscrollBehavior: 'contain',
+          } as React.CSSProperties
+        }
+      >
+        <Table className="w-full">
+          <TableHeader className="sticky top-0 z-10 bg-surface-secondary">
+            {headerGroups.map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  const isSelectHeader = header.id === 'select';
+                  const meta = header.column.columnDef.meta as { className?: string } | undefined;
+                  return (
+                    <TableHead
+                      key={header.id}
+                      className={cn(
+                        'border-b border-border-light py-2',
+                        isSelectHeader ? 'px-0 text-center' : 'px-3',
+                        header.column.getCanSort() && 'cursor-pointer hover:bg-surface-tertiary',
+                        meta?.className,
+                      )}
+                      onClick={header.column.getToggleSortingHandler()}
+                    >
+                      {isSelectHeader ? (
+                        flexRender(header.column.columnDef.header, header.getContext())
+                      ) : (
+                        <div className="flex items-center gap-2">
+                          {flexRender(header.column.columnDef.header, header.getContext())}
+                          {header.column.getCanSort() && (
+                            <span className="text-text-primary">
+                              {{
+                                asc: <ArrowUp className="size-4 text-text-primary" />,
+                                desc: <ArrowDown className="size-4 text-text-primary" />,
+                              }[header.column.getIsSorted() as string] ?? (
+                                <ArrowDownUp className="size-4 text-text-primary" />
+                              )}
+                            </span>
+                          )}
+                        </div>
+                      )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+
+          <TableBody>
+            {showSkeletons ? (
+              <SkeletonRows
+                count={skeletonCount}
+                columns={tableColumns}
+                containerRef={tableContainerRef}
+              />
+            ) : (
+              <>
+                {paddingTop > 0 && (
+                  <TableRow aria-hidden="true">
+                    <TableCell
+                      colSpan={tableColumns.length}
+                      style={{ height: paddingTop, padding: 0, border: 0 }}
+                    />
+                  </TableRow>
+                )}
+                {virtualRows.map((virtualRow) => {
+                  const row = rows[virtualRow.index];
+                  if (!row) return null;
+                  return (
+                    <MemoizedTableRow
+                      key={virtualRow.key}
+                      row={row as Row<TData & { _id: string }>}
+                      columns={tableColumns}
+                      index={virtualRow.index}
+                      virtualIndex={virtualRow.index}
+                    />
+                  );
+                })}
+                {paddingBottom > 0 && (
+                  <TableRow aria-hidden="true">
+                    <TableCell
+                      colSpan={tableColumns.length}
+                      style={{ height: paddingBottom, padding: 0, border: 0 }}
+                    />
+                  </TableRow>
+                )}
+              </>
+            )}
+            {isFetchingNextPage && (
+              <TableRow>
+                <TableCell colSpan={tableColumns.length} className="p-4 text-center">
+                  <div className="flex items-center justify-center gap-2">
+                    <Spinner className="h-5 w-5" />
+                  </div>
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+
+        {!isLoading && !showSkeletons && rows.length === 0 && (
+          <div className="flex flex-col items-center justify-center py-12">
+            <Label className="text-center text-text-secondary">
+              {searchTerm ? 'No search results' : localize('com_ui_no_data')}
+            </Label>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default DataTable;

packages/client/src/components/DataTable/DataTable.types.ts

@@ -0,0 +1,68 @@
+import type { ColumnDef, SortingState, Table } from '@tanstack/react-table';
+import type React from 'react';
+
+export type TableColumn<TData, TValue> = ColumnDef<TData, TValue> & {
+  accessorKey?: string | number;
+  meta?: {
+    size?: string | number;
+    mobileSize?: string | number;
+    minWidth?: string | number;
+    priority?: number;
+  };
+};
+
+export interface DataTableConfig {
+  selection?: {
+    enableRowSelection?: boolean;
+    showCheckboxes?: boolean;
+  };
+  search?: {
+    enableSearch?: boolean;
+    debounce?: number;
+    filterColumn?: string;
+  };
+  skeleton?: {
+    count?: number;
+  };
+  virtualization?: {
+    overscan?: number;
+  };
+  pinning?: {
+    enableColumnPinning?: boolean;
+  };
+}
+
+export interface DataTableProps<TData extends Record<string, unknown>, TValue> {
+  columns: TableColumn<TData, TValue>[];
+  data: TData[];
+  className?: string;
+  isLoading?: boolean;
+  isFetching?: boolean;
+  config?: DataTableConfig;
+  onDelete?: (selectedRows: TData[]) => Promise<void>;
+  filterValue?: string;
+  onFilterChange?: (value: string) => void;
+  defaultSort?: SortingState;
+  isFetchingNextPage?: boolean;
+  hasNextPage?: boolean;
+  fetchNextPage?: () => Promise<unknown>;
+  onError?: (error: Error) => void;
+  onReset?: () => void;
+  sorting?: SortingState;
+  onSortingChange?: (updater: SortingState | ((old: SortingState) => SortingState)) => void;
+  conversationIndex?: number;
+  customActionsRenderer?: (params: {
+    selectedCount: number;
+    selectedRows: TData[];
+    table: Table<TData & { _id: string }>;
+    showToast: (message: string) => void;
+  }) => React.ReactNode;
+}
+
+export interface DataTableSearchProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+}

packages/client/src/components/DataTable/DataTableComponents.tsx

@@ -0,0 +1,105 @@
+import { memo } from 'react';
+import { flexRender } from '@tanstack/react-table';
+import type { Row, ColumnDef } from '@tanstack/react-table';
+import type { TableColumn } from './DataTable.types';
+import { Checkbox, TableCell, TableRow, Skeleton } from '~/components';
+import { cn } from '~/utils';
+
+export const SelectionCheckbox = memo(
+  ({
+    checked,
+    onChange,
+    ariaLabel,
+  }: {
+    checked: boolean;
+    onChange: (value: boolean) => void;
+    ariaLabel: string;
+  }) => (
+    <div
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onChange(!checked);
+        }
+        e.stopPropagation();
+      }}
+      className="flex h-full w-[30px] items-center justify-center"
+      onClick={(e) => {
+        e.stopPropagation();
+        onChange(!checked);
+      }}
+    >
+      <Checkbox checked={checked} onCheckedChange={onChange} aria-label={ariaLabel} />
+    </div>
+  ),
+);
+
+SelectionCheckbox.displayName = 'SelectionCheckbox';
+
+const TableRowComponent = <TData extends Record<string, unknown>>({
+  row,
+  virtualIndex,
+}: {
+  row: Row<TData>;
+  columns: ColumnDef<TData, unknown>[];
+  index: number;
+  virtualIndex?: number;
+}) => (
+  <TableRow
+    data-state={row.getIsSelected() ? 'selected' : undefined}
+    data-index={virtualIndex}
+    className="border-none hover:bg-surface-secondary"
+  >
+    {row.getVisibleCells().map((cell) => {
+      const meta = cell.column.columnDef.meta as { className?: string } | undefined;
+      return (
+        <TableCell
+          key={cell.id}
+          className={cn('truncate p-3', cell.column.id === 'select' && 'p-1', meta?.className)}
+        >
+          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+        </TableCell>
+      );
+    })}
+  </TableRow>
+);
+
+export const MemoizedTableRow = memo(
+  TableRowComponent,
+  (prev, next) =>
+    prev.row.original === next.row.original &&
+    prev.row.getIsSelected() === next.row.getIsSelected() &&
+    prev.columns === next.columns,
+);
+
+export const SkeletonRows = memo(
+  <TData extends Record<string, unknown>, TValue>({
+    count = 10,
+    columns,
+  }: {
+    count?: number;
+    columns: TableColumn<TData, TValue>[];
+  }) => (
+    <>
+      {Array.from({ length: count }, (_, index) => (
+        <TableRow key={`skeleton-${index}`} className="h-[56px] border-b border-border-light">
+          {columns.map((column) => {
+            const columnKey = String(
+              column.id ?? ('accessorKey' in column && column.accessorKey) ?? '',
+            );
+            const meta = column.meta as { className?: string } | undefined;
+            return (
+              <TableCell key={columnKey} className={cn('px-2 py-2 md:px-3', meta?.className)}>
+                <Skeleton className="h-6 w-full" />
+              </TableCell>
+            );
+          })}
+        </TableRow>
+      ))}
+    </>
+  ),
+);
+
+SkeletonRows.displayName = 'SkeletonRows';

packages/client/src/components/DataTable/DataTableSearch.tsx

@@ -0,0 +1,37 @@
+import { memo } from 'react';
+import { startTransition } from 'react';
+import type { DataTableSearchProps } from './DataTable.types';
+import { Input } from '~/components';
+import { useLocalize } from '~/hooks';
+import { cn } from '~/utils';
+
+export const DataTableSearch = memo(
+  ({ value, onChange, placeholder, className, disabled = false }: DataTableSearchProps) => {
+    const localize = useLocalize();
+
+    return (
+      <div className="relative flex-1">
+        <label htmlFor="table-search" className="sr-only">
+          {localize('com_ui_search_table')}
+        </label>
+        <Input
+          id="table-search"
+          value={value}
+          onChange={(e) => {
+            startTransition(() => onChange(e.target.value));
+          }}
+          disabled={disabled}
+          aria-label={localize('com_ui_search_table')}
+          aria-describedby="search-description"
+          placeholder={placeholder || localize('com_ui_search')}
+          className={cn('h-12 rounded-b-none border-0 bg-surface-secondary', className)}
+        />
+        <span id="search-description" className="sr-only">
+          {localize('com_ui_search_table_description')}
+        </span>
+      </div>
+    );
+  },
+);
+
+DataTableSearch.displayName = 'DataTableSearch';