diff --git a/apps/benchmark/package.json b/apps/benchmark/package.json
index 1735770..80efd6c 100644
--- a/apps/benchmark/package.json
+++ b/apps/benchmark/package.json
@@ -7,6 +7,6 @@
     "start": "bun src/main.ts"
   },
   "dependencies": {
-    "@profullstack/hqtui": "^0.10.3"
+    "@profullstack/hqtui": "^0.11.0"
   }
 }
diff --git a/apps/demo/package.json b/apps/demo/package.json
index 0f5df99..b24abcd 100644
--- a/apps/demo/package.json
+++ b/apps/demo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@profullstack/hqtui-demo",
-  "version": "0.10.3",
+  "version": "0.11.0",
   "description": "The HQTUI reference dashboard: a btop-grade terminal system monitor. Runs on real system metrics or a deterministic simulation.",
   "license": "MIT",
   "type": "module",
@@ -27,7 +27,7 @@
     "audit:scroll": "bun scripts/scrollaudit.ts"
   },
   "dependencies": {
-    "@profullstack/hqtui": "^0.10.3"
+    "@profullstack/hqtui": "^0.11.0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/apps/demo/src/main.ts b/apps/demo/src/main.ts
index a3edd8c..41d0a03 100755
--- a/apps/demo/src/main.ts
+++ b/apps/demo/src/main.ts
@@ -52,7 +52,7 @@ function parseArgs(argv: string[]): Options {
       case "-h":
       case "--help": printHelp(); process.exit(0);
       case "-v":
-      case "--version": console.log("hqtui-demo 0.10.3"); process.exit(0);
+      case "--version": console.log("hqtui-demo 0.11.0"); process.exit(0);
     }
   }
   return options;
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 07c6556..da1ee92 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -170,7 +170,7 @@ export default async function Home() {
               High Quality Terminal UI for TypeScript, Rust, Go, Python, Zig and C++
             </p>
             <Badge variant="secondary" className="mb-5 font-mono text-xs">
-              v0.10.3 · {COUNT} language demos · MIT
+              v0.11.0 · {COUNT} language demos · MIT
             </Badge>
             <p className="text-balance text-3xl font-bold tracking-tight sm:text-5xl">
               Terminal dashboards that
diff --git a/apps/web/package.json b/apps/web/package.json
index 3e24cd6..4475082 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -10,7 +10,7 @@
   "dependencies": {
     "@base-ui/react": "1.7.0",
     "@profullstack/footer": "latest",
-    "@profullstack/hqtui": "^0.10.3",
+    "@profullstack/hqtui": "^0.11.0",
     "@profullstack/libsql-pg": "^0.1.3",
     "@profullstack/x402-gateway": "^0.11.0",
     "class-variance-authority": "0.7.1",
diff --git a/bun.lock b/bun.lock
index d9d7a95..effc017 100644
--- a/bun.lock
+++ b/bun.lock
@@ -21,12 +21,12 @@
     },
     "apps/demo": {
       "name": "@profullstack/hqtui-demo",
-      "version": "0.10.3",
+      "version": "0.11.0",
       "bin": {
         "hqtui-demo": "./bin/hqtui-demo.mjs",
       },
       "dependencies": {
-        "@profullstack/hqtui": "^0.10.3",
+        "@profullstack/hqtui": "^0.11.0",
       },
     },
     "apps/web": {
@@ -35,7 +35,7 @@
       "dependencies": {
         "@base-ui/react": "1.7.0",
         "@profullstack/footer": "latest",
-        "@profullstack/hqtui": "^0.10.3",
+        "@profullstack/hqtui": "^0.11.0",
         "@profullstack/libsql-pg": "^0.1.3",
         "@profullstack/x402-gateway": "^0.11.0",
         "class-variance-authority": "0.7.1",
@@ -61,12 +61,12 @@
       "name": "@profullstack/hqtui-examples",
       "version": "0.1.0",
       "dependencies": {
-        "@profullstack/hqtui": "^0.10.3",
+        "@profullstack/hqtui": "^0.11.0",
       },
     },
     "packages/hqtui": {
       "name": "@profullstack/hqtui",
-      "version": "0.10.3",
+      "version": "0.11.0",
       "bin": {
         "hqtui": "./bin/hqtui.mjs",
       },
diff --git a/examples/package.json b/examples/package.json
index 34150e4..7e5e3c7 100644
--- a/examples/package.json
+++ b/examples/package.json
@@ -4,6 +4,6 @@
   "version": "0.1.0",
   "type": "module",
   "dependencies": {
-    "@profullstack/hqtui": "^0.10.3"
+    "@profullstack/hqtui": "^0.11.0"
   }
 }
diff --git a/packages/hqtui/README.md b/packages/hqtui/README.md
index 788a087..93da4ad 100644
--- a/packages/hqtui/README.md
+++ b/packages/hqtui/README.md
@@ -105,13 +105,38 @@ activity, sessions, services and the full widget catalogue.
 | | |
 |---|---|
 | **Layout** | rows, columns, grid with spans, `"40%"`, `"2fr"`, `auto`, min/max, padding, gaps, clipping, responsive breakpoints |
-| **Widgets** | panel, table, tree, list, log viewer, key/values, meter, gauge, donut, progress, sparkline, line/area/multi-series graph, histogram, heat bar, tabs, status bar, button, checkbox, toggle, radio, select, text input, modal, command palette, tooltip, badge, spinner, divider |
+| **Widgets** | panel, table, data grid, tree, list, log viewer, key/values, meter, gauge, donut, progress, sparkline, line/area/multi-series graph, histogram, heat bar, tabs, status bar, button, checkbox, toggle, radio, select, text input, modal, command palette, tooltip, badge, spinner, divider |
 | **Graphics** | Braille canvas (2×4 pixels per cell), block/half-block/quadrant/ASCII modes, gradients, software alpha blending |
 | **Color** | 24-bit truecolor, automatic 256 and 16-colour quantization, `NO_COLOR`, monochrome and high-contrast modes |
 | **Themes** | dark (default), dracula, nord, tokyo night, gruvbox, matrix, monochrome, high contrast, light — plus `defineTheme()` |
 | **Input** | normalized keys with modifiers, SGR mouse (click, drag, scroll, move), bracketed paste, focus events, Tab focus traversal |
 | **Testing** | headless renderer: `renderToText`, `renderToScreen`, `renderToAnsi`, `renderToHtml` — no TTY required |
 
+## Data grid
+
+`table` fits every column into the width. A **data grid** keeps each column readable
+and scrolls on both axes instead: a frozen header, a row-number gutter, a cell cursor,
+a sort marker, and arrows when columns are off to either side. It is the widget a CSV
+viewer, a query result or a wide log needs.
+
+```ts
+ui.dataGrid({
+  columns: header.map((title) => ({ title })),
+  rows,                        // string[][], parsed however you like
+  order,                       // optional: row indices, sorted/filtered, never copied
+  selectedRow, selectedColumn, // the cursor; the grid scrolls to keep it on screen
+  sort: { column: 2, descending: true },
+  onSelectCell: (row, column) => { selectedRow = row; selectedColumn = column; },
+  onHeaderClick: (column) => toggleSort(column),
+  onScroll: (delta) => { selectedRow += delta * 3; },
+});
+```
+
+The grid only draws: parsing, sorting and filtering stay with the caller, which keeps
+the library free of dependencies. `onLayout` reports what fit (`capacity`, visible
+columns) so page keys move by a real screenful. `dataGridWidths`, `dataGridLayout` and
+`dataGridCellAt` are exported for callers that draw their own.
+
 ## Icons
 
 The [OpenIcon](https://logicsrc.com/openicon) pack is built in and on by
diff --git a/packages/hqtui/package.json b/packages/hqtui/package.json
index 67e5ad3..9ba5a67 100644
--- a/packages/hqtui/package.json
+++ b/packages/hqtui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@profullstack/hqtui",
-  "version": "0.10.3",
+  "version": "0.11.0",
   "description": "High Quality Terminal UI for TypeScript. btop-grade dashboards with a one-import API, dark by default, zero runtime dependencies.",
   "license": "MIT",
   "type": "module",
diff --git a/packages/hqtui/src/cli.ts b/packages/hqtui/src/cli.ts
index b799751..2193724 100644
--- a/packages/hqtui/src/cli.ts
+++ b/packages/hqtui/src/cli.ts
@@ -14,7 +14,7 @@ import { detectCapabilities } from "./capabilities.ts";
 import { themeList, themes } from "./theme.ts";
 import { BrailleCanvas } from "./graphics/braille.ts";
 
-const VERSION = "0.10.3";
+const VERSION = "0.11.0";
 
 function help(): void {
   console.log(`hqtui ${VERSION} — High Quality Terminal UI for TypeScript
diff --git a/packages/hqtui/src/index.ts b/packages/hqtui/src/index.ts
index 6a79f2e..825f5af 100644
--- a/packages/hqtui/src/index.ts
+++ b/packages/hqtui/src/index.ts
@@ -16,7 +16,7 @@
 export { App, createApp, type AppOptions, type RenderArgs, type RenderFn, type FrameStats } from "./app.ts";
 export { Container, GridContainer } from "./ui.ts";
 export type {
-  RenderContext, ContainerOptions, PanelOptions, GridOptions, CellOptions, HitRegion, HitEvent, ScrollHandlers, MarkdownCopy,
+  RenderContext, ContainerOptions, PanelOptions, GridOptions, CellOptions, HitRegion, HitEvent, ScrollHandlers, DataGridHandlers, MarkdownCopy,
 } from "./ui.ts";
 export { dispatchHit, countClicks, DOUBLE_CLICK_MS } from "./ui.ts";
 
diff --git a/packages/hqtui/src/ui.ts b/packages/hqtui/src/ui.ts
index 3a62723..dece21e 100644
--- a/packages/hqtui/src/ui.ts
+++ b/packages/hqtui/src/ui.ts
@@ -128,6 +128,18 @@ export interface RenderContext {
 }
 
 /** Mouse behaviour shared by every scrollable widget. */
+export interface DataGridHandlers {
+  /** Wheel over the grid. `delta` is -1 up, 1 down. */
+  onScroll?: (delta: number) => void;
+  /** Click on a body cell: its position in the displayed order, and its column (-1 on the gutter). */
+  onSelectCell?: (row: number, column: number) => void;
+  /** Double-click on a body cell, after `onSelectCell` for the same press. */
+  onActivateCell?: (row: number, column: number) => void;
+  /** Click on a column title. */
+  onHeaderClick?: (column: number) => void;
+  onFocus?: () => void;
+}
+
 export interface ScrollHandlers {
   /** Wheel over this widget. `delta` is -1 up, 1 down. */
   onScroll?: (delta: number) => void;
@@ -533,6 +545,36 @@ export class Container {
     }, this.sizeOf(options, "fill", intrinsic));
   }
 
+  /**
+   * A data grid (widgets/data-grid.ts): cells that scroll on both axes under
+   * a cell cursor. Clicks are reported as cells, in the displayed order, so a
+   * sorted or filtered view needs no translating; a header click names the
+   * column, which is where a sort toggle goes.
+   */
+  dataGrid(options: W.DataGridOptions & ContainerOptions & DataGridHandlers): this {
+    return this.add((s) => {
+      const frame = W.drawDataGrid(s, options);
+      const { onScroll, onSelectCell, onActivateCell, onHeaderClick, onFocus } = options;
+      if (!onScroll && !onSelectCell && !onActivateCell && !onHeaderClick && !onFocus) return;
+      this.ctx.hit({
+        rect: s.hitRect(),
+        onScroll: onScroll ? (delta) => onScroll(delta) : undefined,
+        onClick: (x, y, _button, clicks = 1) => {
+          onFocus?.();
+          const column = W.dataGridCellAt(frame, x);
+          if (y === 0) {
+            if (column >= 0) onHeaderClick?.(column);
+            return;
+          }
+          const row = frame.rowOffset + y - 1;
+          if (row >= frame.total) return;
+          onSelectCell?.(row, column);
+          if (clicks >= 2) onActivateCell?.(row, column);
+        },
+      });
+    }, this.sizeOf(options, "fill", (options.order?.length ?? options.rows.length) + 1));
+  }
+
   list(options: W.ListOptions & ContainerOptions & ScrollHandlers): this {
     return this.add((s) => {
       W.drawList(s, options);
diff --git a/packages/hqtui/src/widgets/data-grid.ts b/packages/hqtui/src/widgets/data-grid.ts
new file mode 100644
index 0000000..0bd1302
--- /dev/null
+++ b/packages/hqtui/src/widgets/data-grid.ts
@@ -0,0 +1,262 @@
+import type { Align, Surface } from "../surface.ts";
+import { Attr } from "../buffer.ts";
+import type { Color } from "../color.ts";
+import { mix } from "../color.ts";
+import { fit, stringWidth, truncate } from "../unicode.ts";
+import { elevate } from "../theme.ts";
+import { drawScrollbar } from "./scrollbar.ts";
+import { hoverBg, resolveOffset } from "./table.ts";
+
+/**
+ * A data grid: rows and columns of text that scroll on both axes, with a cell
+ * cursor, a frozen header, a row-number gutter and a sort marker. It is what a
+ * CSV viewer, a query result or a log table needs and `table` is not: `table`
+ * fits every column into the width, a grid keeps each column readable and lets
+ * the ones that do not fit scroll in from the side.
+ *
+ * The grid only draws. Parsing, sorting and filtering belong to the caller,
+ * which hands over the cells as strings and, optionally, `order`: the row
+ * indices to show, in the order to show them. A sorted, filtered view of a
+ * 100,000-row file is then one index array, and the rows are never copied.
+ */
+export interface DataGridColumn {
+  title: string;
+  align?: Align;
+  /** A fixed width, in cells. Otherwise the column is as wide as its widest sampled value. */
+  width?: number;
+  /** Cap for a measured width. Defaults to the grid's `maxColumnWidth`. */
+  max?: number;
+  color?: Color;
+}
+
+export interface DataGridOptions {
+  columns: DataGridColumn[];
+  /** Row-major cell text. A short row is drawn with empty cells. */
+  rows: readonly (readonly string[])[];
+  /** Indices into `rows` to show, in display order. Defaults to every row in order. */
+  order?: readonly number[];
+  /** The cursor: a position in the displayed order, and a column index. -1 hides it. */
+  selectedRow?: number;
+  selectedColumn?: number;
+  /** First displayed row and first column drawn after the gutter. */
+  rowOffset?: number;
+  columnOffset?: number;
+  /** Scroll so the cursor cell stays on screen. Default true. */
+  followSelection?: boolean;
+  /** A gutter with each row's 1-based number in `rows`, so a sorted row still says where it came from. Default true. */
+  rowNumbers?: boolean;
+  /** Marks a column header ▲ or ▼. */
+  sort?: { column: number; descending?: boolean } | null;
+  /** Widest a measured column may grow. Default 40. */
+  maxColumnWidth?: number;
+  /** Rows sampled when measuring column widths. Default 1,000. */
+  sample?: number;
+  zebra?: boolean;
+  scrollbar?: boolean;
+  headerColor?: Color;
+  /** The displayed row under the mouse. */
+  hovered?: number;
+  /** Told what was drawn, so a caller can page by a screenful and map its own clicks. */
+  onLayout?: (layout: DataGridFrame) => void;
+}
+
+export interface DataGridSlot {
+  /** Column index. */
+  index: number;
+  /** Left edge inside the grid, in cells. */
+  x: number;
+  width: number;
+}
+
+export interface DataGridLayout {
+  /** Gutter width, separator included; 0 without row numbers. */
+  gutter: number;
+  /** The first column drawn, after any adjustment to keep the cursor visible. */
+  columnOffset: number;
+  slots: DataGridSlot[];
+  /** Columns exist to the left or right of what is drawn. */
+  more: { left: boolean; right: boolean };
+}
+
+export interface DataGridFrame extends DataGridLayout {
+  rowOffset: number;
+  /** Body rows that fit, header excluded. */
+  capacity: number;
+  /** Rows in the displayed order. */
+  total: number;
+}
+
+const SEPARATOR = "│";
+const widthCache = new WeakMap<object, { key: string; widths: number[] }>();
+
+/**
+ * Natural column widths: the widest of the title and a sample of the cells,
+ * capped. Measured once per `rows` array and cached, because a frame is drawn
+ * far more often than a file is opened.
+ */
+export function dataGridWidths(
+  columns: readonly DataGridColumn[],
+  rows: readonly (readonly string[])[],
+  options: { maxColumnWidth?: number; sample?: number; order?: readonly number[] } = {},
+): number[] {
+  const cap = options.maxColumnWidth ?? 40;
+  const sample = options.sample ?? 1000;
+  const key = `${columns.length}:${cap}:${sample}:${columns.map((c) => `${c.title}/${c.width ?? ""}/${c.max ?? ""}`).join("|")}`;
+  const cached = widthCache.get(rows);
+  if (cached && cached.key === key) return cached.widths;
+  // Sample evenly through the file rather than only its top, so a long value
+  // near the end still gets a column that shows it.
+  const step = Math.max(1, Math.floor(rows.length / sample));
+  const widths = columns.map((column, c) => {
+    if (column.width !== undefined) return Math.max(1, column.width);
+    let widest = stringWidth(column.title) + 2; // room for the sort marker
+    for (let r = 0; r < rows.length; r += step) {
+      const cell = rows[r]?.[c];
+      if (cell) widest = Math.max(widest, stringWidth(firstLine(cell)));
+    }
+    return Math.max(1, Math.min(widest, column.max ?? cap));
+  });
+  widthCache.set(rows, { key, widths });
+  return widths;
+}
+
+/**
+ * Which columns fit in `width`, starting at `columnOffset` and nudged just far
+ * enough that `selectedColumn` is fully on screen. The last visible column is
+ * cut short rather than dropped, so the space is never wasted on blank.
+ */
+export function dataGridLayout(
+  width: number,
+  widths: readonly number[],
+  options: { columnOffset?: number; selectedColumn?: number; gutter?: number; follow?: boolean } = {},
+): DataGridLayout {
+  const gutter = options.gutter ?? 0;
+  const room = Math.max(0, width - gutter);
+  const count = widths.length;
+  let start = Math.max(0, Math.min(options.columnOffset ?? 0, Math.max(0, count - 1)));
+  const selected = options.selectedColumn ?? -1;
+  const span = (from: number, to: number): number => {
+    let total = 0;
+    for (let i = from; i <= to; i++) total += (widths[i] ?? 0) + (i > from ? 1 : 0);
+    return total;
+  };
+  if (options.follow !== false && selected >= 0 && selected < count) {
+    if (selected < start) start = selected;
+    else while (start < selected && span(start, selected) > room) start++;
+  }
+  // Scrolled further right than needed: pull back so the right edge is used.
+  while (start > 0 && span(start - 1, count - 1) <= room) start--;
+
+  const slots: DataGridSlot[] = [];
+  let x = gutter;
+  for (let i = start; i < count && x < width; i++) {
+    const w = Math.min(widths[i] ?? 0, width - x);
+    if (w <= 0) break;
+    slots.push({ index: i, x, width: w });
+    x += w + 1;
+  }
+  const last = slots.at(-1);
+  return {
+    gutter,
+    columnOffset: start,
+    slots,
+    more: { left: start > 0, right: !!last && (last.index < count - 1 || last.width < (widths[last.index] ?? 0)) },
+  };
+}
+
+/** The column under grid column `x`, or -1 over the gutter or a separator. */
+export function dataGridCellAt(layout: DataGridLayout, x: number): number {
+  for (const slot of layout.slots) if (x >= slot.x && x < slot.x + slot.width) return slot.index;
+  return -1;
+}
+
+const firstLine = (text: string): string => {
+  const at = text.search(/[\r\n]/);
+  // A multi-line cell shows its first line and a marker, never a broken row.
+  return at < 0 ? text.replace(/\t/g, " ") : `${text.slice(0, at).replace(/\t/g, " ")}↵`;
+};
+
+export function gutterWidth(rows: number): number {
+  return String(Math.max(1, rows)).length + 2;
+}
+
+export function drawDataGrid(surface: Surface, options: DataGridOptions): DataGridFrame {
+  const theme = surface.theme;
+  const order = options.order;
+  const total = order ? order.length : options.rows.length;
+  const scrollbar = options.scrollbar ?? false;
+  const width = surface.width - (scrollbar ? 1 : 0);
+  const gutter = options.rowNumbers === false ? 0 : gutterWidth(options.rows.length);
+  const widths = dataGridWidths(options.columns, options.rows, options);
+  const follow = options.followSelection !== false;
+  const layout = dataGridLayout(width, widths, {
+    columnOffset: options.columnOffset,
+    selectedColumn: options.selectedColumn,
+    gutter,
+    follow,
+  });
+  const capacity = Math.max(0, surface.height - 1);
+  const selectedRow = options.selectedRow ?? -1;
+  const rowOffset = resolveOffset(options.rowOffset, selectedRow >= 0 ? selectedRow : undefined, capacity, total, follow);
+  const frame: DataGridFrame = { ...layout, rowOffset, capacity, total };
+  if (surface.empty) {
+    options.onLayout?.(frame);
+    return frame;
+  }
+
+  const rule = mix(theme.border, theme.foreground, 0.15);
+  const headerBg = elevate(theme, 0.06);
+  const zebraBg = options.zebra ? elevate(theme, 0.03) : undefined;
+  const selectedColumn = options.selectedColumn ?? -1;
+
+  // Header: frozen, with the sort marker and arrows for columns off screen.
+  surface.fillRect(0, 0, width, 1, { bg: headerBg });
+  if (gutter) surface.text(0, 0, fit(layout.more.left ? "‹" : "#", gutter - 1, "right"), { fg: theme.muted, bg: headerBg });
+  for (const slot of layout.slots) {
+    const column = options.columns[slot.index]!;
+    const sorted = options.sort && options.sort.column === slot.index ? (options.sort.descending ? " ▼" : " ▲") : "";
+    const room = Math.max(0, slot.width - stringWidth(sorted));
+    const title = fit(truncate(column.title, room), room, column.align ?? "left") + sorted;
+    surface.text(slot.x, 0, title, {
+      fg: slot.index === selectedColumn ? theme.accent : options.headerColor ?? theme.title,
+      bg: headerBg,
+      attrs: Attr.Bold,
+    });
+    surface.text(slot.x + slot.width, 0, SEPARATOR, { fg: rule, bg: headerBg });
+  }
+  if (layout.more.right) surface.text(width - 1, 0, "›", { fg: theme.muted, bg: headerBg, attrs: Attr.Bold });
+
+  for (let i = 0; i < capacity; i++) {
+    const position = rowOffset + i;
+    if (position >= total) break;
+    const index = order ? order[position]! : position;
+    const row = options.rows[index] ?? [];
+    const y = i + 1;
+    const selected = position === selectedRow;
+    const hovered = !selected && options.hovered === position;
+    const bg = selected
+      ? theme.selection
+      : hovered
+        ? hoverBg(theme)
+        : zebraBg && position % 2 === 1
+          ? zebraBg
+          : undefined;
+    if (bg !== undefined) surface.fillRect(0, y, width, 1, { bg });
+    if (gutter) surface.text(0, y, fit(String(index + 1), gutter - 1, "right"), { fg: selected ? theme.accent : theme.muted, bg });
+    for (const slot of layout.slots) {
+      const column = options.columns[slot.index]!;
+      const cell = fit(truncate(firstLine(row[slot.index] ?? ""), slot.width), slot.width, column.align ?? "left");
+      const cursor = selected && slot.index === selectedColumn;
+      surface.text(slot.x, y, cell, {
+        fg: cursor ? theme.background : selected ? theme.selectionText : column.color ?? theme.foreground,
+        bg: cursor ? theme.cursor : bg,
+        attrs: cursor || selected ? Attr.Bold : 0,
+      });
+      surface.text(slot.x + slot.width, y, SEPARATOR, { fg: rule, bg });
+    }
+  }
+
+  if (scrollbar && total > capacity && capacity > 0) drawScrollbar(surface, surface.width - 1, 1, capacity, total, rowOffset);
+  options.onLayout?.(frame);
+  return frame;
+}
diff --git a/packages/hqtui/src/widgets/index.ts b/packages/hqtui/src/widgets/index.ts
index 631eb72..1bea5f6 100644
--- a/packages/hqtui/src/widgets/index.ts
+++ b/packages/hqtui/src/widgets/index.ts
@@ -10,3 +10,4 @@ export * from "./meters.ts";
 export * from "./controls.ts";
 export * from "./spinner.ts";
 export * from "./emoji-picker.ts";
+export * from "./data-grid.ts";
diff --git a/packages/hqtui/test/data-grid.test.ts b/packages/hqtui/test/data-grid.test.ts
new file mode 100644
index 0000000..c271691
--- /dev/null
+++ b/packages/hqtui/test/data-grid.test.ts
@@ -0,0 +1,95 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { renderToScreen } from "../src/index.ts";
+import { dataGridCellAt, dataGridLayout, dataGridWidths, type DataGridOptions } from "../src/widgets/data-grid.ts";
+
+const columns = [{ title: "name" }, { title: "city" }, { title: "age", align: "right" as const }];
+const rows = [
+  ["Ada", "London", "36"],
+  ["Grace", "Arlington", "85"],
+  ["Linus", "Helsinki", "54"],
+];
+
+const grid = (options: Partial<DataGridOptions> = {}, width = 40, height = 6) =>
+  renderToScreen(({ ui }) => ui.dataGrid({ columns, rows, ...options }), { width, height });
+
+test("dataGrid: a header, a row-number gutter and one line per row", () => {
+  const screen = grid();
+  assert.match(screen.line(0), /#\s+name\s+│\s*city\s+│\s+age│/);
+  assert.match(screen.line(1), /^\s*1 Ada\s+│London\s+│\s+36│/);
+  assert.match(screen.line(3), /^\s*3 Linus/);
+});
+
+test("dataGrid: order shows a sorted view and the gutter keeps each row's own number", () => {
+  const screen = grid({ order: [2, 0], sort: { column: 0, descending: true } });
+  assert.match(screen.line(0), /name ▼/);
+  assert.match(screen.line(1), /^\s*3 Linus/);
+  assert.match(screen.line(2), /^\s*1 Ada/);
+  assert.equal(screen.line(3).trim(), "");
+});
+
+test("dataGrid: widths are the widest sampled value, capped", () => {
+  assert.deepEqual(dataGridWidths(columns, rows), [6, 9, 5]);
+  const long = [["x".repeat(200), "a", "1"]];
+  assert.equal(dataGridWidths(columns, long, { maxColumnWidth: 12 })[0], 12);
+  assert.equal(dataGridWidths([{ title: "n", width: 3 }], long)[0], 3);
+});
+
+test("dataGrid: the layout scrolls just far enough to show the cursor column", () => {
+  const widths = [10, 10, 10, 10, 10];
+  const start = dataGridLayout(25, widths, { gutter: 3 });
+  assert.equal(start.columnOffset, 0);
+  assert.deepEqual(start.more, { left: false, right: true });
+  const right = dataGridLayout(25, widths, { gutter: 3, selectedColumn: 3 });
+  assert.equal(right.columnOffset, 2);
+  assert.ok(right.slots.some((slot) => slot.index === 3 && slot.width === 10));
+  // Coming back left, the cursor column becomes the first one.
+  assert.equal(dataGridLayout(25, widths, { gutter: 3, selectedColumn: 1, columnOffset: 3 }).columnOffset, 1);
+  // Never scrolled past where the last column is already in view.
+  assert.equal(dataGridLayout(25, widths, { columnOffset: 4 }).columnOffset, 3);
+});
+
+test("dataGrid: a cell maps back from a screen column", () => {
+  const layout = dataGridLayout(40, [6, 9, 5], { gutter: 3 });
+  assert.equal(dataGridCellAt(layout, 0), -1);
+  assert.equal(dataGridCellAt(layout, 3), 0);
+  assert.equal(dataGridCellAt(layout, 9), -1, "the separator is not a cell");
+  assert.equal(dataGridCellAt(layout, 10), 1);
+});
+
+test("dataGrid: rows follow the cursor down", () => {
+  const many = Array.from({ length: 50 }, (_, i) => [`n${i}`, "c", String(i)]);
+  let frame: { rowOffset: number; capacity: number } | undefined;
+  const screen = renderToScreen(
+    ({ ui }) => ui.dataGrid({ columns, rows: many, selectedRow: 30, selectedColumn: 0, onLayout: (f) => (frame = f) }),
+    { width: 40, height: 6 },
+  );
+  assert.equal(frame?.capacity, 5);
+  assert.equal(frame?.rowOffset, 26);
+  assert.match(screen.line(5), /^\s*31 n30/);
+});
+
+test("dataGrid: clicks land on cells, double-clicks activate, the header sorts", () => {
+  const events: string[] = [];
+  const screen = renderToScreen(
+    ({ ui }) =>
+      ui.dataGrid({
+        columns,
+        rows,
+        onSelectCell: (row, column) => events.push(`select ${row},${column}`),
+        onActivateCell: (row, column) => events.push(`open ${row},${column}`),
+        onHeaderClick: (column) => events.push(`sort ${column}`),
+      }),
+    { width: 40, height: 6 },
+  );
+  assert.ok(screen.click(11, 2));
+  assert.ok(screen.click(4, 3, { clicks: 2 }));
+  assert.ok(screen.click(21, 0));
+  assert.ok(screen.click(4, 5), "a click below the last row is swallowed, not misread");
+  assert.deepEqual(events, ["select 1,1", "select 2,0", "open 2,0", "sort 2"]);
+});
+
+test("dataGrid: a multi-line cell shows its first line and a marker", () => {
+  const screen = grid({ rows: [["two\nlines", "x", "1"]] });
+  assert.match(screen.line(1), /two↵/);
+});
diff --git a/ports/nim/hqtui.nimble b/ports/nim/hqtui.nimble
index 63e175c..76a8242 100644
--- a/ports/nim/hqtui.nimble
+++ b/ports/nim/hqtui.nimble
@@ -1,6 +1,6 @@
 # Package
 
-version       = "0.10.3"
+version       = "0.11.0"
 author        = "HQTUI contributors"
 description   = "Terminal UI widgets and the ten-screen HQTUI dashboard for Nim, over HQTUI's shared native engine (compiled from source)"
 license       = "MIT"
diff --git a/ports/nim/src/hqtui.nim b/ports/nim/src/hqtui.nim
index 8788057..b3bedf9 100644
--- a/ports/nim/src/hqtui.nim
+++ b/ports/nim/src/hqtui.nim
@@ -6,7 +6,7 @@
 import std/[json, os, strutils]
 export json
 
-const version* = "0.10.3"
+const version* = "0.11.0"
 
 const
   engine = currentSourcePath().parentDir / "hqtui" / "engine"