diff --git a/__mocks__/zustand.ts b/__mocks__/zustand.ts
deleted file mode 100644
index 5a9b3ac2..00000000
--- a/__mocks__/zustand.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { act } from '@testing-library/react';
-import { afterEach, vi } from 'vitest';
-import * as zustand from 'zustand';
-import type { StateCreator, StoreApi, UseBoundStore } from 'zustand';
-
-const { create: zCreate, createStore: zCreateStore } = await vi.importActual<typeof zustand>('zustand');
-
-// a variable to hold reset functions for all stores declared in the app
-const STORE_RESET_FUNCTIONS = new Set<() => void>();
-
-function createUncurried<T>(stateCreator: StateCreator<T>): UseBoundStore<StoreApi<T>> {
-  const store = zCreate(stateCreator);
-  const initialState = store.getInitialState();
-  STORE_RESET_FUNCTIONS.add(() => {
-    store.setState(initialState, true);
-  });
-  return store;
-}
-
-function createStoreUncurried<T>(stateCreator: StateCreator<T>): StoreApi<T> {
-  const store = zCreateStore(stateCreator);
-  const initialState = store.getInitialState();
-  STORE_RESET_FUNCTIONS.add(() => {
-    store.setState(initialState, true);
-  });
-  return store;
-}
-
-export function create<T>(stateCreator: StateCreator<T>): UseBoundStore<StoreApi<T>> {
-  if (typeof stateCreator === 'function') {
-    return createUncurried(stateCreator);
-  }
-  return createUncurried as unknown as UseBoundStore<StoreApi<T>>;
-}
-
-export function createStore<T>(stateCreator: StateCreator<T>): StoreApi<T> {
-  if (typeof stateCreator === 'function') {
-    return createStoreUncurried(stateCreator);
-  }
-  return createStoreUncurried as unknown as StoreApi<T>;
-}
-
-afterEach(() => {
-  act(() => {
-    STORE_RESET_FUNCTIONS.forEach((resetFn) => {
-      resetFn();
-    });
-  });
-});
diff --git a/package.json b/package.json
index d90c2902..b22d1dc5 100644
--- a/package.json
+++ b/package.json
@@ -31,11 +31,11 @@
       "types": "./dist/i18n.d.ts",
       "import": "./dist/i18n.js"
     },
+    "./package.json": "./package.json",
     "./providers": {
       "types": "./dist/providers.d.ts",
       "import": "./dist/providers.js"
     },
