diff --git a/.changeset/server-side-column-header-sort.md b/.changeset/server-side-column-header-sort.md
new file mode 100644
index 000000000..e8e82222f
--- /dev/null
+++ b/.changeset/server-side-column-header-sort.md
@@ -0,0 +1,44 @@
+---
+"@object-ui/types": minor
+"@object-ui/components": minor
+"@object-ui/plugin-grid": minor
+"@object-ui/plugin-list": minor
+---
+
+feat(components,grid,list): a column-header sort orders the whole list, not the page you can see — #3106
+
+Clicking a column header under server pagination sorted **the current page**.
+The user saw "sorted by this column" and got "these fifty rows are in order;
+page 2 starts over". The sort was real — its scope was not the one the screen
+implied — and it had no way out of `data-table` at all: the sort lived in two
+`useState`s with no callback, so the layer that issues the request could not
+see it even in principle.
+
+`DataTable` gains `manualSorting` + a controlled `sort` + `onSortChange`. In
+that mode it sorts nothing, reports what a header click asks for, and renders
+`sort` as the indicator — keeping **no** sort state of its own, because a
+private copy beside a controlled prop is the shape the defect had.
+
+`ObjectGrid` turns that into a `$orderby` in both of its server modes (its own
+fetch, and a parent-driven one), and `ListView` lands it in `currentSort` — the
+same state the toolbar's sort builder writes. One sort, two controls: that is
+what makes "does a header sort outrank the saved view's sort?" a non-question
+rather than a precedence rule someone has to remember.
+
+Three details that are decisions, not incidentals:
+
+- **A header click replaces the order** instead of appending to it, so the
+  column under the cursor is the one the list is sorted by. Multi-key orders
+  still come from the sort builder, and the headers render them numbered.
+- **It cannot ask for "no sort".** In client mode the third click clears, and
+  that is meaningful there — the rows return to the order they arrived in.
+  Across a server-paged collection there is no such order (objectstack#4363), so
+  a header offering it would hand the user a worse lie than the one being fixed.
+  Clearing stays with the sort builder, which can restore the view's default.
+- **Relational columns render no sort affordance** under server sorting. A
+  `lookup` column shows a related record's name while `$orderby` can only order
+  by the stored id (objectstack#4256) — the same reason #3096 removed them from
+  the toolbar's sort picker. Client-side sorting keys off the rendered label, so
+  those headers stay live there.
+
+Client-side tables are untouched: same three-state cycle, same local sort.
diff --git a/packages/components/src/__tests__/data-table-manual-sorting.test.tsx b/packages/components/src/__tests__/data-table-manual-sorting.test.tsx
new file mode 100644
index 000000000..9e45bfc27
--- /dev/null
+++ b/packages/components/src/__tests__/data-table-manual-sorting.test.tsx
@@ -0,0 +1,207 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Server-side ("manual") sorting for DataTable (objectui#3106).
+ *
+ * The defect: a column-header click sorted whatever rows the table was holding.
+ * Under server pagination that is ONE PAGE, so the header said "sorted by this
+ * column" about fifty rows and nothing about the list they came from — and the
+ * sort had no way out of the component to reach the layer that fetches.
+ *
+ * In manual mode the table sorts nothing, reports the requested sort through
+ * `onSortChange`, and renders `sort` as the indicator. It keeps **no** sort
+ * state of its own: a private copy alongside a controlled prop is the shape the
+ * bug had, so these tests assert the rows are untouched and that the indicator
+ * follows the prop rather than the click.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { renderComponent } from './test-utils';
+// Registers the renderers at module scope, NOT inside a `beforeAll` — there the
+// cold transform is billed to `hookTimeout` (objectui#3010/#3021).
+import '../renderers';
+
+/** Deliberately NOT in `status` order — a local sort would visibly reorder it. */
+const pageData = [
+  { id: 'r1', name: 'Alpha', status: 'open' },
+  { id: 'r2', name: 'Bravo', status: 'done' },
+  { id: 'r3', name: 'Charlie', status: 'hold' },
+];
+
+const columns = [
+  { header: 'Name', accessorKey: 'name' },
+  { header: 'Status', accessorKey: 'status' },
+];
+
+const baseSchema = {
+  type: 'data-table' as const,
+  columns,
+  data: pageData,
+  manualSorting: true,
+  sort: [],
+} as any;
+
+const rowOrder = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll('tbody tr')).map(
+    (tr) => tr.querySelector('td')?.textContent?.trim(),
+  );
+
+const headerCell = (container: HTMLElement, label: string) =>
+  Array.from(container.querySelectorAll('thead th')).find((th) =>
+    th.textContent?.includes(label),
+  ) as HTMLElement;
+
+describe('data-table — manual (server-side) sorting', () => {
+  it('does not reorder the rows it was handed', () => {
+    const { container } = renderComponent({
+      ...baseSchema,
+      sort: [{ field: 'status', order: 'asc' }],
+      onSortChange: vi.fn(),
+    });
+    // `status` ascending would be done, hold, open. The rows arrive in the
+    // server's order and stay in it — sorting this window is the whole defect.
+    expect(rowOrder(container)).toEqual(['Alpha', 'Bravo', 'Charlie']);
+  });
+
+  it('reports a header click instead of sorting locally', () => {
+    const onSortChange = vi.fn();
+    const { container } = renderComponent({ ...baseSchema, onSortChange });
+
+    fireEvent.click(headerCell(container, 'Status'));
+
+    expect(onSortChange).toHaveBeenCalledWith([{ field: 'status', order: 'asc' }]);
+    expect(rowOrder(container)).toEqual(['Alpha', 'Bravo', 'Charlie']);
+  });
+
+  it('toggles the direction of the column already sorted', () => {
+    const onSortChange = vi.fn();
+    const { container } = renderComponent({
+      ...baseSchema,
+      sort: [{ field: 'status', order: 'asc' }],
+      onSortChange,
+    });
+
+    fireEvent.click(headerCell(container, 'Status'));
+    expect(onSortChange).toHaveBeenCalledWith([{ field: 'status', order: 'desc' }]);
+  });
+
+  it('never asks for "no sort" — the third click returns to ascending', () => {
+    // Client mode cycles asc → desc → none, and none is meaningful there (the
+    // rows return to the order they arrived in). Across a server-paged
+    // collection there is no such order: an unsorted paged read is arbitrary
+    // per page (objectstack#4363), so a header must not be able to request it.
+    const onSortChange = vi.fn();
+    const { container } = renderComponent({
+      ...baseSchema,
+      sort: [{ field: 'status', order: 'desc' }],
+      onSortChange,
+    });
+
+    fireEvent.click(headerCell(container, 'Status'));
+    expect(onSortChange).toHaveBeenCalledWith([{ field: 'status', order: 'asc' }]);
+    // Not `[]`, and not a call with an empty array anywhere.
+    for (const call of onSortChange.mock.calls) expect(call[0]).not.toHaveLength(0);
+  });
+
+  it('REPLACES the order when a different column is clicked', () => {
+    // The column under the cursor becomes the one the list is sorted by. A
+    // header that appended would grow an invisible sort stack — the arrow says
+    // "Name" while the rows are ordered by Status first.
+    const onSortChange = vi.fn();
+    const { container } = renderComponent({
+      ...baseSchema,
+      sort: [{ field: 'status', order: 'asc' }],
+      onSortChange,
+    });
+
+    fireEvent.click(headerCell(container, 'Name'));
+    expect(onSortChange).toHaveBeenCalledWith([{ field: 'name', order: 'asc' }]);
+  });
+
+  it('holds no sort state of its own — the indicator follows the prop, not the click', () => {
+    // The controlled value never changes, so nothing may appear to have been
+    // sorted. A table keeping a private copy would light up its own arrow here,
+    // which is exactly how a sort ends up somewhere the fetching layer cannot
+    // see it.
+    const { container } = renderComponent({ ...baseSchema, onSortChange: vi.fn() });
+    const before = headerCell(container, 'Status').innerHTML;
+
+    fireEvent.click(headerCell(container, 'Status'));
+
+    expect(headerCell(container, 'Status').innerHTML).toBe(before);
+  });
+
+  it('renders every key of a multi-key sort, numbered', () => {
+    // Multi-key orders come from a host's sort builder. Marking only the first
+    // column would say "sorted by Status" about a list ordered by Status then
+    // Name.
+    const { container } = renderComponent({
+      ...baseSchema,
+      sort: [{ field: 'status', order: 'asc' }, { field: 'name', order: 'desc' }],
+      onSortChange: vi.fn(),
+    });
+
+    expect(headerCell(container, 'Status').textContent).toContain('1');
+    expect(headerCell(container, 'Name').textContent).toContain('2');
+  });
+
+  it('renders no rank badge for an ordinary single-column sort', () => {
+    const { container } = renderComponent({
+      ...baseSchema,
+      sort: [{ field: 'status', order: 'asc' }],
+      onSortChange: vi.fn(),
+    });
+    expect(headerCell(container, 'Status').textContent?.trim()).toBe('Status');
+  });
+
+  it('renders inert headers when no onSortChange was supplied', () => {
+    // A manual-sorting table with nowhere to report a click must not look
+    // clickable: a dead affordance is the same class of lie as a sort that
+    // silently covers one page.
+    const { container } = renderComponent(baseSchema);
+    const status = headerCell(container, 'Status');
+    expect(status.className).not.toContain('cursor-pointer');
+    // No sort chevron. (Other header chrome — the column drag grip — stays.)
+    expect(status.querySelector('[class*="chevron"]')).toBeNull();
+  });
+
+  it('honours a column that opts out of sorting', () => {
+    // How a relational column is withheld: its label is a related record's
+    // name, but a server `$orderby` can only order by the stored id (#3096).
+    const onSortChange = vi.fn();
+    const { container } = renderComponent({
+      ...baseSchema,
+      columns: [columns[0], { ...columns[1], sortable: false }],
+      onSortChange,
+    });
+
+    fireEvent.click(headerCell(container, 'Status'));
+    expect(onSortChange).not.toHaveBeenCalled();
+  });
+
+  it('leaves client-side sorting exactly as it was', () => {
+    // No `manualSorting`: the table owns the rows, so it sorts them and keeps
+    // its three-state cycle. This mode is untouched by #3106.
+    const { container } = renderComponent({
+      type: 'data-table',
+      columns,
+      data: pageData,
+    } as any);
+
+    fireEvent.click(headerCell(container, 'Status'));
+    expect(rowOrder(container)).toEqual(['Bravo', 'Charlie', 'Alpha']); // done, hold, open
+
+    fireEvent.click(headerCell(container, 'Status'));
+    expect(rowOrder(container)).toEqual(['Alpha', 'Charlie', 'Bravo']); // open, hold, done
+
+    fireEvent.click(headerCell(container, 'Status'));
+    expect(rowOrder(container)).toEqual(['Alpha', 'Bravo', 'Charlie']); // cleared
+  });
+});
diff --git a/packages/components/src/renderers/complex/data-table.tsx b/packages/components/src/renderers/complex/data-table.tsx
index 3a48786e6..6d58566cc 100644
--- a/packages/components/src/renderers/complex/data-table.tsx
+++ b/packages/components/src/renderers/complex/data-table.tsx
@@ -12,7 +12,7 @@ import { cn } from '../../lib/utils';
 import { resolveIcon } from '../action/resolve-icon';
 import { useGridFieldAuthoring } from '../../context/gridFieldAuthoring';
 import { ComponentRegistry, compareSortValues, getSortValue } from '@object-ui/core';
-import type { DataTableSchema } from '@object-ui/types';
+import type { DataTableSchema, TableSortItem } from '@object-ui/types';
 import { useRowPredicate } from '@object-ui/react';
 import { createSafeTranslation } from '@object-ui/i18n';
 import { 
@@ -361,6 +361,9 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
     page: controlledPage,
     onPageChange,
     onPageSizeChange,
+    manualSorting = false,
+    sort: controlledSort,
+    onSortChange,
     searchable = true,
     selectable: selectableProp = false,
     showSelectionCount = true,
@@ -601,6 +604,12 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
 
   // Sorting — client-side, over the rows this table was handed.
   //
+  // Under `manualSorting` there is nothing to do: `data` arrived in the order
+  // the server produced, for the whole collection rather than this window.
+  // Re-sorting it here would order the CURRENT PAGE — the defect objectui#3106
+  // reports, where "sorted by this column" is true of fifty rows and false of
+  // the list they came from.
+  //
   // Sort keys go through `getSortValue` so a relational column orders by the
   // label its cell shows, not by the `$expand`-ed record object (objectui#3096).
   // The old `aValue < bValue` was always false for two objects, so a lookup
@@ -610,6 +619,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
   // Decorate → sort → undecorate: the key is resolved ONCE per row rather than
   // on every one of the O(n log n) comparisons.
   const sortedData = useMemo(() => {
+    if (manualSorting) return filteredData;
     if (!sortColumn || !sortDirection) return filteredData;
 
     const keyed = filteredData.map((row) => ({ row, key: getSortValue(row[sortColumn]) }));
@@ -619,7 +629,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
       return sortDirection === 'asc' ? comparison : -comparison;
     });
     return keyed.map((entry) => entry.row);
-  }, [filteredData, sortColumn, sortDirection]);
+  }, [filteredData, sortColumn, sortDirection, manualSorting]);
 
   // Pagination. Under manual (server-side) pagination the parent controls the
   // page and supplies the grand total via `rowCount`; `data` already IS the
