diff --git a/client/src/components/Nav/SettingsTabs/Data/SharedLinks.tsx b/client/src/components/Nav/SettingsTabs/Data/SharedLinks.tsx
index e2073c02e6..143ab126ad 100644
--- a/client/src/components/Nav/SettingsTabs/Data/SharedLinks.tsx
+++ b/client/src/components/Nav/SettingsTabs/Data/SharedLinks.tsx
@@ -1,5 +1,4 @@
-import { useCallback, useState, useMemo, useEffect, useRef } from 'react';
-import debounce from 'lodash/debounce';
+import { useCallback, useState, useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 import { Link } from 'react-router-dom';
 import { TrashIcon, MessageSquare } from 'lucide-react';
@@ -23,7 +22,6 @@ import { useDeleteSharedLinkMutation, useSharedLinksQuery } from '~/data-provide
 import { NotificationSeverity } from '~/common';
 import { useLocalize } from '~/hooks';
 import { formatDate } from '~/utils';
-import store from '~/store';
 
 const DEFAULT_PARAMS: SharedLinksListParams = {
   pageSize: 25,
@@ -37,38 +35,20 @@ export default function SharedLinks() {
   const localize = useLocalize();
   const { showToast } = useToastContext();
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
-  const isSearchEnabled = useRecoilValue(store.search);
   const [queryParams, setQueryParams] = useState<SharedLinksListParams>(DEFAULT_PARAMS);
   const [deleteRow, setDeleteRow] = useState<SharedLinkItem | null>(null);
   const [isDeleteOpen, setIsDeleteOpen] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
-  const prevSortRef = useRef({
-    sortBy: DEFAULT_PARAMS.sortBy,
-    sortDirection: DEFAULT_PARAMS.sortDirection,
-  });
 
-  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, refetch, isLoading } =
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isFetching, refetch, isLoading } =
     useSharedLinksQuery(queryParams, {
       enabled: isOpen,
+      keepPreviousData: true,
       staleTime: 30 * 1000,
-      cacheTime: 5 * 60 * 1000,
       refetchOnWindowFocus: false,
       refetchOnMount: false,
-      keepPreviousData: false,
     });
 
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const { sortBy, sortDirection } = queryParams;
-    const prevSort = prevSortRef.current;
-
-    if (sortBy !== prevSort.sortBy || sortDirection !== prevSort.sortDirection) {
-      refetch();
-      prevSortRef.current = { sortBy, sortDirection };
-    }
-  }, [queryParams, isOpen, refetch]);
-
   const handleSort = useCallback((sortField: string, sortOrder: 'asc' | 'desc') => {
     setQueryParams((prev) => ({
       ...prev,
@@ -85,17 +65,6 @@ export default function SharedLinks() {
     }));
   }, []);
 
-  const debouncedFilterChange = useMemo(
-    () => debounce(handleFilterChange, 500), // Increased debounce time to 500ms
-    [handleFilterChange],
-  );
-
-  useEffect(() => {
-    return () => {
-      debouncedFilterChange.cancel();
-    };
-  }, [debouncedFilterChange]);
-
   const allLinks = useMemo(() => {
     if (!data?.pages) {
       return [];
@@ -286,15 +255,13 @@ export default function SharedLinks() {
             columns={columns}
             data={allLinks}
             onDelete={handleDelete}
-            filterColumn="title"
+            config={{ skeleton: { count: 10 }, search: { filterColumn: 'title' } }}
             hasNextPage={hasNextPage}
             isFetchingNextPage={isFetchingNextPage}
+            isFetching={isFetching}
             fetchNextPage={handleFetchNextPage}
-            showCheckboxes={false}
-            onFilterChange={debouncedFilterChange}
-            filterValue={queryParams.search}
+            onFilterChange={handleFilterChange}
             isLoading={isLoading}
-            enableSearch={!!isSearchEnabled}
             onSortChange={handleSort}
             sortBy={queryParams.sortBy}
             sortDirection={queryParams.sortDirection}
diff --git a/client/src/components/Nav/SettingsTabs/General/ArchivedChats.tsx b/client/src/components/Nav/SettingsTabs/General/ArchivedChats.tsx
index 8bd569d8c6..153955de19 100644
--- a/client/src/components/Nav/SettingsTabs/General/ArchivedChats.tsx
+++ b/client/src/components/Nav/SettingsTabs/General/ArchivedChats.tsx
@@ -1,7 +1,6 @@
-import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
-import debounce from 'lodash/debounce';
-import { useRecoilValue } from 'recoil';
+import { useState, useCallback, useMemo } from 'react';
 import { TrashIcon, ArchiveRestore } from 'lucide-react';
+import type { ColumnDef, SortingState } from '@tanstack/react-table';
 import {
   Button,
   OGDialog,
@@ -27,7 +26,6 @@ import { MinimalIcon } from '~/components/Endpoints';
 import { NotificationSeverity } from '~/common';
 import { useLocalize } from '~/hooks';
 import { formatDate } from '~/utils';
-import store from '~/store';
 
 const DEFAULT_PARAMS: ConversationListParams = {
   isArchived: true,
@@ -36,82 +34,86 @@ const DEFAULT_PARAMS: ConversationListParams = {
   search: '',
 };
 
-type SortField = 'title' | 'createdAt';
+const defaultSort: SortingState = [
+  {
+    id: 'createdAt',
+    desc: true,
+  },
+];
+
+// Define the table column type for better type safety
+type TableColumn<TData, TValue> = ColumnDef<TData, TValue> & {
+  meta?: {
+    size?: string | number;
+    mobileSize?: string | number;
+    minWidth?: string | number;
+  };
+};
 
 export default function ArchivedChatsTable() {
   const localize = useLocalize();
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
   const { showToast } = useToastContext();
-  const isSearchEnabled = useRecoilValue(store.search);
 
   const [isOpen, setIsOpen] = useState(false);
   const [isDeleteOpen, setIsDeleteOpen] = useState(false);
   const [deleteRow, setDeleteRow] = useState<TConversation | null>(null);
   const [unarchivingId, setUnarchivingId] = useState<string | null>(null);
-  const prevSortRef = useRef({
-    sortBy: DEFAULT_PARAMS.sortBy,
-    sortDirection: DEFAULT_PARAMS.sortDirection,
-  });
 
   const [queryParams, setQueryParams] = useState<ConversationListParams>(DEFAULT_PARAMS);
-  const [searchInput, setSearchInput] = useState('');
+  const [sorting, setSorting] = useState<SortingState>(defaultSort);
+  const [searchValue, setSearchValue] = useState('');
 
-  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, refetch, isLoading } =
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isFetching, refetch, isLoading } =
     useConversationsInfiniteQuery(queryParams, {
       enabled: isOpen,
+      keepPreviousData: true,
       staleTime: 30 * 1000,
-      cacheTime: 5 * 60 * 1000,
       refetchOnWindowFocus: false,
       refetchOnMount: false,
-      keepPreviousData: false,
     });
 
-  const handleSort = useCallback((field: string, direction: 'asc' | 'desc') => {
+  const handleSearchChange = useCallback((value: string) => {
+    const trimmedValue = value.trim();
+    setSearchValue(trimmedValue);
     setQueryParams((prev) => ({
       ...prev,
-      sortBy: field as SortField,
-      sortDirection: direction,
+      search: trimmedValue,
     }));
   }, []);
 
-  // Trigger refetch when sort parameters change
-  useEffect(() => {
-    if (!isOpen) return; // Only refetch if dialog is open
-
-    const { sortBy, sortDirection } = queryParams;
-    const prevSort = prevSortRef.current;
-
-    if (sortBy !== prevSort.sortBy || sortDirection !== prevSort.sortDirection) {
-      console.log('Sort changed, refetching...', { from: prevSort, to: { sortBy, sortDirection } });
-      refetch();
-      prevSortRef.current = { sortBy, sortDirection };
-    }
-  }, [queryParams, isOpen, refetch]);
-
-  const debouncedApplySearch = useMemo(
-    () =>
-      debounce((value: string) => {
+  const handleSortingChange = useCallback(
+    (updater: SortingState | ((old: SortingState) => SortingState)) => {
+      const newSorting = typeof updater === 'function' ? updater(sorting) : updater;
+      setSorting(newSorting);
+      const sortDescriptor = newSorting[0];
+      if (sortDescriptor) {
         setQueryParams((prev) => ({
           ...prev,
-          search: encodeURIComponent(value.trim()),
+          sortBy: sortDescriptor.id as 'createdAt' | 'title',
+          sortDirection: sortDescriptor.desc ? 'desc' : 'asc',
         }));
-      }, 500), // Increased debounce time to 500ms for better UX
-    [],
-  );
-
-  const onFilterChange = useCallback(
-    (value: string) => {
-      setSearchInput(value);
-      debouncedApplySearch(value);
+      } else {
+        setQueryParams((prev) => ({
+          ...prev,
+          sortBy: 'createdAt',
+          sortDirection: 'desc',
+        }));
+      }
     },
-    [debouncedApplySearch],
+    [sorting],
   );
 
-  useEffect(() => {
-    return () => {
-      debouncedApplySearch.cancel();
-    };
-  }, [debouncedApplySearch]);
+  const handleError = useCallback(
+    (error: Error) => {
+      console.error('DataTable error:', error);
+      showToast({
+        message: localize('com_ui_unarchive_error'),
+        severity: NotificationSeverity.ERROR,
+      });
+    },
+    [showToast, localize],
+  );
 
   const allConversations = useMemo(() => {
     if (!data?.pages) return [];
@@ -149,26 +151,21 @@ export default function ArchivedChatsTable() {
 
   const handleFetchNextPage = useCallback(async () => {
     if (!hasNextPage || isFetchingNextPage) return;
-
-    try {
-      await fetchNextPage();
-    } catch (error) {
-      console.error('Failed to fetch next page:', error);
-      showToast({
-        message: localize('com_ui_unarchive_error'),
-        severity: NotificationSeverity.ERROR,
-      });
-    }
-  }, [fetchNextPage, hasNextPage, isFetchingNextPage, showToast, localize]);
+    await fetchNextPage();
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
 
   const confirmDelete = useCallback(() => {
-    if (!deleteRow?.conversationId) return;
+    if (!deleteRow?.conversationId) {
+      showToast({
+        message: localize('com_ui_convo_delete_error'),
+        severity: NotificationSeverity.WARNING,
+      });
+      return;
+    }
     deleteMutation.mutate({ conversationId: deleteRow.conversationId });
-  }, [deleteMutation, deleteRow]);
+  }, [deleteMutation, deleteRow, localize, showToast]);
 
-  const { sortBy, sortDirection } = queryParams;
-
-  const columns = useMemo(
+  const columns: TableColumn<TConversation, any>[] = useMemo(
     () => [
       {
         accessorKey: 'title',
@@ -178,26 +175,29 @@ export default function ArchivedChatsTable() {
         cell: ({ row }) => {
           const { conversationId, title } = row.original;
           return (
-            <button
-              type="button"
-              className="flex items-center gap-2 truncate"
-              onClick={() => window.open(`/c/${conversationId}`, '_blank')}
+            <a
+              href={`/c/${conversationId}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 truncate underline"
+              aria-label={localize('com_ui_open_conversation', { 0: title })}
             >
               <MinimalIcon
                 endpoint={row.original.endpoint}
                 size={28}
                 isCreatedByUser={false}
                 iconClassName="size-4"
+                aria-hidden="true"
               />
-              <span className="underline">{title}</span>
-            </button>
+              <span>{title}</span>
+            </a>
           );
         },
         meta: {
           size: isSmallScreen ? '70%' : '50%',
           mobileSize: '70%',
-          enableSorting: true,
         },
+        enableSorting: true,
       },
       {
         accessorKey: 'createdAt',
@@ -208,11 +208,11 @@ export default function ArchivedChatsTable() {
         meta: {
           size: isSmallScreen ? '30%' : '35%',
           mobileSize: '30%',
-          enableSorting: true,
         },
+        enableSorting: true,
       },
       {
-        accessorKey: 'actions',
+        id: 'actions',
         header: () => (
           <Label className="px-2 py-0 text-xs sm:px-2 sm:py-2 sm:text-sm">
             {localize('com_assistants_actions')}
@@ -220,6 +220,7 @@ export default function ArchivedChatsTable() {
         ),
         cell: ({ row }) => {
           const conversation = row.original;
+          const { title } = conversation;
           const isRowUnarchiving = unarchivingId === conversation.conversationId;
 
           return (
@@ -231,13 +232,16 @@ export default function ArchivedChatsTable() {
                     variant="ghost"
                     className="h-8 w-8 p-0 hover:bg-surface-hover"
                     onClick={() => {
-                      setUnarchivingId(conversation.conversationId);
+                      const conversationId = conversation.conversationId;
+                      if (!conversationId) return;
+                      setUnarchivingId(conversationId);
                       unarchiveMutation.mutate(
-                        { conversationId: conversation.conversationId, isArchived: false },
+                        { conversationId, isArchived: false },
                         { onSettled: () => setUnarchivingId(null) },
                       );
                     }}
                     disabled={isRowUnarchiving}
+                    aria-label={localize('com_ui_unarchive_conversation_title', { 0: title })}
                   >
                     {isRowUnarchiving ? <Spinner /> : <ArchiveRestore className="size-4" />}
                   </Button>
@@ -253,6 +257,7 @@ export default function ArchivedChatsTable() {
                       setDeleteRow(row.original);
                       setIsDeleteOpen(true);
                     }}
+                    aria-label={localize('com_ui_delete_conversation_title', { 0: title })}
                   >
                     <TrashIcon className="size-4" />
                   </Button>
@@ -264,11 +269,11 @@ export default function ArchivedChatsTable() {
         meta: {
           size: '15%',
           mobileSize: '25%',
-          enableSorting: false,
         },
+        enableSorting: false,
       },
     ],
-    [isSmallScreen, localize, unarchivingId, unarchiveMutation],
+    [isSmallScreen, localize, unarchiveMutation, unarchivingId],
   );
 
   return (
@@ -288,43 +293,30 @@ export default function ArchivedChatsTable() {
             columns={columns}
             data={allConversations}
             isLoading={isLoading}
-            enableSearch={!!isSearchEnabled}
-            filterColumn="title"
-            onFilterChange={onFilterChange}
-            filterValue={searchInput}
+            isFetching={isFetching}
+            config={{
+              skeleton: { count: 10 },
+              search: {
+                filterColumn: 'title',
+                enableSearch: true,
+                debounce: 300,
+              },
+              selection: {
+                enableRowSelection: false,
+                showCheckboxes: false,
+              },
+            }}
+            filterValue={searchValue}
+            onFilterChange={handleSearchChange}
             fetchNextPage={handleFetchNextPage}
             hasNextPage={hasNextPage}
             isFetchingNextPage={isFetchingNextPage}
-            showCheckboxes={false}
-            onSortChange={handleSort}
-            sortBy={sortBy}
-            sortDirection={sortDirection}
+            sorting={sorting}
+            onSortingChange={handleSortingChange}
+            onError={handleError}
           />
         </OGDialogContent>
       </OGDialog>
-      <OGDialog open={isDeleteOpen} onOpenChange={setIsDeleteOpen}>
-        <OGDialogTemplate
-          showCloseButton={false}
-          title={localize('com_ui_delete_archived_chats')}
-          className="w-11/12 max-w-md"
-          main={
-            <div className="flex w-full flex-col items-center gap-2">
-              <div className="grid w-full items-center gap-2">
-                <Label className="text-left text-sm font-medium">
-                  {localize('com_ui_delete_confirm')} <strong>{deleteRow?.title}</strong>
-                </Label>
-              </div>
-            </div>
-          }
-          selection={{
-            selectHandler: confirmDelete,
-            selectClasses: `bg-red-700 dark:bg-red-600 hover:bg-red-800 dark:hover:bg-red-800 text-white ${
-              deleteMutation.isLoading ? 'cursor-not-allowed opacity-80' : ''
-            }`,
-            selectText: deleteMutation.isLoading ? <Spinner /> : localize('com_ui_delete'),
-          }}
-        />
-      </OGDialog>
     </div>
   );
 }
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index 7789820d5b..a1ff977f29 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -1042,7 +1042,6 @@
   "com_ui_no_read_access": "You don't have permission to view memories",
   "com_ui_no_results_found": "No results found",
   "com_ui_no_terms_content": "No terms and conditions content to display",
-  "com_ui_no_valid_items": "something needs to go here. was empty",
   "com_ui_none": "None",
   "com_ui_not_used": "Not Used",
   "com_ui_nothing_found": "Nothing found",
@@ -1304,5 +1303,10 @@
   "com_ui_zoom_in": "Zoom in",
   "com_ui_zoom_level": "Zoom level",
   "com_ui_zoom_out": "Zoom out",
+  "com_ui_add_anything": "Add anything",
+  "com_ui_drag_and_drop": "Drop any file here to add it to the conversation",
+  "com_ui_open_conversation": "Open conversation {{0}}",
+  "com_ui_delete_conversation_title": "Delete conversation {{0}}",
+  "com_ui_unarchive_conversation_title": "Unarchive conversation {{0}}",
   "com_user_message": "You"
 }
diff --git a/packages/client/src/components/DataTable.tsx b/packages/client/src/components/DataTable.tsx
index 1b161e0df2..6ba29d2022 100644
--- a/packages/client/src/components/DataTable.tsx
+++ b/packages/client/src/components/DataTable.tsx
@@ -1,4 +1,13 @@
-import React, { useCallback, useEffect, useRef, useState, memo, useMemo } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  memo,
+  useMemo,
+  startTransition,
+} from 'react';
 import { ArrowUp, ArrowDownUp } from 'lucide-react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import {
@@ -15,14 +24,58 @@ import {
 } from '@tanstack/react-table';
 import type { Table as TTable } from '@tanstack/react-table';
 import { Table, TableRow, TableBody, TableCell, TableHead, TableHeader } from './Table';
+import DataTableErrorBoundary from './DataTable/DataTableErrorBoundary';
 import AnimatedSearchInput from './AnimatedSearchInput';
+import { useMediaQuery, useLocalize } from '~/hooks';
 import { TrashIcon, Spinner } from '~/svgs';
-import { useMediaQuery } from '~/hooks';
 import { Skeleton } from './Skeleton';
 import { Checkbox } from './Checkbox';
 import { Button } from './Button';
 import { cn } from '~/utils';
 
+interface PrevProps {
+  defaultSort: SortingState;
+  dataLength: number;
+  columnsLength: number;
+  filterValue: string;
+  sortingLength?: number;
+}
+
+// Constants extracted for maintainability
+export const DATA_TABLE_CONSTANTS = {
+  // Selection and checkbox dimensions
+  CHECKBOX_WIDTH: '30px' as const,
+  SELECT_COLUMN_SIZE: '50px' as const,
+  SELECT_COLUMN_MIN_WIDTH: '50px' as const,
+  DELETE_BUTTON_MIN_WIDTH: '40px' as const,
+
+  // Animation and timing
+  ANIMATION_DELAY_BASE: 15 as const, // ms per row
+  ANIMATION_DELAY_MAX: 300 as const, // ms cap
+  SEARCH_DEBOUNCE_MS: 300 as const,
+  ROW_TRANSITION_DURATION: '200ms' as const,
+
+  // Virtual scrolling and sizing
+  OVERS_CAN: 10 as const,
+  ROW_HEIGHT_ESTIMATE: 50 as const, // px fallback
+  INFINITE_SCROLL_THRESHOLD: 1.2 as const, // multiplier of clientHeight
+  SCROLL_THROTTLE_MS: 100 as const, // throttle scroll events
+
+  // Skeleton and layout
+  SKELETON_OFFSET: 150 as const, // px added to base widths
+  SEARCH_INPUT_MIN_WIDTH: '200px' as const,
+  TABLE_MIN_WIDTH: '300px' as const,
+  LOADING_INDICATOR_SIZE: 4 as const, // rem for spinner
+  TRASH_ICON_SIZE: 3.5 as const, // rem base, 4 for sm
+
+  // Memory management
+  MAX_MEASURED_HEIGHTS: 100 as const,
+  MEASURED_HEIGHTS_TRIM: 50 as const,
+} as const;
+
+// Static skeleton widths for performance - avoids random computation on every render
+const STATIC_SKELETON_WIDTHS = [20, 40, 60, 80, 100, 120, 140, 160, 180, 200, 220, 240];
+
 type TableColumn<TData, TValue> = ColumnDef<TData, TValue> & {
   meta?: {
     size?: string | number;
@@ -31,6 +84,52 @@ type TableColumn<TData, TValue> = ColumnDef<TData, TValue> & {
   };
 };
 
+// Throttle utility for performance optimization
+const throttle = <T extends (...args: any[]) => any>(fn: T, delay: number): T => {
+  let timeoutId: NodeJS.Timeout | null = null;
+  let lastExecTime = 0;
+
+  return ((...args: any[]) => {
+    const currentTime = Date.now();
+
+    if (currentTime - lastExecTime > delay) {
+      fn(...args);
+      lastExecTime = currentTime;
+    } else {
+      if (timeoutId) clearTimeout(timeoutId);
+      timeoutId = setTimeout(
+        () => {
+          fn(...args);
+          lastExecTime = Date.now();
+        },
+        delay - (currentTime - lastExecTime),
+      );
+    }
+  }) as T;
+};
+
+// Deep comparison utility for objects
+const deepEqual = (a: any, b: any): boolean => {
+  if (a === b) return true;
+  if (a == null || b == null) return false;
+  if (typeof a !== typeof b) return false;
+
+  if (typeof a === 'object') {
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    if (keysA.length !== keysB.length) return false;
+
+    for (const key of keysA) {
+      if (!keysB.includes(key) || !deepEqual(a[key], b[key])) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  return false;
+};
+
 const SelectionCheckbox = memo(
   ({
     checked,
@@ -44,9 +143,18 @@ const SelectionCheckbox = memo(
     <div
       role="button"
       tabIndex={0}
-      onKeyDown={(e) => e.stopPropagation()}
-      className="flex h-full w-[30px] items-center justify-center"
-      onClick={(e) => e.stopPropagation()}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onChange(!checked);
+        }
+        e.stopPropagation();
+      }}
+      className={`flex h-full ${DATA_TABLE_CONSTANTS.CHECKBOX_WIDTH} items-center justify-center`}
+      onClick={(e) => {
+        e.stopPropagation();
+        onChange(!checked);
+      }}
     >
       <Checkbox checked={checked} onCheckedChange={onChange} aria-label={ariaLabel} />
     </div>
@@ -55,45 +163,64 @@ const SelectionCheckbox = memo(
 
 SelectionCheckbox.displayName = 'SelectionCheckbox';
 
+// Memoized column style computation
+const useColumnStyles = <TData, TValue>(
+  columns: TableColumn<TData, TValue>[],
+  isSmallScreen: boolean,
+) => {
+  return useMemo(() => {
+    const getColumnStyle = (column: TableColumn<TData, TValue>): React.CSSProperties => ({
+      width: isSmallScreen ? column?.meta?.mobileSize : column?.meta?.size,
+      minWidth: column?.meta?.minWidth,
+      maxWidth: column?.meta?.size,
+    });
+
+    return columns.reduce(
+      (acc, column) => {
+        if (column.id) {
+          acc[column.id] = getColumnStyle(column);
+        }
+        return acc;
+      },
+      {} as Record<string, React.CSSProperties>,
+    );
+  }, [columns, isSmallScreen]);
+};
+
 const TableRowComponent = <TData, TValue>({
   row,
-  isSmallScreen,
-  onSelectionChange,
+  columnStyles,
   index,
-  isSearching,
+  virtualIndex,
 }: {
   row: Row<TData>;
-  isSmallScreen: boolean;
-  onSelectionChange?: (rowId: string, selected: boolean) => void;
+  columnStyles: Record<string, React.CSSProperties>;
   index: number;
-  isSearching: boolean;
+  virtualIndex?: number;
 }) => {
   const handleSelection = useCallback(
     (value: boolean) => {
-      row.toggleSelected(value);
-      onSelectionChange?.(row.id, value);
+      startTransition(() => {
+        row.toggleSelected(value);
+      });
     },
-    [row, onSelectionChange],
+    [row],
   );
 
   return (
     <TableRow
       data-state={row.getIsSelected() ? 'selected' : undefined}
-      className="motion-safe:animate-fadeIn border-b border-border-light transition-all duration-300 ease-out hover:bg-surface-secondary"
-      style={{
-        animationDelay: `${index * 20}ms`,
-        transform: `translateY(${isSearching ? '4px' : '0'})`,
-        opacity: isSearching ? 0.5 : 1,
-      }}
+      data-index={virtualIndex} // For dynamic measurement
+      className="motion-safe:animate-fadeIn border-b border-border-light transition-all duration-200 ease-out hover:bg-surface-secondary"
     >
       {row.getVisibleCells().map((cell) => {
         if (cell.column.id === 'select') {
           return (
-            <TableCell key={cell.id} className="px-2 py-1 transition-all duration-300">
+            <TableCell key={cell.id} className="px-2 py-1 transition-colors duration-200">
               <SelectionCheckbox
                 checked={row.getIsSelected()}
                 onChange={handleSelection}
-                ariaLabel="Select row"
+                ariaLabel={`Select row ${index + 1}`}
               />
             </TableCell>
           );
@@ -102,13 +229,10 @@ const TableRowComponent = <TData, TValue>({
         return (
           <TableCell
             key={cell.id}
-            className="w-0 max-w-0 px-2 py-1 align-middle text-xs transition-all duration-300 sm:px-4 sm:py-2 sm:text-sm"
-            style={getColumnStyle(
-              cell.column.columnDef as TableColumn<TData, TValue>,
-              isSmallScreen,
-            )}
+            className="w-0 max-w-0 px-2 py-1 align-middle text-xs transition-colors duration-200 sm:px-4 sm:py-2 sm:text-sm"
+            style={columnStyles[cell.column.id] || {}}
           >
-            <div className="overflow-hidden text-ellipsis">
+            <div className="overflow-hidden text-ellipsis whitespace-nowrap">
               {flexRender(cell.column.columnDef.cell, cell.getContext())}
             </div>
           </TableCell>
@@ -120,17 +244,6 @@ const TableRowComponent = <TData, TValue>({
 
 const MemoizedTableRow = memo(TableRowComponent) as typeof TableRowComponent;
 
-function getColumnStyle<TData, TValue>(
-  column: TableColumn<TData, TValue>,
-  isSmallScreen: boolean,
-): React.CSSProperties {
-  return {
-    width: isSmallScreen ? column.meta?.mobileSize : column.meta?.size,
-    minWidth: column.meta?.minWidth,
-    maxWidth: column.meta?.size,
-  };
-}
-
 const DeleteButton = memo(
   ({
     onDelete,
@@ -143,21 +256,26 @@ const DeleteButton = memo(
     disabled: boolean;
     isSmallScreen: boolean;
   }) => {
-    if (!onDelete) {
-      return null;
-    }
+    if (!onDelete) return null;
+
     return (
       <Button
         variant="outline"
         onClick={onDelete}
         disabled={disabled}
-        className={cn('min-w-[40px] transition-all duration-200', isSmallScreen && 'px-2 py-1')}
+        className={cn(
+          `min-w-[${DATA_TABLE_CONSTANTS.DELETE_BUTTON_MIN_WIDTH}] transition-all ${DATA_TABLE_CONSTANTS.ROW_TRANSITION_DURATION} hover:border-red-300 hover:bg-red-50 dark:hover:bg-red-950/20`,
+          isSmallScreen && 'px-2 py-1',
+        )}
+        aria-label={isDeleting ? 'Deleting selected rows' : 'Delete selected rows'}
       >
         {isDeleting ? (
-          <Spinner className="size-4" />
+          <Spinner className={`size-${DATA_TABLE_CONSTANTS.LOADING_INDICATOR_SIZE}`} />
         ) : (
           <>
-            <TrashIcon className="size-3.5 text-red-400 sm:size-4" />
+            <TrashIcon
+              className={`size-${DATA_TABLE_CONSTANTS.TRASH_ICON_SIZE} text-red-500 sm:size-4`}
+            />
             {!isSmallScreen && <span className="ml-2">Delete</span>}
           </>
         )}
@@ -166,93 +284,408 @@ const DeleteButton = memo(
   },
 );
 
+DeleteButton.displayName = 'DeleteButton';
+
+// Memoized skeleton rows with static precomputed widths for optimal performance
+const SkeletonRows = memo(function <TData, TValue>({
+  count = 10,
+  columns,
+  columnStyles,
+}: {
+  count?: number;
+  columns: TableColumn<TData, TValue>[];
+  columnStyles: Record<string, React.CSSProperties>;
+}) {
+  // Use static shuffled widths to avoid random computation; slice based on count
+  const skeletonWidths = useMemo(() => {
+    // Pre-shuffle once at component level for consistency across renders
+    const shuffled = [...STATIC_SKELETON_WIDTHS].sort(() => Math.random() - 0.5);
+    return shuffled
+      .slice(0, Math.min(count, shuffled.length))
+      .map((w) => w + DATA_TABLE_CONSTANTS.SKELETON_OFFSET);
+  }, [count]);
+
+  if (!columns.length || !columns[0]?.id) return null;
+  const firstDataColumnIndex = columns[0].id === 'select' ? 1 : 0;
+
+  return (
+    <>
+      {Array.from({ length: count }, (_, index) => (
+        <TableRow key={`skeleton-${index}`} className="border-b border-border-light">
+          {columns.map((column, columnIndex) => {
+            const style = columnStyles[column.id!] || {};
+            const isFirstDataColumn = columnIndex === firstDataColumnIndex;
+            const width = isFirstDataColumn
+              ? (skeletonWidths[index % skeletonWidths.length] ?? undefined)
+              : undefined;
+
+            return (
+              <TableCell key={column.id} className="px-2 py-1 sm:px-4 sm:py-2" style={style}>
+                <Skeleton
+                  className="h-6 animate-pulse"
+                  style={{ width: width ? `${width}px` : '100%' }}
+                />
+              </TableCell>
+            );
+          })}
+        </TableRow>
+      ))}
+    </>
+  );
+});
+
+SkeletonRows.displayName = 'SkeletonRows';
+
+/**
+ * Comprehensive configuration object for DataTable features.
+ * Consolidates all individual props into nested sections for better maintainability and type safety.
+ *
+ * @example
+ * const config = {
+ *   selection: { enableRowSelection: true, showCheckboxes: false },
+ *   search: { enableSearch: true, debounce: 500, filterColumn: 'name' },
+ *   skeleton: { count: 5 },
+ *   virtualization: { overscan: 15 }
+ * };
+ *
+ * Defaults: enableRowSelection: true, showCheckboxes: true, enableSearch: true,
+ * skeleton.count: 10, virtualization.overscan: 10, search.debounce: 300
+ */
+interface DataTableConfig {
+  /**
+   * Selection configuration for row selection features.
+   * Controls checkbox visibility and row selection behavior.
+   */
+  selection?: {
+    /**
+     * Enable row selection functionality across the table.
+     * When true, rows can be selected via checkboxes or keyboard navigation.
+     * @default true
+     */
+    enableRowSelection?: boolean;
+
+    /**
+     * Show checkboxes in the first column for row selection.
+     * Requires enableRowSelection to be true. Affects both header (select all) and row-level checkboxes.
+     * @default true
+     */
+    showCheckboxes?: boolean;
+  };
+
+  /**
+   * Search configuration for filtering functionality.
+   * Enables search input with debounced filtering on specified column.
+   */
+  search?: {
+    /**
+     * Enable search input and filtering capabilities.
+     * When true, displays AnimatedSearchInput above the table for filtering data.
+     * Requires filterColumn to be specified for column-specific filtering.
+     * @default true
+     */
+    enableSearch?: boolean;
+
+    /**
+     * Debounce delay for search input in milliseconds.
+     * Controls how long to wait after user stops typing before filtering the table.
+     * Higher values reduce re-renders but may feel less responsive.
+     * @default 300
+     */
+    debounce?: number;
+
+    /**
+     * Column key to filter search results on.
+     * Must match a column accessorKey. Search will filter rows where this column's value contains the search term.
+     * Required when enableSearch is true.
+     * @example 'name', 'email', 'id'
+     */
+    filterColumn?: string;
+  };
+
+  /**
+   * Skeleton configuration for loading states.
+   * Controls the number of skeleton rows shown while data is loading.
+   */
+  skeleton?: {
+    /**
+     * Number of skeleton rows to display during initial loading or data fetching.
+     * Skeleton rows provide visual feedback and maintain table layout consistency.
+     * @default 10
+     */
+    count?: number;
+  };
+
+  /**
+   * Virtualization configuration for scroll performance.
+   * Controls virtual scrolling behavior for large datasets.
+   */
+  virtualization?: {
+    /**
+     * Number of additional rows to render outside the visible viewport.
+     * Higher values improve scroll smoothness but increase memory usage.
+     * Recommended range: 5-20 depending on row complexity and dataset size.
+     * @default 10
+     */
+    overscan?: number;
+  };
+}
+
+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;
+}
+
+// Optimized row selection state with deep comparison
+const useOptimizedRowSelection = (initialSelection: Record<string, boolean> = {}) => {
+  const [selection, setSelection] = useState(initialSelection);
+
+  const optimizedSelection = useMemo(() => {
+    return Object.keys(selection).length > 0 ? selection : {};
+  }, [selection]);
+
+  const setOptimizedSelection = useCallback(
+    (
+      newSelection:
+        | Record<string, boolean>
+        | ((prev: Record<string, boolean>) => Record<string, boolean>),
+    ) => {
+      setSelection((prev) => {
+        const next = typeof newSelection === 'function' ? newSelection(prev) : newSelection;
+        return deepEqual(prev, next) ? prev : next;
+      });
+    },
+    [],
+  );
+
+  return [optimizedSelection, setOptimizedSelection] as const;
+};
+
 interface DataTableProps<TData, TValue> {
   columns: TableColumn<TData, TValue>[];
   data: TData[];
-
   className?: string;
   isLoading?: boolean;
-
-  enableRowSelection?: boolean;
-  showCheckboxes?: boolean;
+  isFetching?: boolean;
+  /**
+   * Configuration object consolidating all feature props.
+   * See DataTableConfig for detailed structure and defaults.
+   */
+  config?: DataTableConfig;
   onDelete?: (selectedRows: TData[]) => Promise<void>;
-
-  enableSearch?: boolean;
-  filterColumn?: string;
   filterValue?: string;
   onFilterChange?: (value: string) => void;
-
   defaultSort?: SortingState;
-  columnVisibilityMap?: Record<string, string>;
-
-  pageSize?: number;
   isFetchingNextPage?: boolean;
   hasNextPage?: boolean;
-  fetchNextPage?: (options?: unknown) => Promise<unknown>;
+  fetchNextPage?: () => Promise<unknown>;
+  onError?: (error: Error) => void;
+  onReset?: () => void;
+  sorting?: SortingState;
+  onSortingChange?: (updater: SortingState | ((old: SortingState) => SortingState)) => void;
 }
 
+/**
+ * DataTable renders a virtualized, searchable table with selection and infinite loading.
+ * Optimized for performance with memoization, virtual scrolling, and efficient state management.
+ */
 export default function DataTable<TData, TValue>({
   columns,
   data,
-
   className = '',
-  isLoading,
-
-  enableRowSelection = true,
-  showCheckboxes = true,
+  isLoading = false,
+  isFetching = false,
+  config,
   onDelete,
-
-  enableSearch = true,
-  filterColumn,
-  filterValue,
+  filterValue = '',
   onFilterChange,
-
   defaultSort = [],
-
   isFetchingNextPage = false,
   hasNextPage = false,
   fetchNextPage,
+  onError,
+  onReset,
+  sorting,
+  onSortingChange,
 }: DataTableProps<TData, TValue>) {
+  const renderCountRef = useRef(0);
+  const prevPropsRef = useRef<PrevProps | null>(null);
+
+  const tableConfig = useMemo(() => {
+    return {
+      enableRowSelection: config?.selection?.enableRowSelection ?? true,
+      showCheckboxes: config?.selection?.showCheckboxes ?? true,
+      enableSearch: config?.search?.enableSearch ?? true,
+      filterColumn: config?.search?.filterColumn,
+      skeletonCount: config?.skeleton?.count ?? 10,
+      overscan: config?.virtualization?.overscan ?? DATA_TABLE_CONSTANTS.OVERS_CAN,
+      debounceDelay: config?.search?.debounce ?? DATA_TABLE_CONSTANTS.SEARCH_DEBOUNCE_MS,
+    };
+  }, [config]);
+
+  const {
+    enableRowSelection,
+    showCheckboxes,
+    enableSearch,
+    filterColumn,
+    skeletonCount,
+    overscan,
+    debounceDelay,
+  } = tableConfig;
+
+  const localize = useLocalize();
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
   const tableContainerRef = useRef<HTMLDivElement>(null);
 
+  // State management
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+  const [optimizedRowSelection, setOptimizedRowSelection] = useOptimizedRowSelection();
+  const [term, setTerm] = useState('');
   const [isDeleting, setIsDeleting] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
   const [isSearching, setIsSearching] = useState(false);
-  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
-  const [searchTerm, setSearchTerm] = useState(filterValue ?? '');
-  const [sorting, setSorting] = useState<SortingState>(defaultSort);
 
-  const tableColumns = useMemo(() => {
-    if (!enableRowSelection || !showCheckboxes) {
-      return columns;
+  const debouncedTerm = useDebounced(term, debounceDelay);
+
+  // Track when we're waiting for search results
+  const isWaitingForSearchResults = isSearching && isFetching;
+  const isFirstLoad = isLoading && data.length === 0;
+  const isRefreshing = isFetching && !isFirstLoad && !isFetchingNextPage && !isSearching;
+
+  // Show skeletons during initial load, refresh, or search
+  const showSkeletons = isFirstLoad || isRefreshing || isWaitingForSearchResults;
+
+  // External sorting support: use provided sorting state, fall back to internal
+  const [internalSorting, setInternalSorting] = useState<SortingState>(defaultSort);
+  const finalSorting = sorting ?? internalSorting;
+
+  // Sorting handler: call external callback if provided, otherwise use internal state
+  const handleSortingChangeInternal = useCallback(
+    (updater: SortingState | ((old: SortingState) => SortingState)) => {
+      startTransition(() => {
+        const newSorting = typeof updater === 'function' ? updater(finalSorting) : updater;
+        setInternalSorting(newSorting);
+        onSortingChange?.(newSorting);
+      });
+    },
+    [finalSorting, onSortingChange],
+  );
+  const handleSortingChange = onSortingChange ?? handleSortingChangeInternal;
+
+  // Diagnostic logging
+  renderCountRef.current += 1;
+
+  if (process.env.NODE_ENV === 'development') {
+    console.log('DataTable: Render #', renderCountRef.current);
+    console.log('DataTable: Props summary:', {
+      dataLength: data?.length,
+      columnsLength: columns?.length,
+      defaultSort,
+      sorting: sorting?.length,
+      filterValue,
+      isLoading,
+      configKeys: config ? Object.keys(config) : null,
+    });
+
+    // Prop stability check
+    if (prevPropsRef.current) {
+      const prev = prevPropsRef.current;
+      if (
+        !Object.is(defaultSort, prev.defaultSort) ||
+        data.length !== prev.dataLength ||
+        columns.length !== prev.columnsLength ||
+        filterValue !== prev.filterValue ||
+        sorting?.length !== prev.sortingLength
+      ) {
+        console.log('DataTable: Key props changed since last render');
+      }
     }
-    const selectColumn = {
+    prevPropsRef.current = {
+      defaultSort,
+      dataLength: data?.length || 0,
+      columnsLength: columns?.length || 0,
+      filterValue,
+      sortingLength: sorting?.length || 0,
+    };
+  }
+
+  const sanitizeError = useCallback((err: Error): string => {
+    const message = err.message;
+    if (message?.includes('auth') || message?.includes('token')) {
+      return 'Authentication failed. Please log in again.';
+    }
+    return process.env.NODE_ENV === 'development'
+      ? message
+      : 'An error occurred. Please try again.';
+  }, []);
+
+  // Memoized table columns with selection
+  const tableColumns = useMemo(() => {
+    if (!enableRowSelection || !showCheckboxes) return columns;
+
+    const selectColumn: TableColumn<TData, boolean> = {
       id: 'select',
       header: ({ table }: { table: TTable<TData> }) => (
-        <div className="flex h-full w-[30px] items-center justify-center">
+        <div
+          className={`flex h-full ${DATA_TABLE_CONSTANTS.CHECKBOX_WIDTH} items-center justify-center`}
+        >
           <Checkbox
-            checked={table.getIsAllPageRowsSelected()}
+            checked={
+              table.getIsAllPageRowsSelected() ||
+              (table.getIsSomePageRowsSelected() && 'indeterminate')
+            }
             onCheckedChange={(value) => table.toggleAllPageRowsSelected(Boolean(value))}
-            aria-label="Select all"
+            aria-label="Select all rows"
           />
         </div>
       ),
-      cell: ({ row }: { row: Row<TData> }) => (
+      cell: ({ row }) => (
         <SelectionCheckbox
           checked={row.getIsSelected()}
           onChange={(value) => row.toggleSelected(value)}
-          ariaLabel="Select row"
+          ariaLabel={`Select row ${row.index + 1}`}
         />
       ),
-      meta: { size: '50px' },
+      meta: {
+        size: DATA_TABLE_CONSTANTS.SELECT_COLUMN_SIZE,
+        minWidth: DATA_TABLE_CONSTANTS.SELECT_COLUMN_MIN_WIDTH,
+      },
     };
+
     return [selectColumn, ...columns];
   }, [columns, enableRowSelection, showCheckboxes]);
 
+  // Memoized column styles for performance
+  const columnStyles = useColumnStyles(tableColumns, isSmallScreen);
+
+  // Set CSS variables for column sizing
+  useLayoutEffect(() => {
+    if (tableContainerRef.current) {
+      tableColumns.forEach((column, index) => {
+        if (column.id) {
+          const size = columnStyles[column.id]?.width || 'auto';
+          tableContainerRef.current!.style.setProperty(`--col-${index}-size`, `${size}`);
+        }
+      });
+    }
+  }, [tableColumns, columnStyles]);
+
+  // Memoized row data with stable references
+  const memoizedRowData = useMemo(() => {
+    return data.map((item, index) => ({
+      ...item,
+      _index: index,
+      _id: (item as any)?.id || index,
+    }));
+  }, [data]);
+
+  // React Table instance
   const table = useReactTable({
-    data,
+    data: memoizedRowData,
     columns: tableColumns,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
@@ -260,24 +693,63 @@ export default function DataTable<TData, TValue>({
     enableRowSelection,
     enableMultiRowSelection: true,
     state: {
-      sorting,
+      sorting: finalSorting,
       columnFilters,
       columnVisibility,
-      rowSelection,
+      rowSelection: optimizedRowSelection,
     },
-    onSortingChange: setSorting,
+    onSortingChange: handleSortingChange,
     onColumnFiltersChange: setColumnFilters,
     onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
+    onRowSelectionChange: setOptimizedRowSelection,
   });
 
   const { rows } = table.getRowModel();
 
+  // Memoized header groups for performance
+  const memoizedHeaderGroups = useMemo(
+    () => table.getHeaderGroups(),
+    [
+      table
+        .getAllColumns()
+        .map((c) => c.id)
+        .join(','),
+      finalSorting,
+    ],
+  );
+
+  // Virtual scrolling setup with optimized height measurement
+  const measuredHeightsRef = useRef<number[]>([]);
   const rowVirtualizer = useVirtualizer({
     count: rows.length,
     getScrollElement: () => tableContainerRef.current,
-    estimateSize: useCallback(() => 48, []),
-    overscan: 10,
+    estimateSize: useCallback(() => {
+      const heights = measuredHeightsRef.current;
+      if (heights.length > 0) {
+        const avg = heights.reduce((a, b) => a + b, 0) / heights.length;
+        return Math.max(avg, DATA_TABLE_CONSTANTS.ROW_HEIGHT_ESTIMATE);
+      }
+      return DATA_TABLE_CONSTANTS.ROW_HEIGHT_ESTIMATE;
+    }, []),
+    overscan,
+    measureElement: (el) => {
+      if (el) {
+        const height = el.getBoundingClientRect().height;
+        // Memory management for measured heights
+        measuredHeightsRef.current = [
+          ...measuredHeightsRef.current.slice(-DATA_TABLE_CONSTANTS.MEASURED_HEIGHTS_TRIM + 1),
+          height,
+        ];
+
+        // Trim if exceeds max
+        if (measuredHeightsRef.current.length > DATA_TABLE_CONSTANTS.MAX_MEASURED_HEIGHTS) {
+          measuredHeightsRef.current = measuredHeightsRef.current.slice(
+            -DATA_TABLE_CONSTANTS.MEASURED_HEIGHTS_TRIM,
+          );
+        }
+      }
+      return el?.getBoundingClientRect().height ?? DATA_TABLE_CONSTANTS.ROW_HEIGHT_ESTIMATE;
+    },
   });
 
   const virtualRows = rowVirtualizer.getVirtualItems();
@@ -286,211 +758,402 @@ export default function DataTable<TData, TValue>({
   const paddingBottom =
     virtualRows.length > 0 ? totalSize - virtualRows[virtualRows.length - 1].end : 0;
 
+  // Virtual rows with stable keys for better performance
+  const virtualRowsWithStableKeys = useMemo(
+    () =>
+      virtualRows.map((vRow) => ({
+        ...vRow,
+        stableKey: `${vRow.index}-${rows[vRow.index]?.id || vRow.index}`,
+      })),
+    [virtualRows, rows],
+  );
+
+  // Infinite scrolling with throttled handler
+  const handleScrollInternal = useCallback(async () => {
+    const mountedRef = { current: true };
+    if (!mountedRef.current || !tableContainerRef.current) return;
+
+    const scrollElement = tableContainerRef.current;
+    const element = scrollElement.getBoundingClientRect();
+    const scrollTop = scrollElement.scrollTop;
+    const clientHeight = scrollElement.clientHeight;
+    const virtualEnd = virtualRows.length > 0 ? virtualRows[virtualRows.length - 1].end : 0;
+
+    if (
+      totalSize - virtualEnd <= clientHeight * DATA_TABLE_CONSTANTS.INFINITE_SCROLL_THRESHOLD ||
+      (element.bottom - window.innerHeight < 100 && scrollTop + clientHeight >= totalSize - 100)
+    ) {
+      try {
+        await fetchNextPage?.();
+      } catch (err) {
+        const rawError = err instanceof Error ? err : new Error('Failed to fetch next page');
+        const sanitizedMessage = sanitizeError(rawError);
+        const sanitizedError = new Error(sanitizedMessage);
+        setError(sanitizedError);
+        onError?.(sanitizedError);
+      }
+    }
+  }, [fetchNextPage, totalSize, virtualRows, onError, sanitizeError]);
+
+  const throttledHandleScroll = useMemo(
+    () => throttle(handleScrollInternal, DATA_TABLE_CONSTANTS.SCROLL_THROTTLE_MS),
+    [handleScrollInternal],
+  );
+
   useEffect(() => {
     const scrollElement = tableContainerRef.current;
-    if (!scrollElement) {
-      return;
-    }
+    if (!scrollElement || !hasNextPage || isFetchingNextPage) return;
 
-    const handleScroll = async () => {
-      if (!hasNextPage || isFetchingNextPage) {
-        return;
-      }
-      const { scrollTop, scrollHeight, clientHeight } = scrollElement;
-      if (scrollHeight - scrollTop <= clientHeight * 1.5) {
-        try {
-          // Safely fetch next page without breaking if lastPage is undefined
-          await fetchNextPage?.();
-        } catch (error) {
-          console.error('Unable to fetch next page:', error);
-        }
-      }
-    };
+    scrollElement.addEventListener('scroll', throttledHandleScroll, { passive: true });
+    return () => scrollElement.removeEventListener('scroll', throttledHandleScroll);
+  }, [throttledHandleScroll, hasNextPage, isFetchingNextPage]);
 
-    scrollElement.addEventListener('scroll', handleScroll, { passive: true });
-    return () => scrollElement.removeEventListener('scroll', handleScroll);
-  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+  // Resize observer for virtualizer revalidation
+  const handleWindowResize = useCallback(() => {
+    rowVirtualizer.measure();
+  }, [rowVirtualizer]);
 
   useEffect(() => {
-    setIsSearching(true);
-    const timeout = setTimeout(() => {
-      onFilterChange?.(searchTerm);
-      setIsSearching(false);
-    }, 300);
-    return () => clearTimeout(timeout);
-  }, [searchTerm, onFilterChange]);
+    const scrollElement = tableContainerRef.current;
+    if (!scrollElement) return;
 
-  const handleDelete = useCallback(async () => {
-    if (!onDelete) {
-      return;
+    const resizeObserver = new ResizeObserver(() => {
+      rowVirtualizer.measure();
+      if (scrollElement) {
+        throttledHandleScroll();
+      }
+    });
+
+    resizeObserver.observe(scrollElement);
+    window.addEventListener('resize', handleWindowResize);
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener('resize', handleWindowResize);
+    };
+  }, [rowVirtualizer, handleWindowResize, throttledHandleScroll]);
+
+  // Mount tracking for cleanup
+  const mountedRef = useRef(true);
+  useLayoutEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  // Dynamic measurement optimization
+  useLayoutEffect(() => {
+    if (mountedRef.current && tableContainerRef.current && virtualRows.length > 0) {
+      requestAnimationFrame(() => {
+        if (mountedRef.current) {
+          rowVirtualizer.measure();
+          virtualRowsWithStableKeys.forEach((virtualRow) => {
+            const rowElement = tableContainerRef.current?.querySelector(
+              `[data-index="${virtualRow.index}"]`,
+            );
+            if (rowElement) {
+              const height = rowElement.getBoundingClientRect().height;
+              measuredHeightsRef.current = [...measuredHeightsRef.current.slice(-9), height];
+            }
+          });
+        }
+      });
     }
+  }, [
+    data.length,
+    rowVirtualizer,
+    isSmallScreen,
+    virtualRowsWithStableKeys.length,
+    virtualRowsWithStableKeys,
+  ]);
+
+  // Search effect with optimized state updates
+  useEffect(() => {
+    if (debouncedTerm !== filterValue) {
+      setIsSearching(true);
+      startTransition(() => {
+        onFilterChange?.(debouncedTerm);
+      });
+    }
+  }, [debouncedTerm, onFilterChange, filterValue]);
+
+  useEffect(() => {
+    if (!isFetching && isSearching) {
+      setIsSearching(false);
+    }
+  }, [isFetching, isSearching]);
+
+  // Internal filtering when no external filter handler
+  useEffect(() => {
+    if (filterColumn && !onFilterChange) {
+      const newFilters = debouncedTerm ? [{ id: filterColumn, value: debouncedTerm }] : [];
+      setColumnFilters(newFilters);
+    }
+  }, [debouncedTerm, filterColumn, onFilterChange]);
+
+  // Optimized delete handler with batch operations
+  const handleDelete = useCallback(async () => {
+    if (!onDelete || isDeleting) return;
 
     setIsDeleting(true);
+    setError(null);
+
     try {
-      const itemsToDelete = table.getFilteredSelectedRowModel().rows.map((r) => r.original);
-      await onDelete(itemsToDelete);
-      setRowSelection({});
+      let selectedRows = table.getFilteredSelectedRowModel().rows.map((r) => r.original);
+
+      // Validation
+      if (selectedRows.length === 0) {
+        setIsDeleting(false);
+        return;
+      }
+
+      // Filter out non-object entries
+      selectedRows = selectedRows.filter(
+        (row): row is TData => typeof row === 'object' && row !== null,
+      );
+
+      if (
+        selectedRows.length !== table.getFilteredSelectedRowModel().rows.length &&
+        process.env.NODE_ENV === 'development'
+      ) {
+        console.warn('DataTable: Invalid row data detected and filtered out during deletion.');
+      }
+
+      await onDelete(selectedRows);
+
+      // Batch state updates
+      startTransition(() => {
+        table.resetRowSelection();
+        setOptimizedRowSelection({});
+      });
+    } catch (err) {
+      const rawError = err instanceof Error ? err : new Error('Failed to delete items');
+      const sanitizedMessage = sanitizeError(rawError);
+      const sanitizedError = new Error(sanitizedMessage);
+      setError(sanitizedError);
+      onError?.(sanitizedError);
     } finally {
       setIsDeleting(false);
     }
-  }, [onDelete, table]);
+  }, [onDelete, table, isDeleting, onError, sanitizeError, setOptimizedRowSelection]);
 
-  const getRandomWidth = () => Math.floor(Math.random() * (410 - 170 + 1)) + 170;
+  // Reset handler for error boundary retry
+  const handleBoundaryReset = useCallback(() => {
+    setError(null);
+    onReset?.();
+    // Re-measure virtualizer after reset
+    if (tableContainerRef.current && rowVirtualizer) {
+      rowVirtualizer.measure();
+    }
+  }, [onReset, rowVirtualizer]);
 
-  const skeletons = Array.from({ length: 13 }, (_, index) => {
-    const randomWidth = getRandomWidth();
-    const firstDataColumnIndex = tableColumns[0]?.id === 'select' ? 1 : 0;
+  // Memoized computed values
+  const selectedCount = useMemo(
+    () => table.getFilteredSelectedRowModel().rows.length,
+    [table.getFilteredSelectedRowModel().rows.length],
+  );
 
-    return (
-      <TableRow key={index} className="motion-safe:animate-fadeIn border-b border-border-light">
-        {tableColumns.map((column, columnIndex) => {
-          const style = getColumnStyle(column as TableColumn<TData, TValue>, isSmallScreen);
-          const isFirstDataColumn = columnIndex === firstDataColumnIndex;
-
-          return (
-            <TableCell key={column.id} className="px-2 py-1 sm:px-4 sm:py-2" style={style}>
-              <Skeleton
-                className="h-6"
-                style={isFirstDataColumn ? { width: `${randomWidth}px` } : { width: '100%' }}
-              />
-            </TableCell>
-          );
-        })}
-      </TableRow>
-    );
-  });
+  const shouldShowSearch = useMemo(
+    () => enableSearch && filterColumn && table.getColumn(filterColumn),
+    [
+      enableSearch,
+      filterColumn,
+      table
+        .getAllColumns()
+        .map((c) => c.id)
+        .join(','),
+    ],
+  );
 
   return (
-    <div className={cn('flex h-full flex-col gap-4', className)}>
-      {/* Table controls */}
+    <div
+      className={cn('flex h-full flex-col gap-4', className)}
+      role="region"
+      aria-label="Data table"
+    >
+      {/* Error display - kept outside boundary for non-rendering errors */}
+      {error && (
+        <div className="rounded-md bg-red-50 p-3 text-sm text-red-700 dark:bg-red-950/20 dark:text-red-400">
+          {sanitizeError(error)}
+          <button onClick={() => setError(null)} className="ml-2 underline hover:no-underline">
+            Dismiss
+          </button>
+        </div>
+      )}
+
+      {/* Controls - kept outside boundary as they're stable */}
       <div className="flex flex-wrap items-center gap-2 sm:gap-4">
         {enableRowSelection && showCheckboxes && (
           <DeleteButton
-            onDelete={handleDelete}
+            onDelete={onDelete ? handleDelete : undefined}
             isDeleting={isDeleting}
-            disabled={!table.getFilteredSelectedRowModel().rows.length || isDeleting}
+            disabled={!selectedCount || isDeleting}
             isSmallScreen={isSmallScreen}
           />
         )}
-        {filterColumn !== undefined && table.getColumn(filterColumn) && enableSearch && (
-          <div className="relative flex-1">
+
+        {shouldShowSearch && (
+          <div className={`relative ${DATA_TABLE_CONSTANTS.SEARCH_INPUT_MIN_WIDTH} flex-1`}>
             <AnimatedSearchInput
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              isSearching={isSearching}
+              value={term}
+              onChange={(e) => {
+                startTransition(() => setTerm(e.target.value));
+              }}
+              isSearching={isWaitingForSearchResults}
               placeholder="Search..."
+              aria-label="Search table data"
             />
           </div>
         )}
+
+        {selectedCount > 0 && (
+          <div className="text-sm text-text-secondary">
+            {selectedCount} row{selectedCount === 1 ? '' : 's'} selected
+          </div>
+        )}
       </div>
 
-      {/* Virtualized table */}
-      <div
-        ref={tableContainerRef}
-        className={cn(
-          'relative h-[calc(100vh-20rem)] max-w-full overflow-x-auto overflow-y-auto rounded-md border border-black/10 dark:border-white/10',
-          'transition-all duration-300 ease-out',
-          isSearching && 'bg-surface-secondary/50',
-          className,
-        )}
-      >
-        <Table className="w-full min-w-[300px] table-fixed border-separate border-spacing-0">
-          <TableHeader className="sticky top-0 z-50 bg-surface-secondary">
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id} className="border-b border-border-light">
-                {headerGroup.headers.map((header) => {
-                  const sortDir = header.column.getIsSorted();
-                  const canSort = header.column.getCanSort();
-                  return (
-                    <TableHead
-                      onClick={canSort ? header.column.getToggleSortingHandler() : undefined}
-                      key={header.id}
-                      className="relative cursor-pointer whitespace-nowrap bg-surface-secondary px-2 py-2 text-left text-sm font-medium text-text-secondary hover:bg-surface-hover sm:px-4"
-                      style={getColumnStyle(
-                        header.column.columnDef as TableColumn<TData, TValue>,
-                        isSmallScreen,
-                      )}
-                    >
-                      <div className="flex items-center">
-                        <span className="flex-1 text-left">
-                          {header.isPlaceholder
-                            ? null
-                            : flexRender(header.column.columnDef.header, header.getContext())}
-                        </span>
-                        {canSort && (
-                          <span className="ml-1 transition-transform duration-200 ease-in-out">
-                            {sortDir === false && (
-                              <ArrowDownUp className="h-4 w-4 text-muted-foreground hover:rotate-180" />
-                            )}
-                            {sortDir === 'asc' && (
-                              <ArrowUp className="h-4 w-4 rotate-0 text-primary" />
-                            )}
-                            {sortDir === 'desc' && (
-                              <ArrowUp className="h-4 w-4 rotate-180 text-primary" />
-                            )}
-                          </span>
+      {/* Error boundary wraps only the table container to catch rendering errors */}
+      <DataTableErrorBoundary onError={onError} onReset={handleBoundaryReset}>
+        <div
+          ref={tableContainerRef}
+          className={cn(
+            `relative h-[calc(100vh-20rem)] max-w-full overflow-auto rounded-md border border-black/10 dark:border-white/10`,
+            `transition-all ${DATA_TABLE_CONSTANTS.ROW_TRANSITION_DURATION} ease-out`,
+            'scrollbar-thin scrollbar-track-transparent scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600',
+            isRefreshing && 'bg-surface-secondary/30',
+          )}
+          role="grid"
+          aria-label="Data grid"
+          aria-rowcount={data.length}
+          aria-busy={isLoading || isFetchingNextPage}
+        >
+          <Table
+            className={`w-full min-w-[${DATA_TABLE_CONSTANTS.TABLE_MIN_WIDTH}] table-fixed border-separate border-spacing-0`}
+          >
+            <TableHeader className="sticky top-0 z-50 bg-surface-secondary backdrop-blur-sm">
+              {memoizedHeaderGroups.map((headerGroup) => (
+                <TableRow key={headerGroup.id} className="border-b border-border-light" role="row">
+                  {headerGroup.headers.map((header) => {
+                    const sortDir = header.column.getIsSorted();
+                    const canSort = header.column.getCanSort();
+
+                    let ariaSort: 'ascending' | 'descending' | 'none' | undefined;
+                    if (!canSort) {
+                      ariaSort = undefined;
+                    } else if (sortDir === 'asc') {
+                      ariaSort = 'ascending';
+                    } else if (sortDir === 'desc') {
+                      ariaSort = 'descending';
+                    } else {
+                      ariaSort = 'none';
+                    }
+
+                    return (
+                      <TableHead
+                        key={header.id}
+                        onClick={canSort ? header.column.getToggleSortingHandler() : undefined}
+                        className={cn(
+                          'relative whitespace-nowrap bg-surface-secondary px-2 py-2 text-left text-sm font-medium text-text-secondary transition-colors duration-200 sm:px-4',
+                          canSort &&
+                            'cursor-pointer hover:bg-surface-hover focus-visible:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
                         )}
-                      </div>
-                    </TableHead>
-                  );
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
+                        style={columnStyles[header.column.id] || {}}
+                        role="columnheader"
+                        tabIndex={canSort ? 0 : -1}
+                        aria-sort={ariaSort}
+                      >
+                        <div className="flex items-center">
+                          <span className="flex-1 text-left">
+                            {header.isPlaceholder
+                              ? null
+                              : flexRender(header.column.columnDef.header, header.getContext())}
+                          </span>
+                          {canSort && (
+                            <span className="ml-1 transition-transform duration-200 ease-in-out">
+                              {!sortDir && (
+                                <ArrowDownUp className="h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100" />
+                              )}
+                              {sortDir === 'asc' && <ArrowUp className="h-4 w-4 text-primary" />}
+                              {sortDir === 'desc' && (
+                                <ArrowUp className="h-4 w-4 rotate-180 text-primary" />
+                              )}
+                            </span>
+                          )}
+                        </div>
+                      </TableHead>
+                    );
+                  })}
+                </TableRow>
+              ))}
+            </TableHeader>
 
-          <TableBody>
-            {paddingTop > 0 && (
-              <tr>
-                <td style={{ height: `${paddingTop}px` }} />
-              </tr>
-            )}
+            <TableBody role="rowgroup">
+              {paddingTop > 0 && (
+                <tr>
+                  <td style={{ height: `${paddingTop}px` }} />
+                </tr>
+              )}
 
-            {isLoading && skeletons}
-
-            {virtualRows.map((virtualRow) => {
-              const row = rows[virtualRow.index];
-              return (
-                <MemoizedTableRow
-                  key={row.id}
-                  row={row}
-                  isSmallScreen={isSmallScreen}
-                  index={virtualRow.index}
-                  isSearching={isSearching}
+              {showSkeletons ? (
+                <SkeletonRows
+                  count={skeletonCount}
+                  columns={tableColumns as TableColumn<unknown, unknown>[]}
+                  columnStyles={columnStyles}
                 />
-              );
-            })}
+              ) : (
+                virtualRowsWithStableKeys.map((virtualRow) => {
+                  const row = rows[virtualRow.index];
+                  return (
+                    <MemoizedTableRow
+                      key={virtualRow.stableKey}
+                      row={row}
+                      columnStyles={columnStyles}
+                      index={virtualRow.index}
+                      virtualIndex={virtualRow.index}
+                    />
+                  );
+                })
+              )}
 
-            {!virtualRows.length && (
-              <TableRow className="hover:bg-transparent">
-                <TableCell colSpan={columns.length} className="p-4 text-center">
-                  No data available
-                </TableCell>
-              </TableRow>
-            )}
+              {data.length === 0 && !isLoading && (
+                <TableRow className="hover:bg-transparent" role="row">
+                  <TableCell
+                    colSpan={tableColumns.length}
+                    className="p-8 text-center text-text-secondary"
+                    role="gridcell"
+                  >
+                    {debouncedTerm
+                      ? localize('com_ui_no_results_found')
+                      : localize('com_ui_no_data_available')}
+                  </TableCell>
+                </TableRow>
+              )}
 
-            {paddingBottom > 0 && (
-              <tr>
-                <td style={{ height: `${paddingBottom}px` }} />
-              </tr>
-            )}
+              {paddingBottom > 0 && (
+                <tr>
+                  <td style={{ height: `${paddingBottom}px` }} />
+                </tr>
+              )}
 
-            {/* Loading indicator */}
-            {(isFetchingNextPage || hasNextPage) && (
-              <TableRow className="hover:bg-transparent">
-                <TableCell colSpan={columns.length} className="p-4">
-                  <div className="flex h-full items-center justify-center">
-                    {isFetchingNextPage ? (
-                      <Spinner className="size-4" />
-                    ) : (
-                      hasNextPage && <div className="h-6" />
-                    )}
-                  </div>
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
+              {/* Loading indicator for infinite scroll */}
+              {(isFetchingNextPage || hasNextPage) && !isLoading && (
+                <TableRow className="hover:bg-transparent" role="row">
+                  <TableCell colSpan={tableColumns.length} className="p-4" role="gridcell">
+                    <div className="flex h-full items-center justify-center">
+                      {isFetchingNextPage ? (
+                        <Spinner className="size-4" aria-label="Loading more data" />
+                      ) : (
+                        hasNextPage && <div className="h-6" />
+                      )}
+                    </div>
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </DataTableErrorBoundary>
     </div>
   );
 }
diff --git a/packages/client/src/components/DataTable/DataTableErrorBoundary.tsx b/packages/client/src/components/DataTable/DataTableErrorBoundary.tsx
new file mode 100644
index 0000000000..9633ae7c18
--- /dev/null
+++ b/packages/client/src/components/DataTable/DataTableErrorBoundary.tsx
@@ -0,0 +1,98 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { Button } from '../Button';
+import { RefreshCw } from 'lucide-react';
+
+/**
+ * Error boundary specifically for DataTable component.
+ * Catches JavaScript errors in the table rendering and provides a fallback UI.
+ * Handles errors from virtualizer, cell renderers, fetch operations, and child components.
+ */
+interface DataTableErrorBoundaryState {
+  hasError: boolean;
+  error?: Error;
+}
+
+interface DataTableErrorBoundaryProps {
+  children: ReactNode;
+  onError?: (error: Error) => void;
+  onReset?: () => void;
+}
+
+export class DataTableErrorBoundary extends Component<
+  DataTableErrorBoundaryProps,
+  DataTableErrorBoundaryState
+> {
+  constructor(props: DataTableErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): DataTableErrorBoundaryState {
+    // Update state to show fallback UI and store error for logging
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // Log the error (you can also log to an error reporting service)
+    console.error('DataTable Error Boundary caught an error:', error, errorInfo);
+
+    // Call parent error handler if provided
+    this.props.onError?.(error);
+  }
+
+  /**
+   * Reset the error state and attempt to re-render the children.
+   * This can be used to retry after a table error (e.g., network retry).
+   */
+  private handleReset = () => {
+    this.setState({ hasError: false, error: undefined });
+    this.props.onReset?.();
+  };
+
+  render() {
+    if (this.state.hasError) {
+      // Custom fallback UI for DataTable errors
+      return (
+        <div className="flex h-full w-full flex-col items-center justify-center p-8">
+          <div className="max-w-md rounded-lg border border-red-200 bg-red-50 p-6 shadow-sm dark:border-red-800 dark:bg-red-950/20">
+            <div className="flex items-center gap-2 text-red-800 dark:text-red-200">
+              <RefreshCw className="h-4 w-4" />
+              <h3 className="text-sm font-medium">Table Error</h3>
+            </div>
+            <p className="mt-2 text-sm text-red-700 dark:text-red-300">
+              Table failed to load. Please refresh or try again.
+            </p>
+            <div className="mt-4 flex justify-center">
+              <Button
+                variant="outline"
+                onClick={this.handleReset}
+                className="flex items-center gap-2 border-red-300 bg-red-50 px-3 py-1.5 text-sm hover:bg-red-100 dark:border-red-700 dark:bg-red-950/20 dark:hover:bg-red-900/20"
+                aria-label="Retry loading table"
+              >
+                <RefreshCw className="h-3 w-3" />
+                Retry
+              </Button>
+            </div>
+          </div>
+
+          {/* Optional: Show technical error details in development */}
+          {process.env.NODE_ENV === 'development' && this.state.error && (
+            <details className="mt-4 max-w-md rounded-md bg-gray-100 p-3 text-xs dark:bg-gray-800">
+              <summary className="cursor-pointer font-medium text-gray-900 dark:text-gray-100">
+                Error Details (Dev)
+              </summary>
+              <pre className="mt-2 whitespace-pre-wrap text-gray-700 dark:text-gray-300">
+                {this.state.error.message}
+              </pre>
+            </details>
+          )}
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+// Named export for convenience
+export default DataTableErrorBoundary;
diff --git a/packages/client/src/locales/en/translation.json b/packages/client/src/locales/en/translation.json
index 0c7bb41431..5914ccb574 100644
--- a/packages/client/src/locales/en/translation.json
+++ b/packages/client/src/locales/en/translation.json
@@ -1,5 +1,6 @@
 {
   "com_ui_cancel": "Cancel",
   "com_ui_no_options": "No options available",
-  "com_ui_no_data": "No Data Available"
+  "com_ui_no_results_found": "No results found",
+  "com_ui_no_data_available": "No data available"
 }