-    "./package.json": "./package.json",
     "./tailwind/globals.css": "./dist/tailwind/globals.css",
     "./utils": {
       "types": "./dist/utils.d.ts",
@@ -97,6 +97,7 @@
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.1.8",
     "@tanstack/react-table": "^8.21.3",
+    "@tanstack/table-core": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2981b6fd..4338fd44 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -82,6 +82,9 @@ importers:
       '@tanstack/react-table':
         specifier: ^8.21.3
         version: 8.21.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@tanstack/table-core':
+        specifier: ^8.21.3
+        version: 8.21.3
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
diff --git a/src/components/DataTable/DataTable.stories.tsx b/src/components/DataTable/DataTable.stories.tsx
index dd3b51f1..034a4d61 100644
--- a/src/components/DataTable/DataTable.stories.tsx
+++ b/src/components/DataTable/DataTable.stories.tsx
@@ -1,76 +1,246 @@
-import { range, toBasicISOString, unwrap } from '@douglasneuroinformatics/libjs';
+import { useState } from 'react';
+
 import { faker } from '@faker-js/faker';
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { ColumnDef } from '@tanstack/table-core';
+import { range } from 'lodash-es';
+import { ChevronDownIcon } from 'lucide-react';
 
+import { Button } from '../Button';
+import { DropdownMenu } from '../DropdownMenu';
 import { DataTable } from './DataTable';
+import { useDataTableHandle } from './hooks';
 
-import type { DataTableColumn } from './DataTable';
+type PaymentStatus = 'failed' | 'pending' | 'processing' | 'success';
 
-type User = {
-  birthday: Date;
+type Payment = {
+  amount: number;
   email: string;
-  firstName: string;
-  lastName: string;
+  id: string;
+  status: PaymentStatus;
 };
 
-type Story = StoryObj<typeof DataTable<User>>;
+type Story = StoryObj<typeof DataTable<Payment>>;
 
-const columns: DataTableColumn<User>[] = [
+const columns: ColumnDef<Payment>[] = [
   {
-    format: (value) => {
-      return toBasicISOString(value);
+    accessorKey: 'status',
+    enableSorting: false,
+    filterFn: (row, id, filter: PaymentStatus[]) => {
+      return filter.includes(row.getValue(id));
     },
-    key: 'birthday',
-    label: 'Birthday'
+    header: 'Status'
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email'
   },
   {
-    format: 'email',
-    key: 'email',
-    label: 'Email',
-    sortable: true
+    accessorKey: 'amount',
+    header: 'Amount'
   }
 ];
 
-const data: User[] = unwrap(range(60)).map(() => ({
-  birthday: faker.date.birthdate(),
-  email: faker.internet.email(),
-  firstName: faker.person.firstName(),
-  lastName: faker.person.lastName()
-}));
+const statuses: readonly PaymentStatus[] = Object.freeze(['failed', 'pending', 'processing', 'success']);
+
+const createData = (n: number): Payment[] => {
+  return range(n).map((i) => ({
+    amount: faker.number.int({ max: 100, min: 0 }),
+    email: faker.internet.email(),
+    id: String(i + 1),
+    status: faker.helpers.arrayElement(statuses)
+  }));
+};
+
+const Toggles = () => {
+  const table = useDataTableHandle('table', true);
+  const columns = table.getAllColumns();
+  const statusColumn = columns.find((column) => column.id === 'status')!;
+
+  const filterValue = statusColumn.getFilterValue() as PaymentStatus[];
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenu.Trigger asChild>
+          <Button className="flex items-center gap-2" variant="outline">
+            Columns
+            <ChevronDownIcon />
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content align="end">
+          {columns
+            .filter((column) => column.getCanHide())
+            .map((column) => {
+              return (
+                <DropdownMenu.CheckboxItem
+                  checked={column.getIsVisible()}
+                  className="capitalize"
+                  key={column.id}
+                  onCheckedChange={(value) => column.toggleVisibility(!!value)}
+                >
+                  {column.id}
+                </DropdownMenu.CheckboxItem>
+              );
+            })}
+        </DropdownMenu.Content>
+      </DropdownMenu>
+      <DropdownMenu>
+        <DropdownMenu.Trigger asChild>
+          <Button className="flex items-center gap-2" variant="outline">
+            Filters
+            <ChevronDownIcon />
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content widthFull align="start">
+          {statuses.map((option) => (
+            <DropdownMenu.CheckboxItem
+              checked={filterValue.includes(option)}
+              className="capitalize"
+              key={option}
+              onCheckedChange={(checked) => {
+                statusColumn.setFilterValue((prevValue: PaymentStatus[]) => {
+                  if (checked) {
+                    return [...prevValue, option];
+                  }
+                  return prevValue.filter((item) => item !== option);
+                });
+              }}
+            >
+              {option}
+            </DropdownMenu.CheckboxItem>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    </>
+  );
+};
 
-export default { component: DataTable } as Meta<typeof DataTable<User>>;
+export default {
+  component: DataTable
+} as Meta<typeof DataTable>;
 
 export const Default: Story = {
+  decorators: [
+    (Story) => {
+      const [tableData, setTableData] = useState(createData(10));
+      return (
+        <div>
+          <Story
+            args={{
+              columns,
+              data: tableData
+            }}
+          />
+          <div className="fixed bottom-0 py-2">
+            <button
+              className="rounded-md border px-2 py-1.5 text-sm"
+              type="button"
+              onClick={() => setTableData(createData(10))}
+            >
+              New Data
+            </button>
+          </div>
+        </div>
+      );
+    }
+  ]
+};
+
+export const WithActions: Story = {
   args: {
-    columns,
-    data,
-    headerActions: [
+    columns: [
+      ...columns,
       {
-        label: 'Do Something',
-        onClick: () => {
-          alert('Something!');
-        }
+        accessorKey: 'notes',
+        header: 'Notes'
       }
     ],
+    data: createData(100).map((payment) => ({ ...payment, notes: faker.lorem.paragraph() })),
+    onSearchChange: () => {
+      return;
+    },
     rowActions: [
+      {
+        label: 'Modify',
+        onSelect: () => {
+          alert('Modify');
+        }
+      },
       {
         destructive: true,
         label: 'Delete',
-        onSelect: (row) => {
-          alert(`Delete User: ${row.firstName} ${row.lastName}`);
+        onSelect: () => {
+          alert('Delete');
         }
       }
     ],
-    search: {
-      key: 'email',
-      placeholder: 'Filter emails...'
-    }
+    tableName: 'action-table'
+  }
+};
+
+export const WithToggles: Story = {
+  args: {
+    columns,
+    data: createData(100),
+    initialState: {
+      columnFilters: [
+        {
+          id: 'status',
+          value: [...statuses]
+        }
+      ]
+    },
+    onSearchChange: () => {
+      return;
+    },
+    togglesComponent: Toggles
   }
 };
 
 export const Empty: Story = {
   args: {
     columns,
-    data: []
+    data: [],
+    onSearchChange: () => {
+      return;
+    }
+  }
+};
+
+export const Grouped: Story = {
+  args: {
+    columns: [
+      {
+        columns: [
+          {
+            accessorKey: 'id',
+            header: 'ID'
+          },
+          {
+            accessorKey: 'status',
+            header: 'Status'
+          }
+        ],
+        header: 'Internal'
+      },
+      {
+        columns: [
+          {
+            accessorKey: 'email',
+            header: 'Email'
+          },
+          {
+            accessorKey: 'amount',
+            header: 'Amount'
+          }
+        ],
+        header: 'Details'
+      }
+    ],
+    data: createData(100),
+    onSearchChange: () => {
+      return;
+    }
   }
 };
diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx
index 8617c372..f41c26de 100644
--- a/src/components/DataTable/DataTable.tsx
+++ b/src/components/DataTable/DataTable.tsx
@@ -1,290 +1,33 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useRef } from 'react';
 
-import {
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable
-} from '@tanstack/react-table';
-import type { ColumnDef, ColumnFiltersState, SortingState } from '@tanstack/react-table';
-import { range } from 'lodash-es';
-import { ArrowUpDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon } from 'lucide-react';
-import type { Promisable } from 'type-fest';
+import type { RowData } from '@tanstack/table-core';
 
-import { useTranslation } from '@/hooks';
+import { DataTableContext } from './context';
+import { DataTableContent } from './DataTableContent';
+import { createDataTableStore } from './store';
 
-import { Button } from '../Button';
-import { SearchBar } from '../SearchBar';
-import { Table } from '../Table';
-import { DestructiveActionDialog } from './DestructiveActionDialog';
-import { RowActionsDropdown } from './RowActionsDropdown';
+import type { DataTableProps } from './types';
 
-import type { RowAction } from './RowActionsDropdown';
-
-type StaticDataTableColumn<TData extends { [key: string]: unknown }> = {
-  [K in Extract<keyof TData, string>]: {
-    format?: 'email' | ((val: TData[K]) => unknown);
-    key: K;
-    label: string;
-    sortable?: boolean;
-  };
-}[Extract<keyof TData, string>];
-
-type DynamicDataTableColumn<TData extends { [key: string]: unknown }> = {
-  compute: (row: TData) => unknown;
-  key?: never;
-  label: string;
-};
-
-type DataTableColumn<TData extends { [key: string]: unknown }> =
-  | DynamicDataTableColumn<TData>
-  | StaticDataTableColumn<TData>;
-
-type DataTableProps<TData extends { [key: string]: unknown }> = {
-  columns: DataTableColumn<TData>[];
-  data: TData[];
-  headerActions?: {
-    label: string;
-    onClick: () => void;
-  }[];
-  rowActions?: RowAction<TData>[];
-  search?: {
-    key: Extract<keyof TData, string>;
-    placeholder?: string;
-  };
-};
-
-function isStaticColumn<TData extends { [key: string]: unknown }>(
-  column: DataTableColumn<TData>
-): column is StaticDataTableColumn<TData> {
-  return typeof column.key === 'string';
-}
-
-export const DataTable = <TData extends { [key: string]: unknown }>({
-  columns,
-  data,
-  headerActions,
-  rowActions,
-  search
-}: DataTableProps<TData>) => {
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-  const [sorting, setSorting] = useState<SortingState>([]);
-  const [searchValue, setSearchValue] = useState('');
-  const [destructiveActionPending, setDestructiveActionPending] = useState<(() => Promisable<void>) | null>(null);
-  const { t } = useTranslation('libui');
-  const [pagination, setPagination] = useState({
-    pageIndex: 0,
-    pageSize: 10
-  });
-
-  const columnDefs = useMemo<ColumnDef<TData, unknown>[]>(() => {
-    const result: ColumnDef<TData, unknown>[] = columns.map((col) => {
-      let def: ColumnDef<TData, unknown>;
-      if (isStaticColumn(col)) {
-        def = {
-          accessorKey: col.key,
-          header: col.sortable
-            ? ({ column }) => (
-                <button
-                  className="flex items-center justify-between gap-2"
-                  onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-                >
-                  {col.label}
-                  <ArrowUpDownIcon className="h-4 w-4" />
-                </button>
-              )
-            : col.label
-        };
-        if (col.format) {
-          def.cell = ({ getValue }) => {
-            const value = getValue() as TData[Extract<keyof TData, string>];
-            if (typeof col.format === 'function') {
-              return col.format(value);
-            } else if (col.format === 'email') {
-              return (
-                <a className="hover:underline" href={`mailto:${value as string}`}>
-                  {value as string}
-                </a>
-              );
-            }
-            return value;
-          };
-        }
-      } else {
-        def = {
-          accessorFn: col.compute,
-          header: col.label
-        };
-      }
-      return def;
-    });
-
-    if (rowActions) {
-      result.push({
-        cell: ({ row }) => {
-          return (
-            <RowActionsDropdown
-              row={row}
-              rowActions={rowActions}
-              setDestructiveActionPending={setDestructiveActionPending}
-            />
-          );
-        },
-        id: '__actions'
-      });
-    }
-    return result;
-  }, [columns]);
-
-  const table = useReactTable({
-    columns: columnDefs,
-    data,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onColumnFiltersChange: setColumnFilters,
-    onPaginationChange: setPagination,
-    onSortingChange: setSorting,
-    state: {
-      columnFilters,
-      pagination,
-      sorting
-    }
-  });
+export const DataTable = <T extends RowData>({
+  emptyStateProps,
+  onSearchChange,
+  togglesComponent,
+  ...props
+}: DataTableProps<T>) => {
+  const storeRef = useRef(createDataTableStore(props));
 
   useEffect(() => {
-    if (search) {
-      table.getColumn(search.key)?.setFilterValue(searchValue);
-    }
-  }, [table, searchValue]);
-
-  const headerGroups = table.getHeaderGroups();
-  const { rows } = table.getRowModel();
-
-  const pageCount = table.getPageCount();
-  const currentPage = pagination.pageIndex;
-
-  const start = Math.max(0, Math.min(currentPage - 1, pageCount - 3));
-  const end = Math.min(start + 3, pageCount);
-
-  const pageIndexOptions = range(start, end);
+    const { reset } = storeRef.current.getState();
+    reset(props);
+  }, [props]);
 
   return (
-    <div className="flex flex-col">
-      <DestructiveActionDialog
-        destructiveActionPending={destructiveActionPending}
-        setDestructiveActionPending={setDestructiveActionPending}
+    <DataTableContext.Provider value={{ store: storeRef.current }}>
+      <DataTableContent
+        emptyStateProps={emptyStateProps}
+        togglesComponent={togglesComponent}
+        onSearchChange={onSearchChange}
       />
-      {search && (
-        <div className="flex items-center gap-4 py-4">
-          <SearchBar
-            className="grow"
-            placeholder={search.placeholder}
-            value={searchValue}
-            onValueChange={setSearchValue}
-          />
-          {headerActions && (
-            <div className="flex gap-2">
-              {headerActions.map(({ label, onClick }, i) => (
-                <Button key={i} type="button" variant="outline" onClick={onClick}>
-                  {label}
-                </Button>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
-      <div className="rounded-md border">
-        <Table>
-          <Table.Header>
-            {headerGroups.map((headerGroup) => (
-              <Table.Row key={headerGroup.id}>
-                {headerGroup.headers.map((header) => {
-                  return (
-                    <Table.Head key={header.id}>
-                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                    </Table.Head>
-                  );
-                })}
-              </Table.Row>
-            ))}
-          </Table.Header>
-          <Table.Body>
-            {rows?.length ? (
-              rows.map((row) => (
-                <Table.Row data-state={row.getIsSelected() && 'selected'} key={row.id}>
-                  {row.getVisibleCells().map((cell) => (
-                    <Table.Cell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</Table.Cell>
-                  ))}
-                </Table.Row>
-              ))
-            ) : (
-              <Table.Row>
-                <Table.Cell className="h-24 text-center" colSpan={rowActions ? columns.length + 1 : columns.length}>
-                  {t({
-                    en: 'No Results',
-                    fr: 'Aucun résultat'
-                  })}
-                </Table.Cell>
-              </Table.Row>
-            )}
-          </Table.Body>
-        </Table>
-      </div>
-      <div className="flex w-min gap-0.5 py-4 [&>button]:h-9">
-        <Button
-          disabled={!table.getCanPreviousPage()}
-          size="icon"
-          type="button"
-          variant="ghost"
-          onClick={() => table.firstPage()}
-        >
-          <ChevronsLeftIcon className="h-4 w-4" />
-        </Button>
-        <Button
-          disabled={!table.getCanPreviousPage()}
-          size="icon"
-          type="button"
-          variant="ghost"
-          onClick={() => table.previousPage()}
-        >
-          <ChevronLeftIcon className="h-4 w-4" />
-        </Button>
-        {pageIndexOptions.map((index) => (
-          <Button
-            key={index}
-            size="icon"
-            type="button"
-            variant={index === pagination.pageIndex ? 'outline' : 'ghost'}
-            onClick={() => table.setPageIndex(index)}
-          >
-            {index + 1}
-          </Button>
-        ))}
-        <Button
-          disabled={!table.getCanNextPage()}
-          size="icon"
-          type="button"
-          variant="ghost"
-          onClick={() => table.nextPage()}
-        >
-          <ChevronRightIcon className="h-4 w-4" />
-        </Button>
-        <Button
-          disabled={!table.getCanNextPage()}
-          size="icon"
-          type="button"
-          variant="ghost"
-          onClick={() => table.lastPage()}
-        >
-          <ChevronsRightIcon className="h-4 w-4" />
-        </Button>
-      </div>
-    </div>
+    </DataTableContext.Provider>
   );
 };
-
-export type { DataTableColumn };
diff --git a/src/components/DataTable/DataTableBody.tsx b/src/components/DataTable/DataTableBody.tsx
new file mode 100644
index 00000000..71e685d3
--- /dev/null
+++ b/src/components/DataTable/DataTableBody.tsx
@@ -0,0 +1,69 @@
+import { useTranslation } from '@/hooks';
+
+import { DataTableEmptyState } from './DataTableEmptyState';
+import { useDataTableHandle } from './hooks';
+import { flexRender } from './utils';
+
+import type { DataTableEmptyStateProps } from './DataTableEmptyState';
+
+export const DataTableBody: React.FC<{ emptyStateProps?: Partial<DataTableEmptyStateProps> }> = ({
+  emptyStateProps
+}) => {
+  const rows = useDataTableHandle('rows');
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-col" data-testid="data-table-body">
+      {rows.length === 0 ? (
+        <div
+          className="sticky left-0 flex h-72 items-center justify-center px-6 py-3"
+          style={{
+            width: 'calc(var(--table-container-width) * 1px)'
+          }}
+        >
+          <DataTableEmptyState
+            title={t({
+              en: 'No Results',
+              fr: 'Aucun résultat'
+            })}
+            {...emptyStateProps}
+          />
+        </div>
+      ) : (
+        rows.map((row) => (
+          <div className="flex border-b last:border-b-0" data-testid="data-table-row" id={row.id} key={row.id}>
+            {row.getVisibleCells().map((cell) => {
+              const style: React.CSSProperties = {
+                width: `calc(var(--col-${cell.column.id}-size) * 1px)`
+              };
+              if (cell.column.getIsPinned() === 'left') {
+                style.left = `${cell.column.getStart('left')}px`;
+                style.position = 'sticky';
+                style.zIndex = 20;
+              } else if (cell.column.getIsPinned() === 'right') {
+                style.right = `${cell.column.getAfter('right')}px`;
+                style.position = 'sticky';
+                style.zIndex = 20;
+              }
+              // no border with actions on right
+              // TODO - consider resizing toggle in this case
+              if (cell.column.getIsLastColumn('center')) {
+                style.borderRight = 'none';
+              }
+              const content = flexRender(cell.column.columnDef.cell, cell.getContext());
+              return (
+                <div
+                  className="bg-background flex items-center border-r px-4 py-2 last:border-r-0"
+                  key={cell.id}
+                  style={style}
+                >
+                  {content && typeof content === 'object' ? content : <span className="block truncate">{content}</span>}
+                </div>
+              );
+            })}
+          </div>
+        ))
+      )}
+    </div>
+  );
+};
diff --git a/src/components/DataTable/DataTableContent.tsx b/src/components/DataTable/DataTableContent.tsx
new file mode 100644
index 00000000..c17a4986
--- /dev/null
+++ b/src/components/DataTable/DataTableContent.tsx
@@ -0,0 +1,36 @@
+import type { RowData } from '@tanstack/table-core';
+
+import { TABLE_NAME_METADATA_KEY } from './constants';
+import { DataTableBody } from './DataTableBody';
+import { DataTableControls } from './DataTableControls';
+import { DataTableHead } from './DataTableHead';
+import { DataTablePagination } from './DataTablePagination';
+import { useContainerRef, useDataTableHandle, useDataTableStore } from './hooks';
+
+import type { DataTableContentProps } from './types';
+
+export const DataTableContent = <T extends RowData>({
+  emptyStateProps,
+  onSearchChange,
+  togglesComponent
+}: DataTableContentProps<T>) => {
+  const containerRef = useContainerRef();
+  const meta = useDataTableHandle('tableMeta');
+  const style = useDataTableStore((state) => state.style);
+  return (
+    <div
+      className="bg-background flex w-full flex-col"
+      data-name={meta[TABLE_NAME_METADATA_KEY]}
+      data-testid="data-table"
+    >
+      <DataTableControls togglesComponent={togglesComponent} onSearchChange={onSearchChange} />
+      <div className="relative w-full overflow-auto rounded-md border" ref={containerRef}>
+        <div className="flex min-w-full flex-col text-sm tracking-tight" style={style}>
+          <DataTableHead />
+          <DataTableBody emptyStateProps={emptyStateProps} />
+        </div>
+      </div>
+      <DataTablePagination />
+    </div>
+  );
+};
diff --git a/src/components/DataTable/DataTableControls.tsx b/src/components/DataTable/DataTableControls.tsx
new file mode 100644
index 00000000..fc806051
--- /dev/null
+++ b/src/components/DataTable/DataTableControls.tsx
@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+
+import type { RowData, Table } from '@tanstack/table-core';
+
+import { useTranslation } from '@/hooks';
+
+import { SearchBar } from '../SearchBar';
+import { useDataTableHandle, useDataTableStore } from './hooks';
+
+import type { SearchChangeHandler } from './types';
+
+export const DataTableControls = <T extends RowData>({
+  onSearchChange,
+  togglesComponent: Toggles
+}: {
+  onSearchChange?: SearchChangeHandler<T>;
+  togglesComponent?: React.FC<{ table: Table<T> }>;
+}) => {
+  const table = useDataTableHandle('table');
+  const setGlobalFilter = useDataTableStore((store) => store.setGlobalFilter);
+  const [searchValue, setSearchValue] = useState('');
+
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (onSearchChange) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      onSearchChange(searchValue, table);
+    } else {
+      setGlobalFilter(searchValue || undefined);
+    }
+  }, [onSearchChange, searchValue]);
+
+  return (
+    <div className="flex flex-col items-center gap-4 pb-4 md:flex-row">
+      <SearchBar
+        className="w-full grow"
+        data-testid="data-table-search-bar"
+        placeholder={t({
+          en: 'Search...',
+          fr: 'Rechercher...'
+        })}
+        value={searchValue}
+        onValueChange={(value) => {
+          setSearchValue(value);
+        }}
+      />
+      {Toggles && (
+        <div className="flex w-full items-center gap-2 md:w-auto">
+          <Toggles table={table} />
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/DataTable/DataTableEmptyState.tsx b/src/components/DataTable/DataTableEmptyState.tsx
new file mode 100644
index 00000000..89f5bc74
--- /dev/null
+++ b/src/components/DataTable/DataTableEmptyState.tsx
@@ -0,0 +1,25 @@
+import type { LucideIcon } from 'lucide-react';
+
+import { cn } from '@/utils';
+
+export type DataTableEmptyStateProps = {
+  className?: string;
+  description?: string;
+  icon?: LucideIcon;
+  title: string;
+};
+
+export const DataTableEmptyState: React.FC<DataTableEmptyStateProps> = ({
+  className,
+  description,
+  icon: Icon,
+  title
+}) => {
+  return (
+    <div className={cn('flex flex-col items-center justify-center', className)} data-testid="data-table-empty-state">
+      {Icon && <Icon className="text-muted-foreground mb-2" style={{ height: '20px', width: '20px' }} />}
+      <h3 className="text-foreground text-sm font-semibold">{title}</h3>
+      {description && <p className="text-muted-foreground mt-1 text-xs">{description}</p>}
+    </div>
+  );
+};
diff --git a/src/components/DataTable/DataTableHead.tsx b/src/components/DataTable/DataTableHead.tsx
new file mode 100644
index 00000000..c6e1d86f
--- /dev/null
+++ b/src/components/DataTable/DataTableHead.tsx
@@ -0,0 +1,58 @@
+import { useDataTableHandle } from './hooks';
+import { flexRender } from './utils';
+
+export const DataTableHead = () => {
+  const headerGroups = useDataTableHandle('headerGroups');
+  const rowCount = useDataTableHandle('rowCount');
+
+  return (
+    <div className="flex flex-col" data-testid="data-table-head" style={{ display: rowCount ? 'flex' : 'none' }}>
+      {headerGroups.map((headerGroup) => (
+        <div className="flex" key={headerGroup.id}>
+          {headerGroup.headers.map((header) => {
+            const style: React.CSSProperties = {
+              // TODO - add more robust solution - should be able to block centering also - also set correct typing
+              justifyContent: header.column.columnDef.meta?.centered ? 'center' : 'start',
+              width: `calc(var(--header-${header?.id}-size) * 1px)`
+            };
+            if (header.column.getIsPinned() === 'left') {
+              style.left = `${header.column.getStart('left')}px`;
+              style.position = 'sticky';
+              style.zIndex = 20;
+            } else if (header.column.getIsPinned() === 'right') {
+              style.right = `${header.column.getAfter('right')}px`;
+              style.position = 'sticky';
+              style.zIndex = 20;
+            }
+            // no border with actions on right
+            // TODO - consider resizing toggle in this case
+            if (header.column.getIsLastColumn('center')) {
+              style.borderRight = 'none';
+            }
+            return (
+              <div
+                className="group/cell bg-background relative flex items-center border-r border-b px-4 py-2 last:border-r-0"
+                key={header.id}
+                style={style}
+              >
+                {!header.isPlaceholder && flexRender(header.column.columnDef.header, header.getContext())}
+                {header.column.getCanResize() && (
+                  <div className="absolute top-0 right-0 z-10 h-full w-[1px]">
+                    <button
+                      className="group-hover/cell:bg-border absolute -right-[1px] h-full w-full cursor-col-resize touch-none rounded-md bg-transparent select-none group-hover/cell:-right-[2px] group-hover/cell:w-[3px]"
+                      style={{ transform: header.column.getIsLastColumn() ? 'translateX(-2px)' : undefined }}
+                      type="button"
+                      onDoubleClick={header.column.resetSize}
+                      onMouseDown={header.getResizeHandler()}
+                      onTouchStart={header.getResizeHandler()}
+                    />
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+};
diff --git a/src/components/DataTable/DataTablePagination.tsx b/src/components/DataTable/DataTablePagination.tsx
new file mode 100644
index 00000000..f9b4afaa
--- /dev/null
+++ b/src/components/DataTable/DataTablePagination.tsx
@@ -0,0 +1,62 @@
+import { range } from 'lodash-es';
+import { ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon } from 'lucide-react';
+
+import { Button } from '../Button';
+import { useDataTableHandle, useDataTableStore } from './hooks';
+
+export const DataTablePagination = () => {
+  const { pageCount, pageIndex } = useDataTableHandle('paginationInfo');
+  const setPageIndex = useDataTableStore((store) => store.setPageIndex);
+
+  const start = Math.max(0, Math.min(pageIndex - 1, pageCount - 3));
+  const end = Math.max(Math.min(start + 3, pageCount), 1);
+
+  const pageIndexOptions = range(start, end);
+  const lastPageIndex = pageCount - 1;
+
+  return (
+    <div className="mx-auto flex w-min gap-0.5 py-4 [&>button]:h-9">
+      <Button disabled={pageIndex === 0} size="icon" type="button" variant="ghost" onClick={() => setPageIndex(0)}>
+        <ChevronsLeftIcon className="h-4 w-4" />
+      </Button>
+      <Button
+        disabled={pageIndex === 0}
+        size="icon"
+        type="button"
+        variant="ghost"
+        onClick={() => setPageIndex(pageIndex - 1)}
+      >
+        <ChevronLeftIcon className="h-4 w-4" />
+      </Button>
+      {pageIndexOptions.map((index) => (
+        <Button
+          key={index}
+          size="icon"
+          type="button"
+          variant={index === pageIndex ? 'outline' : 'ghost'}
+          onClick={() => setPageIndex(index)}
+        >
+          {index + 1}
+        </Button>
+      ))}
+      <Button
+        disabled={pageIndex === lastPageIndex}
+        size="icon"
+        type="button"
+        variant="ghost"
+        onClick={() => setPageIndex(pageIndex + 1)}
+      >
+        <ChevronRightIcon className="h-4 w-4" />
+      </Button>
+      <Button
+        disabled={pageIndex === lastPageIndex}
+        size="icon"
+        type="button"
+        variant="ghost"
+        onClick={() => setPageIndex(lastPageIndex)}
+      >
+        <ChevronsRightIcon className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+};
diff --git a/src/components/DataTable/DataTableRowActionCell.tsx b/src/components/DataTable/DataTableRowActionCell.tsx
new file mode 100644
index 00000000..817b7b58
--- /dev/null
+++ b/src/components/DataTable/DataTableRowActionCell.tsx
@@ -0,0 +1,67 @@
+import type { CellContext, RowData } from '@tanstack/table-core';
+import { MoreHorizontalIcon } from 'lucide-react';
+
+import { useDestructiveAction, useTranslation } from '@/hooks';
+import { cn } from '@/utils';
+
+import { Button } from '../Button';
+import { DropdownMenu } from '../DropdownMenu';
+import { ROW_ACTIONS_METADATA_KEY, TABLE_NAME_METADATA_KEY } from './constants';
+
+export const DataTableRowActionCell = <T extends RowData>({ row, table }: CellContext<T, unknown>) => {
+  const destructiveAction = useDestructiveAction();
+  const rowActions = table.options.meta?.[ROW_ACTIONS_METADATA_KEY];
+  const tableName = table.options.meta?.[TABLE_NAME_METADATA_KEY];
+
+  const { t } = useTranslation();
+
+  if (!rowActions) {
+    console.error('Expected rowActions to be defined in table metadata');
+    return null;
+  }
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <DropdownMenu>
+        <DropdownMenu.Trigger asChild>
+          <Button
+            className="-m-1.5"
+            data-table-name={table.options.meta?.name}
+            data-testid="row-actions-trigger"
+            size="icon"
+            variant="ghost"
+          >
+            <MoreHorizontalIcon className="h-4 w-4" />
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content align="end" data-table-name={tableName} data-testid="row-actions-dropdown">
+          <DropdownMenu.Label>
+            {t({
+              en: 'Actions',
+              fr: 'Actions'
+            })}
+          </DropdownMenu.Label>
+          {rowActions.map(({ destructive, disabled, label, onSelect }, i) => (
+            <DropdownMenu.Item
+              className={cn(
+                'cursor-pointer data-[disabled]:pointer-events-auto data-[disabled]:cursor-not-allowed',
+                destructive && 'text-destructive'
+              )}
+              disabled={typeof disabled === 'function' ? disabled(row.original) : disabled}
+              key={i}
+              onSelect={() => {
+                if (destructive) {
+                  destructiveAction(() => void onSelect(row.original, table));
+                } else {
+                  void onSelect(row.original, table);
+                }
+              }}
+            >
+              {label}
+            </DropdownMenu.Item>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    </div>
+  );
+};
diff --git a/src/components/DataTable/DestructiveActionDialog.tsx b/src/components/DataTable/DestructiveActionDialog.tsx
deleted file mode 100644
index 3fd180f6..00000000
--- a/src/components/DataTable/DestructiveActionDialog.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-/* eslint-disable @typescript-eslint/no-misused-promises */
-
-import type React from 'react';
-
-import type { Promisable } from 'type-fest';
-
-import { useTranslation } from '@/hooks';
-
-import { Button } from '../Button';
-import { Dialog } from '../Dialog';
-
-export type DestructiveActionPending = (() => Promisable<void>) | null;
-
-export const DestructiveActionDialog: React.FC<{
-  destructiveActionPending: DestructiveActionPending;
-  setDestructiveActionPending: React.Dispatch<React.SetStateAction<DestructiveActionPending>>;
-}> = ({ destructiveActionPending, setDestructiveActionPending }) => {
-  const { t } = useTranslation();
-  return (
-    <Dialog
-      open={destructiveActionPending !== null}
-      onOpenChange={(open) => {
-        if (!open) {
-          setDestructiveActionPending(null);
-        }
-      }}
-    >
-      <Dialog.Content onOpenAutoFocus={(event) => event.preventDefault()}>
-        <Dialog.Header>
-          <Dialog.Title>
-            {t({
-              en: 'Confirm Action',
-              fr: "Confirmer l'action"
-            })}
-          </Dialog.Title>
-          <Dialog.Description>
-            {t({
-              en: 'This action cannot be reversed. Please confirm that you would like to continue.',
-              fr: 'Cette action ne peut être inversée. Veuillez confirmer que vous souhaitez poursuivre.'
-            })}
-          </Dialog.Description>
-        </Dialog.Header>
-        <Dialog.Footer>
-          <Button
-            className="min-w-16"
-            type="button"
-            variant="danger"
-            onClick={async () => {
-              await destructiveActionPending?.();
-              setDestructiveActionPending(null);
-            }}
-          >
-            {t('libui.yes')}
-          </Button>
-          <Button
-            className="min-w-16"
-            type="button"
-            variant="primary"
-            onClick={() => setDestructiveActionPending(null)}
-          >
-            {t('libui.no')}
-          </Button>
-        </Dialog.Footer>
-      </Dialog.Content>
-    </Dialog>
-  );
-};
diff --git a/src/components/DataTable/RowActionsDropdown.tsx b/src/components/DataTable/RowActionsDropdown.tsx
deleted file mode 100644
index eb17517c..00000000
--- a/src/components/DataTable/RowActionsDropdown.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import type React from 'react';
-
-import type { Row } from '@tanstack/react-table';
-import { MoreHorizontalIcon } from 'lucide-react';
-import type { Promisable } from 'type-fest';
-
-import { useTranslation } from '@/hooks';
-
-import { Button } from '../Button';
-import { DropdownMenu } from '../DropdownMenu';
-
-import type { DestructiveActionPending } from './DestructiveActionDialog';
-
-export type RowAction<TData extends { [key: string]: unknown }> = {
-  destructive?: boolean;
-  label: string;
-  onSelect: (row: TData) => Promisable<void>;
-};
-
-export const RowActionsDropdown = <TData extends { [key: string]: unknown }>({
-  row,
-  rowActions,
-  setDestructiveActionPending
-}: {
-  row: Row<TData>;
-  rowActions: RowAction<TData>[];
-  setDestructiveActionPending: React.Dispatch<React.SetStateAction<DestructiveActionPending>>;
-}) => {
-  const { t } = useTranslation();
-  return (
-    <div className="flex w-full justify-end">
-      <DropdownMenu>
-        <DropdownMenu.Trigger asChild>
-          <Button className="-m-1.5" size="icon" variant="ghost">
-            <MoreHorizontalIcon className="h-4 w-4" />
-          </Button>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content align="end">
-          <DropdownMenu.Label>
-            {t({
-              en: 'Actions',
-              fr: 'Actions'
-            })}
-          </DropdownMenu.Label>
-          {rowActions.map(({ destructive, label, onSelect }, i) => (
-            <DropdownMenu.Item
-              className={destructive ? 'text-destructive' : undefined}
-              key={i}
-              onSelect={() => {
-                if (destructive) {
-                  setDestructiveActionPending(() => () => void onSelect(row.original));
-                } else {
-                  void onSelect(row.original);
-                }
-              }}
-            >
-              {label}
-            </DropdownMenu.Item>
-          ))}
-        </DropdownMenu.Content>
-      </DropdownMenu>
-    </div>
-  );
-};
diff --git a/src/components/DataTable/__tests__/DataTable.spec.tsx b/src/components/DataTable/__tests__/DataTable.spec.tsx
new file mode 100644
index 00000000..347ac533
--- /dev/null
+++ b/src/components/DataTable/__tests__/DataTable.spec.tsx
@@ -0,0 +1,60 @@
+import { faker } from '@faker-js/faker';
+import type { ColumnDef } from '@tanstack/table-core';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { range } from 'lodash-es';
+import { describe, expect, it } from 'vitest';
+
+import { DataTable } from '../DataTable';
+
+type PaymentStatus = 'failed' | 'pending' | 'processing' | 'success';
+
+type Payment = {
+  amount: number;
+  email: string;
+  id: string;
+  status: PaymentStatus;
+};
+
+const columns: ColumnDef<Payment>[] = [
+  {
+    accessorKey: 'status',
+    enableSorting: false,
+    filterFn: (row, id, filter: PaymentStatus[]) => {
+      return filter.includes(row.getValue(id));
+    },
+    header: 'Status'
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email'
+  },
+  {
+    accessorKey: 'amount',
+    header: 'Amount'
+  }
+];
+
+const statuses: readonly PaymentStatus[] = Object.freeze(['failed', 'pending', 'processing', 'success']);
+
+const data: Payment[] = range(20).map((i) => ({
+  amount: faker.number.int({ max: 100, min: 0 }),
+  email: faker.internet.email(),
+  id: String(i + 1),
+  status: faker.helpers.arrayElement(statuses)
+}));
+
+describe('DataTable', () => {
+  it('should render with 10 visible rows', () => {
+    render(<DataTable columns={columns} data={data} />);
+    expect(screen.getByTestId('data-table')).toBeInTheDocument();
+    expect(screen.getAllByTestId('data-table-row').length).toBe(10);
+  });
+  it('should search', async () => {
+    render(<DataTable columns={columns} data={data} />);
+    const searchBar = screen.getByTestId('data-table-search-bar').querySelector('input')!;
+    fireEvent.change(searchBar, { target: { value: data[0]!.email } });
+    await waitFor(() => expect(screen.getAllByTestId('data-table-row').length).toBe(1));
+    fireEvent.change(searchBar, { target: { value: '' } });
+    await waitFor(() => expect(screen.getAllByTestId('data-table-row').length).toBe(10));
+  });
+});
diff --git a/src/components/DataTable/constants.ts b/src/components/DataTable/constants.ts
new file mode 100644
index 00000000..ef85fff4
--- /dev/null
+++ b/src/components/DataTable/constants.ts
@@ -0,0 +1,7 @@
+export const ACTIONS_COLUMN_ID = '__actions' as const;
+
+export const MEMOIZED_HANDLE_ID = Symbol();
+
+export const ROW_ACTIONS_METADATA_KEY = Symbol();
+
+export const TABLE_NAME_METADATA_KEY = Symbol();
diff --git a/src/components/DataTable/context.ts b/src/components/DataTable/context.ts
new file mode 100644
index 00000000..7cd0699d
--- /dev/null
+++ b/src/components/DataTable/context.ts
@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+import type { DataTableStoreApi } from './store';
+
+export const DataTableContext = createContext<{ store: DataTableStoreApi }>(null!);
diff --git a/src/components/DataTable/hooks.ts b/src/components/DataTable/hooks.ts
new file mode 100644
index 00000000..8fc59293
--- /dev/null
+++ b/src/components/DataTable/hooks.ts
@@ -0,0 +1,60 @@
+import { useContext, useEffect, useRef } from 'react';
+
+import { useStore } from 'zustand';
+import { useStoreWithEqualityFn } from 'zustand/traditional';
+
+import { MEMOIZED_HANDLE_ID } from './constants';
+import { DataTableContext } from './context';
+
+import type { DataTableStore } from './types';
+
+export function useContainerRef() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const setContainerWidth = useDataTableStore((state) => state.setContainerWidth);
+
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout>;
+    let delay = 0;
+
+    const observer = new ResizeObserver(([entry]) => {
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        delay = 100;
+        if (entry?.contentBoxSize[0]?.inlineSize) {
+          const containerWidth = entry.contentBoxSize[0].inlineSize;
+          setContainerWidth(containerWidth);
+        }
+      }, delay);
+    });
+
+    if (containerRef.current) {
+      observer.observe(containerRef.current);
+    }
+    return () => {
+      observer.disconnect();
+      clearTimeout(timeout);
+    };
+  }, []);
+
+  return containerRef;
+}
+
+export function useDataTableStore<T>(selector: (state: DataTableStore) => T) {
+  const context = useContext(DataTableContext);
+  return useStore(context.store, selector);
+}
+
+export function useDataTableHandle<TKey extends keyof DataTableStore['$handles']>(key: TKey, forceRender = false) {
+  const context = useContext(DataTableContext);
+  const { handle } = useStoreWithEqualityFn(
+    context.store,
+    // the function is already updated by the time of equality check, so we cache it here
+    (store) => ({
+      globalKey: store._key,
+      handle: store.$handles[key],
+      handleKey: store.$handles[key][MEMOIZED_HANDLE_ID]
+    }),
+    forceRender ? (a, b) => a.globalKey === b.globalKey : (a, b) => a.handleKey === b.handleKey
+  );
+  return handle();
+}
diff --git a/src/components/DataTable/store.ts b/src/components/DataTable/store.ts
new file mode 100644
index 00000000..8c4d7d7b
--- /dev/null
+++ b/src/components/DataTable/store.ts
@@ -0,0 +1,203 @@
+import {
+  createTable,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel
+} from '@tanstack/table-core';
+import type { GlobalFilter, TableState, Updater } from '@tanstack/table-core';
+import { createStore } from 'zustand';
+
+import { ROW_ACTIONS_METADATA_KEY, TABLE_NAME_METADATA_KEY } from './constants';
+import {
+  applyUpdater,
+  calculateColumnSizing,
+  defineMemoizedHandle,
+  getColumnsWithActions,
+  getTanstackTableState
+} from './utils';
+
+import type { DataTableStore, DataTableStoreParams } from './types';
+
+export function createDataTableStore<T>(params: DataTableStoreParams<T>) {
+  return createStore<DataTableStore>((set, get) => {
+    const _state = getTanstackTableState(params);
+
+    const invalidateHandles = <TKey extends keyof DataTableStore['$handles']>(keys: TKey[] | void) => {
+      set((state) => {
+        (keys ?? (Object.keys(state.$handles) as TKey[])).forEach((key) => {
+          state.$handles[key].invalidate();
+        });
+        return { _key: Symbol() };
+      });
+    };
+
+    const setTableState = <TKey extends keyof TableState>(key: TKey, updaterOrValue: Updater<TableState[TKey]>) => {
+      const state = table.getState();
+      const value = applyUpdater(updaterOrValue, state[key]);
+      table.setOptions((prev) => ({ ...prev, state: { ...prev.state, [key]: value } }));
+    };
+
+    const updateColumnSizing = () => {
+      const { _containerWidth } = get();
+      if (!_containerWidth) {
+        return;
+      }
+      setTableState('columnSizing', calculateColumnSizing(table, _containerWidth));
+    };
+
+    const updateStyle = () => {
+      set((state) => {
+        const headers = table.getFlatHeaders();
+        const style: React.CSSProperties & { [key: string]: any } = {
+          width: table.getTotalSize()
+        };
+        if (state._containerWidth === null) {
+          style['--table-container-width'] = state._containerWidth;
+          style.visibility = 'hidden';
+        } else {
+          style['--table-container-width'] = state._containerWidth;
+          style.visibility = 'visible';
+        }
+        for (const header of headers) {
+          style[`--header-${header.id}-size`] = header.getSize();
+          style[`--col-${header.column.id}-size`] = header.column.getSize();
+        }
+        return { style };
+      });
+    };
+
+    const table = createTable<any>({
+      columnResizeMode: 'onChange',
+      columns: getColumnsWithActions(params),
+      data: params.data,
+      enableSortingRemoval: false,
+      getCoreRowModel: getCoreRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+      getPaginationRowModel: getPaginationRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+      meta: {
+        ...params.meta,
+        [ROW_ACTIONS_METADATA_KEY]: params.rowActions,
+        [TABLE_NAME_METADATA_KEY]: params.tableName
+      },
+      onColumnFiltersChange: (updaterOrValue) => {
+        setTableState('columnFilters', updaterOrValue);
+        invalidateHandles();
+      },
+      onColumnPinningChange: (updaterOrValue) => {
+        setTableState('columnPinning', updaterOrValue);
+        invalidateHandles();
+      },
+      onColumnSizingChange: (updaterOrValue) => {
+        const { _containerWidth: containerWidth } = get();
+        const { columnSizing: prevColumnSizing } = table.getState();
+        if (!containerWidth) {
+          console.error('Cannot set column sizing: container width is null');
+          return;
+        }
+        const updatedColumnSizing = applyUpdater(updaterOrValue, prevColumnSizing);
+        const computedWidth = table.getVisibleLeafColumns().reduce((previous, current) => {
+          return previous + (updatedColumnSizing[current.id] ?? current.getSize());
+        }, 0);
+        if (Number.isNaN(computedWidth)) {
+          console.error('Failed to compute width for columns');
+          return;
+        }
+        if (containerWidth > computedWidth) {
+          return;
+        }
+        setTableState('columnSizing', updatedColumnSizing);
+        updateStyle();
+        invalidateHandles();
+      },
+      onColumnSizingInfoChange: (updaterOrValue) => {
+        setTableState('columnSizingInfo', updaterOrValue);
+        updateStyle();
+        invalidateHandles();
+      },
+      onColumnVisibilityChange: (updaterOrValue) => {
+        setTableState('columnVisibility', updaterOrValue);
+        updateColumnSizing();
+        updateStyle();
+        invalidateHandles();
+      },
+      onGlobalFilterChange: (updaterOrValue: Updater<GlobalFilter>) => {
+        setTableState('globalFilter', updaterOrValue);
+        invalidateHandles();
+      },
+      onPaginationChange: (updaterOrValue) => {
+        setTableState('pagination', updaterOrValue);
+        invalidateHandles();
+      },
+      onSortingChange: (updaterOrValue) => {
+        setTableState('sorting', updaterOrValue);
+        invalidateHandles();
+      },
+      onStateChange: (updaterOrValue) => {
+        const prevState = table.getState();
+        table.setOptions((prev) => ({
+          ...prev,
+          state: typeof updaterOrValue === 'function' ? updaterOrValue(prevState) : updaterOrValue
+        }));
+        invalidateHandles();
+      },
+      renderFallbackValue: null,
+      state: _state
+    });
+
+    return {
+      $handles: {
+        headerGroups: defineMemoizedHandle(() => table.getHeaderGroups()),
+        paginationInfo: defineMemoizedHandle(() => {
+          const { pagination } = table.getState();
+          return {
+            pageCount: table.getPageCount(),
+            pageIndex: pagination.pageIndex
+          };
+        }),
+        rowCount: defineMemoizedHandle(() => table.getRowCount()),
+        rows: defineMemoizedHandle(() => {
+          const { rows } = table.getRowModel();
+          return rows;
+        }),
+        table: defineMemoizedHandle(() => table),
+        tableMeta: defineMemoizedHandle(() => table.options.meta ?? {})
+      },
+      _containerWidth: null,
+      _key: Symbol(),
+      reset: (params) => {
+        table.setOptions((options) => ({
+          ...options,
+          columns: getColumnsWithActions(params),
+          data: params.data,
+          meta: {
+            ...params.meta,
+            [ROW_ACTIONS_METADATA_KEY]: params.rowActions,
+            [TABLE_NAME_METADATA_KEY]: params.tableName
+          },
+          state: getTanstackTableState(params)
+        }));
+        invalidateHandles();
+      },
+      setContainerWidth: (containerWidth) => {
+        set(() => {
+          return { _containerWidth: containerWidth };
+        });
+        updateColumnSizing();
+        updateStyle();
+      },
+      setGlobalFilter: (globalFilter) => {
+        table.setGlobalFilter(globalFilter);
+      },
+      setPageIndex: (index) => {
+        table.setPageIndex(index);
+      },
+      style: {
+        visibility: 'hidden'
+      }
+    };
+  });
+}
+
+export type DataTableStoreApi = ReturnType<typeof createDataTableStore>;
diff --git a/src/components/DataTable/types.ts b/src/components/DataTable/types.ts
new file mode 100644
index 00000000..bf7e1c5c
--- /dev/null
+++ b/src/components/DataTable/types.ts
@@ -0,0 +1,99 @@
+import type {
+  ColumnDef,
+  ColumnFiltersState,
+  ColumnPinningState,
+  GlobalFilter,
+  HeaderGroup,
+  Row,
+  RowData,
+  SortingState,
+  Table,
+  TableMeta
+} from '@tanstack/table-core';
+import type { Promisable } from 'type-fest';
+
+import type { MEMOIZED_HANDLE_ID, ROW_ACTIONS_METADATA_KEY, TABLE_NAME_METADATA_KEY } from './constants';
+import type { DataTableEmptyStateProps } from './DataTableEmptyState';
+
+declare module '@tanstack/table-core' {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions, @typescript-eslint/no-unused-vars
+  export interface ColumnMeta<TData, TValue> {
+    [key: string]: unknown;
+  }
+
+  export type GlobalFilter = string | undefined;
+
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+  export interface TableMeta<TData extends RowData> {
+    [key: string]: unknown;
+    [ROW_ACTIONS_METADATA_KEY]?: DataTableRowAction<TData>[];
+    [TABLE_NAME_METADATA_KEY]?: string;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+  export interface TableState {
+    globalFilter: GlobalFilter;
+  }
+}
+
+export type DataTableInitialState = {
+  columnFilters?: ColumnFiltersState;
+  columnPinning?: ColumnPinningState;
+  sorting?: SortingState;
+};
+
+export type DataTableProps<T extends RowData> = DataTableContentProps<T> & DataTableStoreParams<T>;
+
+export type DataTableContentProps<T extends RowData> = {
+  emptyStateProps?: Partial<DataTableEmptyStateProps>;
+  onSearchChange?: SearchChangeHandler<NoInfer<T>>;
+  togglesComponent?: React.FC<{ table: Table<T> }>;
+};
+
+export type DataTableHandles<T extends { [key: string]: unknown }> = {
+  [K in keyof T]: MemoizedHandle<() => T[K]>;
+};
+
+export type DataTableRowAction<T extends RowData> = {
+  destructive?: boolean;
+  disabled?: ((row: T) => boolean) | boolean;
+  label: string;
+  onSelect: (row: T, table: Table<T>) => Promisable<void>;
+};
+
+export type DataTableStore = {
+  $handles: DataTableHandles<{
+    headerGroups: HeaderGroup<any>[];
+    paginationInfo: {
+      pageCount: number;
+      pageIndex: number;
+    };
+    rowCount: number;
+    rows: Row<any>[];
+    table: Table<any>;
+    tableMeta: TableMeta<any>;
+  }>;
+  _containerWidth: null | number;
+  _key: symbol;
+  reset: (params: DataTableStoreParams<any>) => void;
+  setContainerWidth: (containerWidth: number) => void;
+  setGlobalFilter: (globalFilter: GlobalFilter) => void;
+  setPageIndex: (index: number) => void;
+  style: React.CSSProperties;
+};
+
+export type DataTableStoreParams<T extends RowData> = {
+  columns: ColumnDef<NoInfer<T>>[];
+  data: T[];
+  initialState?: DataTableInitialState;
+  meta?: TableMeta<NoInfer<T>>;
+  rowActions?: DataTableRowAction<NoInfer<T>>[];
+  tableName?: string;
+};
+
+export type MemoizedHandle<T extends (...args: any[]) => any> = T & {
+  invalidate(): void;
+  [MEMOIZED_HANDLE_ID]: symbol;
+};
+
+export type SearchChangeHandler<T = any> = (value: string, table: Table<T>) => void;
diff --git a/src/components/DataTable/utils.tsx b/src/components/DataTable/utils.tsx
new file mode 100644
index 00000000..d9580783
--- /dev/null
+++ b/src/components/DataTable/utils.tsx
@@ -0,0 +1,138 @@
+import type { ColumnDef, ColumnSizingState, RowData, Table, TableState, Updater } from '@tanstack/table-core';
+import { sum } from 'lodash-es';
+
+import { ACTIONS_COLUMN_ID, MEMOIZED_HANDLE_ID } from './constants';
+import { DataTableRowActionCell } from './DataTableRowActionCell';
+
+import type { DataTableStoreParams, MemoizedHandle } from './types';
+
+function applyUpdater<T>(updater: Updater<T>, current: T): T {
+  return typeof updater === 'function' ? (updater as (prev: T) => T)(current) : updater;
+}
+
+function calculateColumnSizing(table: Table<any>, containerWidth: number) {
+  const updatedColumnSizing: ColumnSizingState = {};
+
+  const visibleCenterLeafColumns = table.getCenterLeafColumns().filter((column) => column.getIsVisible());
+  const visibleCenterLeafColumnIds = visibleCenterLeafColumns.map((column) => column.id);
+  const visibleNonCenteredLeafColumns = table.getVisibleLeafColumns().filter((column) => {
+    return !visibleCenterLeafColumnIds.includes(column.id);
+  });
+
+  visibleNonCenteredLeafColumns.forEach((column) => {
+    const defaultSize = column.columnDef.size;
+    if (!defaultSize) {
+      console.error(`Size must be specified for pinned column with ID '${column.id}', defaulting to 200px`);
+      updatedColumnSizing[column.id] = 200;
+    } else {
+      updatedColumnSizing[column.id] = defaultSize;
+    }
+  });
+
+  const nonCenteredColumnsSize = sum(Object.values(updatedColumnSizing));
+  const availableCenterSize = containerWidth - nonCenteredColumnsSize;
+  let maxCenterColumns: number;
+  if (containerWidth < 512) {
+    maxCenterColumns = 1;
+  } else if (containerWidth < 768) {
+    maxCenterColumns = 2;
+  } else if (containerWidth < 1024) {
+    maxCenterColumns = 3;
+  } else if (containerWidth < 1280) {
+    maxCenterColumns = 4;
+  } else {
+    maxCenterColumns = 5;
+  }
+
+  const centerColumnsToDisplay = Math.min(visibleCenterLeafColumns.length, maxCenterColumns);
+  if (centerColumnsToDisplay) {
+    visibleCenterLeafColumns.forEach((column) => {
+      updatedColumnSizing[column.id] = availableCenterSize / centerColumnsToDisplay;
+    });
+  } else {
+    visibleNonCenteredLeafColumns.forEach((column) => {
+      updatedColumnSizing[column.id] = containerWidth / visibleNonCenteredLeafColumns.length;
+    });
+  }
+
+  return updatedColumnSizing;
+}
+
+function defineMemoizedHandle<T extends (...args: any[]) => any>(target: T) {
+  const handle = target as MemoizedHandle<T>;
+  handle[MEMOIZED_HANDLE_ID] = Symbol();
+  handle.invalidate = function () {
+    this[MEMOIZED_HANDLE_ID] = Symbol();
+  };
+  return handle;
+}
+
+function flexRender<TProps extends object>(
+  Comp: React.ComponentType<TProps> | React.ReactNode,
+  props: TProps
+): React.JSX.Element | React.ReactNode {
+  return !Comp ? null : isReactComponent<TProps>(Comp) ? <Comp {...props} /> : Comp;
+}
+
+function getColumnsWithActions<T extends RowData>({ columns, rowActions }: DataTableStoreParams<T>): ColumnDef<T>[] {
+  if (!rowActions) {
+    return columns;
+  }
+  return [
+    ...columns,
+    {
+      cell: DataTableRowActionCell,
+      enableHiding: false,
+      enableResizing: false,
+      id: ACTIONS_COLUMN_ID,
+      size: 64
+    }
+  ];
+}
+
+function getTanstackTableState<T>({ initialState, rowActions }: DataTableStoreParams<T>): TableState {
+  const { columnFilters = [], columnPinning = {}, sorting = [] } = initialState ?? {};
+  const state: TableState = {
+    columnFilters,
+    columnOrder: [],
+    columnPinning,
+    columnSizing: {},
+    columnSizingInfo: {
+      columnSizingStart: [],
+      deltaOffset: null,
+      deltaPercentage: null,
+      isResizingColumn: false,
+      startOffset: null,
+      startSize: null
+    },
+    columnVisibility: {},
+    expanded: {},
+    globalFilter: undefined,
+    grouping: [],
+    pagination: {
+      pageIndex: 0,
+      pageSize: 10
+    },
+    rowPinning: {},
+    rowSelection: {},
+    sorting
+  };
+  if (rowActions) {
+    state.columnPinning.right ??= [];
+    state.columnPinning.right.push(ACTIONS_COLUMN_ID);
+  }
+  return state;
+}
+
+function isReactComponent<TProps>(component: unknown): component is React.ComponentType<TProps> {
+  return typeof component === 'function';
+}
+
+export {
+  applyUpdater,
+  calculateColumnSizing,
+  defineMemoizedHandle,
+  flexRender,
+  getColumnsWithActions,
+  getTanstackTableState
+};
diff --git a/src/hooks/useDestructiveAction/useDestructiveActionStore.test.ts b/src/hooks/useDestructiveAction/useDestructiveActionStore.test.ts
index 25729945..6c8b7dfe 100644
--- a/src/hooks/useDestructiveAction/useDestructiveActionStore.test.ts
+++ b/src/hooks/useDestructiveAction/useDestructiveActionStore.test.ts
@@ -1,18 +1,13 @@
 import { act, renderHook } from '@testing-library/react';
-import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
-import * as zustand from 'zustand';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import { useDestructiveActionStore } from './useDestructiveActionStore';
 
 import type { DestructiveAction, DestructiveActionOptions } from './useDestructiveActionStore';
 
 describe('useDestructiveActionStore', () => {
-  beforeAll(() => {
-    vi.spyOn(zustand, 'create');
-  });
-
   afterEach(() => {
-    vi.clearAllMocks();
+    useDestructiveActionStore.setState(useDestructiveActionStore.getInitialState());
   });
 
   it('should render and return an object', () => {
diff --git a/src/hooks/useNotificationsStore/useNotificationsStore.test.ts b/src/hooks/useNotificationsStore/useNotificationsStore.test.ts
index 15045f4c..d3b2919b 100644
--- a/src/hooks/useNotificationsStore/useNotificationsStore.test.ts
+++ b/src/hooks/useNotificationsStore/useNotificationsStore.test.ts
@@ -1,16 +1,9 @@
 import { act, renderHook } from '@testing-library/react';
-import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
-import * as zustand from 'zustand';
+import { describe, expect, it } from 'vitest';
 
 import { useNotificationsStore } from './useNotificationsStore';
 
 describe('useNotificationsStore', () => {
-  beforeAll(() => {
-    vi.spyOn(zustand, 'create');
-  });
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
   it('should render and return an object', () => {
     const { result } = renderHook(() => useNotificationsStore());
     expect(result.current).toBeTypeOf('object');
diff --git a/src/testing/setup-tests.ts b/src/testing/setup-tests.ts
index 641e1657..377ee78e 100644
--- a/src/testing/setup-tests.ts
+++ b/src/testing/setup-tests.ts
@@ -1,12 +1,10 @@
 import { cleanup } from '@testing-library/react';
-import { afterEach, vi } from 'vitest';
+import { afterEach } from 'vitest';
 
 import { i18n } from '@/i18n';
 
 import '@testing-library/jest-dom/vitest';
 
-vi.mock('zustand');
-
 i18n.init({ translations: {} });
 
 // Since we're not using vitest globals, we need to explicitly call cleanup()