diff --git a/package.json b/package.json
index 626bf273..fc511997 100644
--- a/package.json
+++ b/package.json
@@ -92,6 +92,7 @@
     "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.1.8",
+    "@tanstack/react-table": "^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 b4fa653a..82be62d9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -79,6 +79,9 @@ importers:
       '@radix-ui/react-tooltip':
         specifier: ^1.1.8
         version: 1.1.8(@types/react-dom@19.0.4(@types/react@19.0.12))(@types/react@19.0.12)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@tanstack/react-table':
+        specifier: ^8.21.3
+        version: 8.21.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -2121,6 +2124,19 @@ packages:
     peerDependencies:
       vite: ^5.2.0 || ^6
 
+  '@tanstack/react-table@8.21.3':
+    resolution:
+      { integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww== }
+    engines: { node: '>=12' }
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+
+  '@tanstack/table-core@8.21.3':
+    resolution:
+      { integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg== }
+    engines: { node: '>=12' }
+
   '@testing-library/dom@10.4.0':
     resolution:
       { integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ== }
@@ -8012,6 +8028,14 @@ snapshots:
       tailwindcss: 4.1.0
       vite: 6.2.4(@types/node@22.13.17)(jiti@2.4.2)(lightningcss@1.29.2)
 
+  '@tanstack/react-table@8.21.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@tanstack/table-core': 8.21.3
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
+  '@tanstack/table-core@8.21.3': {}
+
   '@testing-library/dom@10.4.0':
     dependencies:
       '@babel/code-frame': 7.26.2
