Data grid

"use client";

import { useId, useLayoutEffect, useMemo, useRef, useState } from "react";
import type {
  ComponentProps,
  CSSProperties,
  FocusEvent,
  KeyboardEvent,
  MouseEvent,
  PointerEvent,
  ReactNode,
  UIEvent,
} from "react";
import "./data-grid.css";

export type DataGridColumn<T> = {
  key: string;
  header: string;
  align?: "start" | "center" | "end";
  sortable?: boolean;
  /** Starting width in pixels. Columns without one share the remaining space. */
  width?: number;
  /** Renders the cell. Without it the cell shows the row's value for key. */
  render?: (row: T) => ReactNode;
  /** Turns the value into text when there is no render. The dataGridFormat helpers build these. */
  format?: (value: unknown, row: T) => string;
  /** Keeps the column in view while the grid scrolls sideways. */
  pin?: "start" | "end";
  /** Lets people edit the cell in place with Enter, F2, typing or a double click. */
  editable?: boolean | ((row: T) => boolean);
  /** The input the editor shows. A number editor commits a number. */
  editor?: "text" | "number";
};

export type DataGridSort = { key: string; direction: "ascending" | "descending" } | null;

export type DataGridCellChange<T> = {
  rowKey: string;
  column: string;
  value: string | number;
  row: T;
};

export type DataGridProps<T> = Omit<ComponentProps<"table">, "children"> & {
  /** Names the grid for assistive tech. */
  label: string;
  columns: DataGridColumn<T>[];
  rows: T[];
  rowKey: (row: T) => string;
  selectable?: "none" | "single" | "multiple";
  selected?: string[];
  defaultSelected?: string[];
  onSelectedChange?: (keys: string[]) => void;
  sort?: DataGridSort;
  defaultSort?: DataGridSort;
  onSortChange?: (sort: DataGridSort) => void;
  /** Caps the height and scrolls the body under a sticky header. */
  maxHeight?: number | string;
  /** Shown when there are no rows. */
  empty?: ReactNode;
  dense?: boolean;
  /** Keys of columns to leave out. The columns keep their definitions, widths and order. */
  hiddenColumns?: string[];
  /** Content of the detail panel under a row. Having it adds a column of expand buttons. */
  renderDetail?: (row: T) => ReactNode;
  /** Controlled keys of rows whose detail panel is open. */
  expanded?: string[];
  defaultExpanded?: string[];
  onExpandedChange?: (keys: string[]) => void;
  /** Groups rows under collapsible headers, by a column key or a function of the row. */
  groupBy?: string | ((row: T) => string);
  /** Content of a group header. Defaults to the group's value. */
  groupLabel?: (group: string, rows: T[]) => ReactNode;
  /** Controlled list of collapsed groups. */
  collapsedGroups?: string[];
  defaultCollapsedGroups?: string[];
  onCollapsedGroupsChange?: (groups: string[]) => void;
  /** Called when an edit is committed with a changed value. Update rows to keep it. */
  onCellChange?: (change: DataGridCellChange<T>) => void;
  /** Shows skeleton rows and sets aria-busy. */
  loading?: boolean;
  /** How many skeleton rows to show while loading. */
  loadingRows?: number;
  /** Shown instead of the rows, announced as an alert. Takes the place of the empty state. */
  error?: ReactNode;
  /** Renders only the rows in view. Rows must be one line tall. */
  windowed?: boolean;
};

const MIN_WIDTH = 48;
const MAX_WIDTH = 640;
/** Rows rendered beyond each edge of the view when windowed, so fast scrolling stays filled. */
const OVERSCAN = 8;
/** Height a windowed grid takes when no maxHeight is given. */
const WINDOW_HEIGHT = 480;

function valueOf(row: object, key: string): unknown {
  return (row as Record<string, unknown>)[key];
}

function isBlank(v: unknown) {
  return v == null || v === "";
}

function compare(a: unknown, b: unknown, collator: Intl.Collator) {
  if (typeof a === "number" && typeof b === "number") return a - b;
  if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
  return collator.compare(String(a), String(b));
}

function nextSort(current: DataGridSort, key: string): DataGridSort {
  if (current?.key !== key) return { key, direction: "ascending" };
  if (current.direction === "ascending") return { key, direction: "descending" };
  return null;
}

function clamp(n: number, min: number, max: number) {
  return Math.min(max, Math.max(min, n));
}

function formatNumber(options: Intl.NumberFormatOptions = {}, locale = "en-US") {
  const f = new Intl.NumberFormat(locale, options);
  return (value: unknown) =>
    typeof value === "number" && Number.isFinite(value) ? f.format(value) : isBlank(value) ? "" : String(value);
}

function formatDate(options: Intl.DateTimeFormatOptions = { dateStyle: "medium" }, locale = "en-US") {
  // UTC by default, so a date-only string shows the same day on the server and in every browser.
  const f = new Intl.DateTimeFormat(locale, { timeZone: "UTC", ...options });
  return (value: unknown) => {
    if (isBlank(value)) return "";
    const date = value instanceof Date ? value : new Date(value as string | number);
    return Number.isNaN(date.getTime()) ? String(value) : f.format(date);
  };
}