@@ -678,10 +688,54 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
     return row.id !== undefined ? row.id : `row-${index}`;
   };
 
+  // The sort the headers display and cycle.
+  //
+  // Under `manualSorting` this is the caller's prop and nothing else — the two
+  // `useState`s below are not read, not written, and not mirrored. Keeping a
+  // private copy in sync with a controlled prop is precisely how objectui#3106
+  // happened: the table held the user's sort somewhere the layer that fetches
+  // the rows could not see it.
+  const activeSort: TableSortItem[] = manualSorting
+    ? (controlledSort ?? [])
+    : (sortColumn && sortDirection ? [{ field: sortColumn, order: sortDirection }] : []);
+
+  // A manual-sorting table with nowhere to report a click renders inert headers
+  // rather than clickable ones that do nothing — a dead affordance is the same
+  // class of lie as a sort that only covers the current page.
+  const sortingEnabled = sortable && (!manualSorting || !!onSortChange);
+
+  /**
+   * Sort by one column in a given direction — the single write path, so the
+   * column-header cycle and the header context menu cannot diverge about where
+   * a sort goes. The menu used to call `setSortColumn`/`setSortDirection`
+   * directly, which under `manualSorting` would have written to state nothing
+   * reads: a menu item that highlights, closes, and changes nothing.
+   */
+  const applySort = (columnKey: string, order: 'asc' | 'desc') => {
+    if (manualSorting) {
+      onSortChange?.([{ field: columnKey, order }]);
+      return;
+    }
+    setSortColumn(columnKey);
+    setSortDirection(order);
+  };
+
   // Handlers
   const handleSort = (columnKey: string) => {
-    if (!sortable) return;
-    
+    if (!sortingEnabled) return;
+
+    if (manualSorting) {
+      // Two states, not three. A header click REPLACES the order — the column
+      // under the cursor becomes the one the list is sorted by — and it never
+      // produces "no sort": across a server-paged collection that is an
+      // arbitrary order per page (objectstack#4363), so it is not a state a
+      // header should be able to ask for. Clearing a sort belongs to the host's
+      // sort builder, which can also restore the view's configured default.
+      const current = activeSort.find((s) => s.field === columnKey);
+      applySort(columnKey, current?.order === 'asc' ? 'desc' : 'asc');
+      return;
+    }
+
     if (sortColumn === columnKey) {
       if (sortDirection === 'asc') {
         setSortDirection('desc');
@@ -773,14 +827,31 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
     window.URL.revokeObjectURL(url);
   };
 
+  /**
+   * The indicator for one column, read from {@link activeSort}.
+   *
+   * Every participating key is marked, not just the first: a multi-key sort
+   * arrives from the host's sort builder, and showing only its primary column
+   * would say "sorted by Status" about a list actually ordered by Status then
+   * Rank. The rank badge appears only when there is more than one key, so the
+   * ordinary single-column case renders exactly as it always has.
+   */
   const getSortIcon = (columnKey: string) => {
-    if (sortColumn !== columnKey) {
+    const index = activeSort.findIndex((s) => s.field === columnKey);
+    if (index === -1) {
       return <ChevronsUpDown className="h-3 w-3 ml-0.5 opacity-0 group-hover:opacity-50 transition-opacity" />;
     }
-    if (sortDirection === 'asc') {
-      return <ChevronUp className="h-3 w-3 ml-0.5 text-primary" />;
-    }
-    return <ChevronDown className="h-3 w-3 ml-0.5 text-primary" />;
+    const Arrow = activeSort[index].order === 'asc' ? ChevronUp : ChevronDown;
+    return (
+      <span className="inline-flex items-center shrink-0">
+        <Arrow className="h-3 w-3 ml-0.5 text-primary" />
+        {activeSort.length > 1 && (
+          <span className="text-[10px] font-medium text-primary tabular-nums leading-none">
+            {index + 1}
+          </span>
+        )}
+      </span>
+    );
   };
 
   // Column resizing handlers
@@ -1374,7 +1445,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                     key={col.accessorKey}
                     className={cn(
                       col.className,
-                      sortable && col.sortable !== false && 'cursor-pointer select-none',
+                      sortingEnabled && col.sortable !== false && 'cursor-pointer select-none',
                       isDragging && 'opacity-50',
                       isDragOver && 'border-l-2 border-primary',
                       col.align === 'right' && 'text-right',
@@ -1401,7 +1472,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                     onDragOver={(e) => handleColumnDragOver(e, index)}
                     onDrop={(e) => handleColumnDrop(e, index)}
                     onDragEnd={handleColumnDragEnd}
-                    onClick={() => sortable && col.sortable !== false && handleSort(col.accessorKey)}
+                    onClick={() => sortingEnabled && col.sortable !== false && handleSort(col.accessorKey)}
                     onContextMenu={(e) => handleColumnContextMenu(e, col.accessorKey)}
                   >
                     <div className={cn(
@@ -1416,7 +1487,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                           <span className="text-muted-foreground shrink-0">{col.headerIcon}</span>
                         )}
                         <span className="text-xs font-medium text-muted-foreground whitespace-nowrap truncate">{col.header}</span>
-                        {sortable && col.sortable !== false && getSortIcon(col.accessorKey)}
+                        {sortingEnabled && col.sortable !== false && getSortIcon(col.accessorKey)}
                         {editColumnEnabled && (
                           <button
                             type="button"
@@ -2019,14 +2090,13 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
           data-testid="column-context-menu"
           onClick={(e) => e.stopPropagation()}
         >
-          {sortable && (
+          {sortingEnabled && (
             <>
               <button
                 type="button"
                 className="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground cursor-pointer"
                 onClick={() => {
-                  setSortColumn(contextMenu.columnKey);
-                  setSortDirection('asc');
+                  applySort(contextMenu.columnKey, 'asc');
                   setContextMenu(null);
                 }}
               >
@@ -2037,8 +2107,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                 type="button"
                 className="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground cursor-pointer"
                 onClick={() => {
-                  setSortColumn(contextMenu.columnKey);
-                  setSortDirection('desc');
+                  applySort(contextMenu.columnKey, 'desc');
                   setContextMenu(null);
                 }}
               >
diff --git a/packages/plugin-grid/src/ObjectGrid.tsx b/packages/plugin-grid/src/ObjectGrid.tsx
index 98b7ae534..298808244 100644
--- a/packages/plugin-grid/src/ObjectGrid.tsx
+++ b/packages/plugin-grid/src/ObjectGrid.tsx
@@ -22,7 +22,7 @@
  */
 
 import React, { useEffect, useState, useCallback, useMemo } from 'react';
-import type { ObjectGridSchema, DataSource, ListColumn, ViewData } from '@object-ui/types';
+import type { ObjectGridSchema, DataSource, ListColumn, ViewData, TableSortItem } from '@object-ui/types';
 import { isSystemManagedField } from '@object-ui/types';
 import type { I18nLabel } from '@objectstack/spec/ui';
 import { SchemaRenderer, useDataScope, useNavigationOverlay, useAction, useSafeFieldLabel, usePredicateScope } from '@object-ui/react';
@@ -36,7 +36,7 @@ import {
   RefreshIndicator,
 } from '@object-ui/components';
 import { usePullToRefresh } from '@object-ui/mobile';
-import { resolveConditionalFormatting, buildExpandFields, buildExportFileName } from '@object-ui/core';
+import { resolveConditionalFormatting, buildExpandFields, buildExportFileName, isExpandableFieldType } from '@object-ui/core';
 import { usePermissions } from '@object-ui/permissions';
 import { ChevronRight, ChevronDown, ChevronLeft, ChevronsLeft, ChevronsRight, Download, Rows2, Rows3, Rows4, AlignJustify, Type, Hash, Calendar, CheckSquare, User, Tag, Clock, Loader2 } from 'lucide-react';
 import { useRowColor } from './useRowColor';
@@ -53,6 +53,33 @@ import { BulkActionDialog } from './components/BulkActionDialog';
 import type { BulkResult } from './hooks/useBulkExecutor';
 import type { BulkActionDef } from '@object-ui/types';
 
+/**
+ * A view's declared `sort` → the shape the table's header indicators read.
+ *
+ * `@objectstack/spec` allows `"name desc"`, `["name desc", …]` and
+ * `[{ field, order }, …]`, and this grid's own fetch path already reads all
+ * three. The headers have to agree with it: a view that arrives sorted by
+ * `created_at desc` should show that arrow before anyone clicks anything —
+ * otherwise the first click on that column produces `asc` while the list was
+ * already `desc`, and the arrow tells the truth only from the second click on.
+ *
+ * Exported for the test that pins it against the fetch path's own reading.
+ */
+export function parseSchemaSort(sort: unknown): TableSortItem[] {
+  const entries = typeof sort === 'string' ? [sort] : Array.isArray(sort) ? sort : [];
+  const items: TableSortItem[] = [];
+  for (const entry of entries) {
+    if (typeof entry === 'string') {
+      const [field, order] = entry.trim().split(/\s+/);
+      if (field) items.push({ field, order: order?.toLowerCase() === 'desc' ? 'desc' : 'asc' });
+    } else if (entry && typeof entry === 'object' && typeof (entry as any).field === 'string') {
+      const { field, order } = entry as { field: string; order?: string };
+      items.push({ field, order: String(order).toLowerCase() === 'desc' ? 'desc' : 'asc' });
+    }
+  }
+  return items;
+}
+
 // Clickable text cell that can safely contain other interactive content
 // (e.g., EmailCellRenderer's copy button). Using <button> here would
 // produce an invalid <button> > <button> nesting (hydration error +
@@ -416,6 +443,15 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     (schema.pagination as any)?.pageSize ?? schema.pageSize ?? 50,
   );
 
+  // Column-header sort, when this grid fetches its own rows (objectui#3106).
+  // `null` means "nobody has clicked a header" and the view's declared
+  // `schema.sort` is in force; once set it REPLACES that sort for the whole
+  // collection, not for the window on screen.
+  const [headerSort, setHeaderSort] = useState<TableSortItem[] | null>(null);
+  // A view whose declared sort changes underneath us (view switch, saved-view
+  // edit) invalidates a header sort taken against the previous one.
+  useEffect(() => { setHeaderSort(null); }, [JSON.stringify(schema.sort ?? null)]);
+
   // --- Inline data effect (synchronous, no fetch needed) ---
   useEffect(() => {
     if (hasInlineData && dataConfig?.provider === 'value') {
@@ -532,8 +568,15 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
             params.$filter = schema.defaultFilters;
           }
 
-          // Support new sort format
-          if (schemaSort) {
+          // Sort. A column-header click (objectui#3106) replaces the view's
+          // declared sort for the whole collection — which is what makes the
+          // arrow in the header true of the list rather than of this page.
+          // The `SortNode[]` form goes out rather than the `"field order"`
+          // string: it is the shape the server names in its own error messages,
+          // and it survives a field name containing a space.
+          if (headerSort && headerSort.length > 0) {
+            params.$orderby = headerSort.map((s) => ({ field: s.field, order: s.order }));
+          } else if (schemaSort) {
             if (typeof schemaSort === 'string') {
               params.$orderby = schemaSort;
             } else if (Array.isArray(schemaSort)) {
@@ -580,7 +623,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     return () => {
       cancelled = true;
     };
-  }, [objectName, schemaFields, schemaColumns, schemaFilter, schemaSort, schemaPagination, schemaPageSize, serverPage, serverPageSize, dataSource, hasInlineData, dataConfig, refreshKey]);
+  }, [objectName, schemaFields, schemaColumns, schemaFilter, schemaSort, headerSort, schemaPagination, schemaPageSize, serverPage, serverPageSize, dataSource, hasInlineData, dataConfig, refreshKey]);
 
   // Reset to page 1 whenever the query itself changes (object / filter / sort),
   // so we never request a page index that no longer exists for the new result
@@ -588,7 +631,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
   React.useEffect(() => {
     setServerPage(1);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [objectName, schemaFilter, schemaSort]);
+  }, [objectName, schemaFilter, schemaSort, headerSort]);
 
   // --- NavigationConfig support ---
   // Must be called before any early returns to satisfy React hooks rules
@@ -1602,17 +1645,64 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     cellClassName: [rowHeightCellClass, col.cellClassName].filter(Boolean).join(' '),
   });
 
+  // Server-side pagination applies to the flat, server-fetched list only.
+  // Inline/static data and the grouped view paginate in-memory (grouped mode
+  // keeps whole groups together via its own groupedPage state), so they stay
+  // on DataTable's default client-side slicing.
+  //
+  // Declared here rather than beside the rest of the manual-mode wiring below
+  // because `orderedColumns` needs it: which columns may be sorted at all
+  // depends on whether the sort is the server's.
+  const useServerPagination = !hasInlineData && !isGrouped;
+
+  // Either we own the server fetch (useServerPagination) or a parent does
+  // (externalManualPagination). Grouped mode always keeps in-memory slicing so
+  // whole groups stay together. Both server modes feed DataTable a manual pager
+  // backed by the real match total.
+  const manualPaginationOn = (useServerPagination || externalManualPagination) && !isGrouped;
+
+  // Server-side sorting, in either of the two server modes (objectui#3106).
+  //
+  // Tied to who owns the ROWS, not to who owns the pager: whenever `data` is
+  // one window of a larger collection, sorting it in the browser orders that
+  // window and nothing else. Grouped mode holds every row it groups, so it
+  // keeps DataTable's own client-side sort.
+  const manualSortingOn = manualPaginationOn;
+
+  /**
+   * Withhold the sort affordance from a relational column when the sort is the
+   * server's (objectui#3096 + #3106).
+   *
+   * A `lookup` / `master_detail` / `user` / `tree` column stores a foreign-key
+   * id and shows the related record's name. A server `$orderby` can only order
+   * by the stored id — objectstack#4256 settled that no relation join is coming
+   * — so the column of names would come back in an order with no relation to
+   * the names. The ListView toolbar's sort picker already withholds these for
+   * exactly this reason; a clickable header would have been the same illusion
+   * through a different control.
+   *
+   * Only under manual sorting. A client-side sort keys off the label the cell
+   * renders (`getSortValue`, #3096), which is honest, so those headers stay.
+   */
+  const withSortability = (col: any) => {
+    if (!manualSortingOn || col.sortable === false) return col;
+    const fieldDef = (objectSchema as any)?.fields?.[col.accessorKey];
+    return isExpandableFieldType(fieldDef) ? { ...col, sortable: false } : col;
+  };
+
+  const applyColumnChrome = (col: any) => withSortability(applyDensity(col));
+
   const orderedColumns = hasPinnedColumns
     ? [
-        ...pinnedLeftCols.map(applyDensity),
-        ...unpinnedCols.map(applyDensity),
+        ...pinnedLeftCols.map(applyColumnChrome),
+        ...unpinnedCols.map(applyColumnChrome),
         ...pinnedRightCols.map((col: any) => ({
-          ...applyDensity(col),
+          ...applyColumnChrome(col),
           className: ['px-3', col.className, rightPinnedClasses].filter(Boolean).join(' '),
           cellClassName: [rowHeightCellClass, col.cellClassName, rightPinnedClasses].filter(Boolean).join(' '),
         })),
       ]
-    : columnsWithActions.map(applyDensity);
+    : columnsWithActions.map(applyColumnChrome);
 
   // Calculate frozenColumns: if the USER pinned columns, use their left-pinned
   // count; otherwise fall back to the schema default (freeze the first column).
@@ -1885,17 +1975,6 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     ? schema.searchableFields.length > 0
     : (schema.showSearch !== undefined ? schema.showSearch : true);
 
-  // Server-side pagination applies to the flat, server-fetched list only.
-  // Inline/static data and the grouped view paginate in-memory (grouped mode
-  // keeps whole groups together via its own groupedPage state), so they stay
-  // on DataTable's default client-side slicing.
-  const useServerPagination = !hasInlineData && !isGrouped;
-
-  // Either we own the server fetch (useServerPagination) or a parent does
-  // (externalManualPagination). Grouped mode always keeps in-memory slicing so
-  // whole groups stay together. Both server modes feed DataTable a manual pager
-  // backed by the real match total.
-  const manualPaginationOn = (useServerPagination || externalManualPagination) && !isGrouped;
   const manualRowCount = externalManualPagination ? (rest as any).rowCount : totalMatching;
   const manualPage = externalManualPagination ? (rest as any).page : serverPage;
   const manualPageSize = externalManualPagination
@@ -1908,6 +1987,26 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     ? (rest as any).onPageSizeChange
     : (size: number) => { setServerPageSize(size); setServerPage(1); };
 
+  // Before anyone clicks, the headers show the sort the view was authored with
+  // — read with the same `schemaSort` → `defaultSort` precedence the fetch path
+  // above uses, so the arrow on screen and the `$orderby` on the wire are the
+  // same sort. Without that a view arriving `created_at desc` would show no
+  // arrow, and the first click on that column would ask for `asc` on a list
+  // that was already `desc`.
+  //
+  // A plain expression, not a `useMemo`: this sits below the component's early
+  // returns, where a hook would be skipped on some renders and change the hook
+  // order. Parsing at most a handful of sort keys costs nothing worth a hook.
+  const declaredSort = parseSchemaSort(
+    schemaSort ?? (schema.defaultSort ? [schema.defaultSort] : undefined),
+  );
+  const manualSort: TableSortItem[] = externalManualPagination
+    ? ((rest as any).sort ?? [])
+    : (headerSort ?? declaredSort);
+  const manualOnSortChange = externalManualPagination
+    ? (rest as any).onSortChange
+    : setHeaderSort;
+
   const dataTableSchema: any = {
     type: 'data-table',
     caption: schema.label || schema.title,
@@ -1927,6 +2026,9 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     page: manualPaginationOn ? manualPage : undefined,
     onPageChange: manualPaginationOn ? manualOnPageChange : undefined,
     onPageSizeChange: manualPaginationOn ? manualOnPageSizeChange : undefined,
+    manualSorting: manualSortingOn,
+    sort: manualSortingOn ? manualSort : undefined,
+    onSortChange: manualSortingOn ? manualOnSortChange : undefined,
     searchable: searchEnabled,
     selectable: selectionMode,
     // ObjectGrid surfaces the selection via its own bottom BulkActionBar
diff --git a/packages/plugin-grid/src/__tests__/serverSorting.test.tsx b/packages/plugin-grid/src/__tests__/serverSorting.test.tsx
new file mode 100644
index 000000000..468d09856
--- /dev/null
+++ b/packages/plugin-grid/src/__tests__/serverSorting.test.tsx
@@ -0,0 +1,212 @@
+/**
+ * Column-header sorting reaches the server (objectui#3106).
+ *
+ * Before the fix, DataTable's header sort was internal state with no callback
+ * out of the component, so under server pagination it reordered the fifty rows
+ * on screen and stopped there. The list looked sorted by that column; page 2
+ * started over. Nothing said so.
+ *
+ * After the fix a header click becomes a `$orderby` on the refetch — the sort
+ * applies to the whole collection — and the grid returns to page 1, because a
+ * new ordering makes "page 5" a different set of rows.
+ *
+ * The relational-column half is #3096's: a `lookup` column shows a related
+ * record's name while the server can only order by the stored id
+ * (objectstack#4256 settled that no join is coming), so those headers are
+ * withheld rather than offered as an ordering by something invisible.
+ */
+import { describe, it, expect, vi, beforeAll } from 'vitest';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import React from 'react';
+
+import { ObjectGrid, parseSchemaSort } from '../ObjectGrid';
+import { registerAllFields } from '@object-ui/fields';
+import { ActionProvider } from '@object-ui/react';
+
+registerAllFields();
+
+beforeAll(() => {
+  if (!Element.prototype.hasPointerCapture) {
+    Element.prototype.hasPointerCapture = vi.fn(() => false) as any;
+  }
+  if (!Element.prototype.scrollIntoView) {
+    Element.prototype.scrollIntoView = vi.fn() as any;
+  }
+});
+
+const TOTAL = 300;
+const PAGE_SIZE = 50;
+
+function makeDataSource() {
+  const find = vi.fn(async (_object: string, params: any) => {
+    const top = params.$top ?? PAGE_SIZE;
+    const skip = params.$skip ?? 0;
+    const rows = Array.from({ length: Math.max(0, Math.min(top, TOTAL - skip)) }, (_, i) => ({
+      id: `id-${skip + i}`,
+      name: `Row ${skip + i}`,
+      status: 'open',
+      owner: { id: 'u1', name: 'Ada' },
+    }));
+    return { data: rows, total: TOTAL, hasMore: skip + rows.length < TOTAL, pageSize: top };
+  });
+  return {
+    find,
+    getObjectSchema: async (name: string) => ({
+      name,
+      fields: {
+        id: { type: 'text' },
+        name: { type: 'text' },
+        status: { type: 'text' },
+        owner: { type: 'lookup', reference_to: 'user' },
+      },
+    }),
+  } as any;
+}
+
+function renderGrid(dataSource: any, opts?: Record<string, any>) {
+  const schema: any = {
+    type: 'object-grid',
+    objectName: 'task',
+    columns: [
+      { field: 'name', label: 'Name' },
+      { field: 'status', label: 'Status' },
+      { field: 'owner', label: 'Owner' },
+    ],
+    pagination: { pageSize: PAGE_SIZE },
+    ...opts,
+  };
+  return render(
+    <ActionProvider>
+      <ObjectGrid schema={schema} dataSource={dataSource} />
+    </ActionProvider>,
+  );
+}
+
+const lastFindParams = (ds: any) => ds.find.mock.calls[ds.find.mock.calls.length - 1][1];
+
+const headerCell = (container: HTMLElement, label: string) =>
+  Array.from(container.querySelectorAll('thead th')).find((th) =>
+    th.textContent?.includes(label),
+  ) as HTMLElement;
+
+describe('ObjectGrid — column-header sorting is server-side (#3106)', () => {
+  it('turns a header click into an $orderby on the refetch', async () => {
+    const ds = makeDataSource();
+    const { container } = renderGrid(ds);
+    await waitFor(() => expect(screen.getByText('Row 0')).toBeInTheDocument());
+
+    fireEvent.click(headerCell(container, 'Status'));
+
+    await waitFor(() => {
+      expect(lastFindParams(ds).$orderby).toEqual([{ field: 'status', order: 'asc' }]);
+    });
+  });
+
+  it('toggles to descending on the second click', async () => {
+    const ds = makeDataSource();
+    const { container } = renderGrid(ds);
+    await waitFor(() => expect(screen.getByText('Row 0')).toBeInTheDocument());
+
+    fireEvent.click(headerCell(container, 'Status'));
+    await waitFor(() => expect(lastFindParams(ds).$orderby).toEqual([{ field: 'status', order: 'asc' }]));
+
+    fireEvent.click(headerCell(container, 'Status'));
+    await waitFor(() => expect(lastFindParams(ds).$orderby).toEqual([{ field: 'status', order: 'desc' }]));
+  });
+
+  it('returns to page 1 — a new ordering makes the old page index a different set of rows', async () => {
+    const ds = makeDataSource();
+    const { container } = renderGrid(ds);
+    await waitFor(() => expect(screen.getByText('Row 0')).toBeInTheDocument());
+
+    // Advance off page 1 first (last-page button guarantees a forward jump).
+    const navButtons = Array.from(container.querySelectorAll('button')).filter(
+      (b) => !(b as HTMLButtonElement).disabled,
+    );
+    fireEvent.click(navButtons[navButtons.length - 1]);
+    await waitFor(() => expect(lastFindParams(ds).$skip).toBeGreaterThan(0));
+
+    fireEvent.click(headerCell(container, 'Status'));
+
+    await waitFor(() => {
+      const p = lastFindParams(ds);
+      expect(p.$orderby).toEqual([{ field: 'status', order: 'asc' }]);
+      expect(p.$skip ?? 0).toBe(0);
+    });
+  });
+
+  it('replaces the view\'s declared sort rather than stacking on it', async () => {
+    const ds = makeDataSource();
+    const { container } = renderGrid(ds, { sort: 'name desc' });
+    await waitFor(() => expect(screen.getByText('Row 0')).toBeInTheDocument());
+    // The declared sort goes out as the string form it was authored in.
+    expect(lastFindParams(ds).$orderby).toBe('name desc');
+
+    fireEvent.click(headerCell(container, 'Status'));
+
+    await waitFor(() => {
+      expect(lastFindParams(ds).$orderby).toEqual([{ field: 'status', order: 'asc' }]);
+    });
+  });
+
+  it('shows the view\'s declared sort before anyone clicks', async () => {
+    // Otherwise the first click on that column asks for `asc` on a list that is
+    // already `desc`, and the arrow only tells the truth from click two on.
+    const ds = makeDataSource();
+    const { container } = renderGrid(ds, { sort: 'status desc' });
+    await waitFor(() => expect(screen.getByText('Row 0')).toBeInTheDocument());
+
+    expect(headerCell(container, 'Status').querySelector('[class*="chevron-down"]')).not.toBeNull();
+
+    // …and clicking it therefore toggles to ascending rather than restating desc.
+    fireEvent.click(headerCell(container, 'Status'));
+    await waitFor(() => {
+      expect(lastFindParams(ds).$orderby).toEqual([{ field: 'status', order: 'asc' }]);
+    });
+  });
+
+  it('withholds the sort affordance from a relational column (#3096)', async () => {
+    const ds = makeDataSource();
+    const { container } = renderGrid(ds);
+    await waitFor(() => expect(screen.getByText('Row 0')).toBeInTheDocument());
+
+    const owner = headerCell(container, 'Owner');
+    expect(owner.className).not.toContain('cursor-pointer');
+
+    const before = ds.find.mock.calls.length;
+    fireEvent.click(owner);
+    // No refetch: the click is not a sort request.
+    await new Promise((r) => setTimeout(r, 20));
+    expect(ds.find.mock.calls.length).toBe(before);
+  });
+});
+
+describe('parseSchemaSort — the header reads what the fetch path reads', () => {
+  it('reads the bare-string form', () => {
+    expect(parseSchemaSort('name desc')).toEqual([{ field: 'name', order: 'desc' }]);
+  });
+
+  it('defaults an omitted direction to ascending', () => {
+    expect(parseSchemaSort('name')).toEqual([{ field: 'name', order: 'asc' }]);
+  });
+
+  it('reads the array-of-strings form', () => {
+    expect(parseSchemaSort(['status asc', 'name desc'])).toEqual([
+      { field: 'status', order: 'asc' },
+      { field: 'name', order: 'desc' },
+    ]);
+  });
+
+  it('reads the SortNode[] form', () => {
+    expect(parseSchemaSort([{ field: 'name', order: 'desc' }])).toEqual([
+      { field: 'name', order: 'desc' },
+    ]);
+  });
+
+  it('yields nothing for an absent or unreadable sort', () => {
+    expect(parseSchemaSort(undefined)).toEqual([]);
+    expect(parseSchemaSort(null)).toEqual([]);
+    expect(parseSchemaSort(42)).toEqual([]);
+  });
+});
diff --git a/packages/plugin-list/src/ListView.tsx b/packages/plugin-list/src/ListView.tsx
index 61a3b9ffa..15fba7c4e 100644
--- a/packages/plugin-list/src/ListView.tsx
+++ b/packages/plugin-list/src/ListView.tsx
@@ -1780,6 +1780,32 @@ export const ListView = React.forwardRef<ListViewHandle, ListViewProps>(({
     return { sortFields: fields, sortHasRelationalField: excluded };
   }, [filterFields, currentSort, t]);
 
+  /**
+   * A column-header sort from the child grid (#3106).
+   *
+   * It lands in `currentSort` — the same state the toolbar's sort builder
+   * writes — so it becomes a server `$orderby` over the whole collection and
+   * the two controls can never disagree about what the list is sorted by. The
+   * table hands back `{field, order}`; `SortItem` carries an `id` for the
+   * builder's React keys, so one is minted here exactly as `parseSortConfig`
+   * does when reading a view's declared sort.
+   *
+   * The page goes back to 1: a new order makes "page 5" a different set of
+   * rows, and staying there would show a slice of an ordering the user has not
+   * seen the start of. `onSortChange` fires so a host persists this the same
+   * way it persists a builder edit — a header sort is not a lesser sort.
+   */
+  const handleHeaderSort = React.useCallback((next: Array<{ field: string; order: 'asc' | 'desc' }>) => {
+    const items: SortItem[] = next.map((s) => ({
+      id: crypto.randomUUID(),
+      field: s.field,
+      order: s.order,
+    }));
+    setCurrentSort(items);
+    setServerPage(1);
+    onSortChange?.(items);
+  }, [onSortChange]);
+
   // Export handler
   const handleExport = React.useCallback((format: 'csv' | 'xlsx' | 'json' | 'pdf') => {
     // Object-level export permission gate. Default-allow.
@@ -2679,6 +2705,14 @@ export const ListView = React.forwardRef<ListViewHandle, ListViewProps>(({
                   pageSize: effectivePageSize,
                   onPageChange: (p: number) => setServerPage(p),
                   onPageSizeChange: (n: number) => { setDynamicPageSize(n); setServerPage(1); },
+                  // …and its sort from the same place (#3106). The column
+                  // headers and the toolbar's sort builder are two controls over
+                  // ONE `currentSort`, so a header click is a shortcut into the
+                  // builder rather than a second, page-local sort with its own
+                  // rules. That is what makes "priority of a header sort vs. the
+                  // saved view's sort" a non-question: there is one sort.
+                  sort: currentSort,
+                  onSortChange: handleHeaderSort,
                 }
               : {})}
           />
diff --git a/packages/plugin-list/src/__tests__/ListView.headerSort.test.tsx b/packages/plugin-list/src/__tests__/ListView.headerSort.test.tsx
new file mode 100644
index 000000000..02e1c45d0
--- /dev/null
+++ b/packages/plugin-list/src/__tests__/ListView.headerSort.test.tsx
@@ -0,0 +1,188 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * A column-header sort from the child grid becomes THE view's sort (#3106).
+ *
+ * ListView fetches the rows and hands one window down to the grid, so a sort
+ * the grid applied to that window would order fifty rows and claim to have
+ * ordered the list. The header's sort now lands in `currentSort` — the same
+ * state the toolbar's sort builder writes — which makes it a server `$orderby`
+ * over the whole collection.
+ *
+ * Sharing that one state is also what makes "does a header sort outrank the
+ * saved view's sort?" a non-question: there is one sort, with two controls onto
+ * it, so they cannot disagree and there is no precedence to define.
+ *
+ * plugin-grid is not a dependency of plugin-list (that would be a cycle), so
+ * this registers a stub `object-grid` that captures what ListView hands it and
+ * lets the test invoke `onSortChange` — the composition neither package's own
+ * unit tests can reach.
+ */
+import { describe, it, expect, vi, beforeAll, afterAll, beforeEach, afterEach } from 'vitest';
+import { act, cleanup, render, waitFor } from '@testing-library/react';
+import React from 'react';
+import { ComponentRegistry } from '@object-ui/core';
+import { ListView } from '../ListView';
+import { SchemaRendererProvider } from '@object-ui/react';
+import type { ListViewSchema } from '@object-ui/types';
+
+const TOTAL = 3125;
+const PAGE_SIZE = 50;
+
+let lastGridProps: any = null;
+
+function makeDataSource() {
+  const find = vi.fn(async (_object: string, params: any) => {
+    const top = params.$top ?? PAGE_SIZE;
+    const skip = params.$skip ?? 0;
+    const rows = Array.from(
+      { length: Math.max(0, Math.min(top, TOTAL - skip)) },
+      (_, i) => ({ id: `id-${skip + i}`, name: `Row ${skip + i}` }),
+    );
+    return { data: rows, total: TOTAL, hasMore: skip + rows.length < TOTAL };
+  });
+  return {
+    find,
+    findOne: vi.fn(),
+    create: vi.fn(),
+    update: vi.fn(),
+    delete: vi.fn(),
+    getObjectSchema: async (name: string) => ({
+      name,
+      fields: { id: { type: 'text' }, name: { type: 'text' }, status: { type: 'text' } },
+    }),
+  } as any;
+}
+
+const schema: ListViewSchema = {
+  type: 'list-view',
+  objectName: 'task',
+  fields: ['name', 'status'],
+  pagination: { pageSize: PAGE_SIZE },
+} as any;
+
+const lastFindParams = (ds: any) => ds.find.mock.calls[ds.find.mock.calls.length - 1][1];
+
+let prevObjectGrid: any;
+beforeAll(() => {
+  prevObjectGrid = ComponentRegistry.get('object-grid');
+  ComponentRegistry.register('object-grid', (props: any) => {
+    lastGridProps = props;
+    return <div data-testid="grid-stub" />;
+  });
+});
+afterAll(() => {
+  if (prevObjectGrid) ComponentRegistry.register('object-grid', prevObjectGrid);
+  else ComponentRegistry.unregister('object-grid');
+});
+
+beforeEach(() => { lastGridProps = null; });
+afterEach(() => { cleanup(); lastGridProps = null; });
+
+function renderList(ds: any, overrides?: Partial<ListViewSchema>) {
+  return render(
+    <SchemaRendererProvider dataSource={ds}>
+      <ListView schema={{ ...schema, ...overrides } as ListViewSchema} dataSource={ds} />
+    </SchemaRendererProvider>,
+  );
+}
+
+describe('ListView — a column-header sort becomes the view sort (#3106)', () => {
+  it('hands the grid the controlled sort and a way to report one', async () => {
+    const ds = makeDataSource();
+    renderList(ds);
+    await waitFor(() => expect(lastGridProps?.manualPagination).toBe(true));
+    expect(Array.isArray(lastGridProps.sort)).toBe(true);
+    expect(typeof lastGridProps.onSortChange).toBe('function');
+  });
+
+  it('refetches the WHOLE collection with the requested $orderby', async () => {
+    const ds = makeDataSource();
+    renderList(ds);
+    await waitFor(() => expect(typeof lastGridProps?.onSortChange).toBe('function'));
+
+    await act(async () => {
+      lastGridProps.onSortChange([{ field: 'status', order: 'desc' }]);
+    });
+
+    await waitFor(() => {
+      expect(lastFindParams(ds).$orderby).toEqual([{ field: 'status', order: 'desc' }]);
+    });
+  });
+
+  it('returns to page 1 — a new ordering makes the old page a different set of rows', async () => {
+    const ds = makeDataSource();
+    renderList(ds);
+    await waitFor(() => expect(typeof lastGridProps?.onPageChange).toBe('function'));
+
+    await act(async () => { lastGridProps.onPageChange(4); });
+    await waitFor(() => expect(lastFindParams(ds).$skip).toBeGreaterThan(0));
+
+    await act(async () => {
+      lastGridProps.onSortChange([{ field: 'status', order: 'asc' }]);
+    });
+
+    await waitFor(() => {
+      const p = lastFindParams(ds);
+      expect(p.$orderby).toEqual([{ field: 'status', order: 'asc' }]);
+      expect(p.$skip ?? 0).toBe(0);
+    });
+  });
+
+  it('feeds the sort straight back down, so the header renders what the server was asked for', async () => {
+    const ds = makeDataSource();
+    renderList(ds);
+    await waitFor(() => expect(typeof lastGridProps?.onSortChange).toBe('function'));
+
+    await act(async () => {
+      lastGridProps.onSortChange([{ field: 'status', order: 'desc' }]);
+    });
+
+    await waitFor(() => {
+      expect(lastGridProps.sort).toEqual([
+        expect.objectContaining({ field: 'status', order: 'desc' }),
+      ]);
+    });
+  });
+
+  it('REPLACES the view\'s declared sort rather than stacking on it', async () => {
+    const ds = makeDataSource();
+    renderList(ds, { sort: 'name asc' } as any);
+    await waitFor(() => expect(typeof lastGridProps?.onSortChange).toBe('function'));
+
+    await act(async () => {
+      lastGridProps.onSortChange([{ field: 'status', order: 'desc' }]);
+    });
+
+    await waitFor(() => {
+      expect(lastFindParams(ds).$orderby).toEqual([{ field: 'status', order: 'desc' }]);
+    });
+  });
+
+  it('reports the sort through onSortChange, so a host persists it like a builder edit', async () => {
+    // A header sort is not a lesser sort: whatever a host does to remember the
+    // toolbar's sort, it does with this one.
+    const onSortChange = vi.fn();
+    const ds = makeDataSource();
+    render(
+      <SchemaRendererProvider dataSource={ds}>
+        <ListView schema={schema} dataSource={ds} onSortChange={onSortChange} />
+      </SchemaRendererProvider>,
+    );
+    await waitFor(() => expect(typeof lastGridProps?.onSortChange).toBe('function'));
+
+    await act(async () => {
+      lastGridProps.onSortChange([{ field: 'status', order: 'asc' }]);
+    });
+
+    expect(onSortChange).toHaveBeenCalledWith([
+      expect.objectContaining({ field: 'status', order: 'asc' }),
+    ]);
+  });
+});
diff --git a/packages/types/src/data-display.ts b/packages/types/src/data-display.ts
index 1c080ef6c..48d838372 100644
--- a/packages/types/src/data-display.ts
+++ b/packages/types/src/data-display.ts
@@ -198,6 +198,20 @@ export interface ListItem {
   content?: SchemaNode | SchemaNode[];
 }
 
+/**
+ * One key of a table's sort order.
+ *
+ * Structurally the id-less half of `SortItem` in `@object-ui/components` (whose
+ * `id` exists only as a React key for the sort-builder rows), so a `SortItem[]`
+ * is assignable here without conversion. This package takes no dependencies, so
+ * the shared shape is declared rather than imported.
+ */
+export interface TableSortItem {
+  /** Field to sort by — an `accessorKey` of the table's columns. */
+  field: string;
+  order: 'asc' | 'desc';
+}
+
 /**
  * Table column definition
  */
@@ -401,6 +415,50 @@ export interface DataTableSchema extends BaseSchema {
    * Called when the user changes the page size under `manualPagination`.
    */
   onPageSizeChange?: (pageSize: number) => void;
+  /**
+   * Server-side ("manual") sorting. When true the table does NOT sort `data`
+   * locally — it is already in the order the server returned — and a column
+   * header click reports the requested sort through `onSortChange` instead.
+   *
+   * Set this whenever `data` is one window of a larger collection. Sorting a
+   * window locally orders **that page**, which reads on screen as "the list is
+   * sorted by this column" and is not (objectui#3106).
+   *
+   * Deliberately independent of `manualPagination`: a windowed related list
+   * paginates itself (`pagination: false`) while its rows still come from the
+   * server one page at a time.
+   *
+   * The table keeps NO sort state of its own in this mode — `sort` is the only
+   * source of truth, and the header renders and cycles that. A private copy
+   * alongside a controlled prop is how the original defect arose.
+   * @default false
+   */
+  manualSorting?: boolean;
+  /**
+   * The active sort, when `manualSorting` is on. Drives the header indicators
+   * and is the value each header click transforms. Ignored otherwise (the table
+   * owns its sort in client mode).
+   */
+  sort?: TableSortItem[];
+  /**
+   * Called with the sort a header click asks for, when `manualSorting` is on.
+   *
+   * Always exactly one key: a header click REPLACES the order rather than
+   * appending to it, so the column under the cursor is the one the list is
+   * sorted by. Multi-key sorts come from a host's own sort builder, and the
+   * header renders them (numbered) without being able to produce one.
+   *
+   * Never empty. In client mode the third click clears the sort, which is
+   * meaningful there — the rows return to the order they arrived in. Against a
+   * server-paged collection there is no such order to return to: an unsorted
+   * paged read is arbitrary per page (objectstack#4363), so offering it from a
+   * header would hand the user a worse lie than the one being fixed. Removing
+   * a sort entirely stays with the host's sort builder.
+   *
+   * Without this callback the headers render inert (no cursor, no icons) rather
+   * than accepting clicks that go nowhere.
+   */
+  onSortChange?: (sort: TableSortItem[]) => void;
   /**
    * Enable search
    * @default true
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index b1f52fc89..434c8dd4e 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -157,6 +157,7 @@ export type {
   ListSchema,
   ListItem,
   TableColumn,
+  TableSortItem,
   TableSchema,
   DataTableSchema,
   MarkdownSchema,