@squirkle-ui/datagrid 0.0.0-stage → 0.1.0

package/dist/vue3/index.mjs

@@ -0,0 +1,2690 @@
+import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, withModifiers, Fragment, createVNode, createElementVNode, withCtx, createBlock, createCommentVNode, createTextVNode, toDisplayString, watch, toRaw, onMounted, onBeforeUnmount, nextTick, normalizeStyle, normalizeClass, renderSlot, renderList, mergeProps } from "vue";
+import { toDate, compareValues, getByPath, clamp, toUnit, formatDate, downloadText } from "@squirkle-ui/core";
+import { SqVirtualScroll, SqTextField, SqSelect, SqCheckbox, SqBtn, config, SqProgressCircular, SqPagination, SqMenu, SqListItem, SqIcon, SqEmptyState, SqDivider, SqChip, SqShape, useProxiedModel } from "@squirkle-ui/ui";
+const TEXT_OPS = [
+  { title: "Contains", value: "contains" },
+  { title: "Does not contain", value: "notContains" },
+  { title: "Equals", value: "equals" },
+  { title: "Not equal", value: "notEqual" },
+  { title: "Starts with", value: "startsWith" },
+  { title: "Ends with", value: "endsWith" },
+  { title: "Blank", value: "blank" },
+  { title: "Not blank", value: "notBlank" }
+];
+const NUM_OPS = [
+  { title: "Equals", value: "equals" },
+  { title: "Not equal", value: "notEqual" },
+  { title: "Greater than", value: "gt" },
+  { title: "≥", value: "gte" },
+  { title: "Less than", value: "lt" },
+  { title: "≤", value: "lte" },
+  { title: "Between", value: "between" },
+  { title: "Blank", value: "blank" },
+  { title: "Not blank", value: "notBlank" }
+];
+const _sfc_main$1 = defineComponent({
+  name: "SqGridFilter",
+  components: { SqBtn, SqCheckbox, SqSelect, SqTextField, SqVirtualScroll },
+  props: {
+    kind: { type: String, required: true },
+    modelValue: { type: Object, default: void 0 },
+    /** Distinct values for the set filter. */
+    values: { type: Array, default: () => [] },
+    formatter: { type: Function, default: void 0 }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const search = ref("");
+    const ops = computed(() => props.kind === "text" ? TEXT_OPS : NUM_OPS);
+    const draft = computed(() => props.modelValue ?? { kind: props.kind, op: props.kind === "text" ? "contains" : "equals" });
+    const draftValue = computed(() => draft.value.value);
+    const draftValueTo = computed(() => draft.value.valueTo);
+    const needsValue = computed(() => draft.value.op !== "blank" && draft.value.op !== "notBlank");
+    const set = (key, v) => emit("update:modelValue", { ...draft.value, kind: props.kind, [key]: v });
+    const label = (v) => v == null || v === "" ? "(Blanks)" : props.formatter ? props.formatter(v) : String(v);
+    const shownValues = computed(() => {
+      const q = search.value.trim().toLowerCase();
+      return q ? props.values.filter((v) => label(v).toLowerCase().includes(q)) : props.values;
+    });
+    const checkedSet = computed(() => new Set((props.modelValue?.values ?? props.values).map(String)));
+    const isChecked = (v) => checkedSet.value.has(String(v));
+    const allChecked = computed(() => !props.modelValue?.values || props.modelValue.values.length === props.values.length);
+    const someChecked = computed(() => !!props.modelValue?.values && props.modelValue.values.length > 0 && !allChecked.value);
+    const toggleValue = (v) => {
+      const cur = props.modelValue?.values ?? props.values;
+      const next = isChecked(v) ? cur.filter((x) => String(x) !== String(v)) : [...cur, v];
+      emit("update:modelValue", next.length === props.values.length ? void 0 : { kind: "set", values: next });
+    };
+    const toggleAll = () => emit("update:modelValue", allChecked.value ? { kind: "set", values: [] } : void 0);
+    return { search, ops, draft, draftValue, draftValueTo, needsValue, set, label, shownValues, isChecked, allChecked, someChecked, toggleValue, toggleAll, messages: computed(() => config.locale.messages) };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1$1 = { class: "sq-grid-filter__all" };
+const _hoisted_2$1 = { class: "sq-grid-filter__actions" };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_SqTextField = resolveComponent("SqTextField");
+  const _component_SqCheckbox = resolveComponent("SqCheckbox");
+  const _component_SqVirtualScroll = resolveComponent("SqVirtualScroll");
+  const _component_SqSelect = resolveComponent("SqSelect");
+  const _component_SqBtn = resolveComponent("SqBtn");
+  return openBlock(), createElementBlock("div", {
+    class: "sq-grid-filter",
+    onClick: _cache[5] || (_cache[5] = withModifiers(() => {
+    }, ["stop"]))
+  }, [
+    _ctx.kind === "set" ? (openBlock(), createElementBlock(
+      Fragment,
+      { key: 0 },
+      [
+        createVNode(_component_SqTextField, {
+          modelValue: _ctx.search,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.search = $event),
+          placeholder: _ctx.messages.search,
+          density: "compact",
+          "prepend-inner-icon": "search",
+          "hide-details": "",
+          clearable: ""
+        }, null, 8, ["modelValue", "placeholder"]),
+        createElementVNode("label", _hoisted_1$1, [
+          createVNode(_component_SqCheckbox, {
+            "model-value": _ctx.allChecked,
+            indeterminate: _ctx.someChecked,
+            label: _ctx.messages.selectAll,
+            "onUpdate:modelValue": _ctx.toggleAll
+          }, null, 8, ["model-value", "indeterminate", "label", "onUpdate:modelValue"])
+        ]),
+        createVNode(_component_SqVirtualScroll, {
+          items: _ctx.shownValues,
+          "item-height": 32,
+          height: Math.min(_ctx.shownValues.length * 32, 224) || 32
+        }, {
+          default: withCtx(({ item }) => [
+            createVNode(_component_SqCheckbox, {
+              "model-value": _ctx.isChecked(item),
+              label: _ctx.label(item),
+              "onUpdate:modelValue": ($event) => _ctx.toggleValue(item)
+            }, null, 8, ["model-value", "label", "onUpdate:modelValue"])
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["items", "height"])
+      ],
+      64
+      /* STABLE_FRAGMENT */
+    )) : (openBlock(), createElementBlock(
+      Fragment,
+      { key: 1 },
+      [
+        createVNode(_component_SqSelect, {
+          "model-value": _ctx.draft.op,
+          items: _ctx.ops,
+          density: "compact",
+          "hide-details": "",
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.set("op", $event))
+        }, null, 8, ["model-value", "items"]),
+        _ctx.needsValue ? (openBlock(), createBlock(_component_SqTextField, {
+          key: 0,
+          "model-value": _ctx.draftValue,
+          type: _ctx.kind === "number" ? "number" : _ctx.kind === "date" ? "date" : "text",
+          placeholder: _ctx.kind === "text" ? _ctx.messages.search : "Value",
+          density: "compact",
+          "hide-details": "",
+          clearable: "",
+          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.set("value", $event))
+        }, null, 8, ["model-value", "type", "placeholder"])) : createCommentVNode("v-if", true),
+        _ctx.draft.op === "between" ? (openBlock(), createBlock(_component_SqTextField, {
+          key: 1,
+          "model-value": _ctx.draftValueTo,
+          type: _ctx.kind === "number" ? "number" : "date",
+          placeholder: "To",
+          density: "compact",
+          "hide-details": "",
+          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => _ctx.set("valueTo", $event))
+        }, null, 8, ["model-value", "type"])) : createCommentVNode("v-if", true)
+      ],
+      64
+      /* STABLE_FRAGMENT */
+    )),
+    createElementVNode("div", _hoisted_2$1, [
+      createVNode(_component_SqBtn, {
+        size: "small",
+        variant: "text",
+        color: "surface",
+        onClick: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("update:modelValue", void 0))
+      }, {
+        default: withCtx(() => [
+          createTextVNode(
+            toDisplayString(_ctx.messages.clear),
+            1
+            /* TEXT */
+          )
+        ]),
+        _: 1
+        /* STABLE */
+      })
+    ])
+  ]);
+}
+const SqGridFilter = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const colIdOf = (c) => c.colId ?? c.field ?? c.headerName ?? "";
+function makeGetter(col) {
+  if (col.valueGetter) return col.valueGetter;
+  const f = col.field;
+  if (!f) return () => void 0;
+  if (!f.includes(".")) return (row) => row[f];
+  return (row) => getByPath(row, f);
+}
+function filterKindOf(col) {
+  if (typeof col.filter === "string") return col.filter;
+  return col.type === "number" ? "number" : col.type === "date" ? "date" : col.type === "boolean" ? "set" : "text";
+}
+const isBlank = (v) => v == null || v === "";
+function matchCondition(value, c) {
+  if (c.kind === "set") {
+    if (!c.values) return true;
+    return c.values.some((x) => x === value || isBlank(x) && isBlank(value) || String(x) === String(value));
+  }
+  const op = c.op ?? (c.kind === "text" ? "contains" : "equals");
+  if (op === "blank") return isBlank(value);
+  if (op === "notBlank") return !isBlank(value);
+  if (c.value == null || c.value === "") return true;
+  if (c.kind === "text") {
+    const v2 = String(value ?? "").toLowerCase();
+    const q = String(c.value).toLowerCase();
+    switch (op) {
+      case "contains":
+        return v2.includes(q);
+      case "notContains":
+        return !v2.includes(q);
+      case "equals":
+        return v2 === q;
+      case "notEqual":
+        return v2 !== q;
+      case "startsWith":
+        return v2.startsWith(q);
+      case "endsWith":
+        return v2.endsWith(q);
+      default:
+        return true;
+    }
+  }
+  const toNum = (x) => c.kind === "date" ? toDate(x)?.getTime() ?? NaN : Number(x);
+  const v = toNum(value);
+  const a = toNum(c.value);
+  if (isNaN(v)) return false;
+  switch (op) {
+    case "equals":
+      return c.kind === "date" ? Math.floor(v / 864e5) === Math.floor(a / 864e5) : v === a;
+    case "notEqual":
+      return v !== a;
+    case "gt":
+      return v > a;
+    case "gte":
+      return v >= a;
+    case "lt":
+      return v < a;
+    case "lte":
+      return v <= a;
+    case "between":
+      return v >= a && v <= toNum(c.valueTo);
+    default:
+      return true;
+  }
+}
+function filterRows(rows, columns, model, quick) {
+  const active = Object.entries(model).filter(([, c]) => c && (c.kind === "set" ? !!c.values : c.op === "blank" || c.op === "notBlank" || c.value != null && c.value !== ""));
+  const byId = new Map(columns.map((c) => [colIdOf(c), c]));
+  const checks = active.map(([id, cond]) => ({ get: makeGetter(byId.get(id) ?? { field: id }), cond }));
+  const q = quick.trim().toLowerCase();
+  const quickGetters = q ? columns.filter((c) => !c.hide).map((c) => makeGetter(c)) : [];
+  const out = [];
+  for (let i = 0; i < rows.length; i++) {
+    const row = rows[i];
+    let ok = true;
+    for (const { get, cond } of checks) {
+      if (!matchCondition(get(row), cond)) {
+        ok = false;
+        break;
+      }
+    }
+    if (ok && q) {
+      ok = false;
+      for (const get of quickGetters) {
+        const v = get(row);
+        if (v == null || typeof v === "object") continue;
+        if (String(v).toLowerCase().includes(q)) {
+          ok = true;
+          break;
+        }
+      }
+    }
+    if (ok) out.push(i);
+  }
+  return out;
+}
+function sortIndices(rows, indices, columns, sort) {
+  if (!sort.length) return indices;
+  const byId = new Map(columns.map((c) => [colIdOf(c), c]));
+  const specs = sort.map((s) => {
+    const col = byId.get(s.colId) ?? { field: s.colId };
+    const get = makeGetter(col);
+    const keys = new Array(rows.length);
+    for (const i of indices) keys[i] = get(rows[i]);
+    return { keys, dir: s.sort === "desc" ? -1 : 1, cmp: col.comparator, date: col.type === "date" };
+  });
+  for (const s of specs) if (s.date) for (const i of indices) s.keys[i] = toDate(s.keys[i])?.getTime() ?? null;
+  return indices.slice().sort((a, b) => {
+    for (const s of specs) {
+      const ka = s.keys[a];
+      const kb = s.keys[b];
+      const blankA = ka == null || ka === "";
+      const blankB = kb == null || kb === "";
+      if (blankA !== blankB) return blankA ? 1 : -1;
+      const r = s.cmp ? s.cmp(ka, kb, rows[a], rows[b]) : compareValues(ka, kb);
+      if (r) return r * s.dir;
+    }
+    return a - b;
+  });
+}
+function aggregate(values, fn) {
+  if (typeof fn === "function") return fn(values);
+  const nums = values.filter((v) => v != null && v !== "").map(Number).filter((n) => !isNaN(n));
+  switch (fn) {
+    case "sum":
+      return nums.reduce((a, b) => a + b, 0);
+    case "avg":
+      return nums.length ? nums.reduce((a, b) => a + b, 0) / nums.length : null;
+    case "min":
+      return nums.length ? Math.min(...nums) : null;
+    case "max":
+      return nums.length ? Math.max(...nums) : null;
+    case "count":
+      return values.length;
+    case "first":
+      return values[0];
+    case "last":
+      return values[values.length - 1];
+  }
+}
+function computeAgg(rows, leaves, aggCols) {
+  const agg = {};
+  for (const a of aggCols) agg[a.id] = aggregate(leaves.map((i) => a.get(rows[i])), a.fn);
+  return agg;
+}
+function groupRows(rows, indices, columns, groupBy) {
+  const byId = new Map(columns.map((c) => [colIdOf(c), c]));
+  const aggCols = columns.filter((c) => c.aggFunc).map((c) => ({ id: colIdOf(c), get: makeGetter(c), fn: c.aggFunc }));
+  const build = (idx, level, parentId) => {
+    const colId = groupBy[level];
+    const get = makeGetter(byId.get(colId) ?? { field: colId });
+    const buckets = /* @__PURE__ */ new Map();
+    for (const i of idx) {
+      const key = get(rows[i]);
+      const k = String(key ?? "");
+      let b = buckets.get(k);
+      if (!b) buckets.set(k, b = { key, leaves: [] });
+      b.leaves.push(i);
+    }
+    return Array.from(buckets.values()).map((b) => {
+      const id = `${parentId}/${colId}:${String(b.key ?? "")}`;
+      return {
+        key: b.key,
+        colId,
+        id,
+        level,
+        leaves: b.leaves,
+        children: level + 1 < groupBy.length ? build(b.leaves, level + 1, id) : [],
+        agg: computeAgg(rows, b.leaves, aggCols)
+      };
+    });
+  };
+  return groupBy.length ? build(indices, 0, "g") : [];
+}
+function treeRows(rows, indices, columns, getDataPath) {
+  const aggCols = columns.filter((c) => c.aggFunc).map((c) => ({ id: colIdOf(c), get: makeGetter(c), fn: c.aggFunc }));
+  const root = { children: [] };
+  const nodes = /* @__PURE__ */ new Map();
+  for (const i of indices) {
+    const path = getDataPath(rows[i]);
+    let parent = root;
+    let id = "t";
+    path.forEach((part, depth) => {
+      id += `/${part}`;
+      let node = nodes.get(id);
+      if (!node) {
+        node = { key: part, colId: "__tree", id, level: depth, children: [], leaves: [], agg: {} };
+        nodes.set(id, node);
+        parent.children.push(node);
+      }
+      if (depth === path.length - 1) node.self = i;
+      node.leaves.push(i);
+      parent = node;
+    });
+  }
+  for (const n of nodes.values()) if (n.children.length) n.agg = computeAgg(rows, n.leaves, aggCols);
+  return root.children;
+}
+function flatten(rows, indices, groups, opts) {
+  const out = [];
+  const pushData = (i, level) => {
+    const id = opts.rowId(rows[i], i);
+    out.push({ kind: "data", id, data: rows[i], level, sourceIndex: i });
+    if (opts.detailOpen?.has(id)) out.push({ kind: "detail", id: `${id}__detail`, data: rows[i], level, sourceIndex: i });
+  };
+  if (!groups) {
+    for (const i of indices) pushData(i, 0);
+    return out;
+  }
+  const isOpen = (id) => opts.expandAll ? !opts.collapsed?.has(id) : opts.expanded.has(id);
+  const walk = (nodes) => {
+    for (const g of nodes) {
+      const self = g.self;
+      if (opts.tree && !g.children.length && self != null) {
+        pushData(self, g.level);
+        continue;
+      }
+      const expanded = isOpen(g.id);
+      const leafIds = g.leaves.map((i) => opts.rowId(rows[i], i));
+      out.push({
+        kind: "group",
+        id: g.id,
+        data: opts.tree && self != null ? rows[self] : null,
+        level: g.level,
+        sourceIndex: self,
+        group: { key: g.key, colId: g.colId, count: opts.tree ? g.leaves.length - (self != null ? 1 : 0) : g.leaves.length, expanded, agg: g.agg, leafIds }
+      });
+      if (!expanded) continue;
+      if (g.children.length) walk(g.children);
+      else for (const i of g.leaves) pushData(i, g.level + 1);
+    }
+  };
+  walk(groups);
+  return out;
+}
+function allGroupIds(groups) {
+  const ids = [];
+  const walk = (n) => n.forEach((g) => {
+    if (g.children.length || g.colId !== "__tree") ids.push(g.id);
+    walk(g.children);
+  });
+  walk(groups);
+  return ids;
+}
+function rowLayout(rows, rowHeight, detailHeight) {
+  const offsets = new Float64Array(rows.length + 1);
+  for (let i = 0; i < rows.length; i++) offsets[i + 1] = offsets[i] + (rows[i].kind === "detail" ? detailHeight : rowHeight);
+  const indexAt = (y) => {
+    let lo = 0;
+    let hi = rows.length - 1;
+    while (lo < hi) {
+      const mid = lo + hi + 1 >> 1;
+      if (offsets[mid] <= y) lo = mid;
+      else hi = mid - 1;
+    }
+    return Math.max(0, lo);
+  };
+  return { offsets, total: offsets[rows.length], indexAt };
+}
+function pivotRows(rows, indices, columns, groupBy, pivotCol) {
+  const byId = new Map(columns.map((c) => [colIdOf(c), c]));
+  const valueCols = columns.filter((c) => c.aggFunc);
+  const pGet = makeGetter(byId.get(pivotCol) ?? { field: pivotCol });
+  const gGets = groupBy.map((id) => makeGetter(byId.get(id) ?? { field: id }));
+  const pivotKeys = [];
+  const seen = /* @__PURE__ */ new Set();
+  const buckets = /* @__PURE__ */ new Map();
+  for (const i of indices) {
+    const pk = String(pGet(rows[i]) ?? "");
+    if (!seen.has(pk)) {
+      seen.add(pk);
+      pivotKeys.push(pk);
+    }
+    const keys = gGets.map((g) => g(rows[i]));
+    const k = keys.map(String).join("
");
+    let b = buckets.get(k);
+    if (!b) buckets.set(k, b = { keys, cells: /* @__PURE__ */ new Map() });
+    let cell = b.cells.get(pk);
+    if (!cell) b.cells.set(pk, cell = []);
+    cell.push(i);
+  }
+  pivotKeys.sort((a, b) => compareValues(a, b));
+  const outRows = [];
+  for (const b of buckets.values()) {
+    const r = {};
+    groupBy.forEach((id, k) => r[id] = b.keys[k]);
+    for (const pk of pivotKeys)
+      for (const vc of valueCols) {
+        const leaves = b.cells.get(pk) ?? [];
+        const get = makeGetter(vc);
+        r[`${pk}__${colIdOf(vc)}`] = leaves.length ? aggregate(leaves.map((i) => get(rows[i])), vc.aggFunc) : null;
+      }
+    outRows.push(r);
+  }
+  const outCols = [
+    ...groupBy.map((id) => ({ ...byId.get(id), colId: id, field: id, pinned: "left", rowGroup: false, valueGetter: void 0 })),
+    ...pivotKeys.flatMap(
+      (pk) => valueCols.map((vc) => ({
+        colId: `${pk}__${colIdOf(vc)}`,
+        field: `${pk}__${colIdOf(vc)}`,
+        headerName: valueCols.length > 1 ? `${vc.headerName ?? colIdOf(vc)}` : pk,
+        group: valueCols.length > 1 ? pk : void 0,
+        type: "number",
+        align: "right",
+        aggFunc: vc.aggFunc,
+        valueFormatter: vc.valueFormatter,
+        width: 120
+      }))
+    )
+  ];
+  return { rows: outRows, columns: outCols };
+}
+function toCsv(header, body, sep = ",") {
+  const esc = (s) => /[",\n\r]/.test(s) || s.includes(sep) ? `"${s.replace(/"/g, '""')}"` : s;
+  return [header, ...body].map((r) => r.map(esc).join(sep)).join("\r\n");
+}
+const parseTsv = (text) => text.replace(/\r?\n$/, "").split(/\r?\n/).map((l) => l.split("	"));
+const SELECT_COL = { colId: "__select", headerName: "", width: 48, resizable: false, sortable: false, filter: false, suppressMenu: true, lockPosition: true };
+function setByPath(obj, path, value) {
+  var _a;
+  const keys = path.split(".");
+  let cur = obj;
+  for (let i = 0; i < keys.length - 1; i++) cur = cur[_a = keys[i]] ?? (cur[_a] = {});
+  cur[keys[keys.length - 1]] = value;
+}
+const _sfc_main = defineComponent({
+  name: "SqDataGrid",
+  components: { SqShape, SqBtn, SqCheckbox, SqChip, SqDivider, SqEmptyState, SqIcon, SqListItem, SqMenu, SqPagination, SqProgressCircular, SqTextField, SqGridFilter },
+  props: {
+    rows: { type: Array, default: () => [] },
+    columns: { type: Array, default: () => [] },
+    defaultColDef: { type: Object, default: () => ({}) },
+    /** Field name or function producing a stable row id. */
+    rowId: { type: [String, Function], default: "id" },
+    height: { type: [Number, String], default: 520 },
+    rowHeight: { type: Number, default: 40 },
+    headerHeight: { type: Number, default: 42 },
+    detailHeight: { type: Number, default: 220 },
+    rowSelection: { type: String, default: null },
+    /** Auto checkbox column when rowSelection = multiple. */
+    selectionColumn: { type: Boolean, default: true },
+    selected: { type: Array, default: void 0 },
+    sortModel: { type: Array, default: void 0 },
+    filterModel: { type: Object, default: void 0 },
+    quickFilter: { type: String, default: void 0 },
+    groupBy: { type: Array, default: void 0 },
+    /** Levels expanded by default; -1 = all. */
+    groupDefaultExpanded: { type: Number, default: 0 },
+    groupColumn: { type: Object, default: () => ({}) },
+    treeData: Boolean,
+    getDataPath: { type: Function, default: void 0 },
+    pivotMode: Boolean,
+    pivotColumn: { type: String, default: void 0 },
+    masterDetail: Boolean,
+    pinnedTopRows: { type: Array, default: () => [] },
+    pinnedBottomRows: { type: Array, default: () => [] },
+    /** Bottom row with column aggFunc totals over the filtered rows. */
+    totalsRow: Boolean,
+    pagination: Boolean,
+    pageSize: { type: Number, default: 50 },
+    pageSizes: { type: Array, default: () => [25, 50, 100, 500] },
+    /** Infinite / server-side row model. Sorting & filtering are delegated to getRows. */
+    datasource: { type: Object, default: void 0 },
+    blockSize: { type: Number, default: 100 },
+    loading: Boolean,
+    toolbar: Boolean,
+    groupPanel: Boolean,
+    floatingFilters: Boolean,
+    statusBar: { type: Boolean, default: true },
+    striped: Boolean,
+    columnLines: Boolean,
+    rowClassName: { type: Function, default: void 0 },
+    locale: { type: String, default: void 0 }
+  },
+  emits: ["update:selected", "update:sortModel", "update:filterModel", "update:quickFilter", "update:groupBy", "row-click", "row-dblclick", "cell-click", "cell-value-changed", "column-state-change", "selection-change"],
+  setup(props, { emit, slots }) {
+    const viewport = ref(null);
+    const ctxAnchor = ref(null);
+    const scrollTop = ref(0);
+    const scrollLeft = ref(0);
+    const vpWidth = ref(800);
+    const vpHeight = ref(400);
+    const dataVersion = ref(0);
+    const loc = computed(() => props.locale ?? config.locale.code);
+    const isServer = computed(() => !!props.datasource);
+    const sortModelRef = useProxiedModel(props, emit, "sortModel", () => []);
+    const filterModelRef = useProxiedModel(props, emit, "filterModel", () => ({}));
+    const quick = useProxiedModel(props, emit, "quickFilter", () => "");
+    const groupByRef = useProxiedModel(props, emit, "groupBy", () => props.columns.filter((c) => c.rowGroup).map(colIdOf));
+    const selectedRef = useProxiedModel(props, emit, "selected", () => []);
+    const sortModelList = computed(() => sortModelRef.value ?? []);
+    const filterModelObj = computed(() => filterModelRef.value ?? {});
+    const groupBy = computed(() => groupByRef.value ?? []);
+    const selectedIds = computed(() => selectedRef.value ?? []);
+    const selectedSet = computed(() => new Set(selectedIds.value));
+    const colOrder = ref([]);
+    const colWidth = ref({});
+    const colHidden = ref({});
+    const colPinned = ref({});
+    const baseCols = computed(() => props.columns.map((c) => ({ ...props.defaultColDef, ...c })));
+    watch(baseCols, (cols) => {
+      const ids = cols.map(colIdOf);
+      colOrder.value = [...colOrder.value.filter((id) => ids.includes(id)), ...ids.filter((id) => !colOrder.value.includes(id))];
+    }, { immediate: true });
+    const rowIdOf = (row, i) => String(typeof props.rowId === "function" ? props.rowId(row, i) : row?.[props.rowId] ?? i);
+    const raw = computed(() => {
+      void dataVersion.value;
+      return toRaw(props.rows);
+    });
+    const quickApplied = ref(quick.value ?? "");
+    let quickApplyTimer;
+    watch(quick, (q) => {
+      clearTimeout(quickApplyTimer);
+      quickApplyTimer = setTimeout(() => quickApplied.value = q ?? "", raw.value.length > 2e4 ? 160 : 0);
+    });
+    const filteredIdx = computed(() => isServer.value ? [] : filterRows(raw.value, baseCols.value, filterModelObj.value, quickApplied.value));
+    const sortedIdx = computed(() => sortIndices(raw.value, filteredIdx.value, baseCols.value, sortModelList.value));
+    const pivot = computed(() => props.pivotMode && props.pivotColumn && !isServer.value ? pivotRows(raw.value, sortedIdx.value, baseCols.value, groupBy.value, props.pivotColumn) : null);
+    const viewRows = computed(() => pivot.value ? pivot.value.rows : raw.value);
+    const viewIdx = computed(() => pivot.value ? pivot.value.rows.map((_, i) => i) : sortedIdx.value);
+    const viewCols = computed(() => pivot.value ? pivot.value.columns.map((c) => ({ ...props.defaultColDef, ...c })) : baseCols.value);
+    const groups = computed(() => {
+      if (isServer.value || pivot.value) return null;
+      if (props.treeData && props.getDataPath) return treeRows(viewRows.value, viewIdx.value, viewCols.value, props.getDataPath);
+      return groupBy.value.length ? groupRows(viewRows.value, viewIdx.value, viewCols.value, groupBy.value) : null;
+    });
+    const hasGroups = computed(() => !!groups.value);
+    const expanded = ref(/* @__PURE__ */ new Set());
+    const collapsed = ref(/* @__PURE__ */ new Set());
+    const expandAllFlag = ref(props.groupDefaultExpanded === -1);
+    const detailOpen = ref(/* @__PURE__ */ new Set());
+    watch(groups, (g) => {
+      if (!g || props.groupDefaultExpanded <= 0) return;
+      const ids = new Set(expanded.value);
+      const walk = (nodes, lvl) => nodes.forEach((n) => {
+        if (lvl < props.groupDefaultExpanded) {
+          ids.add(n.id);
+          walk(n.children, lvl + 1);
+        }
+      });
+      walk(g, 0);
+      expanded.value = ids;
+    }, { immediate: true });
+    const display = computed(
+      () => flatten(viewRows.value, viewIdx.value, groups.value, {
+        expanded: expanded.value,
+        expandAll: expandAllFlag.value,
+        collapsed: collapsed.value,
+        rowId: rowIdOf,
+        detailOpen: props.masterDetail ? detailOpen.value : void 0,
+        tree: props.treeData
+      })
+    );
+    const page = ref(1);
+    const pageSizeState = ref(props.pageSize);
+    const pageCount = computed(() => Math.max(1, Math.ceil(display.value.length / pageSizeState.value)));
+    watch([pageCount, filteredIdx], () => page.value = Math.min(page.value, pageCount.value));
+    const paged = computed(() => props.pagination ? display.value.slice((page.value - 1) * pageSizeState.value, page.value * pageSizeState.value) : display.value);
+    const onPageSize = (e) => {
+      pageSizeState.value = Number(e.target.value);
+      page.value = 1;
+    };
+    const pageRangeText = computed(() => {
+      const n = display.value.length;
+      const a = n ? (page.value - 1) * pageSizeState.value + 1 : 0;
+      return config.locale.messages.pageRange.replace("{0}", String(a)).replace("{1}", String(Math.min(n, page.value * pageSizeState.value))).replace("{2}", String(n));
+    });
+    const blocks = /* @__PURE__ */ new Map();
+    const blockVersion = ref(0);
+    const serverCount = ref(0);
+    const serverLoading = ref(false);
+    let epoch = 0;
+    const loadBlock = async (b) => {
+      if (!props.datasource || blocks.has(b)) return;
+      blocks.set(b, "loading");
+      const my = epoch;
+      serverLoading.value = true;
+      try {
+        const res = await props.datasource.getRows({ startRow: b * props.blockSize, endRow: (b + 1) * props.blockSize, sortModel: sortModelList.value, filterModel: filterModelObj.value, quickFilter: quick.value ?? "" });
+        if (my !== epoch) return;
+        blocks.set(b, res.rows);
+        if (res.lastRow != null) serverCount.value = res.lastRow;
+        else if (res.rows.length < props.blockSize) serverCount.value = b * props.blockSize + res.rows.length;
+        else serverCount.value = Math.max(serverCount.value, (b + 2) * props.blockSize);
+      } catch {
+        if (my === epoch) blocks.delete(b);
+      } finally {
+        if (my === epoch) {
+          serverLoading.value = [...blocks.values()].some((v) => v === "loading");
+          blockVersion.value++;
+        }
+      }
+    };
+    const purge = () => {
+      epoch++;
+      blocks.clear();
+      serverCount.value = 0;
+      blockVersion.value++;
+      if (viewport.value) viewport.value.scrollTop = 0;
+      loadBlock(0);
+    };
+    let quickTimer;
+    watch([sortModelList, filterModelObj], () => isServer.value && purge(), { deep: true });
+    watch(quick, () => {
+      if (!isServer.value) return;
+      clearTimeout(quickTimer);
+      quickTimer = setTimeout(purge, 250);
+    });
+    watch(() => props.datasource, (ds) => ds && purge());
+    onMounted(() => props.datasource && purge());
+    const rowCount = computed(() => isServer.value ? serverCount.value : paged.value.length);
+    const rowAt = (i) => {
+      if (!isServer.value) return paged.value[i];
+      void blockVersion.value;
+      const b = Math.floor(i / props.blockSize);
+      const data = blocks.get(b);
+      if (Array.isArray(data)) {
+        const row = data[i - b * props.blockSize];
+        if (row) return { kind: "data", id: rowIdOf(row, i), data: row, level: 0, sourceIndex: i };
+      }
+      return { kind: "loading", id: `__loading_${i}`, data: null, level: 0 };
+    };
+    const titleOf = (id) => {
+      const c = viewCols.value.find((x) => colIdOf(x) === id) ?? baseCols.value.find((x) => colIdOf(x) === id);
+      return c?.headerName ?? (c?.field ? c.field.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (s) => s.toUpperCase()) : id);
+    };
+    const groupColDef = computed(() => ({ colId: "__group", headerName: props.treeData ? "Name" : "Group", width: 240, sortable: false, filter: false, suppressMenu: true, lockPosition: true, ...props.groupColumn }));
+    const orderedCols = computed(() => {
+      const cols = viewCols.value;
+      const byId = new Map(cols.map((c) => [colIdOf(c), c]));
+      const ordered = pivot.value ? cols : [...colOrder.value.map((id) => byId.get(id)).filter(Boolean), ...cols.filter((c) => !colOrder.value.includes(colIdOf(c)))];
+      const auto = [];
+      if (props.rowSelection === "multiple" && props.selectionColumn) auto.push(SELECT_COL);
+      if (groups.value || props.masterDetail && !props.treeData) auto.push(groupColDef.value);
+      return { auto, ordered };
+    });
+    const visibleCols = computed(() => {
+      const { auto, ordered } = orderedCols.value;
+      const list = [
+        ...auto.map((c) => ({ id: colIdOf(c), col: c, auto: true })),
+        ...ordered.filter((c) => !(colHidden.value[colIdOf(c)] ?? c.hide)).map((c) => ({ id: colIdOf(c), col: c, auto: false }))
+      ];
+      const resolved = list.map((x) => ({
+        ...x,
+        pinned: x.auto ? "left" : colPinned.value[x.id] !== void 0 ? colPinned.value[x.id] : x.col.pinned ?? null,
+        width: colWidth.value[x.id] ?? x.col.width ?? (x.col.flex ? 0 : 150),
+        title: x.id === "__group" ? x.col.headerName : titleOf(x.id)
+      }));
+      const anyLeft = resolved.some((r) => !r.auto && r.pinned === "left");
+      if (!anyLeft) resolved.forEach((r) => {
+        if (r.auto) r.pinned = null;
+      });
+      const fixed = resolved.reduce((s, r) => s + (r.col.flex && colWidth.value[r.id] == null ? 0 : r.width), 0);
+      const flexCols = resolved.filter((r) => r.col.flex && colWidth.value[r.id] == null);
+      const totalFlex = flexCols.reduce((s, r) => s + (r.col.flex ?? 0), 0);
+      const avail = Math.max(0, vpWidth.value - fixed - 2);
+      for (const r of flexCols) r.width = clamp(Math.floor(avail * (r.col.flex ?? 1) / totalFlex), r.col.minWidth ?? 80, r.col.maxWidth ?? 4e3);
+      const left = resolved.filter((r) => r.pinned === "left");
+      const right = resolved.filter((r) => r.pinned === "right");
+      const center = resolved.filter((r) => !r.pinned);
+      return { left, center, right };
+    });
+    const flatCols = computed(() => [...visibleCols.value.left, ...visibleCols.value.center, ...visibleCols.value.right]);
+    const flatIndex = computed(() => new Map(flatCols.value.map((c, i) => [c.id, i])));
+    const leftWidth = computed(() => visibleCols.value.left.reduce((s, c) => s + c.width, 0));
+    const rightWidth = computed(() => visibleCols.value.right.reduce((s, c) => s + c.width, 0));
+    const centerOffsets = computed(() => {
+      const o = [0];
+      for (const c of visibleCols.value.center) o.push(o[o.length - 1] + c.width);
+      return o;
+    });
+    const totalWidth = computed(() => leftWidth.value + rightWidth.value + centerOffsets.value[centerOffsets.value.length - 1]);
+    const renderCols = computed(() => {
+      const { left, center, right } = visibleCols.value;
+      const out = [];
+      let acc = 0;
+      left.forEach((c, i) => {
+        out.push({ key: c.id, id: c.id, col: c.col, title: c.title, width: c.width, pinned: "left", auto: c.auto, flatIndex: flatIndex.value.get(c.id), edgeLeft: i === left.length - 1, style: { width: `${c.width}px`, left: `${acc}px` } });
+        acc += c.width;
+      });
+      const offs = centerOffsets.value;
+      const viewW = Math.max(0, vpWidth.value - leftWidth.value - rightWidth.value);
+      let start = 0;
+      while (start < center.length && offs[start + 1] < scrollLeft.value) start++;
+      let end = start;
+      while (end < center.length && offs[end] < scrollLeft.value + viewW) end++;
+      start = Math.max(0, start - 2);
+      end = Math.min(center.length, end + 2);
+      if (offs[start] > 0) out.push({ key: "__padL", id: "__padL", col: null, title: "", width: offs[start], pinned: null, flatIndex: -1, style: { width: `${offs[start]}px` } });
+      for (let i = start; i < end; i++) {
+        const c = center[i];
+        out.push({ key: c.id, id: c.id, col: c.col, title: c.title, width: c.width, pinned: null, auto: c.auto, flatIndex: flatIndex.value.get(c.id), style: { width: `${c.width}px` } });
+      }
+      const padR = offs[center.length] - offs[end];
+      if (padR > 0) out.push({ key: "__padR", id: "__padR", col: null, title: "", width: padR, pinned: null, flatIndex: -1, style: { width: `${padR}px` } });
+      let racc = 0;
+      for (let i = right.length - 1; i >= 0; i--) {
+        const c = right[i];
+        out.push({ key: c.id, id: c.id, col: c.col, title: c.title, width: c.width, pinned: "right", auto: c.auto, flatIndex: flatIndex.value.get(c.id), edgeRight: i === 0, style: { width: `${c.width}px`, right: `${racc}px` } });
+        racc += c.width;
+      }
+      const rightPart = out.splice(out.length - right.length, right.length).reverse();
+      return [...out, ...rightPart];
+    });
+    const hasHeaderGroups = computed(() => flatCols.value.some((c) => c.col.group));
+    const headerGroups = computed(() => {
+      const out = [];
+      for (const rc of renderCols.value) {
+        const label = rc.col?.group ?? "";
+        const last = out[out.length - 1];
+        if (last && label && rc.col && last.label === label && last.pin === rc.pinned) {
+          last.width += rc.width;
+          last.style.width = `${last.width}px`;
+          continue;
+        }
+        const style = { width: `${rc.width}px` };
+        if (rc.pinned === "left") style.left = rc.style.left;
+        if (rc.pinned === "right") style.right = rc.style.right;
+        out.push({
+          key: `${rc.key}-g`,
+          label: rc.col ? label : "",
+          pin: rc.pinned,
+          width: rc.width,
+          style,
+          cls: { "sq-datagrid__hcell--pinned-left": rc.pinned === "left", "sq-datagrid__hcell--pinned-right": rc.pinned === "right", "sq-datagrid__header-group--empty": !label }
+        });
+      }
+      return out;
+    });
+    const filterRowHeight = 38;
+    const headBlock = computed(() => props.headerHeight * (hasHeaderGroups.value ? 2 : 1) + (props.floatingFilters ? filterRowHeight : 0) + props.pinnedTopRows.length * props.rowHeight);
+    const layout = computed(() => {
+      if (isServer.value) {
+        const n = serverCount.value;
+        return { offsets: null, total: n * props.rowHeight, indexAt: (y) => Math.floor(y / props.rowHeight) };
+      }
+      return rowLayout(paged.value, props.rowHeight, props.detailHeight);
+    });
+    const range = computed(() => {
+      const n = rowCount.value;
+      if (!n) return { start: 0, end: -1 };
+      const top = Math.max(0, scrollTop.value);
+      const start = Math.max(0, layout.value.indexAt(top) - 6);
+      const end = Math.min(n - 1, layout.value.indexAt(top + vpHeight.value) + 6);
+      return { start, end };
+    });
+    const visibleRows = computed(() => {
+      const out = [];
+      const { start, end } = range.value;
+      const offs = layout.value.offsets;
+      for (let i = start; i <= end; i++) {
+        const row = rowAt(i);
+        if (!row) continue;
+        const top = offs ? offs[i] : i * props.rowHeight;
+        const height = offs ? offs[i + 1] - offs[i] : props.rowHeight;
+        out.push({ index: i, top, height, row });
+      }
+      return out;
+    });
+    watch(range, (r) => {
+      if (!isServer.value || r.end < 0) return;
+      for (let b = Math.floor(r.start / props.blockSize); b <= Math.floor(r.end / props.blockSize); b++) loadBlock(b);
+    });
+    const onScroll = () => {
+      const el = viewport.value;
+      if (!el) return;
+      scrollTop.value = el.scrollTop;
+      scrollLeft.value = el.scrollLeft;
+    };
+    let ro;
+    onMounted(() => {
+      const el = viewport.value;
+      const measure = () => {
+        vpWidth.value = el.clientWidth;
+        vpHeight.value = el.clientHeight;
+      };
+      measure();
+      if (typeof ResizeObserver !== "undefined") {
+        ro = new ResizeObserver(measure);
+        ro.observe(el);
+      }
+    });
+    onBeforeUnmount(() => {
+      ro?.disconnect();
+      clearTimeout(quickTimer);
+      clearTimeout(quickApplyTimer);
+      window.removeEventListener("pointermove", onResizeMove);
+      window.removeEventListener("pointerup", onResizeEnd);
+      window.removeEventListener("mouseup", endSelect);
+    });
+    const getters = /* @__PURE__ */ new WeakMap();
+    const cellValue = (rc, row) => {
+      if (!rc.col || !row) return void 0;
+      let g = getters.get(rc.col);
+      if (!g) getters.set(rc.col, g = makeGetter(rc.col));
+      return g(row);
+    };
+    let numFmt = null;
+    let numFmtLocale = "";
+    const fmtNum = (v) => {
+      if (numFmtLocale !== loc.value) {
+        numFmt = new Intl.NumberFormat(loc.value, { maximumFractionDigits: 2 });
+        numFmtLocale = loc.value;
+      }
+      return numFmt.format(v);
+    };
+    const formatValue = (col, v, row) => {
+      if (col.valueFormatter) return col.valueFormatter(v, row);
+      if (v == null || v === "") return "";
+      if (col.type === "number" && typeof v === "number") return fmtNum(v);
+      if (col.type === "date") return formatDate(v, loc.value);
+      return String(v);
+    };
+    const formatCell = (rc, row) => rc.col ? formatValue(rc.col, cellValue(rc, row), row) : "";
+    const cellParams = (row, rc, rowIndex) => ({ value: cellValue(rc, row), formatted: formatCell(rc, row), row, column: rc.col, rowIndex });
+    const groupLabel = (row) => {
+      if (row.kind === "group") {
+        const g = row.group;
+        if (g.colId === "__tree") return String(g.key ?? "");
+        const col = viewCols.value.find((c) => colIdOf(c) === g.colId);
+        return col ? formatValue(col, g.key, null) || "(Blank)" : String(g.key ?? "");
+      }
+      if (props.treeData && props.getDataPath && row.data) {
+        const p = props.getDataPath(row.data);
+        return p[p.length - 1];
+      }
+      return "";
+    };
+    const groupAggText = (row, rc) => {
+      if (!rc.col) return "";
+      const v = row.group?.agg[rc.id];
+      if (v === void 0) return row.data && props.treeData ? formatCell(rc, row.data) : "";
+      return formatValue(rc.col, v, null);
+    };
+    const filterKind = (col) => filterKindOf(col);
+    const distinctValues = (id) => {
+      const col = baseCols.value.find((c) => colIdOf(c) === id);
+      if (!col) return [];
+      const get = makeGetter(col);
+      const set = /* @__PURE__ */ new Set();
+      for (const r of raw.value) {
+        set.add(get(r));
+        if (set.size > 5e3) break;
+      }
+      return Array.from(set).sort((a, b) => String(a ?? "").localeCompare(String(b ?? ""), void 0, { numeric: true }));
+    };
+    const sortIndex = (id) => sortModelList.value.findIndex((s) => s.colId === id);
+    const sortDir = (id) => sortModelList.value.find((s) => s.colId === id)?.sort;
+    const ariaSort = (id) => sortDir(id) === "asc" ? "ascending" : sortDir(id) === "desc" ? "descending" : "none";
+    const setSort = (id, dir, multi = false) => {
+      const rest = multi ? sortModelList.value.filter((s) => s.colId !== id) : [];
+      sortModelRef.value = dir ? [...rest, { colId: id, sort: dir }] : rest;
+    };
+    let resized = false;
+    const onHeaderClick = (e, rc) => {
+      if (resized) return void (resized = false);
+      if (!rc.col || rc.auto || rc.col.sortable === false) return;
+      const cur = sortDir(rc.id);
+      const next = cur === "asc" ? "desc" : cur === "desc" ? null : "asc";
+      if (e.shiftKey) {
+        const list = sortModelList.value.slice();
+        const i = list.findIndex((s) => s.colId === rc.id);
+        if (next && i >= 0) list[i] = { colId: rc.id, sort: next };
+        else if (next) list.push({ colId: rc.id, sort: next });
+        else list.splice(i, 1);
+        sortModelRef.value = list;
+      } else setSort(rc.id, next);
+    };
+    const setFilter = (id, cond) => {
+      const next = { ...filterModelObj.value };
+      if (cond) next[id] = cond;
+      else delete next[id];
+      filterModelRef.value = next;
+    };
+    const floatingValue = (id) => {
+      const f = filterModelObj.value[id];
+      return f && f.kind !== "set" ? f.value ?? "" : "";
+    };
+    let floatTimer;
+    const onFloatingInput = (e, rc) => {
+      const value = e.target.value;
+      const kind = filterKind(rc.col);
+      clearTimeout(floatTimer);
+      floatTimer = setTimeout(() => setFilter(rc.id, value === "" ? void 0 : { kind, op: kind === "text" ? "contains" : "equals", value: kind === "number" ? Number(value) : value }), 180);
+    };
+    const toggleGroupBy = (id) => groupByRef.value = groupBy.value.includes(id) ? groupBy.value.filter((x) => x !== id) : [...groupBy.value, id];
+    const removeGroup = (id) => groupByRef.value = groupBy.value.filter((x) => x !== id);
+    const toggleGroup = (row) => {
+      if (expandAllFlag.value) {
+        const s = new Set(collapsed.value);
+        s.has(row.id) ? s.delete(row.id) : s.add(row.id);
+        collapsed.value = s;
+      } else {
+        const s = new Set(expanded.value);
+        s.has(row.id) ? s.delete(row.id) : s.add(row.id);
+        expanded.value = s;
+      }
+    };
+    const expandAll = () => {
+      expandAllFlag.value = true;
+      collapsed.value = /* @__PURE__ */ new Set();
+    };
+    const collapseAll = () => {
+      expandAllFlag.value = false;
+      expanded.value = /* @__PURE__ */ new Set();
+    };
+    const toggleDetail = (id) => {
+      const s = new Set(detailOpen.value);
+      s.has(id) ? s.delete(id) : s.add(id);
+      detailOpen.value = s;
+    };
+    const emitColumnState = () => emit("column-state-change", flatCols.value.filter((c) => !c.auto).map((c) => ({ colId: c.id, width: c.width, hide: false, pinned: c.pinned })));
+    const setHidden = (id, hide) => {
+      colHidden.value = { ...colHidden.value, [id]: hide };
+      emitColumnState();
+    };
+    const setPinned = (id, pin) => {
+      colPinned.value = { ...colPinned.value, [id]: pin };
+      emitColumnState();
+    };
+    const chooserCols = computed(() => orderedCols.value.ordered.map((c) => ({ id: colIdOf(c), title: titleOf(colIdOf(c)), hidden: colHidden.value[colIdOf(c)] ?? !!c.hide })));
+    let resizeState = null;
+    const onResizeMove = (e) => {
+      if (!resizeState) return;
+      const w = clamp(resizeState.startW + e.clientX - resizeState.startX, resizeState.min, resizeState.max);
+      colWidth.value = { ...colWidth.value, [resizeState.id]: Math.round(w) };
+    };
+    const onResizeEnd = () => {
+      if (resizeState) {
+        resized = true;
+        setTimeout(() => resized = false, 0);
+        emitColumnState();
+      }
+      resizeState = null;
+      window.removeEventListener("pointermove", onResizeMove);
+      window.removeEventListener("pointerup", onResizeEnd);
+    };
+    const startResize = (e, rc) => {
+      resizeState = { id: rc.id, startX: e.clientX, startW: rc.width, min: rc.col?.minWidth ?? 48, max: rc.col?.maxWidth ?? 2e3 };
+      window.addEventListener("pointermove", onResizeMove);
+      window.addEventListener("pointerup", onResizeEnd);
+    };
+    let canvas = null;
+    const autoSize = (ids) => {
+      canvas ?? (canvas = document.createElement("canvas"));
+      const ctx = canvas.getContext("2d");
+      if (!ctx || !viewport.value) return;
+      const cs = getComputedStyle(viewport.value);
+      ctx.font = `${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`;
+      const sample = isServer.value ? [] : paged.value.filter((r) => r.kind === "data").slice(0, 300);
+      const next = { ...colWidth.value };
+      for (const c of flatCols.value) {
+        if (c.auto || ids && !ids.includes(c.id)) continue;
+        let w = ctx.measureText(c.title).width + 64;
+        for (const r of sample) w = Math.max(w, ctx.measureText(formatValue(c.col, cellValue(c, r.data), r.data)).width + 32);
+        next[c.id] = Math.ceil(clamp(w, c.col.minWidth ?? 48, c.col.maxWidth ?? 600));
+      }
+      colWidth.value = next;
+      emitColumnState();
+    };
+    const dragColId = ref(null);
+    const dropTarget = ref(null);
+    const onDragStart = (e, rc) => {
+      if (!rc.col || rc.auto || rc.col.lockPosition) return e.preventDefault();
+      dragColId.value = rc.id;
+      e.dataTransfer?.setData("text/plain", rc.id);
+      if (e.dataTransfer) e.dataTransfer.effectAllowed = "move";
+    };
+    const onDragOver = (e, rc) => {
+      if (!dragColId.value || !rc.col || rc.auto) return;
+      dropTarget.value = { id: rc.id, before: e.offsetX < rc.width / 2 };
+    };
+    const onDrop = (rc) => {
+      const from = dragColId.value;
+      const target = dropTarget.value;
+      dragColId.value = null;
+      dropTarget.value = null;
+      if (!from || !target || from === target.id || !rc.col || rc.auto) return;
+      const order = colOrder.value.filter((id) => id !== from);
+      const i = order.indexOf(target.id);
+      order.splice(target.before ? i : i + 1, 0, from);
+      colOrder.value = order;
+      const pin = visibleCols.value.left.some((c) => c.id === target.id) ? "left" : visibleCols.value.right.some((c) => c.id === target.id) ? "right" : null;
+      colPinned.value = { ...colPinned.value, [from]: pin };
+      emitColumnState();
+    };
+    const onGroupDrop = () => {
+      const id = dragColId.value;
+      dragColId.value = null;
+      if (id && !groupBy.value.includes(id)) groupByRef.value = [...groupBy.value, id];
+    };
+    const dataIdsInView = () => isServer.value ? [] : viewIdx.value.map((i) => rowIdOf(viewRows.value[i], i));
+    const setSelected = (ids) => {
+      selectedRef.value = ids;
+      emit("selection-change", ids);
+    };
+    const allSelected = computed(() => {
+      const ids = filteredIdx.value;
+      return ids.length > 0 && selectedIds.value.length >= ids.length && ids.every((i) => selectedSet.value.has(rowIdOf(raw.value[i], i)));
+    });
+    const someSelected = computed(() => !allSelected.value && selectedIds.value.length > 0);
+    const toggleAll = () => setSelected(allSelected.value ? [] : dataIdsInView());
+    const isRowChecked = (row) => row.kind === "group" ? row.group.leafIds.every((id) => selectedSet.value.has(id)) : selectedSet.value.has(row.id);
+    const isRowPartial = (row) => row.kind === "group" && !isRowChecked(row) && row.group.leafIds.some((id) => selectedSet.value.has(id));
+    const toggleRowCheck = (row) => {
+      const ids = row.kind === "group" ? row.group.leafIds : [row.id];
+      const on = isRowChecked(row);
+      const s = new Set(selectedIds.value);
+      ids.forEach((id) => on ? s.delete(id) : s.add(id));
+      setSelected(Array.from(s));
+    };
+    let lastClicked = -1;
+    const onRowClick = (e, vr) => {
+      if (vr.row.kind !== "data") return;
+      emit("row-click", { row: vr.row.data, event: e });
+      if (!props.rowSelection) return;
+      if (props.rowSelection === "single") setSelected(selectedSet.value.has(vr.row.id) && (e.ctrlKey || e.metaKey) ? [] : [vr.row.id]);
+      else if (e.shiftKey && lastClicked >= 0) {
+        const [a, b] = [Math.min(lastClicked, vr.index), Math.max(lastClicked, vr.index)];
+        const ids = new Set(selectedIds.value);
+        for (let i = a; i <= b; i++) {
+          const r = rowAt(i);
+          if (r?.kind === "data") ids.add(r.id);
+        }
+        setSelected(Array.from(ids));
+      } else if (e.ctrlKey || e.metaKey) toggleRowCheck(vr.row);
+      else if (!props.selectionColumn) setSelected([vr.row.id]);
+      lastClicked = vr.index;
+    };
+    const focus = ref(null);
+    const cellRange = ref(null);
+    let anchor = null;
+    let selecting = false;
+    const endSelect = () => {
+      selecting = false;
+      window.removeEventListener("mouseup", endSelect);
+    };
+    const setRange = (a, b) => cellRange.value = { startRow: Math.min(a.row, b.row), endRow: Math.max(a.row, b.row), startCol: Math.min(a.col, b.col), endCol: Math.max(a.col, b.col) };
+    const inRange = (row, col) => {
+      const r = cellRange.value;
+      return !!r && (r.startRow !== r.endRow || r.startCol !== r.endCol) && row >= r.startRow && row <= r.endRow && col >= r.startCol && col <= r.endCol;
+    };
+    const onCellMousedown = (e, vr, rc) => {
+      if (!rc.col || e.button !== 0) return;
+      const pos = { row: vr.index, col: rc.flatIndex };
+      if (editing.value && !isEditing(vr, rc)) commitEdit();
+      if (e.shiftKey && focus.value) setRange(focus.value, pos);
+      else {
+        focus.value = pos;
+        anchor = pos;
+        setRange(pos, pos);
+      }
+      selecting = true;
+      window.addEventListener("mouseup", endSelect);
+      emit("cell-click", { row: vr.row.data, colId: rc.id, value: cellValue(rc, vr.row.data), event: e });
+    };
+    const onCellEnter = (vr, rc) => {
+      if (selecting && anchor && rc.col) setRange(anchor, { row: vr.index, col: rc.flatIndex });
+    };
+    const editing = ref(null);
+    const isEditable = (col, row) => !!row && (typeof col.editable === "function" ? col.editable(row) : !!col.editable);
+    const isEditing = (vr, rc) => !!editing.value && editing.value.row === vr.index && editing.value.colId === rc.id;
+    const editorKind = (rc) => rc.col?.cellEditor ?? (rc.col?.type === "number" ? "number" : rc.col?.type === "date" ? "date" : "text");
+    const undoStack = [];
+    const redoStack = [];
+    const canUndo = ref(false);
+    const applyChanges = (changes, dir) => {
+      for (const c of changes) {
+        const v = dir === "new" ? c.newValue : c.oldValue;
+        if (c.col.valueSetter) c.col.valueSetter(c.row, v);
+        else if (c.col.field) setByPath(c.row, c.col.field, v);
+        emit("cell-value-changed", { row: c.row, colId: colIdOf(c.col), oldValue: dir === "new" ? c.oldValue : c.newValue, newValue: v });
+      }
+      dataVersion.value++;
+    };
+    const record = (changes) => {
+      if (!changes.length) return;
+      applyChanges(changes, "new");
+      undoStack.push(changes);
+      if (undoStack.length > 100) undoStack.shift();
+      redoStack.length = 0;
+      canUndo.value = true;
+    };
+    const undo = () => {
+      const c = undoStack.pop();
+      if (c) {
+        applyChanges(c, "old");
+        redoStack.push(c);
+      }
+      canUndo.value = undoStack.length > 0;
+    };
+    const redo = () => {
+      const c = redoStack.pop();
+      if (c) {
+        applyChanges(c, "new");
+        undoStack.push(c);
+      }
+      canUndo.value = undoStack.length > 0;
+    };
+    const parseFor = (col, text, row) => {
+      if (col.valueParser) return col.valueParser(text, row);
+      if (col.type === "number") return text === "" ? null : Number(text.replace(/[^\d.-]/g, ""));
+      if (col.type === "boolean") return /^(true|1|yes|✓)$/i.test(text);
+      return text;
+    };
+    const startEdit = (rowIndex, flatCol, initial) => {
+      const c = flatCols.value[flatCol];
+      const r = rowAt(rowIndex);
+      if (!c || !r || r.kind !== "data" || !isEditable(c.col, r.data)) return;
+      if (c.col.type === "boolean") return record([{ row: r.data, col: c.col, oldValue: cellValue(c, r.data), newValue: !cellValue(c, r.data) }]);
+      editing.value = { row: rowIndex, colId: c.id, value: initial ?? cellValue(c, r.data) };
+      nextTick(() => {
+        const el = viewport.value?.querySelector(".sq-datagrid__editor");
+        el?.focus();
+        if (initial === void 0) el?.select?.();
+      });
+    };
+    const onEditorInput = (e) => editing.value && (editing.value = { ...editing.value, value: e.target.value });
+    const commitEdit = () => {
+      const ed = editing.value;
+      if (!ed) return;
+      editing.value = null;
+      const r = rowAt(ed.row);
+      const c = flatCols.value.find((x) => x.id === ed.colId);
+      if (!r?.data || !c) return;
+      const newValue = parseFor(c.col, String(ed.value ?? ""), r.data);
+      const oldValue = cellValue(c, r.data);
+      if (newValue !== oldValue) record([{ row: r.data, col: c.col, oldValue, newValue }]);
+    };
+    const cancelEdit = () => {
+      editing.value = null;
+      rootEl()?.focus();
+    };
+    const onEditorKey = (e) => {
+      if (e.key === "Enter" || e.key === "Tab") {
+        e.preventDefault();
+        commitEdit();
+        rootEl()?.focus();
+        moveFocus(e.key === "Enter" ? e.shiftKey ? -1 : 1 : 0, e.key === "Tab" ? e.shiftKey ? -1 : 1 : 0, false);
+      } else if (e.key === "Escape") cancelEdit();
+    };
+    const onCellDblclick = (vr, rc) => rc.col && startEdit(vr.index, rc.flatIndex);
+    const rootEl = () => viewport.value?.parentElement;
+    const ensureVisible = (row, col) => {
+      const el = viewport.value;
+      if (!el) return;
+      const offs = layout.value.offsets;
+      const top = offs ? offs[row] : row * props.rowHeight;
+      const h = offs ? offs[row + 1] - offs[row] : props.rowHeight;
+      const bodyTop = el.scrollTop;
+      const visibleH = el.clientHeight - headBlock.value;
+      if (top < bodyTop) el.scrollTop = top;
+      else if (top + h > bodyTop + visibleH) el.scrollTop = top + h - visibleH;
+      const c = flatCols.value[col];
+      if (c && !c.pinned) {
+        const ci = visibleCols.value.center.indexOf(c);
+        const x = centerOffsets.value[ci];
+        const viewW = el.clientWidth - leftWidth.value - rightWidth.value;
+        if (x < el.scrollLeft) el.scrollLeft = x;
+        else if (x + c.width > el.scrollLeft + viewW) el.scrollLeft = x + c.width - viewW;
+      }
+    };
+    const moveFocus = (dr, dc, extend) => {
+      const f = focus.value ?? { row: 0, col: 0 };
+      const next = { row: clamp(f.row + dr, 0, Math.max(0, rowCount.value - 1)), col: clamp(f.col + dc, 0, Math.max(0, flatCols.value.length - 1)) };
+      focus.value = next;
+      if (extend && anchor) setRange(anchor, next);
+      else {
+        anchor = next;
+        setRange(next, next);
+      }
+      ensureVisible(next.row, next.col);
+    };
+    const rangeCells = () => {
+      const r = cellRange.value ?? (focus.value ? { startRow: focus.value.row, endRow: focus.value.row, startCol: focus.value.col, endCol: focus.value.col } : null);
+      return r;
+    };
+    const copy = async (withHeaders = false) => {
+      const r = rangeCells();
+      let lines = [];
+      let header = [];
+      if (props.rowSelection && selectedIds.value.length && (!r || r.startRow === r.endRow && r.startCol === r.endCol)) {
+        const cols = flatCols.value.filter((c) => !c.auto);
+        header = cols.map((c) => c.title);
+        const sel = selectedSet.value;
+        lines = viewIdx.value.filter((i) => sel.has(rowIdOf(viewRows.value[i], i))).map((i) => cols.map((c) => String(cellValue(c, viewRows.value[i]) ?? "")));
+      } else if (r) {
+        const cols = flatCols.value.slice(r.startCol, r.endCol + 1).filter((c) => !c.auto);
+        header = cols.map((c) => c.title);
+        for (let i = r.startRow; i <= r.endRow; i++) {
+          const row = rowAt(i);
+          if (row?.kind === "data") lines.push(cols.map((c) => String(cellValue(c, row.data) ?? "")));
+        }
+      }
+      const text = [...withHeaders ? [header] : [], ...lines].map((l) => l.join("	")).join("\n");
+      try {
+        await navigator.clipboard.writeText(text);
+      } catch {
+      }
+      return text;
+    };
+    const onPaste = (e) => {
+      if (editing.value || !focus.value) return;
+      const text = e.clipboardData?.getData("text/plain");
+      if (!text) return;
+      e.preventDefault();
+      const grid = parseTsv(text);
+      const changes = [];
+      grid.forEach((line, dr) => line.forEach((cellText, dc) => {
+        const row = rowAt(focus.value.row + dr);
+        const c = flatCols.value[focus.value.col + dc];
+        if (row?.kind === "data" && c && !c.auto && isEditable(c.col, row.data)) changes.push({ row: row.data, col: c.col, oldValue: cellValue(c, row.data), newValue: parseFor(c.col, cellText, row.data) });
+      }));
+      record(changes);
+    };
+    const clearRange = () => {
+      const r = rangeCells();
+      if (!r) return;
+      const changes = [];
+      for (let i = r.startRow; i <= r.endRow; i++)
+        for (let j = r.startCol; j <= r.endCol; j++) {
+          const row = rowAt(i);
+          const c = flatCols.value[j];
+          if (row?.kind === "data" && c && !c.auto && isEditable(c.col, row.data)) changes.push({ row: row.data, col: c.col, oldValue: cellValue(c, row.data), newValue: c.col.type === "number" ? null : "" });
+        }
+      record(changes);
+    };
+    const onKeydown = (e) => {
+      if (editing.value || e.target.closest("input, select, textarea, .sq-datagrid__toolbar")) return;
+      const mod = e.ctrlKey || e.metaKey;
+      const page2 = Math.max(1, Math.floor((vpHeight.value - headBlock.value) / props.rowHeight) - 1);
+      const map = { ArrowUp: [-1, 0], ArrowDown: [1, 0], ArrowLeft: [0, -1], ArrowRight: [0, 1], PageUp: [-page2, 0], PageDown: [page2, 0] };
+      if (map[e.key]) {
+        e.preventDefault();
+        moveFocus(map[e.key][0], map[e.key][1], e.shiftKey);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        moveFocus(mod ? -rowCount.value : 0, -flatCols.value.length, e.shiftKey);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        moveFocus(mod ? rowCount.value : 0, flatCols.value.length, e.shiftKey);
+      } else if (e.key === "Tab" && focus.value) {
+        e.preventDefault();
+        moveFocus(0, e.shiftKey ? -1 : 1, false);
+      } else if ((e.key === "Enter" || e.key === "F2") && focus.value) {
+        e.preventDefault();
+        const r = rowAt(focus.value.row);
+        r?.kind === "group" ? toggleGroup(r) : startEdit(focus.value.row, focus.value.col);
+      } else if (e.key === " " && focus.value && props.rowSelection) {
+        e.preventDefault();
+        const r = rowAt(focus.value.row);
+        if (r && r.kind !== "loading" && r.kind !== "detail") toggleRowCheck(r);
+      } else if (mod && e.key.toLowerCase() === "c") {
+        e.preventDefault();
+        copy(e.shiftKey);
+      } else if (mod && e.key.toLowerCase() === "a") {
+        e.preventDefault();
+        if (props.rowSelection === "multiple") setSelected(dataIdsInView());
+        else cellRange.value = { startRow: 0, endRow: rowCount.value - 1, startCol: 0, endCol: flatCols.value.length - 1 };
+      } else if (mod && e.key.toLowerCase() === "z") {
+        e.preventDefault();
+        e.shiftKey ? redo() : undo();
+      } else if (mod && e.key.toLowerCase() === "y") {
+        e.preventDefault();
+        redo();
+      } else if (e.key === "Delete" || e.key === "Backspace") {
+        e.preventDefault();
+        clearRange();
+      } else if (e.key.length === 1 && !mod && focus.value) startEdit(focus.value.row, focus.value.col, e.key);
+    };
+    const menuOpen = ref(false);
+    const menuAnchor = ref(null);
+    const menuColId = ref(null);
+    const menuMode = ref("column");
+    const ctxPos = ref({ x: 0, y: 0 });
+    const menuCol = computed(() => menuColId.value ? flatCols.value.find((c) => c.id === menuColId.value) ?? null : null);
+    const menuFormatter = (v) => menuCol.value ? formatValue(menuCol.value.col, v, null) : String(v ?? "");
+    const openMenu = (e, id) => {
+      menuMode.value = "column";
+      menuColId.value = id;
+      menuAnchor.value = e.currentTarget;
+      menuOpen.value = true;
+    };
+    const openContext = (e, vr, rc) => {
+      if (!rc.col) return;
+      if (!inRange(vr.index, rc.flatIndex)) {
+        const p = { row: vr.index, col: rc.flatIndex };
+        focus.value = p;
+        anchor = p;
+        setRange(p, p);
+      }
+      const rect = rootEl().getBoundingClientRect();
+      ctxPos.value = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+      menuMode.value = "context";
+      menuColId.value = rc.id;
+      menuAnchor.value = ctxAnchor.value;
+      menuOpen.value = true;
+    };
+    const exportCsv = (opts = {}) => {
+      const cols = flatCols.value.filter((c) => !c.auto);
+      const sel = selectedSet.value;
+      const idx = isServer.value ? [] : viewIdx.value.filter((i) => !opts.onlySelected || sel.has(rowIdOf(viewRows.value[i], i)));
+      const body = idx.map((i) => cols.map((c) => formatValue(c.col, cellValue(c, viewRows.value[i]), viewRows.value[i])));
+      const csv = toCsv(cols.map((c) => c.title), body, opts.separator);
+      downloadText(opts.fileName ?? "export.csv", "\uFEFF" + csv, "text/csv;charset=utf-8");
+      return csv;
+    };
+    const bottomRows = computed(() => {
+      const extra = [];
+      if (props.totalsRow && !isServer.value) {
+        const r = {};
+        for (const c of viewCols.value) if (c.aggFunc) {
+          const get = makeGetter(c);
+          const v = aggregate(viewIdx.value.map((i) => get(viewRows.value[i])), c.aggFunc);
+          if (c.field) setByPath(r, c.field, v);
+          else r[colIdOf(c)] = v;
+        }
+        extra.push(r);
+      }
+      return [...props.pinnedBottomRows, ...extra];
+    });
+    const statusText = computed(() => {
+      if (isServer.value) return `${serverCount.value.toLocaleString(loc.value)} rows`;
+      const total = raw.value.length;
+      const shown = filteredIdx.value.length;
+      return shown === total ? `${total.toLocaleString(loc.value)} rows` : `${shown.toLocaleString(loc.value)} of ${total.toLocaleString(loc.value)} rows`;
+    });
+    const rangeStats = computed(() => {
+      const r = cellRange.value;
+      if (!r || r.startRow === r.endRow && r.startCol === r.endCol) return null;
+      const nums = [];
+      let count = 0;
+      const maxCells = 2e5;
+      for (let i = r.startRow; i <= r.endRow && count < maxCells; i++) {
+        const row = rowAt(i);
+        if (row?.kind !== "data") continue;
+        for (let j = r.startCol; j <= r.endCol; j++) {
+          const c = flatCols.value[j];
+          if (!c || c.auto) continue;
+          const v = cellValue(c, row.data);
+          if (v != null && v !== "") count++;
+          if (typeof v === "number") nums.push(v);
+        }
+      }
+      if (!nums.length) return { count, sum: 0, avg: 0, min: 0, max: 0 };
+      const sum = nums.reduce((a, b) => a + b, 0);
+      return { count, sum, avg: sum / nums.length, min: Math.min(...nums), max: Math.max(...nums) };
+    });
+    const headerCellClass = (rc) => ({
+      "sq-datagrid__hcell--pinned-left": rc.pinned === "left",
+      "sq-datagrid__hcell--pinned-right": rc.pinned === "right",
+      "sq-datagrid__hcell--edge-left": rc.edgeLeft,
+      "sq-datagrid__hcell--edge-right": rc.edgeRight,
+      "sq-datagrid__hcell--sortable": !!rc.col && !rc.auto && rc.col.sortable !== false,
+      "sq-datagrid__hcell--spacer": !rc.col,
+      "sq-datagrid__hcell--drop-before": dropTarget.value?.id === rc.id && dropTarget.value.before,
+      "sq-datagrid__hcell--drop-after": dropTarget.value?.id === rc.id && !dropTarget.value.before,
+      [`sq-datagrid__align-${rc.col?.align ?? (rc.col?.type === "number" ? "right" : "left")}`]: true,
+      [rc.col?.headerClass ?? ""]: !!rc.col?.headerClass
+    });
+    const cellAlignClass = (rc) => ({
+      "sq-datagrid__cell--pinned-left": rc.pinned === "left",
+      "sq-datagrid__cell--pinned-right": rc.pinned === "right",
+      "sq-datagrid__cell--edge-left": !!rc.edgeLeft,
+      "sq-datagrid__cell--edge-right": !!rc.edgeRight,
+      [`sq-datagrid__align-${rc.col?.align ?? (rc.col?.type === "number" ? "right" : rc.col?.type === "boolean" ? "center" : "left")}`]: !!rc.col
+    });
+    const cellClass = (vr, rc) => {
+      const base = cellAlignClass(rc);
+      if (!rc.col) return base;
+      base["sq-datagrid__cell--focused"] = !!focus.value && focus.value.row === vr.index && focus.value.col === rc.flatIndex;
+      base["sq-datagrid__cell--range"] = inRange(vr.index, rc.flatIndex);
+      base["sq-datagrid__cell--editable"] = vr.row.kind === "data" && isEditable(rc.col, vr.row.data);
+      if (rc.col.cellClass && vr.row.kind === "data") {
+        const extra = typeof rc.col.cellClass === "function" ? rc.col.cellClass({ value: cellValue(rc, vr.row.data), row: vr.row.data, column: rc.col, rowIndex: vr.index }) : rc.col.cellClass;
+        if (extra) base[extra] = true;
+      }
+      return base;
+    };
+    const cellStyle = (vr, rc) => {
+      if (!rc.col?.cellStyle || vr.row.kind !== "data") return rc.style;
+      const extra = typeof rc.col.cellStyle === "function" ? rc.col.cellStyle({ value: cellValue(rc, vr.row.data), row: vr.row.data, column: rc.col, rowIndex: vr.index }) : rc.col.cellStyle;
+      return extra ? { ...rc.style, ...extra } : rc.style;
+    };
+    const rowClass = (vr) => {
+      const c = {
+        "sq-datagrid__row--group": vr.row.kind === "group",
+        "sq-datagrid__row--detail": vr.row.kind === "detail",
+        "sq-datagrid__row--selected": vr.row.kind === "data" && selectedSet.value.has(vr.row.id),
+        "sq-datagrid__row--odd": vr.index % 2 === 1
+      };
+      if (props.rowClassName && vr.row.data && vr.row.kind === "data") {
+        const x = props.rowClassName(vr.row.data);
+        if (x) c[x] = true;
+      }
+      return c;
+    };
+    const showLoading = computed(() => props.loading || isServer.value && serverLoading.value && serverCount.value === 0);
+    const rootStyle = { "--sq-r": "var(--sq-radius-xl)", "--sq-bg": "var(--sq-surface)", "--sq-bd": "var(--sq-border)", "--sq-bw": "1px", "--sq-grid-row-h": `${props.rowHeight}px` };
+    const api = {
+      getSelectedRows: () => isServer.value ? [] : viewIdx.value.map((i) => viewRows.value[i]).filter((r, k) => selectedSet.value.has(rowIdOf(r, viewIdx.value[k]))),
+      getDisplayedRows: () => display.value,
+      selectAll: () => setSelected(dataIdsInView()),
+      deselectAll: () => setSelected([]),
+      exportCsv,
+      copy,
+      undo,
+      redo,
+      expandAll,
+      collapseAll,
+      autoSize,
+      refresh: () => isServer.value ? purge() : dataVersion.value++,
+      ensureIndexVisible: (i) => ensureVisible(i, focus.value?.col ?? 0),
+      getColumnState: () => flatCols.value.filter((c) => !c.auto).map((c) => ({ colId: c.id, width: c.width, hide: false, pinned: c.pinned })),
+      setColumnState: (state) => {
+        colOrder.value = [...state.map((s) => s.colId), ...colOrder.value.filter((id) => !state.some((s) => s.colId === id))];
+        colWidth.value = { ...colWidth.value, ...Object.fromEntries(state.filter((s) => s.width).map((s) => [s.colId, s.width])) };
+        colHidden.value = { ...colHidden.value, ...Object.fromEntries(state.filter((s) => s.hide !== void 0).map((s) => [s.colId, s.hide])) };
+        colPinned.value = { ...colPinned.value, ...Object.fromEntries(state.filter((s) => s.pinned !== void 0).map((s) => [s.colId, s.pinned])) };
+      }
+    };
+    return {
+      ...api,
+      api,
+      viewport,
+      ctxAnchor,
+      scrollLeft,
+      vpWidth,
+      isServer,
+      quick,
+      groupBy,
+      selectedIds,
+      selectedSet,
+      sortModelList,
+      filterModelObj,
+      renderCols,
+      flatCols,
+      totalWidth,
+      hasHeaderGroups,
+      headerGroups,
+      layout,
+      visibleRows,
+      rowCount,
+      filterRowHeight,
+      page,
+      pageSizeState,
+      pageCount,
+      onPageSize,
+      pageRangeText,
+      hasGroups,
+      detailOpen,
+      onScroll,
+      cellValue,
+      formatValue,
+      formatCell,
+      cellParams,
+      groupLabel,
+      groupAggText,
+      filterKind,
+      distinctValues,
+      sortIndex,
+      sortDir,
+      ariaSort,
+      setSort,
+      onHeaderClick,
+      setFilter,
+      floatingValue,
+      onFloatingInput,
+      toggleGroupBy,
+      removeGroup,
+      toggleGroup,
+      toggleDetail,
+      setHidden,
+      setPinned,
+      chooserCols,
+      startResize,
+      dragColId,
+      onDragStart,
+      onDragOver,
+      onDrop,
+      onGroupDrop,
+      allSelected,
+      someSelected,
+      toggleAll,
+      isRowChecked,
+      isRowPartial,
+      toggleRowCheck,
+      onRowClick,
+      onCellMousedown,
+      onCellEnter,
+      editing,
+      isEditing,
+      editorKind,
+      onEditorInput,
+      commitEdit,
+      onEditorKey,
+      onCellDblclick,
+      canUndo,
+      onKeydown,
+      onPaste,
+      menuOpen,
+      menuAnchor,
+      menuMode,
+      menuCol,
+      menuFormatter,
+      openMenu,
+      openContext,
+      ctxPos,
+      bottomRows,
+      statusText,
+      rangeStats,
+      fmtNum,
+      headerCellClass,
+      cellAlignClass,
+      cellClass,
+      cellStyle,
+      rowClass,
+      showLoading,
+      rootStyle,
+      titleOf,
+      toUnit,
+      getByPath,
+      has: (n) => !!slots[n],
+      messages: computed(() => config.locale.messages)
+    };
+  }
+});
+const _hoisted_1 = ["aria-rowcount", "aria-colcount"];
+const _hoisted_2 = {
+  key: 0,
+  class: "sq-datagrid__toolbar"
+};
+const _hoisted_3 = { class: "sq-datagrid__chooser" };
+const _hoisted_4 = {
+  key: 0,
+  class: "sq-datagrid__group-hint"
+};
+const _hoisted_5 = {
+  class: "sq-datagrid__head",
+  role: "rowgroup"
+};
+const _hoisted_6 = ["aria-sort", "draggable", "onClick", "onDragstart", "onDragover", "onDrop"];
+const _hoisted_7 = { class: "sq-datagrid__htitle" };
+const _hoisted_8 = {
+  key: 0,
+  class: "sq-datagrid__sort"
+};
+const _hoisted_9 = { key: 0 };
+const _hoisted_10 = ["onClick"];
+const _hoisted_11 = ["onPointerdown", "onDblclick"];
+const _hoisted_12 = ["type", "value", "placeholder", "aria-label", "onInput"];
+const _hoisted_13 = ["aria-rowindex", "aria-selected", "onClick", "onDblclick"];
+const _hoisted_14 = ["onMousedown", "onMouseenter", "onDblclick", "onContextmenu"];
+const _hoisted_15 = {
+  key: 1,
+  class: "sq-datagrid__skeleton sq-skeleton-shimmer"
+};
+const _hoisted_16 = ["onClick"];
+const _hoisted_17 = ["onClick"];
+const _hoisted_18 = {
+  key: 2,
+  class: "sq-datagrid__expander-spacer"
+};
+const _hoisted_19 = { class: "sq-datagrid__group-key" };
+const _hoisted_20 = {
+  key: 3,
+  class: "sq-datagrid__group-count"
+};
+const _hoisted_21 = {
+  key: 4,
+  class: "sq-datagrid__agg"
+};
+const _hoisted_22 = ["value"];
+const _hoisted_23 = ["value"];
+const _hoisted_24 = ["type", "value"];
+const _hoisted_25 = {
+  key: 1,
+  class: "sq-datagrid__text"
+};
+const _hoisted_26 = {
+  key: 0,
+  class: "sq-datagrid__foot"
+};
+const _hoisted_27 = { key: 0 };
+const _hoisted_28 = {
+  key: 0,
+  class: "sq-datagrid__overlay"
+};
+const _hoisted_29 = {
+  key: 1,
+  class: "sq-datagrid__overlay sq-datagrid__overlay--empty"
+};
+const _hoisted_30 = {
+  key: 2,
+  class: "sq-datagrid__footer"
+};
+const _hoisted_31 = {
+  key: 0,
+  class: "sq-datagrid__status"
+};
+const _hoisted_32 = { key: 0 };
+const _hoisted_33 = {
+  key: 1,
+  class: "sq-datagrid__range-stats"
+};
+const _hoisted_34 = { class: "sq-datagrid__page-size" };
+const _hoisted_35 = ["value"];
+const _hoisted_36 = ["value"];
+const _hoisted_37 = { class: "sq-datagrid__page-range" };
+const _hoisted_38 = {
+  key: 0,
+  class: "sq-datagrid__menu"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_SqShape = resolveComponent("SqShape");
+  const _component_SqTextField = resolveComponent("SqTextField");
+  const _component_SqBtn = resolveComponent("SqBtn");
+  const _component_SqCheckbox = resolveComponent("SqCheckbox");
+  const _component_SqMenu = resolveComponent("SqMenu");
+  const _component_SqIcon = resolveComponent("SqIcon");
+  const _component_SqChip = resolveComponent("SqChip");
+  const _component_SqProgressCircular = resolveComponent("SqProgressCircular");
+  const _component_SqEmptyState = resolveComponent("SqEmptyState");
+  const _component_SqPagination = resolveComponent("SqPagination");
+  const _component_SqListItem = resolveComponent("SqListItem");
+  const _component_SqDivider = resolveComponent("SqDivider");
+  const _component_SqGridFilter = resolveComponent("SqGridFilter");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["sq-datagrid sq-surface", { "sq-datagrid--striped": _ctx.striped, "sq-datagrid--column-lines": _ctx.columnLines, "sq-datagrid--scrolled-x": _ctx.scrollLeft > 0 }]),
+    style: normalizeStyle(_ctx.rootStyle),
+    tabindex: "0",
+    role: "grid",
+    "aria-rowcount": _ctx.rowCount,
+    "aria-colcount": _ctx.flatCols.length,
+    onKeydown: _cache[37] || (_cache[37] = (...args) => _ctx.onKeydown && _ctx.onKeydown(...args)),
+    onPaste: _cache[38] || (_cache[38] = (...args) => _ctx.onPaste && _ctx.onPaste(...args))
+  }, [
+    createVNode(_component_SqShape, { clip: "" }),
+    _ctx.toolbar || _ctx.has("toolbar") ? (openBlock(), createElementBlock("div", _hoisted_2, [
+      renderSlot(_ctx.$slots, "toolbar", { api: _ctx.api }),
+      _ctx.toolbar ? (openBlock(), createBlock(_component_SqTextField, {
+        key: 0,
+        "model-value": _ctx.quick,
+        class: "sq-datagrid__quick",
+        placeholder: _ctx.messages.search,
+        "prepend-inner-icon": "search",
+        density: "compact",
+        "hide-details": "",
+        clearable: "",
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.quick = $event || "")
+      }, null, 8, ["model-value", "placeholder"])) : createCommentVNode("v-if", true),
+      _cache[41] || (_cache[41] = createElementVNode(
+        "span",
+        { class: "sq-spacer" },
+        null,
+        -1
+        /* CACHED */
+      )),
+      _ctx.toolbar ? (openBlock(), createBlock(_component_SqMenu, {
+        key: 1,
+        "close-on-content-click": false,
+        location: "bottom end"
+      }, {
+        activator: withCtx(() => [
+          createVNode(_component_SqBtn, {
+            "prepend-icon": "columns",
+            variant: "text",
+            color: "surface",
+            size: "small"
+          }, {
+            default: withCtx(() => [..._cache[39] || (_cache[39] = [
+              createTextVNode(
+                "Columns",
+                -1
+                /* CACHED */
+              )
+            ])]),
+            _: 1
+            /* STABLE */
+          })
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_3, [
+            (openBlock(true), createElementBlock(
+              Fragment,
+              null,
+              renderList(_ctx.chooserCols, (c) => {
+                return openBlock(), createBlock(_component_SqCheckbox, {
+                  key: c.id,
+                  "model-value": !c.hidden,
+                  label: c.title,
+                  "onUpdate:modelValue": ($event) => _ctx.setHidden(c.id, !$event)
+                }, null, 8, ["model-value", "label", "onUpdate:modelValue"]);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ])
+        ]),
+        _: 1
+        /* STABLE */
+      })) : createCommentVNode("v-if", true),
+      _ctx.toolbar ? (openBlock(), createBlock(_component_SqBtn, {
+        key: 2,
+        "prepend-icon": "download",
+        variant: "text",
+        color: "surface",
+        size: "small",
+        onClick: _cache[1] || (_cache[1] = ($event) => _ctx.exportCsv())
+      }, {
+        default: withCtx(() => [..._cache[40] || (_cache[40] = [
+          createTextVNode(
+            "CSV",
+            -1
+            /* CACHED */
+          )
+        ])]),
+        _: 1
+        /* STABLE */
+      })) : createCommentVNode("v-if", true)
+    ])) : createCommentVNode("v-if", true),
+    _ctx.groupPanel && !_ctx.treeData && !_ctx.isServer ? (openBlock(), createElementBlock(
+      "div",
+      {
+        key: 1,
+        class: "sq-datagrid__group-panel",
+        onDragover: _cache[2] || (_cache[2] = withModifiers(() => {
+        }, ["prevent"])),
+        onDrop: _cache[3] || (_cache[3] = (...args) => _ctx.onGroupDrop && _ctx.onGroupDrop(...args))
+      },
+      [
+        createVNode(_component_SqIcon, {
+          icon: "menu",
+          size: "16px"
+        }),
+        !_ctx.groupBy.length ? (openBlock(), createElementBlock("span", _hoisted_4, "Drag a column header here to group rows")) : createCommentVNode("v-if", true),
+        (openBlock(true), createElementBlock(
+          Fragment,
+          null,
+          renderList(_ctx.groupBy, (id) => {
+            return openBlock(), createBlock(_component_SqChip, {
+              key: id,
+              size: "small",
+              variant: "tonal",
+              color: "primary",
+              closable: "",
+              "onClick:close": ($event) => _ctx.removeGroup(id)
+            }, {
+              default: withCtx(() => [
+                createTextVNode(
+                  toDisplayString(_ctx.titleOf(id)),
+                  1
+                  /* TEXT */
+                )
+              ]),
+              _: 2
+              /* DYNAMIC */
+            }, 1032, ["onClick:close"]);
+          }),
+          128
+          /* KEYED_FRAGMENT */
+        ))
+      ],
+      32
+      /* NEED_HYDRATION */
+    )) : createCommentVNode("v-if", true),
+    createElementVNode(
+      "div",
+      {
+        ref: "viewport",
+        class: "sq-datagrid__viewport",
+        style: normalizeStyle({ height: _ctx.toUnit(_ctx.height) }),
+        onScrollPassive: _cache[16] || (_cache[16] = (...args) => _ctx.onScroll && _ctx.onScroll(...args))
+      },
+      [
+        createElementVNode(
+          "div",
+          {
+            class: "sq-datagrid__canvas",
+            style: normalizeStyle({ width: _ctx.totalWidth + "px" })
+          },
+          [
+            createCommentVNode(" header (sticky) "),
+            createElementVNode("div", _hoisted_5, [
+              _ctx.hasHeaderGroups ? (openBlock(), createElementBlock(
+                "div",
+                {
+                  key: 0,
+                  class: "sq-datagrid__header-row sq-datagrid__header-row--groups",
+                  style: normalizeStyle({ height: _ctx.headerHeight + "px" })
+                },
+                [
+                  (openBlock(true), createElementBlock(
+                    Fragment,
+                    null,
+                    renderList(_ctx.headerGroups, (g) => {
+                      return openBlock(), createElementBlock(
+                        "div",
+                        {
+                          key: g.key,
+                          class: normalizeClass(["sq-datagrid__header-group", g.cls]),
+                          style: normalizeStyle(g.style)
+                        },
+                        toDisplayString(g.label),
+                        7
+                        /* TEXT, CLASS, STYLE */
+                      );
+                    }),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ],
+                4
+                /* STYLE */
+              )) : createCommentVNode("v-if", true),
+              createElementVNode(
+                "div",
+                {
+                  class: "sq-datagrid__header-row",
+                  role: "row",
+                  style: normalizeStyle({ height: _ctx.headerHeight + "px" })
+                },
+                [
+                  (openBlock(true), createElementBlock(
+                    Fragment,
+                    null,
+                    renderList(_ctx.renderCols, (rc) => {
+                      return openBlock(), createElementBlock("div", {
+                        key: rc.key,
+                        class: normalizeClass(["sq-datagrid__hcell", _ctx.headerCellClass(rc)]),
+                        style: normalizeStyle(rc.style),
+                        role: "columnheader",
+                        "aria-sort": rc.col ? _ctx.ariaSort(rc.id) : void 0,
+                        draggable: !!rc.col && !rc.auto && !rc.col.lockPosition,
+                        onClick: ($event) => rc.col && _ctx.onHeaderClick($event, rc),
+                        onDragstart: ($event) => _ctx.onDragStart($event, rc),
+                        onDragover: withModifiers(($event) => _ctx.onDragOver($event, rc), ["prevent"]),
+                        onDrop: withModifiers(($event) => _ctx.onDrop(rc), ["prevent"]),
+                        onDragend: _cache[6] || (_cache[6] = ($event) => _ctx.dragColId = null)
+                      }, [
+                        rc.col ? (openBlock(), createElementBlock(
+                          Fragment,
+                          { key: 0 },
+                          [
+                            rc.id === "__select" ? (openBlock(), createElementBlock("span", {
+                              key: 0,
+                              class: "sq-datagrid__check",
+                              onClick: _cache[4] || (_cache[4] = withModifiers(() => {
+                              }, ["stop"]))
+                            }, [
+                              createVNode(_component_SqCheckbox, {
+                                "model-value": _ctx.allSelected,
+                                indeterminate: _ctx.someSelected,
+                                "aria-label": "Select all rows",
+                                "onUpdate:modelValue": _ctx.toggleAll
+                              }, null, 8, ["model-value", "indeterminate", "onUpdate:modelValue"])
+                            ])) : (openBlock(), createElementBlock(
+                              Fragment,
+                              { key: 1 },
+                              [
+                                createElementVNode("span", _hoisted_7, [
+                                  renderSlot(_ctx.$slots, `header-${rc.id}`, {
+                                    column: rc.col
+                                  }, () => [
+                                    createTextVNode(
+                                      toDisplayString(rc.title),
+                                      1
+                                      /* TEXT */
+                                    )
+                                  ])
+                                ]),
+                                _ctx.sortIndex(rc.id) >= 0 ? (openBlock(), createElementBlock("span", _hoisted_8, [
+                                  createVNode(_component_SqIcon, {
+                                    icon: _ctx.sortDir(rc.id) === "asc" ? "arrowUp" : "arrowDown",
+                                    size: "14px"
+                                  }, null, 8, ["icon"]),
+                                  _ctx.sortModelList.length > 1 ? (openBlock(), createElementBlock(
+                                    "sup",
+                                    _hoisted_9,
+                                    toDisplayString(_ctx.sortIndex(rc.id) + 1),
+                                    1
+                                    /* TEXT */
+                                  )) : createCommentVNode("v-if", true)
+                                ])) : createCommentVNode("v-if", true),
+                                _ctx.filterModelObj[rc.id] ? (openBlock(), createBlock(_component_SqIcon, {
+                                  key: 1,
+                                  icon: "filter",
+                                  size: "14px",
+                                  class: "sq-datagrid__filtered"
+                                })) : createCommentVNode("v-if", true),
+                                !rc.col.suppressMenu && !rc.auto ? (openBlock(), createElementBlock("button", {
+                                  key: 2,
+                                  type: "button",
+                                  class: "sq-datagrid__menu-btn",
+                                  tabindex: "-1",
+                                  "aria-label": "Column menu",
+                                  onClick: withModifiers(($event) => _ctx.openMenu($event, rc.id), ["stop"])
+                                }, [
+                                  createVNode(_component_SqIcon, {
+                                    icon: "more",
+                                    size: "16px"
+                                  })
+                                ], 8, _hoisted_10)) : createCommentVNode("v-if", true)
+                              ],
+                              64
+                              /* STABLE_FRAGMENT */
+                            )),
+                            rc.col.resizable !== false ? (openBlock(), createElementBlock("span", {
+                              key: 2,
+                              class: "sq-datagrid__resizer",
+                              onPointerdown: withModifiers(($event) => _ctx.startResize($event, rc), ["stop", "prevent"]),
+                              onDblclick: withModifiers(($event) => _ctx.autoSize([rc.id]), ["stop"]),
+                              onClick: _cache[5] || (_cache[5] = withModifiers(() => {
+                              }, ["stop"]))
+                            }, null, 40, _hoisted_11)) : createCommentVNode("v-if", true)
+                          ],
+                          64
+                          /* STABLE_FRAGMENT */
+                        )) : createCommentVNode("v-if", true)
+                      ], 46, _hoisted_6);
+                    }),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ],
+                4
+                /* STYLE */
+              ),
+              _ctx.floatingFilters ? (openBlock(), createElementBlock(
+                "div",
+                {
+                  key: 1,
+                  class: "sq-datagrid__header-row sq-datagrid__header-row--filters",
+                  style: normalizeStyle({ height: _ctx.filterRowHeight + "px" })
+                },
+                [
+                  (openBlock(true), createElementBlock(
+                    Fragment,
+                    null,
+                    renderList(_ctx.renderCols, (rc) => {
+                      return openBlock(), createElementBlock(
+                        "div",
+                        {
+                          key: rc.key,
+                          class: normalizeClass(["sq-datagrid__hcell sq-datagrid__fcell", _ctx.headerCellClass(rc)]),
+                          style: normalizeStyle(rc.style)
+                        },
+                        [
+                          rc.col && !rc.auto && rc.col.filter !== false && _ctx.filterKind(rc.col) !== "set" ? (openBlock(), createElementBlock("input", {
+                            key: 0,
+                            class: "sq-datagrid__ffilter sq-squircle",
+                            type: _ctx.filterKind(rc.col) === "number" ? "number" : _ctx.filterKind(rc.col) === "date" ? "date" : "text",
+                            value: _ctx.floatingValue(rc.id),
+                            placeholder: _ctx.filterKind(rc.col) === "text" ? "…" : "=",
+                            "aria-label": `Filter ${rc.title}`,
+                            onInput: ($event) => _ctx.onFloatingInput($event, rc)
+                          }, null, 40, _hoisted_12)) : createCommentVNode("v-if", true)
+                        ],
+                        6
+                        /* CLASS, STYLE */
+                      );
+                    }),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ],
+                4
+                /* STYLE */
+              )) : createCommentVNode("v-if", true),
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(_ctx.pinnedTopRows, (pr, pi) => {
+                  return openBlock(), createElementBlock(
+                    "div",
+                    {
+                      key: "pt" + pi,
+                      class: "sq-datagrid__row sq-datagrid__row--pinned",
+                      style: normalizeStyle({ height: _ctx.rowHeight + "px" })
+                    },
+                    [
+                      (openBlock(true), createElementBlock(
+                        Fragment,
+                        null,
+                        renderList(_ctx.renderCols, (rc) => {
+                          return openBlock(), createElementBlock(
+                            "div",
+                            {
+                              key: rc.key,
+                              class: normalizeClass(["sq-datagrid__cell", _ctx.cellAlignClass(rc)]),
+                              style: normalizeStyle(rc.style)
+                            },
+                            [
+                              rc.col && !rc.auto ? renderSlot(_ctx.$slots, `cell-${rc.id}`, mergeProps({ ref_for: true }, _ctx.cellParams(pr, rc, -1)), () => [
+                                createTextVNode(
+                                  toDisplayString(_ctx.formatCell(rc, pr)),
+                                  1
+                                  /* TEXT */
+                                )
+                              ], void 0, 0) : createCommentVNode("v-if", true)
+                            ],
+                            6
+                            /* CLASS, STYLE */
+                          );
+                        }),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ],
+                    4
+                    /* STYLE */
+                  );
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ]),
+            createCommentVNode(" body "),
+            createElementVNode(
+              "div",
+              {
+                class: "sq-datagrid__body",
+                role: "rowgroup",
+                style: normalizeStyle({ height: _ctx.layout.total + "px" })
+              },
+              [
+                (openBlock(true), createElementBlock(
+                  Fragment,
+                  null,
+                  renderList(_ctx.visibleRows, (vr) => {
+                    return openBlock(), createElementBlock("div", {
+                      key: vr.row.id,
+                      class: normalizeClass(["sq-datagrid__row", _ctx.rowClass(vr)]),
+                      style: normalizeStyle({ transform: `translateY(${vr.top}px)`, height: vr.height + "px" }),
+                      role: "row",
+                      "aria-rowindex": vr.index + 1,
+                      "aria-selected": vr.row.kind === "data" && _ctx.rowSelection ? _ctx.selectedSet.has(vr.row.id) ? "true" : "false" : void 0,
+                      onClick: ($event) => _ctx.onRowClick($event, vr),
+                      onDblclick: ($event) => _ctx.$emit("row-dblclick", { row: vr.row.data, event: $event })
+                    }, [
+                      vr.row.kind === "detail" ? (openBlock(), createElementBlock(
+                        "div",
+                        {
+                          key: 0,
+                          class: "sq-datagrid__detail",
+                          style: normalizeStyle({ width: _ctx.vpWidth + "px" })
+                        },
+                        [
+                          renderSlot(_ctx.$slots, "detail", {
+                            row: vr.row.data
+                          })
+                        ],
+                        4
+                        /* STYLE */
+                      )) : (openBlock(true), createElementBlock(
+                        Fragment,
+                        { key: 1 },
+                        renderList(_ctx.renderCols, (rc) => {
+                          return openBlock(), createElementBlock("div", {
+                            key: rc.key,
+                            class: normalizeClass(["sq-datagrid__cell", _ctx.cellClass(vr, rc)]),
+                            style: normalizeStyle(_ctx.cellStyle(vr, rc)),
+                            role: "gridcell",
+                            onMousedown: ($event) => _ctx.onCellMousedown($event, vr, rc),
+                            onMouseenter: ($event) => _ctx.onCellEnter(vr, rc),
+                            onDblclick: withModifiers(($event) => _ctx.onCellDblclick(vr, rc), ["stop"]),
+                            onContextmenu: withModifiers(($event) => _ctx.openContext($event, vr, rc), ["prevent"])
+                          }, [
+                            !rc.col ? (openBlock(), createElementBlock(
+                              Fragment,
+                              { key: 0 },
+                              [],
+                              64
+                              /* STABLE_FRAGMENT */
+                            )) : vr.row.kind === "loading" ? (openBlock(), createElementBlock("span", _hoisted_15)) : rc.id === "__select" ? (openBlock(), createElementBlock(
+                              "span",
+                              {
+                                key: 2,
+                                class: "sq-datagrid__check",
+                                onClick: _cache[7] || (_cache[7] = withModifiers(() => {
+                                }, ["stop"])),
+                                onMousedown: _cache[8] || (_cache[8] = withModifiers(() => {
+                                }, ["stop"]))
+                              },
+                              [
+                                createVNode(_component_SqCheckbox, {
+                                  "model-value": _ctx.isRowChecked(vr.row),
+                                  indeterminate: _ctx.isRowPartial(vr.row),
+                                  "aria-label": "Select row",
+                                  "onUpdate:modelValue": ($event) => _ctx.toggleRowCheck(vr.row)
+                                }, null, 8, ["model-value", "indeterminate", "onUpdate:modelValue"])
+                              ],
+                              32
+                              /* NEED_HYDRATION */
+                            )) : rc.id === "__group" ? (openBlock(), createElementBlock(
+                              "span",
+                              {
+                                key: 3,
+                                class: "sq-datagrid__group-cell",
+                                style: normalizeStyle({ paddingInlineStart: vr.row.level * 18 + "px" })
+                              },
+                              [
+                                vr.row.kind === "group" ? (openBlock(), createElementBlock("button", {
+                                  key: 0,
+                                  type: "button",
+                                  class: normalizeClass(["sq-datagrid__expander", { "sq-datagrid__expander--open": vr.row.group?.expanded }]),
+                                  tabindex: "-1",
+                                  onClick: withModifiers(($event) => _ctx.toggleGroup(vr.row), ["stop"])
+                                }, [
+                                  createVNode(_component_SqIcon, {
+                                    icon: "chevronRight",
+                                    size: "18px"
+                                  })
+                                ], 10, _hoisted_16)) : _ctx.masterDetail && !_ctx.treeData ? (openBlock(), createElementBlock("button", {
+                                  key: 1,
+                                  type: "button",
+                                  class: normalizeClass(["sq-datagrid__expander", { "sq-datagrid__expander--open": _ctx.detailOpen.has(vr.row.id) }]),
+                                  tabindex: "-1",
+                                  onClick: withModifiers(($event) => _ctx.toggleDetail(vr.row.id), ["stop"])
+                                }, [
+                                  createVNode(_component_SqIcon, {
+                                    icon: "chevronRight",
+                                    size: "18px"
+                                  })
+                                ], 10, _hoisted_17)) : (openBlock(), createElementBlock("span", _hoisted_18)),
+                                createElementVNode("span", _hoisted_19, [
+                                  renderSlot(_ctx.$slots, "group", {
+                                    row: vr.row
+                                  }, () => [
+                                    createTextVNode(
+                                      toDisplayString(_ctx.groupLabel(vr.row)),
+                                      1
+                                      /* TEXT */
+                                    )
+                                  ])
+                                ]),
+                                vr.row.kind === "group" && vr.row.group?.count ? (openBlock(), createElementBlock(
+                                  "span",
+                                  _hoisted_20,
+                                  toDisplayString(vr.row.group?.count),
+                                  1
+                                  /* TEXT */
+                                )) : createCommentVNode("v-if", true)
+                              ],
+                              4
+                              /* STYLE */
+                            )) : vr.row.kind === "group" ? (openBlock(), createElementBlock(
+                              "span",
+                              _hoisted_21,
+                              toDisplayString(_ctx.groupAggText(vr.row, rc)),
+                              1
+                              /* TEXT */
+                            )) : _ctx.isEditing(vr, rc) ? (openBlock(), createElementBlock(
+                              "span",
+                              {
+                                key: 5,
+                                class: "sq-datagrid__editor-wrap",
+                                onMousedown: _cache[15] || (_cache[15] = withModifiers(() => {
+                                }, ["stop"]))
+                              },
+                              [
+                                _ctx.editorKind(rc) === "select" ? (openBlock(), createElementBlock("select", {
+                                  key: 0,
+                                  class: "sq-datagrid__editor",
+                                  value: String(_ctx.editing?.value ?? ""),
+                                  onChange: _cache[9] || (_cache[9] = (...args) => _ctx.onEditorInput && _ctx.onEditorInput(...args)),
+                                  onKeydown: _cache[10] || (_cache[10] = withModifiers((...args) => _ctx.onEditorKey && _ctx.onEditorKey(...args), ["stop"])),
+                                  onBlur: _cache[11] || (_cache[11] = (...args) => _ctx.commitEdit && _ctx.commitEdit(...args))
+                                }, [
+                                  (openBlock(true), createElementBlock(
+                                    Fragment,
+                                    null,
+                                    renderList(rc.col.cellEditorParams?.values ?? [], (opt) => {
+                                      return openBlock(), createElementBlock("option", {
+                                        key: String(opt),
+                                        value: String(opt)
+                                      }, toDisplayString(opt), 9, _hoisted_23);
+                                    }),
+                                    128
+                                    /* KEYED_FRAGMENT */
+                                  ))
+                                ], 40, _hoisted_22)) : (openBlock(), createElementBlock("input", {
+                                  key: 1,
+                                  class: "sq-datagrid__editor",
+                                  type: _ctx.editorKind(rc),
+                                  value: _ctx.editing?.value ?? "",
+                                  onInput: _cache[12] || (_cache[12] = (...args) => _ctx.onEditorInput && _ctx.onEditorInput(...args)),
+                                  onKeydown: _cache[13] || (_cache[13] = withModifiers((...args) => _ctx.onEditorKey && _ctx.onEditorKey(...args), ["stop"])),
+                                  onBlur: _cache[14] || (_cache[14] = (...args) => _ctx.commitEdit && _ctx.commitEdit(...args))
+                                }, null, 40, _hoisted_24))
+                              ],
+                              32
+                              /* NEED_HYDRATION */
+                            )) : renderSlot(_ctx.$slots, `cell-${rc.id}`, mergeProps({ ref_for: true }, _ctx.cellParams(vr.row.data, rc, vr.index)), () => [
+                              renderSlot(_ctx.$slots, "cell", mergeProps({ ref_for: true }, _ctx.cellParams(vr.row.data, rc, vr.index)), () => [
+                                rc.col.type === "boolean" ? (openBlock(), createElementBlock(
+                                  "span",
+                                  {
+                                    key: 0,
+                                    class: normalizeClass(["sq-datagrid__bool", { "sq-datagrid__bool--on": !!_ctx.cellValue(rc, vr.row.data) }])
+                                  },
+                                  [
+                                    createVNode(_component_SqIcon, {
+                                      icon: _ctx.cellValue(rc, vr.row.data) ? "check" : "minus",
+                                      size: "16px"
+                                    }, null, 8, ["icon"])
+                                  ],
+                                  2
+                                  /* CLASS */
+                                )) : (openBlock(), createElementBlock(
+                                  "span",
+                                  _hoisted_25,
+                                  toDisplayString(_ctx.formatCell(rc, vr.row.data)),
+                                  1
+                                  /* TEXT */
+                                ))
+                              ])
+                            ], void 0, 6)
+                          ], 46, _hoisted_14);
+                        }),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ], 46, _hoisted_13);
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ],
+              4
+              /* STYLE */
+            ),
+            createCommentVNode(" pinned bottom / totals (sticky) "),
+            _ctx.bottomRows.length ? (openBlock(), createElementBlock("div", _hoisted_26, [
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(_ctx.bottomRows, (pr, pi) => {
+                  return openBlock(), createElementBlock(
+                    "div",
+                    {
+                      key: "pb" + pi,
+                      class: "sq-datagrid__row sq-datagrid__row--pinned",
+                      style: normalizeStyle({ height: _ctx.rowHeight + "px" })
+                    },
+                    [
+                      (openBlock(true), createElementBlock(
+                        Fragment,
+                        null,
+                        renderList(_ctx.renderCols, (rc) => {
+                          return openBlock(), createElementBlock(
+                            "div",
+                            {
+                              key: rc.key,
+                              class: normalizeClass(["sq-datagrid__cell", _ctx.cellAlignClass(rc)]),
+                              style: normalizeStyle(rc.style)
+                            },
+                            [
+                              rc.id === "__group" ? (openBlock(), createElementBlock("strong", _hoisted_27, "Total")) : rc.col && !rc.auto ? renderSlot(_ctx.$slots, `cell-${rc.id}`, mergeProps({ ref_for: true }, _ctx.cellParams(pr, rc, -1)), () => [
+                                createTextVNode(
+                                  toDisplayString(_ctx.formatCell(rc, pr)),
+                                  1
+                                  /* TEXT */
+                                )
+                              ], void 0, 1) : createCommentVNode("v-if", true)
+                            ],
+                            6
+                            /* CLASS, STYLE */
+                          );
+                        }),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ],
+                    4
+                    /* STYLE */
+                  );
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ])) : createCommentVNode("v-if", true)
+          ],
+          4
+          /* STYLE */
+        ),
+        _ctx.showLoading ? (openBlock(), createElementBlock("div", _hoisted_28, [
+          renderSlot(_ctx.$slots, "loading", {}, () => [
+            createVNode(_component_SqProgressCircular, {
+              indeterminate: "",
+              size: 28,
+              width: 3
+            })
+          ])
+        ])) : !_ctx.rowCount ? (openBlock(), createElementBlock("div", _hoisted_29, [
+          renderSlot(_ctx.$slots, "no-rows", {}, () => [
+            createVNode(_component_SqEmptyState, {
+              title: _ctx.messages.noData,
+              icon: "search"
+            }, null, 8, ["title"])
+          ])
+        ])) : createCommentVNode("v-if", true)
+      ],
+      36
+      /* STYLE, NEED_HYDRATION */
+    ),
+    _ctx.statusBar || _ctx.pagination ? (openBlock(), createElementBlock("div", _hoisted_30, [
+      _ctx.statusBar ? (openBlock(), createElementBlock("div", _hoisted_31, [
+        createElementVNode(
+          "span",
+          null,
+          toDisplayString(_ctx.statusText),
+          1
+          /* TEXT */
+        ),
+        _ctx.selectedIds.length ? (openBlock(), createElementBlock(
+          "span",
+          _hoisted_32,
+          "· " + toDisplayString(_ctx.selectedIds.length) + " selected",
+          1
+          /* TEXT */
+        )) : createCommentVNode("v-if", true),
+        _ctx.rangeStats ? (openBlock(), createElementBlock(
+          "span",
+          _hoisted_33,
+          "Count " + toDisplayString(_ctx.rangeStats.count) + " · Sum " + toDisplayString(_ctx.fmtNum(_ctx.rangeStats.sum)) + " · Avg " + toDisplayString(_ctx.fmtNum(_ctx.rangeStats.avg)) + " · Min " + toDisplayString(_ctx.fmtNum(_ctx.rangeStats.min)) + " · Max " + toDisplayString(_ctx.fmtNum(_ctx.rangeStats.max)),
+          1
+          /* TEXT */
+        )) : createCommentVNode("v-if", true)
+      ])) : createCommentVNode("v-if", true),
+      _cache[42] || (_cache[42] = createElementVNode(
+        "span",
+        { class: "sq-spacer" },
+        null,
+        -1
+        /* CACHED */
+      )),
+      _ctx.pagination && !_ctx.isServer ? (openBlock(), createElementBlock(
+        Fragment,
+        { key: 1 },
+        [
+          createElementVNode("span", _hoisted_34, [
+            createTextVNode(
+              toDisplayString(_ctx.messages.rowsPerPage) + " ",
+              1
+              /* TEXT */
+            ),
+            createElementVNode("select", {
+              class: "sq-datagrid__page-select sq-squircle",
+              value: _ctx.pageSizeState,
+              onChange: _cache[17] || (_cache[17] = (...args) => _ctx.onPageSize && _ctx.onPageSize(...args))
+            }, [
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(_ctx.pageSizes, (s) => {
+                  return openBlock(), createElementBlock("option", {
+                    key: s,
+                    value: s
+                  }, toDisplayString(s), 9, _hoisted_36);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ], 40, _hoisted_35)
+          ]),
+          createElementVNode(
+            "span",
+            _hoisted_37,
+            toDisplayString(_ctx.pageRangeText),
+            1
+            /* TEXT */
+          ),
+          createVNode(_component_SqPagination, {
+            modelValue: _ctx.page,
+            "onUpdate:modelValue": _cache[18] || (_cache[18] = ($event) => _ctx.page = $event),
+            length: _ctx.pageCount,
+            "total-visible": 5,
+            size: "x-small"
+          }, null, 8, ["modelValue", "length"])
+        ],
+        64
+        /* STABLE_FRAGMENT */
+      )) : createCommentVNode("v-if", true)
+    ])) : createCommentVNode("v-if", true),
+    createVNode(_component_SqMenu, {
+      modelValue: _ctx.menuOpen,
+      "onUpdate:modelValue": _cache[36] || (_cache[36] = ($event) => _ctx.menuOpen = $event),
+      activator: _ctx.menuAnchor || void 0,
+      "close-on-content-click": false,
+      location: "bottom end",
+      "max-height": 480
+    }, {
+      default: withCtx(() => [
+        _ctx.menuCol ? (openBlock(), createElementBlock("div", _hoisted_38, [
+          _ctx.menuMode === "column" ? (openBlock(), createElementBlock(
+            Fragment,
+            { key: 0 },
+            [
+              _ctx.menuCol.col.sortable !== false ? (openBlock(), createBlock(_component_SqListItem, {
+                key: 0,
+                title: "Sort ascending",
+                "prepend-icon": "arrowUp",
+                link: "",
+                onClick: _cache[19] || (_cache[19] = ($event) => _ctx.setSort(_ctx.menuCol.id, "asc"))
+              })) : createCommentVNode("v-if", true),
+              _ctx.menuCol.col.sortable !== false ? (openBlock(), createBlock(_component_SqListItem, {
+                key: 1,
+                title: "Sort descending",
+                "prepend-icon": "arrowDown",
+                link: "",
+                onClick: _cache[20] || (_cache[20] = ($event) => _ctx.setSort(_ctx.menuCol.id, "desc"))
+              })) : createCommentVNode("v-if", true),
+              _ctx.sortIndex(_ctx.menuCol.id) >= 0 ? (openBlock(), createBlock(_component_SqListItem, {
+                key: 2,
+                title: "Clear sort",
+                "prepend-icon": "sort",
+                link: "",
+                onClick: _cache[21] || (_cache[21] = ($event) => _ctx.setSort(_ctx.menuCol.id, null))
+              })) : createCommentVNode("v-if", true),
+              createVNode(_component_SqDivider),
+              createVNode(_component_SqListItem, {
+                title: _ctx.menuCol.pinned === "left" ? "Unpin" : "Pin left",
+                "prepend-icon": "pin",
+                link: "",
+                onClick: _cache[22] || (_cache[22] = ($event) => _ctx.setPinned(_ctx.menuCol.id, _ctx.menuCol.pinned === "left" ? null : "left"))
+              }, null, 8, ["title"]),
+              _ctx.menuCol.pinned !== "right" ? (openBlock(), createBlock(_component_SqListItem, {
+                key: 3,
+                title: "Pin right",
+                "prepend-icon": "pin",
+                link: "",
+                onClick: _cache[23] || (_cache[23] = ($event) => _ctx.setPinned(_ctx.menuCol.id, "right"))
+              })) : createCommentVNode("v-if", true),
+              createVNode(_component_SqListItem, {
+                title: "Autosize column",
+                "prepend-icon": "columns",
+                link: "",
+                onClick: _cache[24] || (_cache[24] = ($event) => _ctx.autoSize([_ctx.menuCol.id]))
+              }),
+              createVNode(_component_SqListItem, {
+                title: "Autosize all columns",
+                "prepend-icon": "columns",
+                link: "",
+                onClick: _cache[25] || (_cache[25] = ($event) => _ctx.autoSize())
+              }),
+              !_ctx.treeData && !_ctx.isServer ? (openBlock(), createBlock(_component_SqListItem, {
+                key: 4,
+                title: _ctx.groupBy.includes(_ctx.menuCol.id) ? `Ungroup by ${_ctx.menuCol.title}` : `Group by ${_ctx.menuCol.title}`,
+                "prepend-icon": "menu",
+                link: "",
+                onClick: _cache[26] || (_cache[26] = ($event) => _ctx.toggleGroupBy(_ctx.menuCol.id))
+              }, null, 8, ["title"])) : createCommentVNode("v-if", true),
+              createVNode(_component_SqListItem, {
+                title: "Hide column",
+                "prepend-icon": "eyeOff",
+                link: "",
+                onClick: _cache[27] || (_cache[27] = ($event) => {
+                  _ctx.setHidden(_ctx.menuCol.id, true);
+                  _ctx.menuOpen = false;
+                })
+              }),
+              _ctx.menuCol.col.filter !== false ? (openBlock(), createElementBlock(
+                Fragment,
+                { key: 5 },
+                [
+                  createVNode(_component_SqDivider, null, {
+                    default: withCtx(() => [..._cache[43] || (_cache[43] = [
+                      createTextVNode(
+                        "Filter",
+                        -1
+                        /* CACHED */
+                      )
+                    ])]),
+                    _: 1
+                    /* STABLE */
+                  }),
+                  createVNode(_component_SqGridFilter, {
+                    kind: _ctx.filterKind(_ctx.menuCol.col),
+                    "model-value": _ctx.filterModelObj[_ctx.menuCol.id],
+                    values: _ctx.distinctValues(_ctx.menuCol.id),
+                    formatter: _ctx.menuFormatter,
+                    "onUpdate:modelValue": _cache[28] || (_cache[28] = ($event) => _ctx.setFilter(_ctx.menuCol.id, $event))
+                  }, null, 8, ["kind", "model-value", "values", "formatter"])
+                ],
+                64
+                /* STABLE_FRAGMENT */
+              )) : createCommentVNode("v-if", true)
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          )) : (openBlock(), createElementBlock(
+            Fragment,
+            { key: 1 },
+            [
+              createVNode(_component_SqListItem, {
+                title: "Copy",
+                "prepend-icon": "copy",
+                link: "",
+                onClick: _cache[29] || (_cache[29] = ($event) => {
+                  _ctx.copy(false);
+                  _ctx.menuOpen = false;
+                })
+              }),
+              createVNode(_component_SqListItem, {
+                title: "Copy with headers",
+                "prepend-icon": "copy",
+                link: "",
+                onClick: _cache[30] || (_cache[30] = ($event) => {
+                  _ctx.copy(true);
+                  _ctx.menuOpen = false;
+                })
+              }),
+              _ctx.canUndo ? (openBlock(), createBlock(_component_SqListItem, {
+                key: 0,
+                title: "Undo",
+                "prepend-icon": "refresh",
+                link: "",
+                onClick: _cache[31] || (_cache[31] = ($event) => {
+                  _ctx.undo();
+                  _ctx.menuOpen = false;
+                })
+              })) : createCommentVNode("v-if", true),
+              createVNode(_component_SqDivider),
+              createVNode(_component_SqListItem, {
+                title: "Export CSV",
+                "prepend-icon": "download",
+                link: "",
+                onClick: _cache[32] || (_cache[32] = ($event) => {
+                  _ctx.exportCsv();
+                  _ctx.menuOpen = false;
+                })
+              }),
+              _ctx.selectedIds.length ? (openBlock(), createBlock(_component_SqListItem, {
+                key: 1,
+                title: "Export selected rows",
+                "prepend-icon": "download",
+                link: "",
+                onClick: _cache[33] || (_cache[33] = ($event) => {
+                  _ctx.exportCsv({ onlySelected: true });
+                  _ctx.menuOpen = false;
+                })
+              })) : createCommentVNode("v-if", true),
+              _ctx.hasGroups ? (openBlock(), createElementBlock(
+                Fragment,
+                { key: 2 },
+                [
+                  createVNode(_component_SqDivider),
+                  createVNode(_component_SqListItem, {
+                    title: "Expand all",
+                    "prepend-icon": "plus",
+                    link: "",
+                    onClick: _cache[34] || (_cache[34] = ($event) => {
+                      _ctx.expandAll();
+                      _ctx.menuOpen = false;
+                    })
+                  }),
+                  createVNode(_component_SqListItem, {
+                    title: "Collapse all",
+                    "prepend-icon": "minus",
+                    link: "",
+                    onClick: _cache[35] || (_cache[35] = ($event) => {
+                      _ctx.collapseAll();
+                      _ctx.menuOpen = false;
+                    })
+                  })
+                ],
+                64
+                /* STABLE_FRAGMENT */
+              )) : createCommentVNode("v-if", true)
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          ))
+        ])) : createCommentVNode("v-if", true)
+      ]),
+      _: 1
+      /* STABLE */
+    }, 8, ["modelValue", "activator"]),
+    createElementVNode(
+      "div",
+      {
+        ref: "ctxAnchor",
+        class: "sq-datagrid__ctx-anchor",
+        style: normalizeStyle({ left: _ctx.ctxPos.x + "px", top: _ctx.ctxPos.y + "px" })
+      },
+      null,
+      4
+      /* STYLE */
+    )
+  ], 46, _hoisted_1);
+}
+const SqDataGrid = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const componentNames = ["SqDataGrid"];
+export {
+  SqDataGrid,
+  aggregate,
+  allGroupIds,
+  colIdOf,
+  componentNames,
+  SqDataGrid as default,
+  filterKindOf,
+  filterRows,
+  flatten,
+  groupRows,
+  makeGetter,
+  matchCondition,
+  parseTsv,
+  pivotRows,
+  rowLayout,
+  sortIndices,
+  toCsv,
+  treeRows
+};
+//# sourceMappingURL=index.mjs.map