@wallarm-org/claude-design 0.0.0-stage → 4.8.0

package/dist/project/components/Table/stories.md

@@ -0,0 +1,3697 @@
+# Table story sources
+
+### Table/Table.stories.tsx
+
+```tsx
+import type { FC } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { arrayMove } from '@dnd-kit/sortable';
+import { fn } from 'storybook/test';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import {
+  ChevronDown,
+  ChevronRight,
+  Copy,
+  Database,
+  Ellipsis,
+  Filter,
+  FilterX,
+  Lock,
+  Plus,
+  SearchX,
+  Shield,
+  Trash2,
+} from '../../icons';
+import { Attribute, AttributeLabel, AttributeValue } from '../Attribute';
+import { Badge } from '../Badge';
+import {
+  BulkBarSummaryClear,
+  BulkBarSummaryCount,
+  BulkBarSummarySelectAll,
+  BulkBarSummarySeparator,
+} from '../BulkBar';
+import { Button } from '../Button';
+import { InlineCodeSnippet } from '../CodeSnippet';
+import { Drawer, DrawerBody, DrawerContent, DrawerHeader, DrawerTitle } from '../Drawer';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuContextTrigger,
+  DropdownMenuItem,
+  DropdownMenuItemContent,
+  DropdownMenuItemDescription,
+  DropdownMenuItemIcon,
+  DropdownMenuItemText,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../DropdownMenu';
+import {
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateDescription,
+  EmptyStateIllustration,
+  EmptyStateMessage,
+  EmptyStateTitle,
+} from '../EmptyState';
+import { HttpMethod } from '../HttpMethod';
+import { OverflowList } from '../OverflowList';
+import {
+  Pagination,
+  PaginationList,
+  PaginationNext,
+  PaginationPageSize,
+  PaginationPrevious,
+  useClientPagination,
+} from '../Pagination';
+import type { SelectDataItem } from '../Select';
+import { HStack, VStack } from '../Stack';
+import { Tag } from '../Tag';
+import { Text } from '../Text';
+import { EDITABLE_CELL_COLUMN_META, EditableSelectCell, EditableTextCell } from './EditableCell';
+import {
+  createLargeGroupedData,
+  createLargeSecurityEvents,
+  fullFeaturedColumns,
+  groupedHeaderData,
+  headerColumnIds,
+  headerColumns,
+  multiplySecurityEvents,
+  renderSecurityPreviewContent,
+  renderSecurityPreviewHeader,
+  type SecurityEvent,
+  type SecurityHeaderEntry,
+  securityColumnHelper,
+  securityColumnIds,
+  securityColumns,
+  securityEvents,
+  useBidirectionalData,
+  useInfiniteData,
+} from './mocks';
+import { Table } from './Table';
+import { TableActionBar, TableActionBarSelection } from './TableActionBar';
+import {
+  TableColumnMenu,
+  TableColumnMenuHideItem,
+  TableColumnMenuMoveLeftItem,
+  TableColumnMenuMoveRightItem,
+  TableColumnMenuPinItem,
+  TableColumnMenuSortItem,
+} from './TableColumnMenu';
+import { TableEmptyState } from './TableEmptyState';
+import {
+  TableScrollHandler,
+  TableScrollHandlerLeft,
+  TableScrollHandlerRight,
+} from './TableScrollHandler';
+import { TableSortTrigger } from './TableSortTrigger';
+import type {
+  TableColumnDef,
+  TableColumnGroup,
+  TableColumnPinningState,
+  TableColumnSizingState,
+  TableExpandedState,
+  TableHandle,
+  TableRowReorderEvent,
+  TableRowSelectionState,
+  TableSortingState,
+  TableVisibilityState,
+} from './types';
+
+const onDuplicate = fn().mockName('onDuplicate');
+const onDelete = fn().mockName('onDelete');
+const onCopyValue = fn().mockName('onCopyValue');
+const onShowOnly = fn().mockName('onShowOnly');
+const onExclude = fn().mockName('onExclude');
+const onExecute = fn().mockName('onExecute');
+
+const DESCRIPTION = [
+  'The grid for many records of one shape — reach for a `Card` grid when a row reads better as an object than as a set of columns, and for `Attribute` when you are showing one record rather than many.',
+  'Everything interactive is controlled: sorting, selection, expansion, column order, pinning, sizing and visibility are each a state prop with a callback, so nothing moves unless you move it, and `manualSorting` hands the sort to the server.',
+  'Filtering belongs above the grid in a `FilterInput`, and a long collection scrolls rather than paginates — `Pagination` is the deliberate exception, for when a page number is part of the task.',
+].join(' ');
+
+const meta = {
+  title: 'Data Display/Table',
+  component: Table,
+  parameters: {
+    layout: 'padded',
+    docs: { description: { component: DESCRIPTION } },
+  },
+  tags: ['beta'],
+} satisfies Meta<typeof Table>;
+
+export default meta;
+
+/**
+ * The minimum — `data`, `columns`, `getRowId` and a column to open sorted on. The header stays
+ * put as the body scrolls.
+ */
+export const Basic: StoryFn<typeof meta> = () => {
+  interface Endpoint {
+    id: string;
+    path: string;
+    method: string;
+    requests: number;
+    status: 'Active' | 'Deprecated';
+  }
+
+  const endpoints: Endpoint[] = [
+    { id: '1', path: '/api/v1/users', method: 'GET', requests: 12840, status: 'Active' },
+    { id: '2', path: '/api/v1/users/{id}', method: 'PATCH', requests: 3120, status: 'Active' },
+    { id: '3', path: '/api/v1/orders', method: 'POST', requests: 8410, status: 'Active' },
+    { id: '4', path: '/api/v0/login', method: 'POST', requests: 96, status: 'Deprecated' },
+  ];
+
+  const columns: TableColumnDef<Endpoint>[] = [
+    {
+      accessorKey: 'path',
+      header: 'Endpoint',
+      size: 320,
+      cell: ({ row }) => (
+        <HStack gap={8}>
+          <HttpMethod method={row.original.method} />
+          <Text size='sm'>{row.original.path}</Text>
+        </HStack>
+      ),
+    },
+    {
+      accessorKey: 'status',
+      header: 'Status',
+      size: 140,
+      cell: ({ row }) => (
+        <Badge
+          variant='dotted'
+          type='secondary'
+          color={row.original.status === 'Active' ? 'green' : 'gray'}
+        >
+          {row.original.status}
+        </Badge>
+      ),
+    },
+    {
+      accessorKey: 'requests',
+      header: 'Requests',
+      size: 120,
+      meta: { description: { type: 'tooltip', content: 'Requests in the last 24 hours' } },
+    },
+  ];
+
+  const [sorting, setSorting] = useState<TableSortingState>([{ id: 'requests', desc: true }]);
+
+  return (
+    <Table
+      aria-label='Endpoints'
+      data={endpoints}
+      columns={columns}
+      getRowId={row => row.id}
+      sorting={sorting}
+      onSortingChange={setSorting}
+    />
+  );
+};
+
+/**
+ * `stretch={false}` — columns keep their defined widths and do not expand to fill the container.
+ * Empty space appears on the right when the total column width is less than the container width.
+ */
+export const NoStretch: StoryFn<typeof meta> = () => {
+  const narrowColumns: TableColumnDef<SecurityEvent>[] = [
+    securityColumnHelper.accessor('objectName', {
+      header: 'Object name',
+      size: 200,
+    }),
+    securityColumnHelper.accessor('status', {
+      header: 'Status',
+      size: 120,
+    }),
+    securityColumnHelper.accessor('requests', {
+      header: 'Requests',
+      size: 100,
+    }),
+  ];
+
+  return (
+    <Table data={securityEvents} columns={narrowColumns} getRowId={row => row.id} stretch={false} />
+  );
+};
+
+// "Rows per page" + page navigation share a right-aligned footer below the table.
+/**
+ * `useClientPagination` slices the rows and the pager sits right-aligned below the table,
+ * sharing its footer with the rows-per-page control.
+ */
+export const WithPagination: StoryFn<typeof meta> = () => {
+  const allData = useMemo(() => createLargeSecurityEvents(47), []);
+  const { pageData, ...pagination } = useClientPagination(allData, 10);
+
+  return (
+    <VStack gap={12}>
+      <Table data={pageData} columns={securityColumns} getRowId={row => row.id} />
+      <Pagination {...pagination} align='right' aria-label='Security events'>
+        <PaginationPageSize options={[10, 25, 50]} />
+        <PaginationPrevious />
+        <PaginationList />
+        <PaginationNext />
+      </Pagination>
+    </VStack>
+  );
+};
+
+/**
+ * Sorting held in state, so the arrow and the row order are the same fact — click a header to
+ * cycle through the directions.
+ */
+export const Sorting: StoryFn<typeof meta> = () => {
+  const [sorting, setSorting] = useState<TableSortingState>([]);
+
+  return (
+    <Table
+      data={securityEvents}
+      columns={securityColumns}
+      getRowId={row => row.id}
+      sorting={sorting}
+      onSortingChange={setSorting}
+    />
+  );
+};
+
+// Demo of server-side sorting: the consumer (this story) owns sort. TanStack
+// only fires `onSortingChange`; we re-derive `data` ourselves to mimic a
+// re-fetch that returns pre-sorted rows.
+const sortSecurityEvents = (sorting: TableSortingState): SecurityEvent[] => {
+  if (sorting.length === 0) return securityEvents;
+  const { id, desc } = sorting[0]!;
+  const key = id as keyof SecurityEvent;
+  const direction = desc ? -1 : 1;
+  return [...securityEvents].sort((a, b) => {
+    const av = a[key];
+    const bv = b[key];
+    if (av < bv) return -1 * direction;
+    if (av > bv) return 1 * direction;
+    return 0;
+  });
+};
+
+/**
+ * `manualSorting` stops the table sorting anything itself: it only reports the change, and the
+ * story re-derives `data` the way a refetch would.
+ */
+export const ManualSorting: StoryFn<typeof meta> = () => {
+  const [sorting, setSorting] = useState<TableSortingState>([]);
+  const data = useMemo(() => sortSecurityEvents(sorting), [sorting]);
+
+  return (
+    <Table
+      data={data}
+      columns={securityColumns}
+      getRowId={row => row.id}
+      sorting={sorting}
+      onSortingChange={setSorting}
+      manualSorting
+      data-testid='manual-sort-table'
+    />
+  );
+};
+
+// Showcase: every analytics seam exposed by `<Table>` today, end-to-end.
+//
+// DOM seams (attribute lands on the real interactive target, document-level
+// SDKs resolve via `closest('[data-analytics-id]')`):
+//   • Sort trigger        — `<TableSortTrigger column={...} data-analytics-id=...>`
+//                           rendered as a direct child of `header(ctx)`.
+//   • Column header menu  — `<TableColumnMenu column={...} data-analytics-id=...>`
+//                           on the trigger button, plus per-item analytics on
+//                           `<TableColumnMenuSortItem>`, `<TableColumnMenuPinItem>`,
+//                           `<TableColumnMenuHideItem>`, `<TableColumnMenuMoveLeftItem>`,
+//                           `<TableColumnMenuMoveRightItem>`.
+//   • Cell content        — consumer JSX from `column.cell(ctx)`; analytics
+//                           sit on the rendered `<a>` / `<button>`.
+//   • Per-row actions     — consumer JSX from `meta.renderMenuAction(row)`;
+//                           analytics sit on the trigger and each menu item.
+//   • TableActionBar      — consumer-rendered bulk action buttons (children).
+//   • Selection summary   — `<TableActionBarSelection>` override composed from
+//                           `<BulkBarSummarySelectAll>` / `<BulkBarSummaryClear>`;
+//                           analytics sit on the real "Select all" / "Clear"
+//                           `<button>`s (DS keeps toggle / reset wiring).
+//   • Scroll controls     — `<TableScrollHandler>` as a `Table` child, with
+//                           `<TableScrollHandlerLeft>` / `<TableScrollHandlerRight>`
+//                           carrying analytics; portaled into the master header.
+//   • Expanded row        — consumer JSX from `renderExpandedRow(row)`.
+//   • Wrapper testid      — `<Table data-testid=...>` lands on the
+//                           scroll-container `<div>`.
+//
+// Callback seams (state-level signal; richer than a click event because the
+// payload carries the resulting state — direction, visibility, order, etc.):
+//   • `onSortingChange(u)`             — resulting sort column + direction
+//   • `onRowSelectionChange(u)`        — selected row map
+//   • `onExpandedChange(u)`            — expanded row map
+//   • `onColumnVisibilityChange(u)`    — visibility map (Settings menu)
+//   • `onColumnOrderChange(u)`         — column order (Settings menu DnD)
+//   • `onColumnPinningChange(u)`       — pin state (column-header menu)
+//   • `onColumnSizingChange(u)`        — final width (resize handle)
+//   • `onMasterCellClick(rowId)`       — master-cell click
+//
+// Pending DS work (no DOM seam yet — callback-only): selection checkbox,
+// expand toggle, master-cell click, resize handle.
+/**
+ * Every analytics seam at once — `TableSortTrigger`, `TableColumnMenu` and each of its items,
+ * the action bar, the scroll handlers — plus the state callbacks, which carry the resulting
+ * sort, selection and column layout rather than just a click.
+ */
+export const WithAnalytics: StoryFn<typeof meta> = () => {
+  const [sorting, setSorting] = useState<TableSortingState>([]);
+  const [rowSelection, setRowSelection] = useState<TableRowSelectionState>({});
+  const [expanded, setExpanded] = useState<TableExpandedState>({});
+  const [columnVisibility, setColumnVisibility] = useState<TableVisibilityState>({});
+  const [columnOrder, setColumnOrder] = useState<string[]>([]);
+  const [columnPinning, setColumnPinning] = useState<TableColumnPinningState>({});
+  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});
+
+  // Pretend SDK call — every analytics signal in this story funnels through
+  // it so the Storybook actions panel shows one consistent stream.
+  const track = useCallback(
+    (event: string, props?: Record<string, unknown>) =>
+      // biome-ignore lint/suspicious/noConsole: demo story stand-in for an SDK call
+      console.info('[analytics]', event, props ?? {}),
+    [],
+  );
+
+  const columnsWithAnalytics = useMemo<TableColumnDef<SecurityEvent>[]>(
+    () => [
+      // Master column — sortable header, link cell with analytics, per-row
+      // menu action with analytics on every menu item.
+      securityColumnHelper.accessor('objectName', {
+        header: ({ column }) => (
+          <TableSortTrigger
+            column={column}
+            data-analytics-id='SECURITY_SORT_OBJECT_NAME'
+            data-analytics-props='{"surface":"events-table"}'
+          >
+            Object name
+          </TableSortTrigger>
+        ),
+        size: 320,
+        enableSorting: true,
+        meta: {
+          sortType: 'text' as const,
+          resizeType: 'cut' as const,
+          renderMenuAction: row => (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant='ghost'
+                  color='neutral'
+                  size='small'
+                  aria-label='Row actions'
+                  data-analytics-id='SECURITY_ROW_MENU_OPEN'
+                  data-analytics-props={`{"rowId":"${row.original.id}"}`}
+                >
+                  <Ellipsis />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuItem
+                  data-analytics-id='SECURITY_ROW_COPY_NAME'
+                  data-analytics-props={`{"rowId":"${row.original.id}"}`}
+                  onSelect={() => navigator.clipboard.writeText(row.original.objectName)}
+                >
+                  <DropdownMenuItemIcon>
+                    <Copy />
+                  </DropdownMenuItemIcon>
+                  <DropdownMenuItemText>Copy name</DropdownMenuItemText>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  data-analytics-id='SECURITY_ROW_FILTER'
+                  data-analytics-props={`{"rowId":"${row.original.id}"}`}
+                  onSelect={() => track('SECURITY_ROW_FILTER_APPLIED', { rowId: row.original.id })}
+                >
+                  <DropdownMenuItemIcon>
+                    <Filter />
+                  </DropdownMenuItemIcon>
+                  <DropdownMenuItemText>Show only</DropdownMenuItemText>
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  data-analytics-id='SECURITY_ROW_EXCLUDE'
+                  data-analytics-props={`{"rowId":"${row.original.id}"}`}
+                  onSelect={() => track('SECURITY_ROW_EXCLUDE_APPLIED', { rowId: row.original.id })}
+                >
+                  <DropdownMenuItemIcon>
+                    <FilterX />
+                  </DropdownMenuItemIcon>
+                  <DropdownMenuItemText>Exclude</DropdownMenuItemText>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ),
+        },
+        cell: ({ row }) => (
+          <a
+            href={`#/events/${row.original.id}`}
+            data-analytics-id='SECURITY_ROW_OPEN'
+            data-analytics-props={`{"rowId":"${row.original.id}"}`}
+          >
+            {row.original.objectName}
+          </a>
+        ),
+      }),
+      // Other sortable columns — each one declares its own sort target.
+      securityColumnHelper.accessor('requests', {
+        header: ({ column }) => (
+          <TableSortTrigger column={column} data-analytics-id='SECURITY_SORT_REQUESTS'>
+            Requests
+          </TableSortTrigger>
+        ),
+        size: 140,
+        enableSorting: true,
+      }),
+      securityColumnHelper.accessor('sourceIp', {
+        header: ({ column }) => (
+          <TableSortTrigger column={column} data-analytics-id='SECURITY_SORT_SOURCE_IP'>
+            Source
+          </TableSortTrigger>
+        ),
+        size: 180,
+        enableSorting: true,
+        meta: { sortType: 'text' as const },
+      }),
+      // Status column — demonstrates the column header menu seam with
+      // per-item analytics, rendered as a sibling of the sort trigger inside
+      // a Fragment.
+      securityColumnHelper.accessor('status', {
+        header: ({ column }) => (
+          <>
+            <TableSortTrigger column={column} data-analytics-id='SECURITY_SORT_STATUS'>
+              Status
+            </TableSortTrigger>
+            <TableColumnMenu column={column} data-analytics-id='SECURITY_COLMENU_STATUS'>
+              <TableColumnMenuSortItem
+                direction='asc'
+                data-analytics-id='SECURITY_COLMENU_STATUS_SORT_ASC'
+              />
+              <TableColumnMenuSortItem
+                direction='desc'
+                data-analytics-id='SECURITY_COLMENU_STATUS_SORT_DESC'
+              />
+              <TableColumnMenuPinItem data-analytics-id='SECURITY_COLMENU_STATUS_PIN' />
+              <TableColumnMenuHideItem data-analytics-id='SECURITY_COLMENU_STATUS_HIDE' />
+              <TableColumnMenuMoveLeftItem data-analytics-id='SECURITY_COLMENU_STATUS_MOVE_LEFT' />
+              <TableColumnMenuMoveRightItem data-analytics-id='SECURITY_COLMENU_STATUS_MOVE_RIGHT' />
+            </TableColumnMenu>
+          </>
+        ),
+        size: 130,
+        enableSorting: true,
+        meta: { sortType: 'text' as const, resizeType: 'cut' as const },
+      }),
+      securityColumnHelper.accessor('firstDetected', {
+        header: ({ column }) => (
+          <TableSortTrigger column={column} data-analytics-id='SECURITY_SORT_FIRST_DETECTED'>
+            First detected
+          </TableSortTrigger>
+        ),
+        size: 160,
+        enableSorting: true,
+        meta: { sortType: 'date' as const, resizeType: 'cut' as const },
+      }),
+    ],
+    [track],
+  );
+
+  return (
+    <Table
+      data-testid='security-events-table'
+      data={securityEvents}
+      columns={columnsWithAnalytics}
+      getRowId={row => row.id}
+      // Sort: DOM seam on the icon (TableSortTrigger) + callback for direction.
+      sorting={sorting}
+      onSortingChange={updater => {
+        setSorting(prev => {
+          const next = typeof updater === 'function' ? updater(prev) : updater;
+          track('SECURITY_TABLE_SORT_CHANGED', { columnId: next[0]?.id, desc: !!next[0]?.desc });
+          return next;
+        });
+      }}
+      // Selection / expand / settings menu — no DOM seam yet; callbacks carry
+      // the resulting state.
+      rowSelection={rowSelection}
+      onRowSelectionChange={updater => {
+        setRowSelection(prev => {
+          const next = typeof updater === 'function' ? updater(prev) : updater;
+          track('SECURITY_TABLE_SELECTION_CHANGED', { selectedIds: Object.keys(next) });
+          return next;
+        });
+      }}
+      expanded={expanded}
+      onExpandedChange={updater => {
+        setExpanded(prev => {
+          const next = typeof updater === 'function' ? updater(prev) : updater;
+          track('SECURITY_TABLE_EXPAND_CHANGED', { state: next });
+          return next;
+        });
+      }}
+      columnVisibility={columnVisibility}
+      onColumnVisibilityChange={updater => {
+        setColumnVisibility(prev => {
+          const next = typeof updater === 'function' ? updater(prev) : updater;
+          track('SECURITY_TABLE_COLUMNS_VISIBILITY_CHANGED', next);
+          return next;
+        });
+      }}
+      columnOrder={columnOrder}
+      onColumnOrderChange={updater => {
+        setColumnOrder(prev => {
+          const next = typeof updater === 'function' ? updater(prev) : updater;
+          track('SECURITY_TABLE_COLUMNS_REORDERED', { order: next });
+          return next;
+        });
+      }}
+      columnPinning={columnPinning}
+      onColumnPinningChange={updater => {
+        setColumnPinning(prev => {
+          const next = typeof updater === 'function' ? updater(prev) : updater;
+          track('SECURITY_TABLE_COLUMNS_PINNED', next);
+          return next;
+        });
+      }}
+      columnSizing={columnSizing}
+      onColumnSizingChange={updater => {
+        setColumnSizing(prev => {
+          const next = typeof updater === 'function' ? updater(prev) : updater;
+          track('SECURITY_TABLE_COLUMN_RESIZED', next);
+          return next;
+        });
+      }}
+      onMasterCellClick={rowId => track('SECURITY_TABLE_MASTER_CELL_CLICKED', { rowId })}
+      renderExpandedRow={row => (
+        <div className='p-16 bg-states-primary-default-alt rounded-8'>
+          <HStack justify='between' align='center'>
+            <VStack gap={2}>
+              <Text size='xs' color='secondary'>
+                Source IP
+              </Text>
+              <Text size='sm'>{row.original.sourceIp}</Text>
+            </VStack>
+            <Button
+              variant='outline'
+              color='neutral'
+              size='small'
+              data-analytics-id='SECURITY_EXPANDED_VIEW_DETAILS'
+              data-analytics-props={`{"rowId":"${row.original.id}"}`}
+              onClick={() =>
+                track('SECURITY_EXPANDED_VIEW_DETAILS_CLICKED', { rowId: row.original.id })
+              }
+            >
+              View full details
+            </Button>
+          </HStack>
+        </div>
+      )}
+    >
+      <TableActionBar>
+        {/*
+          Selection summary — override the default block to attach analytics to
+          the "Select all" / "Clear" controls. The DS keeps the wiring (toggle /
+          reset, disabled, count); the consumer onClick runs first and feeds the
+          same `track` stream (call preventDefault() to skip the DS action).
+        */}
+        <TableActionBarSelection>
+          <BulkBarSummaryCount />
+          <BulkBarSummarySelectAll
+            data-analytics-id='SECURITY_BULK_SELECT_ALL'
+            onClick={() => track('SECURITY_BULK_SELECT_ALL_CLICKED')}
+          />
+          <BulkBarSummarySeparator />
+          <BulkBarSummaryClear
+            data-analytics-id='SECURITY_BULK_CLEAR'
+            onClick={() => track('SECURITY_BULK_CLEAR_CLICKED')}
+          />
+        </TableActionBarSelection>
+
+        <Button
+          variant='ghost'
+          color='neutral-alt'
+          data-analytics-id='SECURITY_BULK_DUPLICATE'
+          data-analytics-props={`{"count":${Object.keys(rowSelection).length}}`}
+          onClick={() =>
+            track('SECURITY_BULK_DUPLICATE_CLICKED', {
+              selectedIds: Object.keys(rowSelection),
+            })
+          }
+        >
+          <Copy /> Duplicate
+        </Button>
+        <Button
+          color='destructive'
+          data-analytics-id='SECURITY_BULK_DELETE'
+          data-analytics-props={`{"count":${Object.keys(rowSelection).length}}`}
+          onClick={() =>
+            track('SECURITY_BULK_DELETE_CLICKED', {
+              selectedIds: Object.keys(rowSelection),
+            })
+          }
+        >
+          <Trash2 /> Delete
+        </Button>
+      </TableActionBar>
+
+      <TableScrollHandler>
+        <TableScrollHandlerLeft data-analytics-id='SECURITY_SCROLL_LEFT' />
+        <TableScrollHandlerRight data-analytics-id='SECURITY_SCROLL_RIGHT' />
+      </TableScrollHandler>
+    </Table>
+  );
+};
+
+/**
+ * `isLoading` with nothing to show yet: skeleton rows under a real header, so the columns do
+ * not jump when the data lands.
+ */
+export const LoadingState: StoryFn<typeof meta> = () => (
+  <Table data={[]} columns={securityColumns} isLoading />
+);
+
+/**
+ * The same flag with rows already present appends the skeletons below them — this is the shape
+ * for fetching the next batch, not for replacing what is on screen.
+ */
+export const LoadingWithData: StoryFn<typeof meta> = () => (
+  <Table
+    className='h-500'
+    data={securityEvents}
+    columns={securityColumns}
+    getRowId={row => row.id}
+    isLoading
+  />
+);
+
+/**
+ * `TableEmptyState` holding an `EmptyState` of `type='collection-empty'`: nothing exists yet,
+ * so the action creates the first thing.
+ */
+export const EmptyCollection: StoryFn<typeof meta> = () => {
+  interface Source {
+    id: string;
+    name: string;
+    events: number;
+  }
+
+  const columns: TableColumnDef<Source>[] = [
+    { accessorKey: 'name', header: 'Source', size: 320 },
+    { accessorKey: 'events', header: 'Events', size: 120 },
+  ];
+
+  return (
+    <Table aria-label='Event sources' data={[]} columns={columns} getRowId={row => row.id}>
+      <TableEmptyState>
+        <EmptyState type='collection-empty'>
+          <EmptyStateIllustration>
+            <Database />
+          </EmptyStateIllustration>
+          <EmptyStateMessage>
+            <EmptyStateTitle>No events yet</EmptyStateTitle>
+            <EmptyStateDescription>
+              Security events will appear here as soon as Wallarm detects traffic.
+            </EmptyStateDescription>
+          </EmptyStateMessage>
+          <EmptyStateActions>
+            <Button size='medium'>Configure source</Button>
+          </EmptyStateActions>
+        </EmptyState>
+      </TableEmptyState>
+    </Table>
+  );
+};
+
+/**
+ * When data exists but the current filters or search matched nothing, stay at
+ * the `collection-empty` scale — a table body is a page-level surface, and
+ * `no-results` is the compact treatment for a card or menu. What changes is the
+ * action: a neutral one that clears the filters, never a primary "create".
+ */
+export const NoResults: StoryFn<typeof meta> = () => (
+  <Table data={[]} columns={securityColumns} getRowId={row => row.id}>
+    <TableEmptyState>
+      <EmptyState type='collection-empty'>
+        <EmptyStateIllustration>
+          <SearchX />
+        </EmptyStateIllustration>
+        <EmptyStateMessage>
+          <EmptyStateTitle>No results found</EmptyStateTitle>
+          <EmptyStateDescription>
+            No events match your current filters. Try adjusting or resetting them.
+          </EmptyStateDescription>
+        </EmptyStateMessage>
+        <EmptyStateActions>
+          <Button size='medium' variant='outline' color='neutral'>
+            <FilterX />
+            Reset filters
+          </Button>
+        </EmptyStateActions>
+      </EmptyState>
+    </TableEmptyState>
+  </Table>
+);
+
+/**
+ * Drag a header edge to resize. `columnSizing` is state like everything else, so a width can
+ * be remembered between visits.
+ */
+export const ColumnResizing: StoryFn<typeof meta> = () => {
+  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});
+
+  return (
+    <Table
+      data={securityEvents}
+      columns={securityColumns}
+      getRowId={row => row.id}
+      columnSizing={columnSizing}
+      onColumnSizingChange={setColumnSizing}
+    />
+  );
+};
+
+/**
+ * A resizable column whose cell holds an `OverflowList`: the tags re-measure as the column
+ * narrows instead of being clipped by it.
+ */
+export const ColumnResizingWithOverflowList: StoryFn<typeof meta> = () => {
+  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});
+
+  const columns = useMemo<TableColumnDef<SecurityEvent>[]>(
+    () => [
+      ...securityColumns.slice(0, 1),
+      securityColumnHelper.display({
+        id: 'tags',
+        header: 'Tags',
+        size: 240,
+        cell: ({ row }) => (
+          <OverflowList
+            data-testid='tags-overflow-list'
+            className='gap-4'
+            items={row.original.tags}
+            itemRenderer={(item: string) => (
+              <Tag key={item} data-testid='tag'>
+                {item}
+              </Tag>
+            )}
+          />
+        ),
+      }),
+      ...securityColumns.slice(1),
+    ],
+    [],
+  );
+
+  return (
+    <Table
+      data={securityEvents}
+      columns={columns}
+      getRowId={row => row.id}
+      columnSizing={columnSizing}
+      onColumnSizingChange={setColumnSizing}
+      data-testid='resizing-overflow-table'
+    />
+  );
+};
+
+/**
+ * Resizing alongside a pinned column — the pinned one holds its position while the rest of the
+ * row moves underneath it.
+ */
+export const ColumnResizingWithPinning: StoryFn<typeof meta> = () => {
+  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});
+  const [columnPinning, setColumnPinning] = useState<TableColumnPinningState>({
+    left: ['objectName'],
+  });
+
+  return (
+    <Table
+      className='max-w-920'
+      data={securityEvents}
+      columns={securityColumns}
+      getRowId={row => row.id}
+      columnSizing={columnSizing}
+      onColumnSizingChange={setColumnSizing}
+      columnPinning={columnPinning}
+      onColumnPinningChange={setColumnPinning}
+    />
+  );
+};
+
+/**
+ * `columnPinning` freezes a column to the left, so the name of the thing stays readable
+ * however far sideways the table scrolls.
+ */
+export const ColumnPinning: StoryFn<typeof meta> = () => {
+  const [columnPinning, setColumnPinning] = useState<TableColumnPinningState>({
+    left: ['objectName'],
+  });
+
+  return (
+    <Table
+      className='max-w-920'
+      data={securityEvents}
+      columns={securityColumns}
+      getRowId={row => row.id}
+      columnPinning={columnPinning}
+      onColumnPinningChange={setColumnPinning}
+    />
+  );
+};
+
+/**
+ * Drag a header to reorder the columns. `columnOrder` is the same state the settings menu
+ * writes, so the two never disagree.
+ */
+export const ColumnDragAndDrop: StoryFn<typeof meta> = () => {
+  const [columnOrder, setColumnOrder] = useState<string[]>([]);
+
+  return (
+    <Table
+      data={securityEvents}
+      columns={securityColumns}
+      getRowId={row => row.id}
+      columnOrder={columnOrder}
+      onColumnOrderChange={setColumnOrder}
+    />
+  );
+};
+
+/**
+ * The per-column menu that appears on hover — sort, pin, hide, move — which is where the
+ * column controls live once a header is too narrow to show them.
+ */
+export const ColumnHeaderMenu: StoryFn<typeof meta> = () => {
+  const [sorting, setSorting] = useState<TableSortingState>([]);
+  const [columnVisibility, setColumnVisibility] = useState<TableVisibilityState>({});
+  const [columnPinning, setColumnPinning] = useState<TableColumnPinningState>({});
+  const [columnOrder, setColumnOrder] = useState<string[]>([]);
+
+  return (
+    <Table
+      data={securityEvents}
+      columns={securityColumns}
+      getRowId={row => row.id}
+      sorting={sorting}
+      onSortingChange={setSorting}
+      columnVisibility={columnVisibility}
+      onColumnVisibilityChange={setColumnVisibility}
+      columnPinning={columnPinning}
+      onColumnPinningChange={setColumnPinning}
+      columnOrder={columnOrder}
+      onColumnOrderChange={setColumnOrder}
+    />
+  );
+};
+
+/**
+ * Checkboxes plus `TableActionBar`, which rises from the bottom once a row is ticked and
+ * carries the verbs that apply to the whole selection.
+ */
+export const RowSelection: StoryFn<typeof meta> = () => {
+  interface Rule {
+    id: string;
+    name: string;
+    mode: 'Block' | 'Monitor';
+  }
+
+  const columns: TableColumnDef<Rule>[] = [
+    { accessorKey: 'name', header: 'Rule', size: 320 },
+    {
+      accessorKey: 'mode',
+      header: 'Mode',
+      size: 140,
+      cell: ({ row }) => (
+        <Badge
+          variant='dotted'
+          type='secondary'
+          color={row.original.mode === 'Block' ? 'red' : 'yellow'}
+        >
+          {row.original.mode}
+        </Badge>
+      ),
+    },
+  ];
+
+  const [rules, setRules] = useState<Rule[]>([
+    { id: '1', name: 'Block SQL injection', mode: 'Block' },
+    { id: '2', name: 'Rate limit /login', mode: 'Block' },
+    { id: '3', name: 'Watch admin endpoints', mode: 'Monitor' },
+    { id: '4', name: 'Mask card numbers', mode: 'Monitor' },
+  ]);
+  const [rowSelection, setRowSelection] = useState<TableRowSelectionState>({});
+
+  const handleDuplicate = () => {
+    const copies = rules
+      .filter(rule => rowSelection[rule.id])
+      .map(rule => ({
+        ...rule,
+        id: `${rule.id}-copy-${rules.length}`,
+        name: `${rule.name} (copy)`,
+      }));
+    setRules([...rules, ...copies]);
+    setRowSelection({});
+  };
+
+  const handleDelete = () => {
+    // A real app confirms first — see the confirmation-dialogs guideline.
+    setRules(rules.filter(rule => !rowSelection[rule.id]));
+    setRowSelection({});
+  };
+
+  return (
+    <Table
+      aria-label='Rules'
+      data={rules}
+      columns={columns}
+      getRowId={row => row.id}
+      rowSelection={rowSelection}
+      onRowSelectionChange={setRowSelection}
+    >
+      <TableActionBar>
+        <Button variant='ghost' color='neutral-alt' onClick={handleDuplicate}>
+          <Copy /> Duplicate
+        </Button>
+        <Button color='destructive' onClick={handleDelete}>
+          <Trash2 /> Delete
+        </Button>
+      </TableActionBar>
+    </Table>
+  );
+};
+
+/**
+ * `onSelectAllRows` separates the master checkbox from a hand-made full selection, which the
+ * row state alone cannot tell apart. Here the gesture means "every row matching the filter",
+ * including the ones the server has not sent — so the bar jumps to the filter's total, and any
+ * manual change drops back to the rows actually loaded.
+ */
+export const SelectAllRowsGesture: StoryFn<typeof meta> = () => {
+  const [rowSelection, setRowSelection] = useState<TableRowSelectionState>({});
+  const [filterWide, setFilterWide] = useState(false);
+  const MATCHING_THE_FILTER = 1474;
+
+  const selectedCount = filterWide ? MATCHING_THE_FILTER : Object.keys(rowSelection).length;
+
+  return (
+    <Table
+      data={securityEvents}
+      columns={securityColumns}
+      getRowId={row => row.id}
+      rowSelection={rowSelection}
+      onRowSelectionChange={updater => {
+        setRowSelection(updater);
+        // "Everything matching the filter, minus this one row" is not a filter,
+        // so any hand-made change falls back to the explicit list.
+        setFilterWide(false);
+      }}
+      onSelectAllRows={setFilterWide}
+    >
+      <TableActionBar>
+        <TableActionBarSelection>
+          <BulkBarSummaryCount>
+            {selectedCount} {selectedCount === 1 ? 'event' : 'events'} selected
+          </BulkBarSummaryCount>
+          <BulkBarSummaryClear />
+        </TableActionBarSelection>
+        <Button color='destructive' onClick={onDelete}>
+          <Trash2 /> Delete
+        </Button>
+      </TableActionBar>
+    </Table>
+  );
+};
+
+/**
+ * `enableSelectAllRows={false}` drops the master checkbox while keeping the column, for a
+ * listing where "all rows" is not a scope the consumer can act on. Per-row checkboxes stay,
+ * shift-click range selection included.
+ */
+export const SelectAllRowsDisabled: StoryFn<typeof meta> = () => {
+  const [rowSelection, setRowSelection] = useState<TableRowSelectionState>({});
+
+  return (
+    <Table
+      data={securityEvents}
+      columns={securityColumns}
+      getRowId={row => row.id}
+      rowSelection={rowSelection}
+      onRowSelectionChange={setRowSelection}
+      enableSelectAllRows={false}
+    />
+  );
+};
+
+/**
+ * A selection that outlives the table scrolling away: under `virtualized='window'` the bar is
+ * pinned to the viewport rather than to the table.
+ */
+export const RowSelectionWindowScroll: StoryFn<typeof meta> = () => {
+  const largeData = useMemo(() => createLargeSecurityEvents(100), []);
+  const [rowSelection, setRowSelection] = useState<TableRowSelectionState>({});
+
+  return (
+    <>
+      <Table
+        data-testid='row-selection-window-scroll-table'
+        data={largeData}
+        columns={securityColumns}
+        getRowId={row => row.id}
+        virtualized='window'
+        rowSelection={rowSelection}
+        onRowSelectionChange={setRowSelection}
+      >
+        <TableActionBar>
+          <Button variant='ghost' color='neutral-alt' onClick={onDuplicate}>
+            <Copy /> Duplicate
+          </Button>
+          <Button color='destructive' onClick={onDelete}>
+            <Trash2 /> Delete
+          </Button>
+        </TableActionBar>
+      </Table>
+      {/* Filler so the e2e suite can scroll the table fully out of view while a
+          selection stays active — this story's only content otherwise fills
+          exactly to the table's own height, so max scroll would always leave
+          the table's tail in view. Generous margin over the viewport height
+          (800px in the e2e config) so the anchor is unambiguously out of view
+          at max scroll, not just mostly. */}
+      <div style={{ height: 3000 }} />
+    </>
+  );
+};
+RowSelectionWindowScroll.tags = ['!autodocs'];
+
+/**
+ * `getSubRows` turns flat data into groups — each group row counts its children and collapses
+ * them, keyed in the same `expanded` state a row detail uses.
+ */
+export const RowGrouping: StoryFn<typeof meta> = () => {
+  const [expanded, setExpanded] = useState<TableExpandedState>({ 'group-cto': true });
+  const [sorting, setSorting] = useState<TableSortingState>([{ id: 'lastEdited', desc: true }]);
+  const [rowSelection, setRowSelection] = useState<TableRowSelectionState>({});
+
+  return (
+    <Table<SecurityHeaderEntry>
+      data={groupedHeaderData}
+      columns={headerColumns}
+      getRowId={row => row.id}
+      getSubRows={row => row.children}
+      expanded={expanded}
+      onExpandedChange={setExpanded}
+      sorting={sorting}
+      onSortingChange={setSorting}
+      rowSelection={rowSelection}
+      onRowSelectionChange={setRowSelection}
+    />
+  );
+};
+
+/**
+ * `renderExpandedRow` draws a panel beneath the row, for the two or three fields that do not
+ * deserve columns of their own.
+ */
+export const RowExpanding: StoryFn<typeof meta> = () => {
+  const [expanded, setExpanded] = useState<TableExpandedState>({});
+
+  return (
+    <Table
+      data={securityEvents}
+      columns={securityColumns}
+      getRowId={row => row.id}
+      expanded={expanded}
+      onExpandedChange={setExpanded}
+      renderExpandedRow={row => (
+        <div className='p-16 bg-states-primary-default-alt rounded-8'>
+          <Text size='sm' weight='medium'>
+            Event Details
+          </Text>
+          <div className='grid grid-cols-3 gap-8 mt-8'>
+            <VStack gap={2}>
+              <Text size='xs' color='secondary'>
+                Source IP
+              </Text>
+              <Text size='sm'>{row.original.sourceIp}</Text>
+            </VStack>
+            <VStack gap={2}>
+              <Text size='xs' color='secondary'>
+                Provider
+              </Text>
+              <Text size='sm'>{row.original.sourceProvider}</Text>
+            </VStack>
+            <VStack gap={2}>
+              <Text size='xs' color='secondary'>
+                Endpoint
+              </Text>
+              <HStack gap={4}>
+                <HttpMethod method={row.original.endpointMethod} />
+                <Text size='sm'>{row.original.endpointPath}</Text>
+              </HStack>
+            </VStack>
+          </div>
+        </div>
+      )}
+    />
+  );
+};
+
+/**
+ * Right-click inside a cell: `DropdownMenuContextTrigger` puts that column's verbs where the
+ * pointer already is, so each column can offer its own.
+ */
+export const ContextMenu: StoryFn<typeof meta> = () => {
+  const contextMenuColumns: TableColumnDef<(typeof securityEvents)[number]>[] = [
+    securityColumnHelper.accessor('objectName', {
+      header: 'Object name',
+      cell: ({ getValue }) => (
+        <DropdownMenu>
+          <DropdownMenuContextTrigger>
+            <Text size='sm'>{getValue()}</Text>
+          </DropdownMenuContextTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem onSelect={onCopyValue}>
+              <DropdownMenuItemIcon>
+                <Copy />
+              </DropdownMenuItemIcon>
+              <DropdownMenuItemText>Copy value</DropdownMenuItemText>
+            </DropdownMenuItem>
+
+            <DropdownMenuSeparator />
+
+            <DropdownMenuItem onSelect={onShowOnly}>
+              <DropdownMenuItemIcon>
+                <Filter />
+              </DropdownMenuItemIcon>
+              <DropdownMenuItemContent>
+                <DropdownMenuItemText>Show only</DropdownMenuItemText>
+                <DropdownMenuItemDescription>Filter to matching rows</DropdownMenuItemDescription>
+              </DropdownMenuItemContent>
+            </DropdownMenuItem>
+
+            <DropdownMenuItem onSelect={onExclude}>
+              <DropdownMenuItemIcon>
+                <FilterX />
+              </DropdownMenuItemIcon>
+              <DropdownMenuItemContent>
+                <DropdownMenuItemText>Exclude</DropdownMenuItemText>
+                <DropdownMenuItemDescription>Filter out matching rows</DropdownMenuItemDescription>
+              </DropdownMenuItemContent>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ),
+    }),
+    securityColumnHelper.accessor('parameter', {
+      header: 'Parameters',
+      cell: ({ getValue }) => (
+        <DropdownMenu>
+          <DropdownMenuContextTrigger>
+            <InlineCodeSnippet code={getValue()} size='sm' copyable={false} />
+          </DropdownMenuContextTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem onSelect={onExecute}>
+              <DropdownMenuItemIcon>
+                <Copy />
+              </DropdownMenuItemIcon>
+              <DropdownMenuItemText>Execute</DropdownMenuItemText>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ),
+    }),
+    securityColumnHelper.accessor('status', {
+      header: 'Status',
+      cell: ({ getValue }) => {
+        const status = getValue();
+        return (
+          <Badge
+            variant='dotted'
+            color={status === 'Blocked' ? 'red' : 'yellow'}
+            type='secondary'
+            size='medium'
+          >
+            {status}
+          </Badge>
+        );
+      },
+    }),
+    securityColumnHelper.accessor('cweId', {
+      header: 'Security info',
+      cell: ({ getValue }) => (
+        <Badge color='rose' type='secondary' size='medium' textVariant='code'>
+          {getValue()}
+        </Badge>
+      ),
+    }),
+  ];
+
+  return <Table data={securityEvents} columns={contextMenuColumns} getRowId={row => row.id} />;
+};
+
+/**
+ * The gear at the end of the header — search the columns, show and hide them, reorder them,
+ * reset — writing the same visibility and order state as the header menu.
+ */
+export const SettingsMenu: StoryFn<typeof meta> = () => {
+  const [columnVisibility, setColumnVisibility] = useState<TableVisibilityState>({});
+  const [columnOrder, setColumnOrder] = useState<string[]>([]);
+
+  return (
+    <Table
+      data={securityEvents}
+      columns={securityColumns}
+      getRowId={row => row.id}
+      columnVisibility={columnVisibility}
+      onColumnVisibilityChange={setColumnVisibility}
+      columnOrder={columnOrder}
+      onColumnOrderChange={setColumnOrder}
+      defaultColumnVisibility={{}}
+      defaultColumnOrder={securityColumnIds}
+    />
+  );
+};
+
+/**
+ * `deferColumnVisibility` holds switch toggles and "Reset to default" while the
+ * settings menu is open and applies them as one `columnVisibility` change on
+ * close — for consumers that fetch a column's data only once the menu closes,
+ * so a new column never sits empty behind the open menu.
+ */
+export const SettingsMenuDeferred: StoryFn<typeof meta> = () => {
+  const [columnVisibility, setColumnVisibility] = useState<TableVisibilityState>({});
+  const [columnOrder, setColumnOrder] = useState<string[]>([]);
+
+  return (
+    <Table
+      data={securityEvents}
+      columns={securityColumns}
+      getRowId={row => row.id}
+      columnVisibility={columnVisibility}
+      onColumnVisibilityChange={setColumnVisibility}
+      columnOrder={columnOrder}
+      onColumnOrderChange={setColumnOrder}
+      defaultColumnVisibility={{}}
+      defaultColumnOrder={securityColumnIds}
+      deferColumnVisibility
+    />
+  );
+};
+
+/**
+ * `columnGroups` turns the settings menu into labeled, non-reorderable sections
+ * (the FilterInput field-menu pattern): no drag handle, columns rendered under
+ * their group header in the given order. Column ids absent from every group
+ * (`cweId` here) fall into a trailing headerless section.
+ */
+export const SettingsMenuGrouped: StoryFn<typeof meta> = () => {
+  const [columnVisibility, setColumnVisibility] = useState<TableVisibilityState>({});
+
+  const columnGroups: TableColumnGroup[] = [
+    {
+      label: 'Threat classification',
+      columns: ['objectName', 'status', 'firstDetected', 'lastSeen'],
+    },
+    { label: 'Request features', columns: ['sourceIp', 'parameter', 'endpoint', 'requests'] },
+  ];
+
+  return (
+    <Table
+      data={securityEvents}
+      columns={securityColumns}
+      getRowId={row => row.id}
+      columnVisibility={columnVisibility}
+      onColumnVisibilityChange={setColumnVisibility}
+      columnGroups={columnGroups}
+    />
+  );
+};
+
+/**
+ * `virtualized='container'` inside a fixed height renders only the rows in view, which is what
+ * lets a thousand rows behave like ten.
+ */
+export const Virtualization: StoryFn<typeof meta> = () => {
+  const largeData = useMemo(() => createLargeSecurityEvents(1000), []);
+
+  return (
+    <Table
+      className='h-500'
+      data={largeData}
+      columns={securityColumns}
+      getRowId={row => row.id}
+      virtualized='container'
+    />
+  );
+};
+Virtualization.tags = ['!autodocs'];
+
+/**
+ * `virtualized='window'` measures against the page's own scroll instead, for a table that is
+ * the page rather than a panel inside one.
+ */
+export const WindowVirtualization: StoryFn<typeof meta> = () => {
+  const largeData = useMemo(() => createLargeSecurityEvents(1000), []);
+  const [columnOrder, setColumnOrder] = useState<string[]>([]);
+  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});
+
+  return (
+    <Table
+      data={largeData}
+      columns={securityColumns}
+      getRowId={row => row.id}
+      virtualized='window'
+      columnOrder={columnOrder}
+      onColumnOrderChange={setColumnOrder}
+      columnSizing={columnSizing}
+      onColumnSizingChange={setColumnSizing}
+    />
+  );
+};
+WindowVirtualization.tags = ['!autodocs'];
+
+/**
+ * The imperative escape hatch: `scrollToRow(id, { align })` off the ref, returning false for
+ * an id the table does not have so a deep link can fall back.
+ */
+export const ScrollToRow: StoryFn<typeof meta> = () => {
+  const largeData = useMemo(() => createLargeSecurityEvents(1000), []);
+  const tableRef = useRef<TableHandle>(null);
+  const [lastResult, setLastResult] = useState<string | null>(null);
+
+  const scroll = (index: number, align: 'start' | 'center' | 'end' | 'auto' = 'center') => {
+    const row = largeData[index];
+    if (!row) return;
+    const ok = tableRef.current?.scrollToRow(row.id, { align, behavior: 'smooth' }) ?? false;
+    setLastResult(`scrollToRow("${row.id}", { align: "${align}" }) → ${ok}`);
+  };
+
+  return (
+    <VStack gap={8}>
+      <HStack gap={8}>
+        <Button variant='outline' color='neutral' onClick={() => scroll(0, 'start')}>
+          Top
+        </Button>
+        <Button variant='outline' color='neutral' onClick={() => scroll(499, 'center')}>
+          Middle
+        </Button>
+        <Button variant='outline' color='neutral' onClick={() => scroll(999, 'end')}>
+          Bottom
+        </Button>
+        <Button
+          variant='secondary'
+          color='neutral'
+          onClick={() => {
+            const ok = tableRef.current?.scrollToRow('does-not-exist') ?? false;
+            setLastResult(`scrollToRow("does-not-exist") → ${ok}`);
+          }}
+        >
+          Missing id (returns false)
+        </Button>
+      </HStack>
+      {lastResult && (
+        <Text size='sm' color='secondary'>
+          {lastResult}
+        </Text>
+      )}
+      <Table
+        ref={tableRef}
+        className='h-500'
+        data={largeData}
+        columns={securityColumns}
+        getRowId={row => row.id}
+        virtualized='container'
+      />
+    </VStack>
+  );
+};
+ScrollToRow.tags = ['!autodocs'];
+
+/**
+ * `onEndReached` with `isLoading` — the house default for a long collection, where rows arrive
+ * as you reach them and there is no page number to lose.
+ */
+export const InfiniteScroll: StoryFn<typeof meta> = () => {
+  const { data, isFetching, hasMore, totalItems, fetchNextPage } = useInfiniteData();
+
+  return (
+    <VStack gap={8}>
+      <Text size='sm' color='secondary'>
+        Loaded {data.length} of {totalItems} rows {isFetching && '— loading...'}
+        {!hasMore && ' — all loaded'}
+      </Text>
+      <Table
+        className='h-500'
+        data={data}
+        columns={securityColumns}
+        getRowId={row => row.id}
+        virtualized='container'
+        isLoading={isFetching}
+        onEndReached={fetchNextPage}
+        onEndReachedThreshold={200}
+      />
+    </VStack>
+  );
+};
+InfiniteScroll.tags = ['!autodocs'];
+
+/**
+ * The same fetch-on-approach against the page's scroll, where the trigger has to account for
+ * everything else on the page as well as the table.
+ */
+export const InfiniteScrollWindow: StoryFn<typeof meta> = () => {
+  const { data, isFetching, hasMore, totalItems, fetchNextPage } = useInfiniteData();
+
+  return (
+    <VStack gap={8}>
+      <Text size='sm' color='secondary'>
+        Loaded {data.length} of {totalItems} rows {isFetching && '— loading...'}
+        {!hasMore && ' — all loaded'}
+      </Text>
+      <Table
+        data={data}
+        columns={securityColumns}
+        getRowId={row => row.id}
+        virtualized='window'
+        isLoading={isFetching}
+        onEndReached={fetchNextPage}
+        onEndReachedThreshold={300}
+      />
+    </VStack>
+  );
+};
+InfiniteScrollWindow.tags = ['!autodocs'];
+
+/**
+ * Both ends at once: `onStartReached` prepends, and the scroll position is compensated so the
+ * row you were reading does not slide out from under you.
+ */
+export const BidirectionalInfiniteScroll: StoryFn<typeof meta> = () => {
+  const {
+    data,
+    anchorId,
+    isFetchingPrev,
+    isFetchingNext,
+    hasPrev,
+    hasNext,
+    fetchPrevPage,
+    fetchNextPage,
+  } = useBidirectionalData();
+
+  return (
+    <VStack gap={8}>
+      <Text size='sm' color='secondary'>
+        Window of {data.length} rows around the anchor — scroll up for top skeletons, down for
+        bottom ones{(isFetchingPrev || isFetchingNext) && ' — loading...'}
+        {!hasPrev && ' — top reached'}
+        {!hasNext && ' — bottom reached'}
+      </Text>
+      <Table
+        className='h-500'
+        data={data}
+        columns={securityColumns}
+        getRowId={row => row.id}
+        virtualized='container'
+        isLoading={isFetchingNext}
+        isLoadingPrevious={isFetchingPrev}
+        initialScrollToRowId={anchorId}
+        onStartReached={fetchPrevPage}
+        onStartReachedThreshold={200}
+        onEndReached={fetchNextPage}
+        onEndReachedThreshold={200}
+      />
+    </VStack>
+  );
+};
+BidirectionalInfiniteScroll.tags = ['!autodocs'];
+
+// Same dataset/anchor as BidirectionalInfiniteScroll, but the document itself
+// scrolls — the regression mode for prepend compensation, where unrelated page
+// content shares the scrollHeight the old delta diffed against.
+/**
+ * The prepend case against the document scroll, where unrelated page content shares the height
+ * being measured — the regression this story exists to catch.
+ */
+export const BidirectionalInfiniteScrollWindow: StoryFn<typeof meta> = () => {
+  const {
+    data,
+    anchorId,
+    isFetchingPrev,
+    isFetchingNext,
+    hasPrev,
+    hasNext,
+    fetchPrevPage,
+    fetchNextPage,
+  } = useBidirectionalData();
+
+  return (
+    <VStack gap={8}>
+      <Text size='sm' color='secondary'>
+        Window of {data.length} rows around the anchor
+        {(isFetchingPrev || isFetchingNext) && ' — loading...'}
+        {!hasPrev && ' — top reached'}
+        {!hasNext && ' — bottom reached'}
+      </Text>
+      <Table
+        data={data}
+        columns={securityColumns}
+        getRowId={row => row.id}
+        virtualized='window'
+        isLoading={isFetchingNext}
+        isLoadingPrevious={isFetchingPrev}
+        initialScrollToRowId={anchorId}
+        onStartReached={fetchPrevPage}
+        onStartReachedThreshold={200}
+        onEndReached={fetchNextPage}
+        onEndReachedThreshold={200}
+      />
+    </VStack>
+  );
+};
+BidirectionalInfiniteScrollWindow.tags = ['!autodocs'];
+
+/**
+ * `virtualized='window'` in an app shell that scrolls a content pane instead of the document: the
+ * table follows the pane. The `overflow-x: hidden` wrapper in between never scrolls (its
+ * `overflow-y` only computes to `auto`), so it must not be taken for the scroll root.
+ */
+export const InfiniteScrollWindowInPane: StoryFn<typeof meta> = () => {
+  const { data, isFetchingPrev, isFetchingNext, hasPrev, hasNext, fetchPrevPage, fetchNextPage } =
+    useBidirectionalData();
+
+  return (
+    <div data-testid='scroll-pane' style={{ height: 480, overflowY: 'auto' }}>
+      <div style={{ overflowX: 'hidden' }}>
+        <VStack gap={8}>
+          <Text size='sm' color='secondary'>
+            Window of {data.length} rows around the anchor
+            {(isFetchingPrev || isFetchingNext) && ' — loading...'}
+            {!hasPrev && ' — top reached'}
+            {!hasNext && ' — bottom reached'}
+          </Text>
+          <Table
+            data={data}
+            columns={securityColumns}
+            getRowId={row => row.id}
+            virtualized='window'
+            isLoading={isFetchingNext}
+            isLoadingPrevious={isFetchingPrev}
+            onStartReached={fetchPrevPage}
+            onStartReachedThreshold={200}
+            onEndReached={fetchNextPage}
+            onEndReachedThreshold={200}
+          />
+        </VStack>
+      </div>
+    </div>
+  );
+};
+InfiniteScrollWindowInPane.tags = ['!autodocs'];
+
+/**
+ * A share-link landing in a pane host: the window-mode table opens scrolled to its anchor row,
+ * inside the pane — the document stays put.
+ */
+export const InfiniteScrollWindowInPaneAnchored: StoryFn<typeof meta> = () => {
+  const { data, anchorId, isFetchingPrev, isFetchingNext, fetchPrevPage, fetchNextPage } =
+    useBidirectionalData();
+
+  return (
+    <div data-testid='scroll-pane' style={{ height: 480, overflowY: 'auto' }}>
+      <Table
+        data={data}
+        columns={securityColumns}
+        getRowId={row => row.id}
+        virtualized='window'
+        isLoading={isFetchingNext}
+        isLoadingPrevious={isFetchingPrev}
+        initialScrollToRowId={anchorId}
+        onStartReached={fetchPrevPage}
+        onStartReachedThreshold={200}
+        onEndReached={fetchNextPage}
+        onEndReachedThreshold={200}
+      />
+    </div>
+  );
+};
+InfiniteScrollWindowInPaneAnchored.tags = ['!autodocs'];
+
+/**
+ * A pane host that mounts the table before its data: rows arrive after a delay. Neither edge may
+ * fire against the window meanwhile — only the edge the user scrolls to.
+ */
+export const InfiniteScrollWindowInPaneLateRows: StoryFn<typeof meta> = () => {
+  const { data, isFetchingPrev, isFetchingNext, fetchPrevPage, fetchNextPage } =
+    useBidirectionalData();
+  const [hasLoaded, setHasLoaded] = useState(false);
+  const [calls, setCalls] = useState({ start: 0, end: 0 });
+  useEffect(() => {
+    const timer = setTimeout(() => setHasLoaded(true), 500);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <div data-testid='scroll-pane' style={{ height: 480, overflowY: 'auto' }}>
+      <Text size='sm' color='secondary'>
+        Edge calls: start {calls.start}, end {calls.end}
+      </Text>
+      <Table
+        data={hasLoaded ? data : []}
+        columns={securityColumns}
+        getRowId={row => row.id}
+        virtualized='window'
+        isLoading={!hasLoaded || isFetchingNext}
+        isLoadingPrevious={isFetchingPrev}
+        // Nothing to page from before the first page — as with a real cursor.
+        onStartReached={
+          hasLoaded
+            ? () => {
+                setCalls(prev => ({ ...prev, start: prev.start + 1 }));
+                fetchPrevPage();
+              }
+            : undefined
+        }
+        onStartReachedThreshold={200}
+        onEndReached={
+          hasLoaded
+            ? () => {
+                setCalls(prev => ({ ...prev, end: prev.end + 1 }));
+                fetchNextPage();
+              }
+            : undefined
+        }
+        onEndReachedThreshold={200}
+      />
+    </div>
+  );
+};
+InfiniteScrollWindowInPaneLateRows.tags = ['!autodocs'];
+
+/**
+ * A share-link landing in a pane that starts hidden (a closed tab or drawer): the anchor waits
+ * until the table is shown and laid out, then lands inside the pane.
+ */
+export const InfiniteScrollWindowInHiddenPaneAnchored: StoryFn<typeof meta> = () => {
+  const [isShown, setIsShown] = useState(false);
+  const { data, anchorId, isFetchingPrev, isFetchingNext, fetchPrevPage, fetchNextPage } =
+    useBidirectionalData();
+
+  return (
+    <VStack gap={8}>
+      <Button data-testid='show-table' onClick={() => setIsShown(true)}>
+        Show table
+      </Button>
+      <div
+        data-testid='scroll-pane'
+        style={{ height: 480, overflowY: 'auto', display: isShown ? 'block' : 'none' }}
+      >
+        <Table
+          data={data}
+          columns={securityColumns}
+          getRowId={row => row.id}
+          virtualized='window'
+          isLoading={isFetchingNext}
+          isLoadingPrevious={isFetchingPrev}
+          initialScrollToRowId={anchorId}
+          onStartReached={fetchPrevPage}
+          onStartReachedThreshold={200}
+          onEndReached={fetchNextPage}
+          onEndReachedThreshold={200}
+        />
+      </div>
+    </VStack>
+  );
+};
+InfiniteScrollWindowInHiddenPaneAnchored.tags = ['!autodocs'];
+
+/**
+ * A window-mode table mounting into a pane the user already scrolled (content above it): the pane
+ * keeps its position — adopting the root must not reset it.
+ */
+export const InfiniteScrollWindowInScrolledPane: StoryFn<typeof meta> = () => {
+  const [isShown, setIsShown] = useState(false);
+  const { data, isFetchingNext, fetchNextPage } = useBidirectionalData();
+
+  return (
+    <VStack gap={8}>
+      <Button data-testid='show-table' onClick={() => setIsShown(true)}>
+        Show table
+      </Button>
+      <div data-testid='scroll-pane' style={{ height: 480, overflowY: 'auto' }}>
+        <div style={{ height: 800 }}>
+          <Text size='sm' color='secondary'>
+            Content above the table
+          </Text>
+        </div>
+        {isShown && (
+          <Table
+            data={data}
+            columns={securityColumns}
+            getRowId={row => row.id}
+            virtualized='window'
+            isLoading={isFetchingNext}
+            onEndReached={fetchNextPage}
+            onEndReachedThreshold={200}
+          />
+        )}
+      </div>
+    </VStack>
+  );
+};
+InfiniteScrollWindowInScrolledPane.tags = ['!autodocs'];
+
+/**
+ * A column can explain itself: `description` renders as a second line under the title, or as a
+ * tooltip behind a dashed underline when the header has no room for one.
+ */
+export const HeaderColumnDescription: StoryFn<typeof meta> = () => {
+  const [sorting, setSorting] = useState<TableSortingState>([]);
+
+  const columns = useMemo<TableColumnDef<(typeof securityEvents)[number]>[]>(
+    () =>
+      securityColumns.map(col => {
+        const key = 'accessorKey' in col ? col.accessorKey : undefined;
+        if (key === 'objectName') {
+          return {
+            ...col,
+            meta: {
+              ...col.meta,
+              description: { type: 'text' as const, content: 'Target resource' },
+            },
+          };
+        }
+        if (key === 'sourceIp') {
+          return {
+            ...col,
+            meta: {
+              ...col.meta,
+              description: { type: 'tooltip' as const, content: 'Request origin IP' },
+            },
+          };
+        }
+        if (key === 'requests') {
+          return {
+            ...col,
+            meta: { ...col.meta, description: { type: 'tooltip' as const, content: 'Total hits' } },
+          };
+        }
+        if (key === 'parameter') {
+          return {
+            ...col,
+            meta: {
+              ...col.meta,
+              description: { type: 'text' as const, content: 'Affected param' },
+            },
+          };
+        }
+        return col;
+      }),
+    [],
+  );
+
+  return (
+    <Table
+      data={securityEvents}
+      columns={columns}
+      getRowId={row => row.id}
+      sorting={sorting}
+      onSortingChange={setSorting}
+    />
+  );
+};
+
+/**
+ * The first column is the master cell — pinned, and the place per-row actions appear on hover,
+ * so every row keeps its verbs in one predictable spot.
+ */
+export const MasterCellWithActions: StoryFn<typeof meta> = () => {
+  const [sorting, setSorting] = useState<TableSortingState>([]);
+  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});
+
+  const data = useMemo(() => multiplySecurityEvents(), []);
+
+  const columns = useMemo<TableColumnDef<SecurityEvent>[]>(
+    () =>
+      securityColumns.map((col, i) =>
+        i === 0
+          ? {
+              ...col,
+              meta: {
+                ...col.meta,
+                size: 400,
+                resizeType: 'resize',
+                renderMenuAction: (row: { original: SecurityEvent }) => (
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant='ghost' color='neutral' size='small' aria-label='More'>
+                        <Ellipsis />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent>
+                      <DropdownMenuItem
+                        onSelect={() => navigator.clipboard.writeText(row.original.objectName)}
+                      >
+                        <DropdownMenuItemIcon>
+                          <Copy />
+                        </DropdownMenuItemIcon>
+                        <DropdownMenuItemText>Copy name</DropdownMenuItemText>
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem onSelect={() => onShowOnly(row.original.objectName)}>
+                        <DropdownMenuItemIcon>
+                          <Filter />
+                        </DropdownMenuItemIcon>
+                        <DropdownMenuItemText>Show only</DropdownMenuItemText>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onSelect={() => onExclude(row.original.objectName)}>
+                        <DropdownMenuItemIcon>
+                          <FilterX />
+                        </DropdownMenuItemIcon>
+                        <DropdownMenuItemText>Exclude</DropdownMenuItemText>
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                ),
+              },
+            }
+          : col,
+      ),
+    [],
+  );
+
+  return (
+    <Table
+      className='max-w-920'
+      data={data}
+      columns={columns}
+      getRowId={row => row.id}
+      sorting={sorting}
+      onSortingChange={setSorting}
+      columnSizing={columnSizing}
+      onColumnSizingChange={setColumnSizing}
+    />
+  );
+};
+
+/**
+ * `onMasterCellClick` with `activeRowId`: the master cell opens a `Drawer` and the row it
+ * belongs to stays marked while the panel is open.
+ */
+export const MasterCellWithDrawer: StoryFn<typeof meta> = () => {
+  const [sorting, setSorting] = useState<TableSortingState>([]);
+  const [activeRowId, setActiveRowId] = useState<string | null>(null);
+  // The last opened row stays rendered while the drawer animates closed.
+  const [shownRowId, setShownRowId] = useState<string | null>(null);
+
+  const data = useMemo(
+    () =>
+      Array.from({ length: 4 }, (_, batch) =>
+        securityEvents.map(row => ({
+          ...row,
+          id: `${row.id}-${batch}`,
+          objectName: batch === 0 ? row.objectName : `${row.objectName} (${batch + 1})`,
+        })),
+      ).flat(),
+    [],
+  );
+
+  const columns = useMemo<TableColumnDef<SecurityEvent>[]>(
+    () =>
+      securityColumns.map((col, i) =>
+        i === 0
+          ? {
+              ...col,
+              cell: ({ row }: { row: { original: SecurityEvent } }) => (
+                <Text size='xs'>{row.original.objectName}</Text>
+              ),
+            }
+          : col,
+      ),
+    [],
+  );
+
+  const handleMasterCellClick = useCallback((rowId: string) => {
+    setActiveRowId(prev => (prev === rowId ? null : rowId));
+    setShownRowId(rowId);
+  }, []);
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) setActiveRowId(null);
+  };
+
+  const shownRow = data.find(d => d.id === shownRowId);
+
+  return (
+    <>
+      <Table
+        className='max-w-920'
+        data={data}
+        columns={columns}
+        getRowId={row => row.id}
+        sorting={sorting}
+        onSortingChange={setSorting}
+        onMasterCellClick={handleMasterCellClick}
+        activeRowId={activeRowId}
+      />
+      <Drawer
+        open={activeRowId !== null}
+        onOpenChange={handleOpenChange}
+        modal={false}
+        overlay={false}
+        closeOnOutsideClick={false}
+        width={640}
+      >
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>{shownRow?.objectName}</DrawerTitle>
+          </DrawerHeader>
+          <DrawerBody>
+            <VStack gap={6}>
+              <Attribute orientation='horizontal'>
+                <AttributeLabel width={140}>Status</AttributeLabel>
+                <AttributeValue>
+                  <Badge
+                    variant='dotted'
+                    type='secondary'
+                    color={shownRow?.status === 'Blocked' ? 'red' : 'yellow'}
+                  >
+                    {shownRow?.status}
+                  </Badge>
+                </AttributeValue>
+              </Attribute>
+              <Attribute orientation='horizontal'>
+                <AttributeLabel width={140}>Requests</AttributeLabel>
+                <AttributeValue>{shownRow?.requests.toLocaleString()}</AttributeValue>
+              </Attribute>
+              <Attribute orientation='horizontal'>
+                <AttributeLabel width={140}>First detected</AttributeLabel>
+                <AttributeValue>{shownRow?.firstDetected}</AttributeValue>
+              </Attribute>
+            </VStack>
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+};
+
+/**
+ * Master cell with both an action menu and a drawer:
+ * clicking the cell body opens the drawer, clicking the action button opens the menu
+ * without triggering the drawer.
+ */
+export const MasterCellWithActionsAndDrawer: StoryFn<typeof meta> = () => {
+  const [sorting, setSorting] = useState<TableSortingState>([]);
+  const [activeRowId, setActiveRowId] = useState<string | null>(null);
+  // The last opened row stays rendered while the drawer animates closed.
+  const [shownRowId, setShownRowId] = useState<string | null>(null);
+
+  const data = useMemo(() => multiplySecurityEvents(), []);
+
+  const columns = useMemo<TableColumnDef<SecurityEvent>[]>(
+    () =>
+      securityColumns.map((col, i) =>
+        i === 0
+          ? {
+              ...col,
+              cell: ({ row }: { row: { original: SecurityEvent } }) => (
+                <Text size='xs'>{row.original.objectName}</Text>
+              ),
+              meta: {
+                ...col.meta,
+                resizeType: 'resize',
+                renderMenuAction: (row: { original: SecurityEvent }) => (
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant='ghost' color='neutral' size='small' aria-label='More'>
+                        <Ellipsis />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent>
+                      <DropdownMenuItem
+                        onSelect={() => navigator.clipboard.writeText(row.original.objectName)}
+                      >
+                        <DropdownMenuItemIcon>
+                          <Copy />
+                        </DropdownMenuItemIcon>
+                        <DropdownMenuItemText>Copy name</DropdownMenuItemText>
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem onSelect={() => onShowOnly(row.original.objectName)}>
+                        <DropdownMenuItemIcon>
+                          <Filter />
+                        </DropdownMenuItemIcon>
+                        <DropdownMenuItemText>Show only</DropdownMenuItemText>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onSelect={() => onExclude(row.original.objectName)}>
+                        <DropdownMenuItemIcon>
+                          <FilterX />
+                        </DropdownMenuItemIcon>
+                        <DropdownMenuItemText>Exclude</DropdownMenuItemText>
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                ),
+              },
+            }
+          : col,
+      ),
+    [],
+  );
+
+  const handleMasterCellClick = useCallback((rowId: string) => {
+    setActiveRowId(prev => (prev === rowId ? null : rowId));
+    setShownRowId(rowId);
+  }, []);
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) setActiveRowId(null);
+  };
+
+  const shownRow = data.find(d => d.id === shownRowId);
+
+  return (
+    <>
+      <Table
+        className='max-w-920'
+        data={data}
+        columns={columns}
+        getRowId={row => row.id}
+        sorting={sorting}
+        onSortingChange={setSorting}
+        onMasterCellClick={handleMasterCellClick}
+        activeRowId={activeRowId}
+      />
+      <Drawer
+        open={activeRowId !== null}
+        onOpenChange={handleOpenChange}
+        modal={false}
+        overlay={false}
+        closeOnOutsideClick={false}
+        width={960}
+      >
+        <DrawerContent>
+          {shownRow && renderSecurityPreviewHeader({ original: shownRow })}
+          <DrawerBody>
+            {shownRow && renderSecurityPreviewContent({ original: shownRow })}
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+};
+
+/**
+ * Grouping, expansion, selection, pinning, virtualization and the action bar in one table —
+ * the honest test of whether the features cooperate rather than merely exist.
+ */
+export const FullFeatured: StoryFn<typeof meta> = () => {
+  const data = useMemo(() => createLargeGroupedData(12, 50), []);
+
+  const [sorting, setSorting] = useState<TableSortingState>([{ id: 'lastEdited', desc: true }]);
+  const [rowSelection, setRowSelection] = useState<TableRowSelectionState>({});
+  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});
+  const [columnPinning, setColumnPinning] = useState<TableColumnPinningState>({
+    left: ['objectName'],
+  });
+  const [columnOrder, setColumnOrder] = useState<string[]>([]);
+  const [columnVisibility, setColumnVisibility] = useState<TableVisibilityState>({});
+  const [expanded, setExpanded] = useState<TableExpandedState>({
+    'group-0': true,
+    'group-1': true,
+  });
+
+  return (
+    <Table<SecurityHeaderEntry>
+      className='h-500'
+      data={data}
+      columns={fullFeaturedColumns}
+      getRowId={row => row.id}
+      getSubRows={row => row.children}
+      // Grouping
+      expanded={expanded}
+      onExpandedChange={setExpanded}
+      // Sorting
+      sorting={sorting}
+      onSortingChange={setSorting}
+      // Row selection
+      rowSelection={rowSelection}
+      onRowSelectionChange={setRowSelection}
+      // Column resizing
+      columnSizing={columnSizing}
+      onColumnSizingChange={setColumnSizing}
+      // Column pinning
+      columnPinning={columnPinning}
+      onColumnPinningChange={setColumnPinning}
+      // Column DnD ordering
+      columnOrder={columnOrder}
+      onColumnOrderChange={setColumnOrder}
+      // Column visibility + settings
+      columnVisibility={columnVisibility}
+      onColumnVisibilityChange={setColumnVisibility}
+      defaultColumnVisibility={{}}
+      defaultColumnOrder={headerColumnIds}
+      // Virtual scrolling
+      virtualized='container'
+    >
+      <TableActionBar>
+        <Button variant='ghost' color='neutral-alt' onClick={onDuplicate}>
+          <Copy /> Duplicate
+        </Button>
+        <Button color='destructive' onClick={onDelete}>
+          <Trash2 /> Delete
+        </Button>
+      </TableActionBar>
+    </Table>
+  );
+};
+FullFeatured.tags = ['!autodocs'];
+
+// ---------------------------------------------------------------------------
+// Inline cell editing (WDS-157)
+// ---------------------------------------------------------------------------
+// Table has no dedicated "editable cell" API — a column's `cell` renderer may
+// return any React node. Here that node is the purpose-built `EditableCell`
+// (see ./EditableCell), which owns the full body-cell box so nothing shifts
+// across idle / hover / editing: the whole cell highlights grey on hover and
+// draws a brand-orange border while editing (text) or open (select). The text
+// editor swaps in a borderless input in place; the select cell IS the trigger,
+// so its read view never gets replaced.
+
+const statusItems: SelectDataItem[] = [
+  { label: 'Blocked', value: 'Blocked' },
+  { label: 'Monitoring', value: 'Monitoring' },
+];
+
+// Empty-by-default select — the placeholder text is supplied by the consumer.
+const categoryItems: SelectDataItem[] = [
+  { label: 'Category A', value: 'a' },
+  { label: 'Category B', value: 'b' },
+  { label: 'Category C', value: 'c' },
+  { label: 'Category D', value: 'd' },
+];
+
+const StatusBadge: FC<{ value: SecurityEvent['status'] }> = ({ value }) => (
+  <Badge
+    variant='dotted'
+    color={value === 'Blocked' ? 'red' : 'yellow'}
+    type='secondary'
+    size='medium'
+  >
+    {value}
+  </Badge>
+);
+
+/**
+ * `EditableTextCell` and `EditableSelectCell` in the plain columns, with the master column
+ * deliberately read-only — editing in place suits a value the user owns, not one the system
+ * reports. Hovering highlights the whole cell, clicking opens it without the content shifting,
+ * and Enter or blur commits while Escape reverts.
+ */
+/**
+ * Drag-handle column appears when `onRowReorder` is provided. The consumer uses `arrayMove`
+ * (or equivalent) in the callback to reorder its data array.
+ */
+export const RowReordering: StoryFn<typeof meta> = () => {
+  const [data, setData] = useState(() => securityEvents.slice(0, 6));
+
+  const handleRowReorder = useCallback((event: TableRowReorderEvent) => {
+    setData(prev => {
+      const oldIndex = prev.findIndex(row => row.id === event.activeRowId);
+      const newIndex = prev.findIndex(row => row.id === event.overRowId);
+      if (oldIndex === -1 || newIndex === -1) return prev;
+      return arrayMove(prev, oldIndex, newIndex);
+    });
+  }, []);
+
+  return (
+    <Table
+      data={data}
+      columns={securityColumns}
+      getRowId={row => row.id}
+      onRowReorder={handleRowReorder}
+      data-testid='row-reorder-table'
+    />
+  );
+};
+
+/**
+ * With `getSubRows` grouping, a row moves only among the rows of its own group; group rows stay
+ * put. `showEmptyGroups` keeps a group whose `getSubRows` returns `[]` on screen as a group row.
+ */
+export const RowReorderingInGroups: StoryFn<typeof meta> = () => {
+  const [data, setData] = useState<SecurityHeaderEntry[]>(() => [
+    ...groupedHeaderData,
+    { ...groupedHeaderData[0]!, id: 'group-empty', objectName: 'Nothing here yet', children: [] },
+  ]);
+  const [expanded, setExpanded] = useState<TableExpandedState>(true);
+
+  const handleRowReorder = useCallback((event: TableRowReorderEvent) => {
+    setData(prev =>
+      prev.map(group => {
+        const children = group.children ?? [];
+        const oldIndex = children.findIndex(row => row.id === event.activeRowId);
+        const newIndex = children.findIndex(row => row.id === event.overRowId);
+        if (oldIndex === -1 || newIndex === -1) return group;
+        return { ...group, children: arrayMove(children, oldIndex, newIndex) };
+      }),
+    );
+  }, []);
+
+  return (
+    <Table<SecurityHeaderEntry>
+      data={data}
+      columns={headerColumns}
+      getRowId={row => row.id}
+      getSubRows={row => row.children}
+      showEmptyGroups
+      expanded={expanded}
+      onExpandedChange={setExpanded}
+      onRowReorder={handleRowReorder}
+      data-testid='row-reorder-groups-table'
+    />
+  );
+};
+
+const BANNER_ROW_PREFIX = 'banner-';
+const LOCKED_ROW_IDS = new Set(['csp-1']);
+
+/**
+ * `groupRowSpan: 'full'` draws `renderGroupRow` across every data column — title on the left,
+ * actions on the right edge; the content owns the collapse toggle. `renderFullWidthRow` turns a
+ * regular row into a single spanning banner, and `getRowCanDrag` keeps the banner and the locked
+ * first header in place while the other rows of the group reorder around them.
+ */
+export const GroupedWithFullWidthRows: StoryFn<typeof meta> = () => {
+  const [data, setData] = useState<SecurityHeaderEntry[]>(() => [
+    {
+      ...groupedHeaderData[0]!,
+      children: [
+        { ...groupedHeaderData[0]!, id: `${BANNER_ROW_PREFIX}csp`, children: undefined },
+        ...(groupedHeaderData[0]!.children ?? []),
+      ],
+    },
+    ...groupedHeaderData.slice(1, 3),
+    { ...groupedHeaderData[0]!, id: 'group-empty', objectName: 'Nothing here yet', children: [] },
+  ]);
+  const [expanded, setExpanded] = useState<TableExpandedState>(true);
+
+  const handleRowReorder = useCallback((event: TableRowReorderEvent) => {
+    setData(prev =>
+      prev.map(group => {
+        const children = group.children ?? [];
+        const oldIndex = children.findIndex(row => row.id === event.activeRowId);
+        const newIndex = children.findIndex(row => row.id === event.overRowId);
+        if (oldIndex === -1 || newIndex === -1) return group;
+        return { ...group, children: arrayMove(children, oldIndex, newIndex) };
+      }),
+    );
+  }, []);
+
+  return (
+    <Table<SecurityHeaderEntry>
+      data={data}
+      columns={headerColumns}
+      getRowId={row => row.id}
+      getSubRows={row => row.children}
+      showEmptyGroups
+      expanded={expanded}
+      onExpandedChange={setExpanded}
+      onRowReorder={handleRowReorder}
+      groupRowSpan='full'
+      renderGroupRow={row => {
+        const isExpanded = row.getIsExpanded();
+        return (
+          <HStack gap={8} align='center'>
+            <Button
+              variant='ghost'
+              color='neutral'
+              size='small'
+              aria-expanded={isExpanded}
+              aria-label={isExpanded ? 'Collapse group' : 'Expand group'}
+              onClick={row.getToggleExpandedHandler()}
+            >
+              {isExpanded ? <ChevronDown /> : <ChevronRight />}
+            </Button>
+            <Text weight='medium'>{row.original.objectName}</Text>
+            <Badge color='gray' type='secondary' size='medium'>
+              {row.subRows.filter(r => !r.id.startsWith(BANNER_ROW_PREFIX)).length}
+            </Badge>
+            <HStack gap={4} className='ml-auto'>
+              <Button variant='ghost' color='neutral' size='small'>
+                <Plus />
+                Add header
+              </Button>
+              <Button variant='ghost' color='neutral' size='small' aria-label='More actions'>
+                <Ellipsis />
+              </Button>
+            </HStack>
+          </HStack>
+        );
+      }}
+      renderFullWidthRow={row =>
+        row.id.startsWith(BANNER_ROW_PREFIX) ? (
+          <HStack gap={8} align='center'>
+            <Shield size='sm' />
+            <Text size='sm' weight='medium'>
+              Wallarm baseline headers
+            </Text>
+            <Text size='sm' color='secondary'>
+              · applied first · built-in, always on
+            </Text>
+            <Button variant='ghost' color='neutral' size='small' className='ml-auto'>
+              Manage baseline →
+            </Button>
+          </HStack>
+        ) : undefined
+      }
+      getRowCanDrag={row => !row.id.startsWith(BANNER_ROW_PREFIX) && !LOCKED_ROW_IDS.has(row.id)}
+      data-testid='grouped-full-width-table'
+    />
+  );
+};
+
+/**
+ * `groupExpandColumn` keeps the expand column in grouping mode: the toggle sits in its own column,
+ * first, and every row of a group — drag handle included — sits to the right of it, while
+ * `renderGroupRow` keeps the title and the actions.
+ */
+export const GroupedWithExpandColumn: StoryFn<typeof meta> = () => {
+  const [data, setData] = useState<SecurityHeaderEntry[]>(() => [
+    ...groupedHeaderData,
+    { ...groupedHeaderData[0]!, id: 'group-empty', objectName: 'Nothing here yet', children: [] },
+  ]);
+  const [expanded, setExpanded] = useState<TableExpandedState>(true);
+
+  const handleRowReorder = useCallback((event: TableRowReorderEvent) => {
+    setData(prev =>
+      prev.map(group => {
+        const children = group.children ?? [];
+        const oldIndex = children.findIndex(row => row.id === event.activeRowId);
+        const newIndex = children.findIndex(row => row.id === event.overRowId);
+        if (oldIndex === -1 || newIndex === -1) return group;
+        return { ...group, children: arrayMove(children, oldIndex, newIndex) };
+      }),
+    );
+  }, []);
+
+  return (
+    <Table<SecurityHeaderEntry>
+      data={data}
+      columns={headerColumns}
+      getRowId={row => row.id}
+      getSubRows={row => row.children}
+      showEmptyGroups
+      expanded={expanded}
+      onExpandedChange={setExpanded}
+      onRowReorder={handleRowReorder}
+      groupRowSpan='full'
+      groupExpandColumn
+      renderGroupRow={row => (
+        <HStack gap={8} align='center'>
+          <Text weight='medium'>{row.original.objectName}</Text>
+          <Badge color='gray' type='secondary' size='medium'>
+            {row.subRows.length}
+          </Badge>
+          <Button variant='ghost' color='neutral' size='small' className='ml-auto'>
+            <Plus />
+            Add header
+          </Button>
+        </HStack>
+      )}
+      data-testid='grouped-expand-column-table'
+    />
+  );
+};
+
+/**
+ * Row reordering coexists with row selection — each feature has its own column and they
+ * don't interfere with each other.
+ */
+export const RowReorderingWithSelection: StoryFn<typeof meta> = () => {
+  const [data, setData] = useState(() => securityEvents.slice(0, 6));
+  const [rowSelection, setRowSelection] = useState<TableRowSelectionState>({});
+
+  const handleRowReorder = useCallback((event: TableRowReorderEvent) => {
+    setData(prev => {
+      const oldIndex = prev.findIndex(row => row.id === event.activeRowId);
+      const newIndex = prev.findIndex(row => row.id === event.overRowId);
+      if (oldIndex === -1 || newIndex === -1) return prev;
+      return arrayMove(prev, oldIndex, newIndex);
+    });
+  }, []);
+
+  return (
+    <Table
+      data={data}
+      columns={securityColumns}
+      getRowId={row => row.id}
+      onRowReorder={handleRowReorder}
+      rowSelection={rowSelection}
+      onRowSelectionChange={setRowSelection}
+    />
+  );
+};
+
+/**
+ * Row drag-and-drop with container virtualization — the `DragOverlay` renders the dragged row
+ * outside the virtualizer so it stays visible even when scrolled out of the virtual window.
+ */
+export const RowReorderingVirtualized: StoryFn<typeof meta> = () => {
+  const [data, setData] = useState(() => createLargeSecurityEvents(100));
+
+  const handleRowReorder = useCallback((event: TableRowReorderEvent) => {
+    setData(prev => {
+      const oldIndex = prev.findIndex(row => row.id === event.activeRowId);
+      const newIndex = prev.findIndex(row => row.id === event.overRowId);
+      if (oldIndex === -1 || newIndex === -1) return prev;
+      return arrayMove(prev, oldIndex, newIndex);
+    });
+  }, []);
+
+  return (
+    <Table
+      data={data}
+      columns={securityColumns}
+      getRowId={row => row.id}
+      onRowReorder={handleRowReorder}
+      virtualized='container'
+      estimateRowHeight={() => 40}
+    />
+  );
+};
+RowReorderingVirtualized.tags = ['!autodocs'];
+
+export const InlineCellEditing: StoryFn<typeof meta> = () => {
+  const [data, setData] = useState<SecurityEvent[]>(() => securityEvents.slice(0, 6));
+  // Category starts unselected for every row, so the select shows its placeholder.
+  const [categories, setCategories] = useState<Record<string, string>>({});
+
+  const updateCell = useCallback(
+    <K extends keyof SecurityEvent>(rowId: string, key: K, value: SecurityEvent[K]) => {
+      setData(prev => prev.map(row => (row.id === rowId ? { ...row, [key]: value } : row)));
+    },
+    [],
+  );
+
+  const columns = useMemo<TableColumnDef<SecurityEvent>[]>(
+    () => [
+      // The first column is the Table's pinned "master" column — keep it
+      // read-only; editable cells live in the plain columns after it.
+      securityColumnHelper.accessor('sourceIp', {
+        header: 'Source',
+        size: 200,
+        meta: { resizeType: 'cut' as const },
+        cell: ({ getValue }) => <Text size='sm'>{getValue()}</Text>,
+      }),
+      securityColumnHelper.accessor('objectName', {
+        header: 'Object name',
+        size: 400,
+        meta: EDITABLE_CELL_COLUMN_META,
+        cell: ({ row, getValue }) => (
+          <EditableTextCell
+            data-testid='editable-text-cell'
+            value={getValue()}
+            aria-label='Edit object name'
+            onCommit={value => updateCell(row.id, 'objectName', value)}
+          />
+        ),
+      }),
+      securityColumnHelper.accessor('status', {
+        header: 'Status',
+        size: 200,
+        meta: EDITABLE_CELL_COLUMN_META,
+        cell: ({ row, getValue }) => (
+          <EditableSelectCell
+            data-testid='editable-select-cell'
+            value={getValue()}
+            items={statusItems}
+            onCommit={value => updateCell(row.id, 'status', value as SecurityEvent['status'])}
+          >
+            <StatusBadge value={getValue()} />
+          </EditableSelectCell>
+        ),
+      }),
+      // Empty-by-default select: consumer supplies the `placeholder` text.
+      securityColumnHelper.display({
+        id: 'category',
+        header: 'Category',
+        size: 200,
+        meta: EDITABLE_CELL_COLUMN_META,
+        cell: ({ row }) => {
+          const value = categories[row.id] ?? '';
+          return (
+            <EditableSelectCell
+              value={value}
+              items={categoryItems}
+              placeholder='Select'
+              aria-label='Edit category'
+              onCommit={next => setCategories(prev => ({ ...prev, [row.id]: next }))}
+            >
+              {categoryItems.find(item => item.value === value)?.label}
+            </EditableSelectCell>
+          );
+        },
+      }),
+      securityColumnHelper.accessor('parameter', {
+        header: 'Parameters',
+        size: 240,
+        meta: { resizeType: 'cut' as const },
+        cell: ({ getValue }) => <InlineCodeSnippet code={getValue()} size='sm' copyable={false} />,
+      }),
+    ],
+    [updateCell, categories],
+  );
+
+  return (
+    <VStack gap={12} align='stretch'>
+      <span className='sb-annotation'>click a cell to edit it</span>
+      <Table data={data} columns={columns} getRowId={row => row.id} />
+    </VStack>
+  );
+};
+
+/**
+ * The group parent row sticks below the header while its children scroll — scroll through
+ * a group to see the parent pin in place, then release when the group boundary passes.
+ */
+export const StickyGroupParentStory: StoryFn<typeof meta> = () => {
+  const data = useMemo(() => createLargeGroupedData(4, 20), []);
+  const [expanded, setExpanded] = useState<TableExpandedState>({
+    'group-0': true,
+    'group-1': true,
+    'group-2': true,
+    'group-3': true,
+  });
+  const [sorting, setSorting] = useState<TableSortingState>([{ id: 'lastEdited', desc: true }]);
+  const [rowSelection, setRowSelection] = useState<TableRowSelectionState>({});
+
+  return (
+    <Table<SecurityHeaderEntry>
+      className='h-300'
+      data={data}
+      columns={headerColumns}
+      getRowId={row => row.id}
+      getSubRows={row => row.children}
+      expanded={expanded}
+      onExpandedChange={setExpanded}
+      sorting={sorting}
+      onSortingChange={setSorting}
+      rowSelection={rowSelection}
+      onRowSelectionChange={setRowSelection}
+      data-testid='sticky-group-parent-table'
+    />
+  );
+};
+StickyGroupParentStory.storyName = 'Sticky Group Parent';
+
+/**
+ * The same sticky-parent behavior under container virtualization with large grouped data —
+ * the overlay stays in the DOM even when the real parent row is unmounted by the virtualizer.
+ */
+export const StickyGroupParentVirtualized: StoryFn<typeof meta> = () => {
+  const data = useMemo(() => createLargeGroupedData(12, 50), []);
+  const [expanded, setExpanded] = useState<TableExpandedState>({
+    'group-0': true,
+    'group-1': true,
+    'group-2': true,
+  });
+  const [sorting, setSorting] = useState<TableSortingState>([{ id: 'lastEdited', desc: true }]);
+  const [rowSelection, setRowSelection] = useState<TableRowSelectionState>({});
+
+  return (
+    <Table<SecurityHeaderEntry>
+      className='h-500'
+      data={data}
+      columns={headerColumns}
+      getRowId={row => row.id}
+      getSubRows={row => row.children}
+      expanded={expanded}
+      onExpandedChange={setExpanded}
+      sorting={sorting}
+      onSortingChange={setSorting}
+      rowSelection={rowSelection}
+      onRowSelectionChange={setRowSelection}
+      virtualized='container'
+      data-testid='sticky-group-parent-virt-table'
+    />
+  );
+};
+StickyGroupParentVirtualized.tags = ['!autodocs'];
+```
+
+### Table/mocks.tsx
+
+```tsx
+import { useCallback, useMemo, useState } from 'react';
+import { Check, Copy, Filter, FilterX } from '../../icons';
+import { abbreviateNumber } from '../../utils/abbreviateNumber';
+import { Badge } from '../Badge';
+import { InlineCodeSnippet } from '../CodeSnippet';
+import type { CountryCode } from '../Country';
+import { DrawerHeader } from '../Drawer';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuContextTrigger,
+  DropdownMenuItem,
+  DropdownMenuItemContent,
+  DropdownMenuItemDescription,
+  DropdownMenuItemIcon,
+  DropdownMenuItemText,
+  DropdownMenuSeparator,
+} from '../DropdownMenu';
+import { FormatDateTime } from '../FormatDateTime';
+import { HttpMethod, type HttpMethodName } from '../HttpMethod';
+import { Ip, IpAddress, IpCountry, IpProvider, type SourceKey, sourceLabels } from '../Ip';
+import { Link } from '../Link';
+import {
+  OverflowTooltip,
+  OverflowTooltipContent,
+  OverflowTooltipTrigger,
+} from '../OverflowTooltip';
+import { HStack, VStack } from '../Stack';
+import { Switch, SwitchControl } from '../Switch';
+import { Text } from '../Text';
+import { createTableColumnHelper } from './lib';
+import type { TableColumnDef } from './types';
+
+// ---------------------------------------------------------------------------
+// Interfaces
+// ---------------------------------------------------------------------------
+
+export interface SecurityEvent {
+  id: string;
+  objectName: string;
+  tags: string[];
+  isActive: boolean;
+  requests: number;
+  sourceIp: string;
+  sourceCountry: CountryCode;
+  sourceProvider: string;
+  parameter: string;
+  status: 'Blocked' | 'Monitoring';
+  firstDetected: string;
+  cweId: string;
+  lastSeen: string;
+  endpointMethod: HttpMethodName;
+  endpointPath: string;
+  state: boolean;
+}
+
+export interface SecurityHeaderEntry {
+  id: string;
+  objectName: string;
+  ip: string | null;
+  ipCountry: CountryCode | null;
+  provider: string;
+  requests: number;
+  status: 'New' | 'Active' | 'Resolved';
+  lastEdited: string;
+  lastSynced: string;
+  version: 'Up to date' | 'Outdated';
+  children?: SecurityHeaderEntry[];
+}
+
+// ---------------------------------------------------------------------------
+// Utilities
+// ---------------------------------------------------------------------------
+
+// ---------------------------------------------------------------------------
+// Security Events — flat data
+// ---------------------------------------------------------------------------
+
+export const securityEvents: SecurityEvent[] = [
+  {
+    id: '1',
+    objectName: 'Rate limiting abuse on the payment endpoint',
+    tags: ['api-abuse', 'account-takeover', 'credential-stuffing', 'scanner', 'brute-force'],
+    isActive: false,
+    requests: 22000,
+    sourceIp: '34.74.73.20',
+    sourceCountry: 'US',
+    sourceProvider: 'aws',
+    parameter: 'header.X-SESSION-ID',
+    status: 'Blocked',
+    firstDetected: '2026-01-28T15:00:00',
+    cweId: 'CWE-287',
+    lastSeen: '5 days ago',
+    endpointMethod: 'POST',
+    endpointPath: '/api/v1/payments',
+    state: true,
+  },
+  {
+    id: '2',
+    objectName: 'Mass assignment vulnerability in user profile',
+    tags: ['api-abuse', 'account-takeover', 'credential-stuffing', 'scanner', 'brute-force'],
+    isActive: false,
+    requests: 25000,
+    sourceIp: '34.74.73.20',
+    sourceCountry: 'US',
+    sourceProvider: 'aws',
+    parameter: 'header.X-DEVICE-ID',
+    status: 'Blocked',
+    firstDetected: '2026-01-27T16:20:10',
+    cweId: 'CWE-416',
+    lastSeen: '6 days ago',
+    endpointMethod: 'PUT',
+    endpointPath: '/api/v1/users/profile',
+    state: false,
+  },
+  {
+    id: '3',
+    objectName: 'Insecure direct object reference in user data',
+    tags: ['api-abuse', 'account-takeover', 'credential-stuffing', 'scanner', 'brute-force'],
+    isActive: true,
+    requests: 30000,
+    sourceIp: '34.74.73.20',
+    sourceCountry: 'US',
+    sourceProvider: 'aws',
+    parameter: 'header.X-CLIENT-VERSION',
+    status: 'Monitoring',
+    firstDetected: '2026-01-26T17:35:25',
+    cweId: 'CWE-89',
+    lastSeen: '7 days ago',
+    endpointMethod: 'GET',
+    endpointPath: '/api/v1/users/:id',
+    state: true,
+  },
+  {
+    id: '4',
+    objectName: 'Improper error handling leading to info leak',
+    tags: ['api-abuse', 'account-takeover', 'credential-stuffing', 'scanner', 'brute-force'],
+    isActive: true,
+    requests: 35000,
+    sourceIp: '34.74.73.20',
+    sourceCountry: 'US',
+    sourceProvider: 'aws',
+    parameter: 'header.X-ORIGIN',
+    status: 'Blocked',
+    firstDetected: '2026-01-25T18:50:15',
+    cweId: 'CWE-22',
+    lastSeen: '1 week ago',
+    endpointMethod: 'GET',
+    endpointPath: '/api/v1/errors/debug',
+    state: true,
+  },
+  {
+    id: '5',
+    objectName: 'Broken authentication in the login API',
+    tags: ['api-abuse', 'account-takeover', 'credential-stuffing', 'scanner', 'brute-force'],
+    isActive: true,
+    requests: 20000,
+    sourceIp: '34.74.73.20',
+    sourceCountry: 'US',
+    sourceProvider: 'aws',
+    parameter: 'header.X-TIMESTAMP',
+    status: 'Blocked',
+    firstDetected: '2026-01-29T14:45:30',
+    cweId: 'CWE-200',
+    lastSeen: '4 days ago',
+    endpointMethod: 'POST',
+    endpointPath: '/api/v1/auth/login',
+    state: false,
+  },
+  {
+    id: '6',
+    objectName: 'Lack of resource validation in file upload',
+    tags: ['api-abuse', 'account-takeover', 'credential-stuffing', 'scanner', 'brute-force'],
+    isActive: false,
+    requests: 40000,
+    sourceIp: '34.74.73.20',
+    sourceCountry: 'US',
+    sourceProvider: 'aws',
+    parameter: 'header.X-REQUEST-TYPE',
+    status: 'Blocked',
+    firstDetected: '2026-01-24T19:05:45',
+    cweId: 'CWE-352',
+    lastSeen: '2 days ago',
+    endpointMethod: 'POST',
+    endpointPath: '/api/v1/files/upload',
+    state: true,
+  },
+  {
+    id: '7',
+    objectName: 'Server-side request forgery in image proxy',
+    tags: ['api-abuse', 'account-takeover', 'credential-stuffing', 'scanner', 'brute-force'],
+    isActive: false,
+    requests: 50000,
+    sourceIp: '34.74.73.20',
+    sourceCountry: 'US',
+    sourceProvider: 'aws',
+    parameter: 'header.X-CLIENT-ID',
+    status: 'Monitoring',
+    firstDetected: '2026-01-23T20:30:00',
+    cweId: 'CWE-125',
+    lastSeen: '3 days ago',
+    endpointMethod: 'GET',
+    endpointPath: '/api/v1/images/proxy',
+    state: false,
+  },
+  {
+    id: '8',
+    objectName: 'Unvalidated redirects and forwards in auth flow',
+    tags: ['api-abuse', 'account-takeover', 'credential-stuffing', 'scanner', 'brute-force'],
+    isActive: true,
+    requests: 75000,
+    sourceIp: '34.74.73.20',
+    sourceCountry: 'US',
+    sourceProvider: 'aws',
+    parameter: 'header.X-RESPONSE-FORMAT',
+    status: 'Monitoring',
+    firstDetected: '2026-01-22T21:45:50',
+    cweId: 'CWE-134',
+    lastSeen: '4 days ago',
+    endpointMethod: 'GET',
+    endpointPath: '/api/v1/auth/redirect',
+    state: true,
+  },
+  {
+    id: '9',
+    objectName: 'SQL injection in the user ID',
+    tags: ['api-abuse', 'account-takeover', 'credential-stuffing', 'scanner', 'brute-force'],
+    isActive: false,
+    requests: 15000,
+    sourceIp: '34.74.73.20',
+    sourceCountry: 'US',
+    sourceProvider: 'aws',
+    parameter: 'header.X-API-KEY',
+    status: 'Blocked',
+    firstDetected: '2026-01-31T12:15:00',
+    cweId: 'CWE-79',
+    lastSeen: '1 day ago',
+    endpointMethod: 'DELETE',
+    endpointPath: '/api/v1/users/:id',
+    state: false,
+  },
+  {
+    id: '10',
+    objectName: 'Cross-site scripting in the API endpoint',
+    tags: ['api-abuse', 'account-takeover', 'credential-stuffing', 'scanner', 'brute-force'],
+    isActive: false,
+    requests: 18000,
+    sourceIp: '34.74.73.20',
+    sourceCountry: 'US',
+    sourceProvider: 'aws',
+    parameter: 'header.X-USER-ID',
+    status: 'Blocked',
+    firstDetected: '2026-01-30T13:30:45',
+    cweId: 'CWE-89',
+    lastSeen: '3 days ago',
+    endpointMethod: 'PATCH',
+    endpointPath: '/api/v1/content',
+    state: true,
+  },
+];
+
+// ---------------------------------------------------------------------------
+// Security Events — columns
+// ---------------------------------------------------------------------------
+
+export const securityColumnHelper = createTableColumnHelper<SecurityEvent>();
+
+export const securityColumns: TableColumnDef<SecurityEvent>[] = [
+  securityColumnHelper.accessor('objectName', {
+    header: 'Object name',
+    size: 300,
+    enableSorting: true,
+    meta: { sortType: 'text' as const, resizeType: 'cut' as const },
+    cell: ({ row }) => (
+      <OverflowTooltip>
+        <OverflowTooltipTrigger asChild>
+          <Link size='sm' type='table' weight='regular' href='#'>
+            {row.original.objectName}
+          </Link>
+        </OverflowTooltipTrigger>
+        <OverflowTooltipContent>{row.original.objectName}</OverflowTooltipContent>
+      </OverflowTooltip>
+    ),
+  }),
+  securityColumnHelper.accessor('state', {
+    header: 'State',
+    size: 100,
+    cell: ({ getValue }) => (
+      <Switch checked={getValue()}>
+        <SwitchControl />
+      </Switch>
+    ),
+  }),
+  securityColumnHelper.accessor('requests', {
+    header: 'Requests',
+    size: 160,
+    enableSorting: true,
+    cell: ({ getValue }) => <Text size='sm'>{abbreviateNumber(getValue())}</Text>,
+  }),
+  securityColumnHelper.accessor('sourceIp', {
+    header: 'Source',
+    size: 200,
+    enableSorting: true,
+    meta: { sortType: 'text' as const },
+    cell: ({ row }) => (
+      <Ip>
+        {row.original.sourceCountry && <IpCountry code={row.original.sourceCountry} />}
+        <IpAddress>{row.original.sourceIp}</IpAddress>
+        {row.original.sourceProvider && (
+          <IpProvider>{sourceLabels[row.original.sourceProvider as SourceKey]}</IpProvider>
+        )}
+      </Ip>
+    ),
+  }),
+  securityColumnHelper.accessor('parameter', {
+    header: 'Parameters',
+    size: 220,
+    enableSorting: true,
+    meta: { sortType: 'text' as const, resizeType: 'cut' as const },
+    cell: ({ getValue }) => <InlineCodeSnippet code={getValue()} size='sm' copyable={false} />,
+  }),
+  securityColumnHelper.accessor('status', {
+    header: 'Status',
+    size: 130,
+    enableSorting: true,
+    meta: { sortType: 'text' as const, resizeType: 'cut' as const },
+    cell: ({ getValue }) => {
+      const status = getValue();
+      return (
+        <Badge
+          variant='dotted'
+          color={status === 'Blocked' ? 'red' : 'yellow'}
+          type='secondary'
+          size='medium'
+        >
+          {status}
+        </Badge>
+      );
+    },
+  }),
+  securityColumnHelper.accessor('firstDetected', {
+    header: 'First detected',
+    size: 160,
+    enableSorting: true,
+    meta: { sortType: 'date' as const, resizeType: 'cut' as const },
+    cell: ({ getValue }) => <FormatDateTime value={getValue()} format='relative' />,
+  }),
+  securityColumnHelper.accessor('cweId', {
+    header: 'Security info',
+    size: 130,
+    enableSorting: true,
+    meta: { sortType: 'text' as const },
+    cell: ({ getValue }) => (
+      <Badge color='gray' type='secondary' size='medium' textVariant='code'>
+        {getValue()}
+      </Badge>
+    ),
+  }),
+  securityColumnHelper.accessor('lastSeen', {
+    header: 'Last seen',
+    size: 120,
+    enableSorting: true,
+    meta: { sortType: 'date' as const, resizeType: 'cut' as const },
+    cell: ({ getValue }) => (
+      <Text size='sm' color='secondary'>
+        {getValue()}
+      </Text>
+    ),
+  }),
+  securityColumnHelper.display({
+    id: 'endpoint',
+    header: 'Endpoints',
+    size: 220,
+    cell: ({ row }) => (
+      <HStack gap={6}>
+        <HttpMethod method={row.original.endpointMethod} />
+        <Text size='sm' truncate>
+          {row.original.endpointPath}
+        </Text>
+      </HStack>
+    ),
+  }),
+];
+
+export const securityColumnIds = securityColumns
+  .map(c => ('accessorKey' in c ? (c.accessorKey as string) : (c as { id?: string }).id) as string)
+  .filter(Boolean);
+
+// ---------------------------------------------------------------------------
+// Grouped data — hierarchical with children
+// ---------------------------------------------------------------------------
+
+const createHeaderEntries = (groupId: string, count: number): SecurityHeaderEntry[] =>
+  Array.from({ length: count }, (_, i) => ({
+    id: `${groupId}-${i + 1}`,
+    objectName: '/v1/antibot/api/report/{parameter_1}',
+    ip: '142.198.167.52/32',
+    ipCountry: 'ES',
+    provider: 'azure',
+    requests: 23000,
+    status: 'New' as const,
+    lastEdited: '2 days ago',
+    lastSynced: '3 months ago',
+    version: 'Up to date' as const,
+  }));
+
+export const groupedHeaderData: SecurityHeaderEntry[] = [
+  {
+    id: 'group-csp',
+    objectName: 'Content Security Policy',
+    ip: '',
+    ipCountry: null,
+    provider: '',
+    requests: 0,
+    status: 'New',
+    lastEdited: '',
+    lastSynced: '',
+    version: 'Up to date',
+    children: createHeaderEntries('csp', 3),
+  },
+  {
+    id: 'group-cto',
+    objectName: 'Content-Type-Options',
+    ip: '',
+    ipCountry: null,
+    provider: '',
+    requests: 0,
+    status: 'New',
+    lastEdited: '',
+    lastSynced: '',
+    version: 'Up to date',
+    children: createHeaderEntries('cto', 5),
+  },
+  {
+    id: 'group-xfo',
+    objectName: 'X-Frame-Options',
+    ip: '',
+    ipCountry: null,
+    provider: '',
+    requests: 0,
+    status: 'New',
+    lastEdited: '',
+    lastSynced: '',
+    version: 'Up to date',
+    children: createHeaderEntries('xfo', 2),
+  },
+  {
+    id: 'group-hsts',
+    objectName: 'HTTP Strict Transport Security',
+    ip: '',
+    ipCountry: null,
+    provider: '',
+    requests: 0,
+    status: 'New',
+    lastEdited: '',
+    lastSynced: '',
+    version: 'Up to date',
+    children: createHeaderEntries('hsts', 4),
+  },
+];
+
+// ---------------------------------------------------------------------------
+// Grouped data — columns
+// ---------------------------------------------------------------------------
+
+export const headerColumnHelper = createTableColumnHelper<SecurityHeaderEntry>();
+
+export const headerColumns: TableColumnDef<SecurityHeaderEntry>[] = [
+  headerColumnHelper.accessor('objectName', {
+    header: 'Object name',
+    size: 300,
+    enableSorting: true,
+    meta: { sortType: 'text' as const, resizeType: 'cut' as const },
+    cell: ({ getValue }) => (
+      <Text size='sm' truncate>
+        {getValue()}
+      </Text>
+    ),
+  }),
+  headerColumnHelper.accessor('ip', {
+    header: 'IP',
+    size: 200,
+    enableSorting: true,
+    meta: { sortType: 'text' as const },
+    cell: ({ row }) => (
+      <Ip>
+        {row.original.ipCountry && <IpCountry code={row.original.ipCountry} />}
+        <IpAddress>{row.original.ip}</IpAddress>
+        {row.original.provider && (
+          <IpProvider>{sourceLabels[row.original.provider as SourceKey]}</IpProvider>
+        )}
+      </Ip>
+    ),
+  }),
+  headerColumnHelper.accessor('requests', {
+    header: 'Requests',
+    size: 100,
+    enableSorting: true,
+    cell: ({ getValue }) => <Text size='sm'>{abbreviateNumber(getValue())}</Text>,
+  }),
+  headerColumnHelper.accessor('status', {
+    header: 'Status',
+    size: 100,
+    cell: ({ getValue }) => (
+      <Badge color='blue' type='secondary' size='medium'>
+        {getValue()}
+      </Badge>
+    ),
+  }),
+  headerColumnHelper.accessor('lastEdited', {
+    header: 'Last edited',
+    size: 130,
+    enableSorting: true,
+    meta: { sortType: 'date' as const },
+    cell: ({ getValue }) => (
+      <Text size='sm' color='secondary'>
+        {getValue()}
+      </Text>
+    ),
+  }),
+  headerColumnHelper.accessor('lastSynced', {
+    header: 'Last synced',
+    size: 130,
+    enableSorting: true,
+    meta: { sortType: 'date' as const },
+    cell: ({ getValue }) => (
+      <Text size='sm' color='secondary'>
+        {getValue()}
+      </Text>
+    ),
+  }),
+  headerColumnHelper.display({
+    id: 'version',
+    header: 'Version',
+    size: 140,
+    cell: ({ row }) => (
+      <HStack gap={4} align='center'>
+        <Check size='sm' className='text-text-success' />
+        <Text size='sm' color='inherit'>
+          {row.original.version}
+        </Text>
+      </HStack>
+    ),
+  }),
+];
+
+export const headerColumnIds = headerColumns
+  .map(c => ('accessorKey' in c ? (c.accessorKey as string) : (c as { id?: string }).id) as string)
+  .filter(Boolean);
+
+// ---------------------------------------------------------------------------
+// Large grouped data — for FullFeatured + virtualization
+// ---------------------------------------------------------------------------
+
+const HEADER_GROUPS = [
+  'Content Security Policy',
+  'Content-Type-Options',
+  'X-Frame-Options',
+  'HTTP Strict Transport Security',
+  'Referrer-Policy',
+  'Permissions-Policy',
+  'Cross-Origin-Opener-Policy',
+  'Cross-Origin-Resource-Policy',
+  'X-Content-Type-Options',
+  'Cache-Control',
+  'X-XSS-Protection',
+  'Expect-CT',
+] as const;
+
+const IPS = ['142.198.167.52/32', '10.0.42.7/24', '192.168.1.100/32', '172.16.0.55/16'] as const;
+const FLAGS = ['ES', 'US', 'DE', 'JP'] as const;
+const PROVIDERS = ['azure', 'aws', 'gce', 'aws'] as const;
+const STATUSES = ['New', 'Active', 'Resolved'] as const;
+const VERSIONS = ['Up to date', 'Outdated'] as const;
+const ENDPOINTS = [
+  '/v1/antibot/api/report/{parameter_1}',
+  '/v1/auth/verify/{token}',
+  '/v1/users/{id}/settings',
+  '/v1/webhooks/process/{event_type}',
+  '/v1/analytics/track/{metric}',
+] as const;
+
+export const createLargeGroupedData = (
+  groupCount = 12,
+  childrenPerGroup = 50,
+): SecurityHeaderEntry[] => {
+  return Array.from({ length: groupCount }, (_, gi): SecurityHeaderEntry => {
+    const groupName = HEADER_GROUPS.at(gi % HEADER_GROUPS.length)!;
+    const groupId = `group-${gi}`;
+
+    return {
+      id: groupId,
+      objectName: groupName,
+      ip: '',
+      ipCountry: null,
+      provider: '',
+      requests: 0,
+      status: 'New' as const,
+      lastEdited: '',
+      lastSynced: '',
+      version: 'Up to date' as const,
+      children: Array.from({ length: childrenPerGroup }, (_, ci) => ({
+        id: `${groupId}-${ci}`,
+        objectName: ENDPOINTS.at(ci % ENDPOINTS.length)!,
+        ip: IPS.at(ci % IPS.length)!,
+        ipCountry: FLAGS.at(ci % FLAGS.length)!,
+        provider: PROVIDERS.at(ci % PROVIDERS.length)!,
+        requests: 5000 + ci * 1000,
+        status: STATUSES.at(ci % STATUSES.length)!,
+        lastEdited: `${(ci % 14) + 1} days ago`,
+        lastSynced: `${(ci % 6) + 1} months ago`,
+        version: VERSIONS.at(ci % VERSIONS.length)!,
+      })),
+    };
+  });
+};
+
+// ---------------------------------------------------------------------------
+// Large flat data — for a Virtualized story
+// ---------------------------------------------------------------------------
+
+/** Shared preview drawer header for security events */
+export const renderSecurityPreviewHeader = (row: { original: SecurityEvent }) => (
+  <DrawerHeader>
+    <Text size='lg' weight='medium'>
+      {row.original.objectName}
+    </Text>
+  </DrawerHeader>
+);
+
+/** Preview drawer content for security events */
+const SecurityPreviewContent = ({ row }: { row: { original: SecurityEvent } }) => (
+  <VStack gap={16}>
+    <HStack gap={8}>
+      <Badge
+        variant='dotted'
+        color={row.original.status === 'Blocked' ? 'red' : 'yellow'}
+        type='secondary'
+        size='medium'
+      >
+        {row.original.status}
+      </Badge>
+      <Switch checked={row.original.state}>
+        <SwitchControl />
+      </Switch>
+      <InlineCodeSnippet code={row.original.parameter} size='sm' copyable={false} />
+    </HStack>
+    <VStack gap={4}>
+      <Text size='sm' color='secondary'>
+        Source: {row.original.sourceCountry} · {row.original.sourceProvider}
+      </Text>
+      <Text size='sm' color='secondary'>
+        First detected: {row.original.firstDetected}
+      </Text>
+      <Text size='sm' color='secondary'>
+        Last seen: {row.original.lastSeen}
+      </Text>
+      <Text size='sm' color='secondary'>
+        Security: {row.original.cweId}
+      </Text>
+    </VStack>
+  </VStack>
+);
+
+SecurityPreviewContent.displayName = 'SecurityPreviewContent';
+
+/** Preview content (without title — title shown in DrawerHeader) */
+export const renderSecurityPreviewContent = (row: { original: SecurityEvent }) => (
+  <SecurityPreviewContent row={row} />
+);
+
+/** Duplicate securityEvents N times with unique IDs */
+export const multiplySecurityEvents = (times = 4): SecurityEvent[] =>
+  Array.from({ length: times }, (_, batch) =>
+    securityEvents.map(row => ({
+      ...row,
+      id: `${row.id}-${batch}`,
+      objectName: batch === 0 ? row.objectName : `${row.objectName} (${batch + 1})`,
+    })),
+  ).flat();
+
+export const createLargeSecurityEvents = (count = 1000): SecurityEvent[] =>
+  Array.from({ length: count }, (_, i) => {
+    const base = securityEvents.at(i % securityEvents.length)!;
+
+    return {
+      ...base,
+      id: String(i + 1),
+      // Deterministic pseudo-random spread so visual snapshots are stable across runs.
+      requests: (i * 2_654_435_761) % 100_000,
+      firstDetected: `2026-01-${String((i % 28) + 1).padStart(2, '0')}T${String(i % 24).padStart(2, '0')}:00:00`,
+    };
+  });
+
+// ---------------------------------------------------------------------------
+// FullFeatured — all features combined: grouping, virtual scroll, sorting,
+// selection, resizing, pinning, DnD ordering, visibility, action bar,
+// context menu
+// ---------------------------------------------------------------------------
+
+export const fullFeaturedColumns: TableColumnDef<SecurityHeaderEntry>[] = headerColumns.map(col => {
+  const key = 'accessorKey' in col ? col.accessorKey : undefined;
+
+  if (key === 'objectName') {
+    return {
+      ...col,
+      size: 220,
+      meta: {
+        ...col.meta,
+        resizeType: 'cut' as const,
+        description: { type: 'tooltip' as const, content: 'Target resource' },
+      },
+      cell: ({ getValue }: { getValue: () => string }) => (
+        <DropdownMenu>
+          <DropdownMenuContextTrigger>
+            <OverflowTooltip>
+              <OverflowTooltipTrigger asChild>
+                <Text size='sm' truncate>
+                  {getValue()}
+                </Text>
+              </OverflowTooltipTrigger>
+              <OverflowTooltipContent>{getValue()}</OverflowTooltipContent>
+            </OverflowTooltip>
+          </DropdownMenuContextTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem onSelect={() => alert(`Copied: ${getValue()}`)}>
+              <DropdownMenuItemIcon>
+                <Copy />
+              </DropdownMenuItemIcon>
+              <DropdownMenuItemText>Copy value</DropdownMenuItemText>
+            </DropdownMenuItem>
+
+            <DropdownMenuSeparator />
+
+            <DropdownMenuItem onSelect={() => alert(`Show only: ${getValue()}`)}>
+              <DropdownMenuItemIcon>
+                <Filter />
+              </DropdownMenuItemIcon>
+              <DropdownMenuItemContent>
+                <DropdownMenuItemText>Show only</DropdownMenuItemText>
+                <DropdownMenuItemDescription>Filter to matching rows</DropdownMenuItemDescription>
+              </DropdownMenuItemContent>
+            </DropdownMenuItem>
+
+            <DropdownMenuItem onSelect={() => alert(`Exclude: ${getValue()}`)}>
+              <DropdownMenuItemIcon>
+                <FilterX />
+              </DropdownMenuItemIcon>
+              <DropdownMenuItemContent>
+                <DropdownMenuItemText>Exclude</DropdownMenuItemText>
+                <DropdownMenuItemDescription>Filter out matching rows</DropdownMenuItemDescription>
+              </DropdownMenuItemContent>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ),
+    };
+  }
+
+  if (key === 'ip') {
+    return {
+      ...col,
+      meta: { ...col.meta, description: { type: 'tooltip' as const, content: 'Origin IP' } },
+      cell: ({ row }: { row: { original: SecurityHeaderEntry } }) => (
+        <DropdownMenu>
+          <DropdownMenuContextTrigger>
+            <Ip>
+              {row.original.ipCountry && <IpCountry code={row.original.ipCountry} />}
+              <IpAddress>{row.original.ip}</IpAddress>
+              {row.original.provider && (
+                <IpProvider>{sourceLabels[row.original.provider as SourceKey]}</IpProvider>
+              )}
+            </Ip>
+          </DropdownMenuContextTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem onSelect={() => alert(`Copied: ${row.original.ip}`)}>
+              <DropdownMenuItemIcon>
+                <Copy />
+              </DropdownMenuItemIcon>
+              <DropdownMenuItemText>Copy IP</DropdownMenuItemText>
+            </DropdownMenuItem>
+
+            <DropdownMenuSeparator />
+
+            <DropdownMenuItem onSelect={() => alert(`Show only: ${row.original.ip}`)}>
+              <DropdownMenuItemIcon>
+                <Filter />
+              </DropdownMenuItemIcon>
+              <DropdownMenuItemContent>
+                <DropdownMenuItemText>Show only</DropdownMenuItemText>
+                <DropdownMenuItemDescription>Filter to this IP</DropdownMenuItemDescription>
+              </DropdownMenuItemContent>
+            </DropdownMenuItem>
+
+            <DropdownMenuItem onSelect={() => alert(`Exclude: ${row.original.ip}`)}>
+              <DropdownMenuItemIcon>
+                <FilterX />
+              </DropdownMenuItemIcon>
+              <DropdownMenuItemContent>
+                <DropdownMenuItemText>Exclude</DropdownMenuItemText>
+                <DropdownMenuItemDescription>Filter out this IP</DropdownMenuItemDescription>
+              </DropdownMenuItemContent>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ),
+    };
+  }
+
+  if (key === 'requests') {
+    return {
+      ...col,
+      meta: { ...col.meta, description: { type: 'text' as const, content: 'Total hits' } },
+    };
+  }
+
+  if (key === 'status') {
+    return {
+      ...col,
+      meta: { ...col.meta, description: { type: 'tooltip' as const, content: 'Resolution state' } },
+    };
+  }
+
+  if (key === 'lastEdited') {
+    return {
+      ...col,
+      meta: { ...col.meta, description: { type: 'tooltip' as const, content: 'Last modified' } },
+    };
+  }
+
+  if (key === 'lastSynced') {
+    return {
+      ...col,
+      meta: { ...col.meta, description: { type: 'tooltip' as const, content: 'Last sync time' } },
+    };
+  }
+
+  return col;
+});
+
+// ---------------------------------------------------------------------------
+// Infinite scroll — hook for stories
+// ---------------------------------------------------------------------------
+
+const INFINITE_PAGE_SIZE = 50;
+const INFINITE_MAX_ITEMS = 500;
+const BIDIRECTIONAL_TOTAL = 500;
+const BIDIRECTIONAL_PAGE_SIZE = 50;
+const BIDIRECTIONAL_INITIAL_ANCHOR_INDEX = 250;
+
+export const useInfiniteData = () => {
+  const allData = useMemo(() => createLargeSecurityEvents(INFINITE_MAX_ITEMS), []);
+  const [data, setData] = useState(() => allData.slice(0, INFINITE_PAGE_SIZE));
+  const [isFetching, setIsFetching] = useState(false);
+  const hasMore = data.length < allData.length;
+
+  const fetchNextPage = useCallback(() => {
+    if (isFetching || !hasMore) return;
+    setIsFetching(true);
+
+    // Simulate network delay
+    setTimeout(() => {
+      setData(prev => allData.slice(0, prev.length + INFINITE_PAGE_SIZE));
+      setIsFetching(false);
+    }, 800);
+  }, [isFetching, hasMore, allData]);
+
+  return { data, isFetching, hasMore, totalItems: INFINITE_MAX_ITEMS, fetchNextPage };
+};
+
+/**
+ * Mock for bidirectional infinite scroll: opens a window around an anchor row
+ * and exposes cursor-style fetchers for both directions.
+ */
+export const useBidirectionalData = () => {
+  const allData = useMemo(() => createLargeSecurityEvents(BIDIRECTIONAL_TOTAL), []);
+
+  const initialStart = Math.max(0, BIDIRECTIONAL_INITIAL_ANCHOR_INDEX - BIDIRECTIONAL_PAGE_SIZE);
+  const initialEnd = Math.min(
+    allData.length,
+    BIDIRECTIONAL_INITIAL_ANCHOR_INDEX + BIDIRECTIONAL_PAGE_SIZE,
+  );
+
+  const [range, setRange] = useState({ start: initialStart, end: initialEnd });
+  // Separate flags so each direction drives only its own loader, mirroring a
+  // real bidirectional source where scroll-up and scroll-down fetch in parallel.
+  const [isFetchingPrev, setIsFetchingPrev] = useState(false);
+  const [isFetchingNext, setIsFetchingNext] = useState(false);
+
+  const data = useMemo(() => allData.slice(range.start, range.end), [allData, range]);
+  const anchorId = allData[BIDIRECTIONAL_INITIAL_ANCHOR_INDEX]?.id;
+  const hasPrev = range.start > 0;
+  const hasNext = range.end < allData.length;
+
+  const fetchPrevPage = useCallback(() => {
+    if (isFetchingPrev || range.start <= 0) return;
+    setIsFetchingPrev(true);
+    setTimeout(() => {
+      setRange(prev => ({ ...prev, start: Math.max(0, prev.start - BIDIRECTIONAL_PAGE_SIZE) }));
+      setIsFetchingPrev(false);
+    }, 600);
+  }, [isFetchingPrev, range.start]);
+
+  const fetchNextPage = useCallback(() => {
+    if (isFetchingNext || range.end >= allData.length) return;
+    setIsFetchingNext(true);
+    setTimeout(() => {
+      setRange(prev => ({
+        ...prev,
+        end: Math.min(allData.length, prev.end + BIDIRECTIONAL_PAGE_SIZE),
+      }));
+      setIsFetchingNext(false);
+    }, 600);
+  }, [isFetchingNext, range.end, allData.length]);
+
+  return {
+    data,
+    anchorId,
+    isFetchingPrev,
+    isFetchingNext,
+    hasPrev,
+    hasNext,
+    fetchPrevPage,
+    fetchNextPage,
+  };
+};
+```
+
+### ../utils/abbreviateNumber.ts
+
+```tsx
+/**
+ * Suffix tiers: [minAbsValue, divisor, suffix].
+ * Sorted descending so the first match wins.
+ *
+ * Boundaries use "rounding-aware" thresholds:
+ * 999,500 rounds to 1M (not 999.5k), 999,499 stays 999k.
+ */
+const tiers: [threshold: number, divisor: number, suffix: string][] = [
+  [999_500_000_000, 1e12, 'T'],
+  [999_500_000, 1e9, 'B'],
+  [999_500, 1e6, 'M'],
+  [1_000, 1e3, 'k'],
+];
+
+const fullFormatter = new Intl.NumberFormat('en-US');
+
+/**
+ * Abbreviate a number for table cells: `12042` → `"12k"`, `59614283` → `"59.6M"`.
+ *
+ * Rules (from the Number display & abbreviation guide):
+ * - Suffixes: k (10³), M (10⁶), B (10⁹), T (10¹²) — k lowercase, rest uppercase, no space
+ * - Boundary: moves to next suffix when rounding would reach 1000×
+ * - Precision: ≥100 → 0 decimals; 10–99 → 1 decimal (drop .0); 1–9.9 → 1 decimal
+ * - Negative numbers supported
+ */
+export const abbreviateNumber = (value: number): string => {
+  if (value === 0) return '0';
+
+  const sign = value < 0 ? '-' : '';
+  const abs = Math.abs(value);
+
+  if (abs < 1_000) return String(value);
+
+  const tier = tiers.find(([threshold]) => abs >= threshold);
+
+  if (!tier) return String(value);
+
+  const [, divisor, suffix] = tier;
+  const scaled = abs / divisor;
+
+  // ≥100 → 0 decimals; <100 → 1 decimal (drop trailing .0)
+  const precision = scaled >= 100 ? 0 : 1;
+  const rounded = Math.round(scaled * 10 ** precision) / 10 ** precision;
+  const formatted = rounded % 1 === 0 ? String(rounded) : rounded.toFixed(1);
+
+  return `${sign}${formatted}${suffix}`;
+};
+
+/**
+ * Format a number with thousand separators for tooltips: `59614283` → `"59,614,283"`.
+ */
+export const formatFullNumber = (value: number): string => fullFormatter.format(value);
+
+/**
+ * Format a percentage with boundary safety:
+ * - Never show 100% when real value < 100 → ">99%" (or ">99.9%" etc.)
+ * - Never show 0% when real value > 0 → "<1%" (or "<0.1%" etc.)
+ * - `decimals` controls fractional precision (default 0)
+ */
+export const formatPercent = (value: number, decimals = 0): string => {
+  if (value === 0) return '0%';
+  if (value === 100) return '100%';
+
+  const factor = 10 ** decimals;
+  const rounded = Math.round(value * factor) / factor;
+
+  // Boundary safety: value > 0 but rounds to 0
+  if (value > 0 && rounded === 0) {
+    const threshold = 1 / factor;
+    return `<${threshold}%`;
+  }
+
+  // Boundary safety: value < 100 but rounds to 100
+  if (value < 100 && rounded === 100) {
+    const max = 100 - 1 / factor;
+    return `>${decimals > 0 ? max.toFixed(decimals) : String(max)}%`;
+  }
+
+  return `${decimals > 0 ? rounded.toFixed(decimals) : String(rounded)}%`;
+};
+
+/**
+ * Byte-formatting tiers: [minValue, divisor, suffix].
+ * Uses decimal (SI) units: KB = 1000, MB = 1e6, etc.
+ */
+const byteTiers: [threshold: number, divisor: number, suffix: string][] = [
+  [999_500_000_000, 1e12, 'TB'],
+  [999_500_000, 1e9, 'GB'],
+  [999_500, 1e6, 'MB'],
+  [1_000, 1e3, 'KB'],
+];
+
+/**
+ * Format bytes using decimal (SI) units: 512 B, 3.4 KB, 12.7 MB, 2.3 GB, 1.1 TB.
+ * Same decimal precision rules as abbreviateNumber.
+ * Returns `{ display, full }` where `full` = "2,345,678,901 bytes".
+ */
+export const formatBytes = (value: number): { display: string; full: string } => {
+  const full = `${fullFormatter.format(value)} bytes`;
+
+  if (value < 1_000) {
+    return { display: `${value} B`, full };
+  }
+
+  const tier = byteTiers.find(([threshold]) => value >= threshold);
+
+  if (!tier) {
+    return { display: `${value} B`, full };
+  }
+
+  const [, divisor, suffix] = tier;
+  const scaled = value / divisor;
+
+  const precision = scaled >= 100 ? 0 : 1;
+  const rounded = Math.round(scaled * 10 ** precision) / 10 ** precision;
+  const formatted = rounded % 1 === 0 ? String(rounded) : rounded.toFixed(1);
+
+  return { display: `${formatted} ${suffix}`, full };
+};
+```