/**
 * Builds column formatters. Each takes an explicit locale (en-US unless given) so the
 * server and the browser print the same text.
 */
export const dataGridFormat = {
  number: formatNumber,
  currency: (currency: string, locale = "en-US") => formatNumber({ style: "currency", currency }, locale),
  percent: (digits = 0, locale = "en-US") =>
    formatNumber({ style: "percent", minimumFractionDigits: digits, maximumFractionDigits: digits }, locale),
  date: formatDate,
};

type Line<T> =
  | { kind: "row"; row: T; key: string }
  | { kind: "detail"; row: T; key: string }
  | { kind: "group"; group: string; rows: T[]; collapsed: boolean };

type Editing = { key: string; col: string; r: number; c: number; draft: string; invalid: boolean; typed: boolean };

function alignOf(col: { align?: "start" | "center" | "end" } | undefined) {
  return col?.align && col.align !== "start" ? col.align : undefined;
}

/** Makes a row key safe to use inside an id reference. */
function idPart(key: string) {
  return key.replace(/[^\w-]/g, "_");
}

export function DataGrid<T extends object>({
  label,
  columns,
  rows,
  rowKey,
  selectable = "none",
  selected,
  defaultSelected,
  onSelectedChange,
  sort,
  defaultSort = null,
  onSortChange,
  maxHeight,
  empty = "No records",
  dense = false,
  hiddenColumns,
  renderDetail,
  expanded,
  defaultExpanded,
  onExpandedChange,
  groupBy,
  groupLabel,
  collapsedGroups,
  defaultCollapsedGroups,
  onCollapsedGroupsChange,
  onCellChange,
  loading = false,
  loadingRows = 5,
  error,
  windowed = false,
  className,
  style,
  ...rest
}: DataGridProps<T>) {
  const uid = useId();
  const rootRef = useRef<HTMLDivElement>(null);
  const anchor = useRef<string | null>(null);
  const drag = useRef<{ key: string; x: number; width: number; dir: number } | null>(null);
  // Column a vertical move aims for, kept while passing through full-width group and detail rows.
  const wantCol = useRef(0);
  // A cell to focus once it has rendered, for windowed rows that were not in the DOM yet.
  const pending = useRef<string | null>(null);
  const editRef = useRef<Editing | null>(null);
  const focusEditor = useRef(false);

  const [innerSelected, setInnerSelected] = useState<string[]>(defaultSelected ?? []);
  const [innerSort, setInnerSort] = useState<DataGridSort>(defaultSort);
  const [innerExpanded, setInnerExpanded] = useState<string[]>(defaultExpanded ?? []);
  const [innerCollapsed, setInnerCollapsed] = useState<string[]>(defaultCollapsedGroups ?? []);
  const [widths, setWidths] = useState<Record<string, number>>(() => {
    const init: Record<string, number> = {};
    for (const c of columns) if (c.width != null) init[c.key] = c.width;
    return init;
  });
  const [resizing, setResizing] = useState<string | null>(null);
  const [active, setActive] = useState<[number, number]>([rows.length > 0 ? 1 : 0, 0]);
  const [editing, setEditing] = useState<Editing | null>(null);
  const [first, setFirst] = useState(0);
  const [span, setSpan] = useState(24);
  const [rowH, setRowH] = useState(dense ? 28 : 34);
  const [headH, setHeadH] = useState(dense ? 28 : 34);

  const sortControlled = sort !== undefined;
  const currentSort = sortControlled ? sort : innerSort;
  const selectedKeys = selected ?? innerSelected;
  const selectedSet = useMemo(() => new Set(selectedKeys), [selectedKeys]);
  const expandedSet = useMemo(() => new Set(expanded ?? innerExpanded), [expanded, innerExpanded]);
  const collapsedList = collapsedGroups ?? innerCollapsed;
  const collapsedSet = useMemo(() => new Set(collapsedList), [collapsedList]);

  const collator = useMemo(() => new Intl.Collator(undefined, { numeric: true, sensitivity: "base" }), []);

  const view = useMemo(() => {
    if (sortControlled || !currentSort) return rows;
    const { key, direction } = currentSort;
    const factor = direction === "ascending" ? 1 : -1;
    return rows
      .map((row, index) => ({ row, index }))
      .sort((a, b) => {
        const va = valueOf(a.row, key);
        const vb = valueOf(b.row, key);
        if (isBlank(va) || isBlank(vb)) return isBlank(va) === isBlank(vb) ? a.index - b.index : isBlank(va) ? 1 : -1;
        return compare(va, vb, collator) * factor || a.index - b.index;
      })
      .map((e) => e.row);
  }, [rows, currentSort, sortControlled, collator]);

  const keys = useMemo(() => view.map(rowKey), [view, rowKey]);
  const keySet = useMemo(() => new Set(keys), [keys]);

  // Visible columns, with pinned ones moved to their edge.
  const cols = useMemo(() => {
    const hidden = new Set(hiddenColumns ?? []);
    const shown = columns.filter((c) => !hidden.has(c.key));
    return [
      ...shown.filter((c) => c.pin === "start"),
      ...shown.filter((c) => c.pin !== "start" && c.pin !== "end"),
      ...shown.filter((c) => c.pin === "end"),
    ];
  }, [columns, hiddenColumns]);

  const multiple = selectable === "multiple";
  // Detail panels change row heights, which windowing cannot predict, so a windowed grid leaves them out.
  const detail = renderDetail != null && !windowed;
  const lead = (multiple ? 1 : 0) + (detail ? 1 : 0);
  const expCol = multiple ? 1 : 0;
  const colCount = cols.length + lead;
  const pinStart = cols.some((c) => c.pin === "start");
  const lastStart = pinStart ? lead + cols.filter((c) => c.pin === "start").length - 1 : -1;
  const firstEnd = cols.findIndex((c) => c.pin === "end");

  const lines = useMemo(() => {
    const out: Line<T>[] = [];
    const push = (row: T, key: string) => {
      out.push({ kind: "row", row, key });
      if (detail && expandedSet.has(key)) out.push({ kind: "detail", row, key });
    };
    if (groupBy == null) {
      view.forEach((row, i) => push(row, keys[i]));
      return out;
    }
    // Groups appear in the order their first row does, so sorting by the grouped column orders the groups.
    const groups = new Map<string, number[]>();
    view.forEach((row, i) => {
      const g = typeof groupBy === "function" ? groupBy(row) : String(valueOf(row, groupBy) ?? "");
      const list = groups.get(g);
      if (list) list.push(i);
      else groups.set(g, [i]);
    });
    for (const [group, indexes] of groups) {
      const collapsed = collapsedSet.has(group);
      out.push({ kind: "group", group, rows: indexes.map((i) => view[i]), collapsed });
      if (!collapsed) for (const i of indexes) push(view[i], keys[i]);
    }
    return out;
  }, [view, keys, groupBy, detail, expandedSet, collapsedSet]);

  const rowByKey = useMemo(() => {
    const map = new Map<string, T>();
    view.forEach((row, i) => map.set(keys[i], row));
    return map;
  }, [view, keys]);

  const status = loading ? "loading" : error != null && error !== false ? "error" : lines.length === 0 ? "empty" : "rows";
  const lastRow = status === "rows" ? lines.length : 0;
  const fullWidth = (r: number) => r > 0 && lines[r - 1]?.kind !== "row";
  const ar = Math.min(active[0], lastRow);
  const ac = fullWidth(ar) ? 0 : Math.min(active[1], colCount - 1);

  const allSelected = keys.length > 0 && keys.every((k) => selectedSet.has(k));
  const someSelected = !allSelected && keys.some((k) => selectedSet.has(k));

  function commitSelected(next: string[]) {
    if (selected === undefined) setInnerSelected(next);
    onSelectedChange?.(next);
  }

  function toggleRow(key: string) {
    anchor.current = key;
    if (selectable === "single") return commitSelected(selectedSet.has(key) ? [] : [key]);
    commitSelected(selectedSet.has(key) ? selectedKeys.filter((k) => k !== key) : [...selectedKeys, key]);
  }

  function selectRange(key: string) {
    // The range follows what is on screen, so rows in collapsed groups are skipped.
    const order = lines.flatMap((l) => (l.kind === "row" ? [l.key] : []));
    const from = anchor.current ? order.indexOf(anchor.current) : -1;
    const to = order.indexOf(key);
    if (from === -1 || to === -1) return toggleRow(key);
    const range = order.slice(Math.min(from, to), Math.max(from, to) + 1);
    commitSelected([...new Set([...selectedKeys, ...range])]);
  }

  function toggleAll() {
    commitSelected(allSelected ? selectedKeys.filter((k) => !keySet.has(k)) : [...new Set([...selectedKeys, ...keys])]);
  }

  function cycleSort(key: string) {
    const next = nextSort(currentSort, key);
    if (!sortControlled) setInnerSort(next);
    onSortChange?.(next);
  }

  function toggleExpanded(key: string) {
    const list = expanded ?? innerExpanded;
    const next = expandedSet.has(key) ? list.filter((k) => k !== key) : [...list, key];
    if (expanded === undefined) setInnerExpanded(next);
    onExpandedChange?.(next);
  }

  function toggleGroup(group: string) {
    const next = collapsedSet.has(group) ? collapsedList.filter((g) => g !== group) : [...collapsedList, group];
    if (collapsedGroups === undefined) setInnerCollapsed(next);
    onCollapsedGroupsChange?.(next);
  }

  function scrollToLine(li: number) {
    const root = rootRef.current;
    if (!windowed || !root) return;
    const top = li * rowH;
    const bottom = headH + (li + 1) * rowH - root.clientHeight;
    if (root.scrollTop > top) root.scrollTop = top;
    else if (root.scrollTop < bottom) root.scrollTop = bottom;
    setFirst(Math.max(0, Math.floor(root.scrollTop / rowH)));
  }

  function focusCell(r: number, c: number) {
    const row = clamp(r, 0, lastRow);
    const col = fullWidth(row) ? 0 : clamp(c, 0, colCount - 1);
    setActive([row, col]);
    const el = rootRef.current?.querySelector<HTMLElement>(`[data-cell="${row}:${col}"]`);
    if (el) {
      el.focus();
      return;
    }
    pending.current = `${row}:${col}`;
    if (row > 0) scrollToLine(row - 1);
  }

  useLayoutEffect(() => {
    if (!pending.current) return;
    const el = rootRef.current?.querySelector<HTMLElement>(`[data-cell="${pending.current}"]`);
    if (el) {
      pending.current = null;
      el.focus();
    }
  });

  function pageSize() {
    const root = rootRef.current;
    const cell = root?.querySelector<HTMLElement>(".eq-data-grid-cell");
    if (!root || !cell || root.scrollHeight <= root.clientHeight) return 10;
    return Math.max(1, Math.floor(root.clientHeight / cell.offsetHeight) - 1);
  }

  function canEdit(col: DataGridColumn<T> | undefined, row: T) {
    if (!col?.editable || !onCellChange) return false;
    return typeof col.editable === "function" ? col.editable(row) : true;
  }

  function startEdit(r: number, c: number, typed?: string) {
    const line = lines[r - 1];
    const col = cols[c - lead];
    if (line?.kind !== "row" || !canEdit(col, line.row)) return false;
    const raw = valueOf(line.row, col.key);
    const next: Editing = {
      key: line.key,
      col: col.key,
      r,
      c,
      draft: typed ?? (raw == null ? "" : String(raw)),
      invalid: false,
      typed: typed != null,
    };
    editRef.current = next;
    focusEditor.current = true;
    setActive([r, c]);
    setEditing(next);
    return true;
  }

  function setDraft(draft: string) {
    const e = editRef.current;
    if (!e) return;
    const next = { ...e, draft, invalid: false };
    editRef.current = next;
    setEditing(next);
  }

  /** Commits the open edit. False when the draft is not a valid value, which keeps the editor open. */
  function commitEdit() {
    const e = editRef.current;
    if (!e) return true;
    const col = columns.find((c) => c.key === e.col);
    let value: string | number = e.draft;
    if (col?.editor === "number") {
      const n = Number(e.draft.trim());
      if (e.draft.trim() === "" || !Number.isFinite(n)) {
        const next = { ...e, invalid: true };
        editRef.current = next;
        setEditing(next);
        return false;
      }
      value = n;
    }
    // Cleared first, so the blur that follows when the input unmounts finds nothing to commit.
    editRef.current = null;
    setEditing(null);
    const row = rowByKey.get(e.key);
    if (row && String(valueOf(row, e.col) ?? "") !== String(value)) {
      onCellChange?.({ rowKey: e.key, column: e.col, value, row });
    }
    return true;
  }

  function cancelEdit() {
    editRef.current = null;
    setEditing(null);
  }

  function onEditorKeyDown(e: KeyboardEvent<HTMLInputElement>) {
    // Keys typed into the editor belong to it, not to the grid or anything around it.
    e.stopPropagation();
    const current = editRef.current;
    if (!current) return;
    if (e.key === "Enter") {
      e.preventDefault();
      if (commitEdit()) focusCell(current.r, current.c);
    } else if (e.key === "Escape") {
      e.preventDefault();
      cancelEdit();
      focusCell(current.r, current.c);
    }
  }

  function onFocus(e: FocusEvent<HTMLTableElement>) {
    const cell = e.target.getAttribute("data-cell");
    if (!cell) return;
    const [r, c] = cell.split(":").map(Number);
    if (r !== ar || c !== ac) setActive([r, c]);
  }

  function onKeyDown(e: KeyboardEvent<HTMLTableElement>) {
    if (!(e.target instanceof HTMLElement)) return;
    const cell = e.target.dataset.cell;
    if (!cell) return;
    const [r, c] = cell.split(":").map(Number);
    const mod = e.ctrlKey || e.metaKey;
    const column = cols[c - lead];
    const line = r > 0 ? lines[r - 1] : undefined;
    const rowKeyAt = line?.kind === "row" ? line.key : undefined;
    const full = fullWidth(r);
    if (!full) wantCol.current = c;
    const down = full ? wantCol.current : c;

    // Typing on an editable cell starts an edit that replaces the value, as in a spreadsheet.
    if (r > 0 && e.key.length === 1 && e.key !== " " && !mod && !e.altKey && startEdit(r, c, e.key)) {
      e.preventDefault();
      e.stopPropagation();
      return;
    }

    switch (e.key) {
      case "ArrowRight":
        focusCell(r, c + 1);
        break;
      case "ArrowLeft":
        focusCell(r, c - 1);
        break;
      case "ArrowDown":
        focusCell(r + 1, down);
        break;
      case "ArrowUp":
        focusCell(r - 1, down);
        break;
      case "Home":
        focusCell(mod ? 0 : r, 0);
        break;
      case "End":
        focusCell(mod ? lastRow : r, colCount - 1);
        break;
      case "PageDown":
        focusCell(r + pageSize(), down);
        break;
      case "PageUp":
        focusCell(r - pageSize(), down);
        break;
      case "F2":
      case "Enter":
      case " ": {
        if (r === 0) {
          if (multiple && c === 0) {
            if (e.key === "F2") return;
            toggleAll();
            break;
          }
          if (column?.sortable && e.key !== "F2") return;
          if (e.key !== " ") rootRef.current?.querySelector<HTMLElement>(`[data-resize="${c}"]`)?.focus();
          break;
        }
        // Expand and group toggles are buttons: let the browser click them.
        if (e.target instanceof HTMLButtonElement && e.key !== "F2") return;
        if (e.key !== " " && startEdit(r, c)) break;
        if (e.key !== " " || selectable === "none" || !rowKeyAt) return;
        if (e.shiftKey && multiple) selectRange(rowKeyAt);
        else toggleRow(rowKeyAt);
        break;
      }
      case "a":
      case "A":
        if (!mod || !multiple) return;
        commitSelected([...new Set([...selectedKeys, ...keys])]);
        break;
      default:
        return;
    }
    e.preventDefault();
    e.stopPropagation();
  }

  function onRowClick(e: MouseEvent<HTMLTableRowElement>, key: string) {
    // The grid's own controls inside a row do their own thing, not row selection.
    if (e.target instanceof Element && e.target.closest(".eq-data-grid-expand, .eq-data-grid-editor")) return;
    if (selectable === "single") toggleRow(key);
    else if (multiple && e.target instanceof Element && e.target.closest(".eq-data-grid-select")) {
      if (e.shiftKey) selectRange(key);
      else toggleRow(key);
    }
  }

  function setWidth(key: string, width: number) {
    setWidths((w) => ({ ...w, [key]: Math.round(clamp(width, MIN_WIDTH, MAX_WIDTH)) }));
  }

  function measure(el: HTMLElement) {
    return el.parentElement?.getBoundingClientRect().width ?? MIN_WIDTH;
  }

  function onResizeDown(e: PointerEvent<HTMLSpanElement>, key: string) {
    if (e.button !== 0) return;
    e.preventDefault();
    const el = e.currentTarget;
    el.setPointerCapture(e.pointerId);
    drag.current = {
      key,
      x: e.clientX,
      width: measure(el),
      dir: getComputedStyle(el).direction === "rtl" ? -1 : 1,
    };
    setResizing(key);
  }

  function onResizeMove(e: PointerEvent<HTMLSpanElement>) {
    const d = drag.current;
    if (d) setWidth(d.key, d.width + (e.clientX - d.x) * d.dir);
  }

  function onResizeEnd() {
    drag.current = null;
    setResizing(null);
  }

  function onResizeKey(e: KeyboardEvent<HTMLSpanElement>, key: string, col: number) {
    const el = e.currentTarget;
    const width = widths[key] ?? measure(el);
    const step = e.shiftKey ? 32 : 8;
    const rtl = getComputedStyle(el).direction === "rtl";
    switch (e.key) {
      case "ArrowRight":
        setWidth(key, width + (rtl ? -step : step));
        break;
      case "ArrowLeft":
        setWidth(key, width + (rtl ? step : -step));
        break;
      case "Home":
        setWidth(key, MIN_WIDTH);
        break;
      case "End":
        setWidth(key, MAX_WIDTH);
        break;
      case "Escape":
      case "Enter":
      case "F2":
        rootRef.current?.querySelector<HTMLElement>(`[data-cell="0:${col}"]`)?.focus();
        break;
      default:
        return;
    }
    e.preventDefault();
    e.stopPropagation();
  }

  function onScroll(e: UIEvent<HTMLDivElement>) {
    if (!windowed) return;
    // Only the first row in view is state, so scrolling renders once per row boundary, not per pixel.
    const f = Math.max(0, Math.floor(e.currentTarget.scrollTop / rowH));
    if (f !== first) setFirst(f);
  }

  /* Pinned offsets: each pinned cell sticks at the summed width of the pinned columns before it.
     They are measured, so they follow resizing, finishes and content. When the pinned columns
     would take most of a narrow grid (and cover each other), they scroll with the rest instead. */
  const pinKey = `${lead}|${pinStart}|${cols.map((c) => `${c.key}:${c.pin ?? ""}`).join(",")}`;
  const anyPin = pinStart || firstEnd !== -1;
  useLayoutEffect(() => {
    const scroller = rootRef.current;
    const found = scroller?.querySelector<HTMLTableElement>(".eq-data-grid");
    if (!scroller || !found || !anyPin) return;
    const root: HTMLDivElement = scroller;
    const table: HTMLTableElement = found;
    const heads = Array.from(table.querySelectorAll<HTMLElement>(":scope > thead > tr > th"));
    const pinOf = (c: number) => (c < lead ? (pinStart ? "start" : undefined) : cols[c - lead]?.pin);
    function place() {
      const offsets: [number, number][] = [];
      let start = 0;
      for (let c = 0; c < heads.length; c++) {
        if (pinOf(c) !== "start") continue;
        offsets.push([c, start]);
        start += heads[c].getBoundingClientRect().width;
      }
      let end = 0;
      for (let c = heads.length - 1; c >= 0; c--) {
        if (pinOf(c) !== "end") continue;
        offsets.push([c, end]);
        end += heads[c].getBoundingClientRect().width;
      }
      const fits = start + end <= root.clientWidth * 0.75;
      for (const [c, at] of offsets) table.style.setProperty(`--_p${c}`, fits ? `${at}px` : "auto");
    }
    place();
    const observer = new ResizeObserver(place);
    observer.observe(root);
    for (const h of heads) observer.observe(h);
    return () => observer.disconnect();
  }, [pinKey, anyPin]);

  /* Windowing: measure the real row and header heights, since finishes and dense change them. */
  useLayoutEffect(() => {
    const el = rootRef.current;
    if (!windowed || !el) return;
    const root: HTMLDivElement = el;
    function read() {
      const r = root.querySelector<HTMLElement>(".eq-data-grid-body > tr[data-line]");
      const h = root.querySelector<HTMLElement>(".eq-data-grid-head");
      const nextRow = r ? r.getBoundingClientRect().height : 0;
      if (nextRow > 0) setRowH((old) => (Math.abs(old - nextRow) > 0.5 ? nextRow : old));
      if (h) setHeadH(h.getBoundingClientRect().height);
      setSpan(Math.ceil(root.clientHeight / Math.max(1, nextRow || rowH)) + 1);
    }
    read();
    const observer = new ResizeObserver(read);
    observer.observe(root);
    return () => observer.disconnect();
  }, [windowed, dense, status]);

  const vars: Record<string, string> = {};
  cols.forEach((c, i) => {
    const w = widths[c.key];
    if (w != null) vars[`--_w${i}`] = `${w}px`;
  });
  // Once every column has a width, the table takes their sum instead of stretching them.
  if (cols.length > 0 && cols.every((c) => widths[c.key] != null)) {
    const sum = cols.reduce((n, c) => n + widths[c.key], 0);
    vars.width = lead ? `calc(${sum}px + var(--_sel) * ${lead})` : `${sum}px`;
  }

  const tab = (r: number, c: number) => (r === ar && c === ac ? 0 : -1);
  const ariaChecked = allSelected ? "true" : someSelected ? "mixed" : "false";

  function pinAttrs(c: number, pin: "start" | "end" | undefined, base?: CSSProperties) {
    if (!pin) return { style: base };
    const side = pin === "start" ? "insetInlineStart" : "insetInlineEnd";
    return {
      "data-pin": pin,
      "data-pin-edge": c === lastStart ? "start" : firstEnd !== -1 && c === firstEnd + lead ? "end" : undefined,
      style: { ...base, [side]: `var(--_p${c}, 0px)` },
    };
  }

  const leadPin = pinStart ? ("start" as const) : undefined;

  function renderLine(li: number) {
    const line = lines[li];
    const r = li + 1;
    if (line.kind === "group") {
      const count = line.rows.length;
      return (
        <tr
          key={`g:${line.group}`}
          className="eq-data-grid-row eq-data-grid-group-row"
          role="row"
          aria-rowindex={r + 1}
          data-line={li}
        >
          <td className="eq-data-grid-cell eq-data-grid-group" role="gridcell" colSpan={colCount}>
            <button
              type="button"
              className="eq-data-grid-group-toggle"
              data-cell={`${r}:0`}
              tabIndex={tab(r, 0)}
              aria-expanded={!line.collapsed}
              onClick={(e) => {
                // Safari does not focus buttons on click; keep focus here so a collapse never drops it.
                e.currentTarget.focus();
                toggleGroup(line.group);
              }}
            >
              <Chevron />
              <span className="eq-data-grid-label">
                {groupLabel ? groupLabel(line.group, line.rows) : line.group || "No value"}
              </span>
              <span className="eq-data-grid-count">
                {count}
                <span className="eq-data-grid-sr">{count === 1 ? " row" : " rows"}</span>
              </span>
            </button>
          </td>
        </tr>
      );
    }
    if (line.kind === "detail") {
      return (
        <tr
          key={`d:${line.key}`}
          className="eq-data-grid-row eq-data-grid-detail-row"
          role="row"
          aria-rowindex={r + 1}
          data-line={li}
        >
          <td
            id={`${uid}d-${idPart(line.key)}`}
            className="eq-data-grid-detail"
            role="gridcell"
            colSpan={colCount}
            data-cell={`${r}:0`}
            tabIndex={tab(r, 0)}
          >
            {renderDetail?.(line.row)}
          </td>
        </tr>
      );
    }
    const { row, key } = line;
    const isSelected = selectedSet.has(key);
    const open = expandedSet.has(key);
    return (
      <tr
        key={`r:${key}`}
        className="eq-data-grid-row"
        role="row"
        aria-rowindex={r + 1}
        aria-selected={selectable === "none" ? undefined : isSelected}
        data-line={li}
        onClick={(e) => onRowClick(e, key)}
      >
        {multiple && (
          <td
            className="eq-data-grid-cell eq-data-grid-select"
            role="gridcell"
            aria-colindex={1}
            data-cell={`${r}:0`}
            tabIndex={tab(r, 0)}
            {...pinAttrs(0, leadPin)}
          >
            <span className="eq-data-grid-check" data-state={isSelected ? "true" : "false"} aria-hidden="true">
              <CheckMark />
            </span>
          </td>
        )}
        {detail && (
          <td
            className="eq-data-grid-cell eq-data-grid-expander"
            role="gridcell"
            aria-colindex={expCol + 1}
            {...pinAttrs(expCol, leadPin)}
          >
            <button
              type="button"
              className="eq-data-grid-expand"
              data-cell={`${r}:${expCol}`}
              tabIndex={tab(r, expCol)}
              aria-expanded={open}
              aria-controls={open ? `${uid}d-${idPart(key)}` : undefined}
              aria-label="Details"
              onClick={(e) => {
                e.currentTarget.focus();
                toggleExpanded(key);
              }}
            >
              <Chevron />
            </button>
          </td>
        )}
        {cols.map((col, i) => {
          const c = i + lead;
          const value = valueOf(row, col.key);
          const editable = canEdit(col, row);
          const isEditing = editing != null && editing.key === key && editing.col === col.key;
          const content = col.render
            ? col.render(row)
            : col.format
              ? col.format(value, row)
              : value == null
                ? ""
                : String(value);
          return (
            <td
              key={col.key}
              className="eq-data-grid-cell"
              role="gridcell"
              aria-colindex={c + 1}
              data-align={alignOf(col)}
              data-cell={`${r}:${c}`}
              data-editable={editable || undefined}
              data-editing={isEditing || undefined}
              tabIndex={tab(r, c)}
              onDoubleClick={editable ? () => startEdit(r, c) : undefined}
              {...pinAttrs(c, col.pin)}
            >
              {isEditing ? (
                <input
                  ref={(el) => {
                    if (!el || !focusEditor.current) return;
                    focusEditor.current = false;
                    el.focus();
                    if (editing.typed) el.setSelectionRange(el.value.length, el.value.length);
                    else el.select();
                  }}
                  className="eq-data-grid-editor"
                  type="text"
                  inputMode={col.editor === "number" ? "decimal" : undefined}
                  aria-label={col.header}
                  aria-invalid={editing.invalid || undefined}
                  value={editing.draft}
                  onChange={(e) => setDraft(e.currentTarget.value)}
                  onKeyDown={onEditorKeyDown}
                  onBlur={() => {
                    if (!commitEdit()) cancelEdit();
                  }}
                />
              ) : (
                content
              )}
            </td>
          );
        })}
      </tr>
    );
  }

  function spacer(height: number, key: string) {
    return (
      <tr key={key} className="eq-data-grid-spacer" aria-hidden="true">
        <td colSpan={colCount} style={{ height }} />
      </tr>
    );
  }

  function renderBody() {
    if (status === "loading") {
      return Array.from({ length: Math.max(1, loadingRows) }, (_, i) => (
        <tr key={`l${i}`} className="eq-data-grid-row" aria-hidden="true">
          {Array.from({ length: colCount }, (_, c) => (
            <td key={c} className="eq-data-grid-cell" data-align={c >= lead ? alignOf(cols[c - lead]) : undefined}>
              <span className="eq-data-grid-skeleton" data-short={(i + c) % 3 === 1 || undefined} />
            </td>
          ))}
        </tr>
      ));
    }
    if (status === "error" || status === "empty") {
      return (
        <tr className="eq-data-grid-row" role="row">
          <td
            className={status === "error" ? "eq-data-grid-empty eq-data-grid-error" : "eq-data-grid-empty"}
            role="gridcell"
            colSpan={colCount}
          >
            {status === "error" ? <div role="alert">{error}</div> : empty}
          </td>
        </tr>
      );
    }
    if (!windowed) return lines.map((_, li) => renderLine(li));

    // Windowed: the rows in view plus overscan, the focused row and the row being edited,
    // with spacer rows standing in for everything between.
    const n = lines.length;
    const start = Math.max(0, first - OVERSCAN);
    const end = Math.min(n, first + span + OVERSCAN);
    const shown = new Set<number>();
    for (let i = start; i < end; i++) shown.add(i);
    if (ar > 0) shown.add(ar - 1);
    if (editing) shown.add(editing.r - 1);
    const order = [...shown].filter((i) => i < n).sort((a, b) => a - b);
    const out: ReactNode[] = [];
    let prev = -1;
    for (const i of order) {
      if (i - prev > 1) out.push(spacer((i - prev - 1) * rowH, `s${i}`));
      out.push(renderLine(i));
      prev = i;
    }
    if (n - 1 - prev > 0) out.push(spacer((n - 1 - prev) * rowH, "s-end"));
    return out;
  }

  return (
    <div
      ref={rootRef}
      className="eq-data-grid-scroll"
      data-dense={dense || undefined}
      style={{ maxHeight: maxHeight ?? (windowed ? WINDOW_HEIGHT : undefined) }}
      onScroll={windowed ? onScroll : undefined}
    >
      <span className="eq-data-grid-sr" role="status">
        {loading ? "Loading" : ""}
      </span>
      <table
        role="grid"
        aria-label={label}
        aria-rowcount={status === "rows" ? lines.length + 1 : 1}
        aria-colcount={colCount}
        aria-multiselectable={multiple || undefined}
        aria-busy={loading || undefined}
        {...rest}
        className={["eq-data-grid", className].filter(Boolean).join(" ")}
        style={{ ...vars, ...style } as CSSProperties}
        onFocus={onFocus}
        onKeyDown={onKeyDown}
      >
        <thead className="eq-data-grid-head">
          <tr className="eq-data-grid-row" role="row" aria-rowindex={1}>
            {multiple && (
              <th
                className="eq-data-grid-header eq-data-grid-select"
                role="columnheader"
                aria-colindex={1}
                onClick={() => keys.length > 0 && toggleAll()}
                {...pinAttrs(0, leadPin)}
              >
                <span
                  className="eq-data-grid-check"
                  role="checkbox"
                  aria-checked={ariaChecked}
                  aria-label="Select all rows"
                  aria-disabled={keys.length === 0 || undefined}
                  data-state={ariaChecked}
                  data-cell="0:0"
                  tabIndex={tab(0, 0)}
                >
                  <CheckMark />
                </span>
              </th>
            )}
            {detail && (
              <th
                className="eq-data-grid-header eq-data-grid-expander"
                role="columnheader"
                aria-colindex={expCol + 1}
                data-cell={`0:${expCol}`}
                tabIndex={tab(0, expCol)}
                {...pinAttrs(expCol, leadPin)}
              >
                <span className="eq-data-grid-sr">Details</span>
              </th>
            )}
            {cols.map((col, i) => {
              const c = i + lead;
              const dir = currentSort?.key === col.key ? currentSort.direction : undefined;
              const width = widths[col.key];
              return (
                <th
                  key={col.key}
                  className="eq-data-grid-header"
                  role="columnheader"
                  aria-colindex={c + 1}
                  aria-sort={dir}
                  data-align={alignOf(col)}
                  data-sortable={col.sortable || undefined}
                  data-cell={col.sortable ? undefined : `0:${c}`}
                  tabIndex={col.sortable ? undefined : tab(0, c)}
                  {...pinAttrs(c, col.pin, width != null ? { width: `var(--_w${i})` } : undefined)}
                >
                  {col.sortable ? (
                    <button
                      type="button"
                      className="eq-data-grid-sort"
                      data-cell={`0:${c}`}
                      data-dir={dir}
                      tabIndex={tab(0, c)}
                      onClick={() => cycleSort(col.key)}
                    >
                      <span className="eq-data-grid-label">{col.header}</span>
                      <svg
                        className="eq-data-grid-arrow"
                        viewBox="0 0 12 12"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="1.5"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        aria-hidden="true"
                      >
                        <path d="M6 9.5v-7M3 5.5l3-3 3 3" />
                      </svg>
                    </button>
                  ) : (
                    <span className="eq-data-grid-label">{col.header}</span>
                  )}
                  <span
                    className="eq-data-grid-resize"
                    role="separator"
                    aria-orientation="vertical"
                    aria-label={`Resize ${col.header} column`}
                    aria-valuenow={width}
                    aria-valuemin={MIN_WIDTH}
                    aria-valuemax={MAX_WIDTH}
                    data-resize={c}
                    data-active={resizing === col.key || undefined}
                    tabIndex={-1}
                    onFocus={(e) => {
                      if (width == null) setWidth(col.key, measure(e.currentTarget));
                    }}
                    onPointerDown={(e) => onResizeDown(e, col.key)}
                    onPointerMove={onResizeMove}
                    onPointerUp={onResizeEnd}
                    onPointerCancel={onResizeEnd}
                    onKeyDown={(e) => onResizeKey(e, col.key, c)}
                  />
                </th>
              );
            })}
          </tr>
        </thead>
        <tbody className="eq-data-grid-body">{renderBody()}</tbody>
      </table>
    </div>
  );
}

function CheckMark() {
  return (
    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path className="eq-data-grid-tick" d="M4 8.5 7 11.5 12 5" pathLength="1" />
      <path className="eq-data-grid-dash" d="M4.5 8h7" pathLength="1" />
    </svg>
  );
}

function Chevron() {
  return (
    <svg
      className="eq-data-grid-chevron"
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <path d="M6 4l4 4-4 4" />
    </svg>
  );
}