diff --git a/src/components/DataTable/DataTable.stories.tsx b/src/components/DataTable/DataTable.stories.tsx
new file mode 100644
index 00000000..38afd808
--- /dev/null
+++ b/src/components/DataTable/DataTable.stories.tsx
@@ -0,0 +1,76 @@
+import { range, toBasicISOString } from '@douglasneuroinformatics/libjs';
+import { faker } from '@faker-js/faker';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { DataTable } from './DataTable';
+
+import type { DataTableColumn } from './DataTable';
+
+type User = {
+  birthday: Date;
+  email: string;
+  firstName: string;
+  lastName: string;
+};
+
+type Story = StoryObj<typeof DataTable<User>>;
+
+const columns: DataTableColumn<User>[] = [
+  {
+    format: (value) => {
+      return toBasicISOString(value);
+    },
+    key: 'birthday',
+    label: 'Birthday'
+  },
+  {
+    format: 'email',
+    key: 'email',
+    label: 'Email',
+    sortable: true
+  }
+];
+
+const data: User[] = range(60)
+  .unwrap()
+  .map(() => ({
+    birthday: faker.date.birthdate(),
+    email: faker.internet.email(),
+    firstName: faker.person.firstName(),
+    lastName: faker.person.lastName()
+  }));
+
+export default { component: DataTable } as Meta<typeof DataTable<User>>;
+
+export const Default: Story = {
+  args: {
+    columns,
+    data,
+    headerAction: {
+      label: 'Do Something',
+      onClick: () => {
+        alert('Something!');
+      }
+    },
+    rowActions: [
+      {
+        destructive: true,
+        label: 'Delete',
+        onSelect: (row) => {
+          alert(`Delete User: ${row.firstName} ${row.lastName}`);
+        }
+      }
+    ],
+    search: {
+      key: 'email',
+      placeholder: 'Filter emails...'
+    }
+  }
+};
+
+export const Empty: Story = {
+  args: {
+    columns,
+    data: []
+  }
+};
diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx
new file mode 100644
index 00000000..12aa1512
--- /dev/null
+++ b/src/components/DataTable/DataTable.tsx
@@ -0,0 +1,289 @@
+import { Fragment, useEffect, useMemo, useState } 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 { useTranslation } from '@/hooks';
+
+import { Button } from '../Button';
+import { SearchBar } from '../SearchBar';
+import { Table } from '../Table';
+import { DestructiveActionDialog } from './DestructiveActionDialog';
+import { RowActionsDropdown } from './RowActionsDropdown';
+
+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[];
+  headerAction?: {
+    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,
+  headerAction,
+  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
+    }
+  });
+
+  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);
+
+  return (
+    <Fragment>
+      <DestructiveActionDialog
+        destructiveActionPending={destructiveActionPending}
+        setDestructiveActionPending={setDestructiveActionPending}
+      />
+      {search && (
+        <div className="flex items-center gap-4 py-4">
+          <SearchBar
+            className="grow"
+            placeholder={search.placeholder}
+            value={searchValue}
+            onValueChange={setSearchValue}
+          />
+          {headerAction && (
+            <Button type="button" variant="outline" onClick={headerAction.onClick}>
+              {headerAction.label}
+            </Button>
+          )}
+        </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="mx-auto flex w-min pt-6 pb-4">
+        <Button
+          className="flex gap-1"
+          disabled={!table.getCanPreviousPage()}
+          type="button"
+          variant="ghost"
+          onClick={() => table.firstPage()}
+        >
+          <ChevronsLeftIcon className="-ml-1 h-4 w-4" />
+          <span>{t('pagination.first')}</span>
+        </Button>
+        <Button
+          className="mr-1 flex gap-1"
+          disabled={!table.getCanPreviousPage()}
+          type="button"
+          variant="ghost"
+          onClick={() => table.previousPage()}
+        >
+          <ChevronLeftIcon className="-ml-1 h-4 w-4" />
+          <span>{t('pagination.previous')}</span>
+        </Button>
+        {pageIndexOptions.map((index) => (
+          <Button
+            key={index}
+            type="button"
+            variant={index === pagination.pageIndex ? 'outline' : 'ghost'}
+            onClick={() => table.setPageIndex(index)}
+          >
+            {index + 1}
+          </Button>
+        ))}
+        <Button
+          className="ml-1 flex gap-1"
+          disabled={!table.getCanNextPage()}
+          type="button"
+          variant="ghost"
+          onClick={() => table.nextPage()}
+        >
+          <span>{t('pagination.next')}</span>
+          <ChevronRightIcon className="-mr-1 h-4 w-4" />
+        </Button>
+        <Button
+          className="flex gap-1"
+          disabled={!table.getCanNextPage()}
+          type="button"
+          variant="ghost"
+          onClick={() => table.lastPage()}
+        >
+          <span>{t('pagination.last')}</span>
+          <ChevronsRightIcon className="-mr-1 h-4 w-4" />
+        </Button>
+      </div>
+    </Fragment>
+  );
+};
+
+export type { DataTableColumn };
diff --git a/src/components/DataTable/DestructiveActionDialog.tsx b/src/components/DataTable/DestructiveActionDialog.tsx
new file mode 100644
index 00000000..bdc78b94
--- /dev/null
+++ b/src/components/DataTable/DestructiveActionDialog.tsx
@@ -0,0 +1,71 @@
+/* eslint-disable @typescript-eslint/no-misused-promises */
+/* eslint-disable jsx-a11y/no-autofocus */
+
+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>
+        <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"
+            size="sm"
+            type="button"
+            variant="outline"
+            onClick={async () => {
+              await destructiveActionPending?.();
+              setDestructiveActionPending(null);
+            }}
+          >
+            {t('libui.yes')}
+          </Button>
+          <Button
+            autoFocus={true}
+            className="min-w-16"
+            size="sm"
+            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
new file mode 100644
index 00000000..eb17517c
--- /dev/null
+++ b/src/components/DataTable/RowActionsDropdown.tsx
@@ -0,0 +1,64 @@
+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/index.ts b/src/components/DataTable/index.ts
new file mode 100644
index 00000000..89841a48
--- /dev/null
+++ b/src/components/DataTable/index.ts
@@ -0,0 +1 @@
+export * from './DataTable';
diff --git a/src/components/index.ts b/src/components/index.ts
index ff18399b..a58c8966 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -33,7 +33,6 @@ export * from './ListboxDropdown';
 export * from './MenuBar';
 export * from './NotificationHub';
 export * from './OneTimePasswordInput';
-export * from './Pagination';
 export * from './Popover';
 export * from './Progress';
 export * from './RadioGroup';
diff --git a/src/i18n/translations/libui.json b/src/i18n/translations/libui.json
index 103df399..4ab9f8d6 100644
--- a/src/i18n/translations/libui.json
+++ b/src/i18n/translations/libui.json
@@ -142,6 +142,10 @@
       "en": "<< First",
       "fr": "<< Première"
     },
+    "first": {
+      "en": "First",
+      "fr": "Première"
+    },
     "info": {
       "en": "Showing {{first}} to {{last}} of {{total}} results",
       "fr": "Affichage de {{first}} à {{last}} sur {{total}} résultats"
@@ -150,6 +154,10 @@
       "en": "Last >>",
       "fr": "Dernière >>"
     },
+    "last": {
+      "en": "Last",
+      "fr": "Dernière"
+    },
     "next": {
       "en": "Next",
       "fr": "Suivant"
@@ -164,5 +172,13 @@
       "en": "Search...",
       "fr": "Rechercher..."
     }
+  },
+  "yes": {
+    "en": "Yes",
+    "fr": "Oui"
+  },
+  "no": {
+    "en": "No",
+    "fr": "Non"
   }
 }