argus-table 0.3.0 → 0.4.0

package/dist/custom-elements.json

@@ -44,52 +44,104 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/argus-column.ts",
+      "path": "src/argus-column-group.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "watchColumns",
-          "return": {
-            "type": {
-              "text": "void"
-            }
-          },
-          "parameters": [
+          "kind": "class",
+          "description": "A header over the `<argus-column>` children it wraps, written as markup instead\nof an entry in the table's `columnGroups` property. Groups nest: a group inside\na group adds a header row. It is data only and renders nothing.\n\nOnly direct children of the table or of another group count. A non-empty\n`columnGroups` property wins over the children, and a non-empty `columns`\nproperty turns all column and group children off.",
+          "name": "ArgusColumnGroup",
+          "members": [
             {
-              "name": "host",
+              "kind": "field",
+              "name": "groupId",
               "type": {
-                "text": "Element"
-              }
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Stable key. Must be unique among the table's groups; it may equal a column id.",
+              "attribute": "group-id"
             },
             {
-              "name": "onChange",
+              "kind": "field",
+              "name": "header",
               "type": {
-                "text": "() => void"
-              }
+                "text": "CellContent | (() => CellContent) | undefined"
+              },
+              "description": "Header content: text as an attribute; a Lit template, a node or a function as a property. Default: the id.",
+              "attribute": "header"
+            },
+            {
+              "kind": "field",
+              "name": "reorderable",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether the group can be moved as a whole. Default: `true`; `reorderable=\"false\"` turns it off.",
+              "attribute": "reorderable"
             }
           ],
-          "description": "Calls `onChange` whenever an `<argus-column>` child of `host` is added, removed, moved or changed."
-        },
-        {
-          "kind": "function",
-          "name": "unwatchColumns",
-          "return": {
-            "type": {
-              "text": "void"
-            }
-          },
-          "parameters": [
+          "attributes": [
             {
-              "name": "host",
+              "name": "group-id",
               "type": {
-                "text": "Element"
-              }
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Stable key. Must be unique among the table's groups; it may equal a column id.",
+              "fieldName": "groupId"
+            },
+            {
+              "name": "header",
+              "type": {
+                "text": "CellContent | (() => CellContent) | undefined"
+              },
+              "description": "Header content: text as an attribute; a Lit template, a node or a function as a property. Default: the id.",
+              "fieldName": "header"
+            },
+            {
+              "name": "reorderable",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether the group can be moved as a whole. Default: `true`; `reorderable=\"false\"` turns it off.",
+              "fieldName": "reorderable"
             }
-          ]
+          ],
+          "superclass": {
+            "name": "ReactiveElement",
+            "package": "lit"
+          },
+          "summary": "Declarative column group of an `<argus-table>`.",
+          "tagName": "argus-column-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ArgusColumnGroup",
+          "declaration": {
+            "name": "ArgusColumnGroup",
+            "module": "src/argus-column-group.ts"
+          }
         },
+        {
+          "kind": "custom-element-definition",
+          "name": "argus-column-group",
+          "declaration": {
+            "name": "ArgusColumnGroup",
+            "module": "src/argus-column-group.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/argus-column.ts",
+      "declarations": [
         {
           "kind": "class",
-          "description": "One column of the parent `<argus-table>`, written as markup instead of an entry in\nits `columns` property. It is data only and renders nothing.\n\nOnly direct children of the table count, in document order. A non-empty `columns`\nproperty wins over the children. Adding, removing, moving or changing a column\nupdates the table; sizes, order and sorting are kept by `column-id`.\n\nA `<template>` child is the content of every cell in the column (static: the same\nfor each row). Set the `cell` property for content that depends on the row.\n\nThe standard `hidden` attribute (or property) hides the column, like `hidden` in\n`columns`; the table's `columnVisibility` overrides it.",
+          "description": "One column of the parent `<argus-table>`, written as markup instead of an entry in\nits `columns` property. It is data only and renders nothing.\n\nOnly direct children of the table or of an `<argus-column-group>` count, in\ndocument order. A non-empty `columns` property wins over the children. Adding, removing, moving or changing a column\nupdates the table; sizes, order and sorting are kept by `column-id`.\n\nA `<template>` child is the content of every cell in the column (static: the same\nfor each row). Set the `cell` property for content that depends on the row.\n\nThe standard `hidden` attribute (or property) hides the column, like `hidden` in\n`columns`; the table's `columnVisibility` overrides it.",
           "name": "ArgusColumn",
           "members": [
             {
@@ -260,16 +312,6 @@
                 "text": "readonly FilterValue[] | undefined"
               },
               "description": "The values a `set` filter offers; needed with a `dataSource`. Property only."
-            },
-            {
-              "kind": "method",
-              "name": "toColumnDef",
-              "return": {
-                "type": {
-                  "text": "ColumnDef<T>"
-                }
-              },
-              "description": "The column as the table reads it. Unset fields stay `undefined`, which the\ntable reads as its defaults. An unknown `pin` is ignored and an unknown\n`align` falls back to `start`."
             }
           ],
           "attributes": [
@@ -416,22 +458,6 @@
         }
       ],
       "exports": [
-        {
-          "kind": "js",
-          "name": "watchColumns",
-          "declaration": {
-            "name": "watchColumns",
-            "module": "src/argus-column.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "unwatchColumns",
-          "declaration": {
-            "name": "unwatchColumns",
-            "module": "src/argus-column.ts"
-          }
-        },
         {
           "kind": "js",
           "name": "ArgusColumn",
@@ -456,7 +482,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A virtualized data table.\n\nSet `columns`, and `data` or `dataSource`, as properties. Columns can also be\nwritten as `<argus-column>` children; a non-empty `columns` wins over them.\nHeader and cell content is rendered into the element's light DOM and slotted\ninto the cells, so page CSS and the page's own components work inside cells.\n\nAny number of rows scrolls to the end. Browsers limit an element's height\n(about 800k rows of 40 px in Chromium and Safari, 400k in Firefox), so a taller\nbody renders shorter and its scroll position is scaled onto the rows: the\nscrollbar still spans every row, and a wheel step covers a few more of them.\nUse `scrollToRow()` rather than setting the scroll container's `scrollTop`.",
+          "description": "A virtualized data table.\n\nSet `columns`, and `data` or `dataSource`, as properties. Columns can also be\nwritten as `<argus-column>` children; a non-empty `columns` wins over them.\n`columnGroups` (or `<argus-column-group>` children) adds headers over several\ncolumns, a header row per level of nesting.\nHeader and cell content is rendered into the element's light DOM and slotted\ninto the cells, so page CSS and the page's own components work inside cells.\n\nAny number of rows scrolls to the end. Browsers limit an element's height\n(about 800k rows of 40 px in Chromium and Safari, 400k in Firefox), so a taller\nbody renders shorter and its scroll position is scaled onto the rows: the\nscrollbar still spans every row, and a wheel step covers a few more of them.\nUse `scrollToRow()` rather than setting the scroll container's `scrollTop`.",
           "name": "ArgusTable",
           "cssProperties": [
             {
@@ -493,17 +519,17 @@
               "default": "1px"
             },
             {
-              "description": "Border around the whole table, as a `border` shorthand (`1px solid …`). Inside the element's size.",
-              "name": "--argus-outline",
+              "description": "Border around the whole table, as a `border` shorthand (`1px solid …`). Inside the element's size. The lines between rows are `--argus-border-width` and `--argus-border-color`.",
+              "name": "--argus-border",
               "default": "none"
             },
             {
               "description": "Corner radius of the table. Header, rows and pinned columns are clipped to it.",
-              "name": "--argus-radius",
+              "name": "--argus-border-radius",
               "default": "0"
             },
             {
-              "description": "Height of a row. Default per density: 32px, 40px, 52px. With `rowHeight: 'auto'`: the header's height and the least a body or pinned row is.",
+              "description": "Height of a row, and of each header row. Default per density: 32px, 40px, 52px. With `rowHeight: 'auto'`: the height of each header row and the least a body or pinned row is.",
               "name": "--argus-row-height"
             },
             {
@@ -516,7 +542,7 @@
             },
             {
               "description": "Background of odd rows. Default: no stripes.",
-              "name": "--argus-row-stripe-bg"
+              "name": "--argus-row-odd-bg"
             },
             {
               "description": "Shadow on the pinned edge, as a `box-shadow` falling toward the end side (`4px 0 6px -4px …`). Mirrored for the end edge and in RTL; `none` removes it.",
@@ -547,7 +573,7 @@
             },
             {
               "description": "Background of the pinned rows, pinned columns included.",
-              "name": "--argus-pinned-row-bg",
+              "name": "--argus-row-pinned-bg",
               "default": "var(--argus-bg)"
             },
             {
@@ -569,17 +595,53 @@
               "name": "header"
             },
             {
-              "description": "The header row.",
+              "description": "The row of column headers: the last header row when there are column groups.",
               "name": "header-row"
             },
             {
-              "description": "Every header cell.",
+              "description": "A row of column group headers (`columnGroups`), one per level of nesting, above `header-row`.",
+              "name": "header-group-row"
+            },
+            {
+              "description": "A column group's header, spanning its columns.",
+              "name": "header-group-cell"
+            },
+            {
+              "description": "Added to `header-group-cell` on the group being dragged to a new position.",
+              "name": "header-group-cell-dragging"
+            },
+            {
+              "description": "The empty cell of a group row over columns without a group at that level.",
+              "name": "header-group-filler"
+            },
+            {
+              "description": "Every column header.",
               "name": "header-cell"
             },
             {
-              "description": "The header of the sorted column. The direction is in `aria-sort`.",
+              "description": "Added to `header-cell` on the headers of sorted columns. The direction is also in `aria-sort`.",
               "name": "header-cell-sorted"
             },
+            {
+              "description": "Added to `header-cell` on the headers of columns sorted ascending, next to `header-cell-sorted`.",
+              "name": "header-cell-sorted-asc"
+            },
+            {
+              "description": "Added to `header-cell` on the headers of columns sorted descending, next to `header-cell-sorted`.",
+              "name": "header-cell-sorted-desc"
+            },
+            {
+              "description": "Added to `header-cell` on the headers of pinned columns, on either side.",
+              "name": "header-cell-pinned"
+            },
+            {
+              "description": "Added to `header-cell-pinned` on the pinned header next to the scrolling columns (one per pinned side).",
+              "name": "header-cell-pinned-edge"
+            },
+            {
+              "description": "The chevron in a sortable column's header, shown while it is sorted and pointing the way it sorts. It is drawn with borders in `currentColor`.",
+              "name": "sort-indicator"
+            },
             {
               "description": "Added to `header-cell` on the headers of filtered columns.",
               "name": "header-cell-filtered"
@@ -589,15 +651,15 @@
               "name": "filter-indicator"
             },
             {
-              "description": "Added to `header-cell` on the header being dragged to a new position.",
+              "description": "Added to `header-cell` on the header being dragged to a new position, and on the headers of a dragged group's columns.",
               "name": "header-cell-dragging"
             },
             {
-              "description": "The line on the edge of the header where a dragged column would land.",
+              "description": "The line on the edge of the header where a dragged column or group would land.",
               "name": "drop-indicator"
             },
             {
-              "description": "The drag handle on the inline-end edge of a resizable column's header. A double-click fits the column to its content.",
+              "description": "The drag handle on the inline-end edge of a resizable column's header, and of a column group's header with resizable columns. A double-click fits the column (or the group's columns) to its content.",
               "name": "resize-handle"
             },
             {
@@ -620,6 +682,10 @@
               "description": "Body rows whose `dataSource` page hasn't loaded yet, or failed.",
               "name": "row-loading"
             },
+            {
+              "description": "Added to `row-loading` on body rows whose `dataSource` page failed to load.",
+              "name": "row-error"
+            },
             {
               "description": "Body rows whose id is in `selection`.",
               "name": "row-selected"
@@ -650,22 +716,22 @@
             },
             {
               "description": "Every cell of a pinned row (next to `cell`).",
-              "name": "cell-pinned-row"
+              "name": "cell-in-pinned-row"
             },
             {
               "description": "Every body cell.",
               "name": "cell"
             },
             {
-              "description": "Body cells in the sorted column.",
+              "description": "Body and pinned-row cells in the sorted column.",
               "name": "cell-sorted"
             },
             {
-              "description": "Body cells in a pinned column, on either side.",
+              "description": "Body and pinned-row cells in a pinned column, on either side.",
               "name": "cell-pinned"
             },
             {
-              "description": "The pinned body cell next to the scrolling columns (one per pinned side).",
+              "description": "The pinned cell next to the scrolling columns (one per pinned side), in body and pinned rows.",
               "name": "cell-pinned-edge"
             },
             {
@@ -700,6 +766,14 @@
               },
               "description": "Column definitions. Property only: functions can't be attributes. While empty,\nthe table reads its `<argus-column>` children instead. `null` or `undefined`\nmeans `[]`."
             },
+            {
+              "kind": "field",
+              "name": "columnGroups",
+              "type": {
+                "text": "readonly ColumnGroup[]"
+              },
+              "description": "Headers over several columns: `{ id, header, columns }`, where `columns` lists\ncolumn ids and nested groups. Each level of nesting adds a header row. A group's\ncolumns stay next to each other: they move within the group, and the group\nmoves as a whole (drag its header, or Alt+Shift+Arrow). A group whose columns\nare pinned to different sides shows on each side. Property only. While empty\nand `columns` is too, the table reads its `<argus-column-group>` children.\n`null` or `undefined` means `[]`."
+            },
             {
               "kind": "field",
               "name": "data",
@@ -714,7 +788,7 @@
               "type": {
                 "text": "DataSource<T> | undefined"
               },
-              "description": "Loads rows page by page as they scroll into view, instead of `data`:\n`{ getRows({ start, end, sorting, signal }), pageSize? }`, where `end` is\nexclusive and `getRows` resolves to `{ rows, total? }`. Without a `total`,\nthe table grows as pages arrive and a short page marks the end. Sorting\nhappens on the server: a new order reloads from the top. While set, it wins\nover `data`. Replace the object to change `getRows` or `pageSize`."
+              "description": "Loads rows page by page as they scroll into view, instead of `data`:\n`{ getRows({ start, end, sorting, filters, quickFilter, signal }), pageSize? }`,\nwhere `end` is exclusive and `getRows` resolves to `{ rows, total? }`. Without a\n`total`, the table grows as pages arrive and a short page marks the end. Sorting\nand filtering happen on the server: a new order or filter reloads from the top.\nWhile set, it wins over `data`. Replace the object to change `getRows` or\n`pageSize`."
             },
             {
               "kind": "field",
@@ -768,7 +842,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Renders only the scrolling columns in view (plus two on each side), for\nwide tables: a few dozen columns and more. Pinned columns, the checkbox\ncolumn and the focused cell's column always render. Off by default: then\nevery column renders, as before. Cells are placed in their grid column\nexplicitly, so page CSS that relies on their order in the DOM (`:nth-child`\non cells) doesn't apply. `autosizeColumns()` and `width: 'auto'` columns\nstill measure columns out of view: they render for the measurement.",
+              "description": "Renders only the scrolling columns in view (plus two on each side), for\nwide tables: a few dozen columns and more. Pinned columns, the checkbox\ncolumn and the focused cell's column always render. Off by default: then\nevery column renders, as before. Cells are placed in their grid column\nexplicitly, so page CSS that relies on their order in the DOM (`:nth-child`\non cells) doesn't apply. `autosizeColumns()` and `width: 'auto'` columns\nstill measure columns out of view: they render for the measurement.\nAs an attribute, `virtualize-columns=\"false\"` is off, like no attribute.",
               "attribute": "virtualize-columns"
             },
             {
@@ -777,7 +851,7 @@
               "type": {
                 "text": "SortState"
               },
-              "description": "The sort order, e.g. `[{ id: 'total', desc: true }]`; `[]` when unsorted. Unset,\nthe table keeps it itself and header clicks change it. Once set, it is\ncontrolled: a click only fires `argus-sort-change` with the proposed order,\nand nothing changes until you set the property. Set `undefined` to hand it back."
+              "description": "The sort order, e.g. `[{ id: 'total', desc: true }]`; `[]` when unsorted. Unset,\nthe table keeps it itself and header clicks change it. Once set, it is\ncontrolled: a click only fires `argus-sorting-change` with the proposed order,\nand nothing changes until you set the property. Set `undefined` to hand it back."
             },
             {
               "kind": "field",
@@ -785,7 +859,7 @@
               "type": {
                 "text": "ColumnSizingState"
               },
-              "description": "Resized widths in px by column id, e.g. `{ name: 240 }`. A resized flex column\nbecomes fixed. Uncontrolled until set, like `sorting`: once set, a resize only\nfires `argus-column-resize` with the proposed widths. `undefined` hands it back."
+              "description": "Resized widths in px by column id, e.g. `{ name: 240 }`. A resized flex column\nbecomes fixed. Uncontrolled until set, like `sorting`: once set, a resize only\nfires `argus-column-sizing-change` with the proposed widths. `undefined` hands it back."
             },
             {
               "kind": "field",
@@ -793,7 +867,7 @@
               "type": {
                 "text": "ColumnOrderState"
               },
-              "description": "The column order: column ids as the table shows them, e.g.\n`['id', 'total', 'customer']`. `[]` (the default) keeps the order of `columns`.\nEach pin group (start-pinned, scrolling, end-pinned) takes its columns in this\norder; unknown ids are ignored and columns it doesn't list follow the listed\nones of their group. After a move it holds every column id. Uncontrolled\nuntil set, like `sorting`: once set, a move only fires `argus-column-reorder`\nwith the proposed order. `undefined` hands it back."
+              "description": "The column order: column ids as the table shows them, e.g.\n`['id', 'total', 'customer']`. `[]` (the default) keeps the order of `columns`.\nEach pin group (start-pinned, scrolling, end-pinned) takes its columns in this\norder; unknown ids are ignored and columns it doesn't list follow the listed\nones of their group. After a move it holds every column id. Uncontrolled\nuntil set, like `sorting`: once set, a move only fires `argus-column-order-change`\nwith the proposed order. `undefined` hands it back."
             },
             {
               "kind": "field",
@@ -801,7 +875,7 @@
               "type": {
                 "text": "ColumnPinningState"
               },
-              "description": "Pins by column id, over the columns' own `pin`: `'start'` or `'end'` pins a\ncolumn, `false` unpins one whose definition pins it, e.g.\n`{ total: 'end', id: false }`. Columns it doesn't list keep their `pin`. A pinned\ncolumn joins the edge of its group nearest its place in `columnOrder`, and stops\nflexing. Uncontrolled until set, like `sorting`: once set, pinning from a plugin\nonly fires `argus-column-pin` with the proposed pins. `undefined` hands it back."
+              "description": "Pins by column id, over the columns' own `pin`: `'start'` or `'end'` pins a\ncolumn, `false` unpins one whose definition pins it, e.g.\n`{ total: 'end', id: false }`. Columns it doesn't list keep their `pin`. A pinned\ncolumn joins the edge of its group nearest its place in `columnOrder`, and stops\nflexing. Uncontrolled until set, like `sorting`: once set, pinning from a plugin\nonly fires `argus-column-pinning-change` with the proposed pins. `undefined` hands it back."
             },
             {
               "kind": "field",
@@ -809,7 +883,7 @@
               "type": {
                 "text": "ColumnVisibilityState"
               },
-              "description": "Visibility by column id, over the columns' own `hidden`: `false` hides a column,\n`true` shows one defined as `hidden`, e.g. `{ email: false }`. Columns it\ndoesn't list keep their `hidden`. A hidden column isn't rendered, but sorting by\nit still works and it keeps its place in `columnOrder`. Uncontrolled until set,\nlike `sorting`: once set, hiding or showing from a plugin only fires\n`argus-column-hide` with the proposed visibility. `undefined` hands it back."
+              "description": "Visibility by column id, over the columns' own `hidden`: `false` hides a column,\n`true` shows one defined as `hidden`, e.g. `{ email: false }`. Columns it\ndoesn't list keep their `hidden`. A hidden column isn't rendered, but sorting by\nit still works and it keeps its place in `columnOrder`. Uncontrolled until set,\nlike `sorting`: once set, hiding or showing from a plugin only fires\n`argus-column-visibility-change` with the proposed visibility. `undefined` hands it back."
             },
             {
               "kind": "field",
@@ -817,7 +891,7 @@
               "type": {
                 "text": "ColumnFilterState"
               },
-              "description": "Filters by column id, e.g. `{ city: { kind: 'set', values: ['Berlin'] } }` or\n`{ total: { kind: 'number', op: 'gt', value: 100 } }`. A row shows when it passes\nevery filter and `quickFilter`. Filters on hidden columns still apply; unknown ids\nare ignored. A column's `filterFn` replaces the built-in matching. With a\n`dataSource`, the filters go to `getRows()` and the server filters. Users set\nfilters through plugins (the column menu) on columns with a `filter` kind.\nUncontrolled until set, like `sorting`: once set, a change from a plugin only\nfires `argus-column-filter` with the proposed filters. `undefined` hands it back."
+              "description": "Filters by column id, e.g. `{ city: { kind: 'set', values: ['Berlin'] } }` or\n`{ total: { kind: 'number', op: 'gt', value: 100 } }`. A row shows when it passes\nevery filter and `quickFilter`. Filters on hidden columns still apply; unknown ids\nare ignored. A column's `filterFn` replaces the built-in matching. With a\n`dataSource`, the filters go to `getRows()` and the server filters. Users set\nfilters through plugins (the column menu) on columns with a `filter` kind.\nUncontrolled until set, like `sorting`: once set, a change from a plugin only\nfires `argus-column-filters-change` with the proposed filters. `undefined` hands it back."
             },
             {
               "kind": "field",
@@ -845,7 +919,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Adds a checkbox column, pinned first at the start, while `selectionMode` is\n`single` or `multi`. A row's checkbox toggles it (Shift+click adds the range\nfrom the last row clicked); in `multi` mode the header's checkbox selects\nevery row, or clears the selection when all are selected. Space on a\nfocused checkbox cell does the same. The column isn't part of `columns`,\n`columnOrder` or `columnSizing`, and it fires no `argus-cell-click`.",
+              "description": "Adds a checkbox column, pinned first at the start, while `selectionMode` is\n`single` or `multi`. A row's checkbox toggles it (Shift+click adds the range\nfrom the last row clicked); in `multi` mode the header's checkbox selects\nevery row, or clears the selection when all are selected. Space on a\nfocused checkbox cell does the same. The column isn't part of `columns`,\n`columnOrder` or `columnSizing`, and it fires no `argus-cell-click`.\nAs an attribute, `selection-checkboxes=\"false\"` is off, like no attribute.",
               "attribute": "selection-checkboxes"
             },
             {
@@ -854,7 +928,7 @@
               "type": {
                 "text": "SelectionState"
               },
-              "description": "The selected rows, as row ids (from `getRowId`, or the row's index as a\nstring), e.g. `['p4', 'p7']`. Uncontrolled until set, like `sorting`: once\nset, a click only fires `argus-row-select` with the proposed ids.\n`undefined` hands it back. The table never drops ids on its own: they stay\nthrough sorting, a new `data` or reloaded pages. With a `dataSource`,\nCtrl/Cmd+A selects the loaded rows only."
+              "description": "The selected rows, as row ids (from `getRowId`, or the row's index as a\nstring), e.g. `['p4', 'p7']`. Uncontrolled until set, like `sorting`: once\nset, a click only fires `argus-selection-change` with the proposed ids.\n`undefined` hands it back. The table never drops ids on its own: they stay\nthrough sorting, a new `data` or reloaded pages. With a `dataSource`,\nCtrl/Cmd+A selects the loaded rows only."
             },
             {
               "kind": "field",
@@ -899,7 +973,7 @@
                   }
                 }
               ],
-              "description": "Fits columns to their content: the header, the pinned rows and the body rows\nrendered now (rows out of view aren't measured). It resizes them like a drag\nwould, so `argus-column-resize` fires for each column that changes, and with a\ncontrolled `columnSizing` nothing changes until you set it. Without `ids`, fits\nevery resizable column; columns with `resizable: false` keep their width.\nWith `virtualizeColumns`, columns out of view render for the measurement.\nResolves once the table has re-rendered."
+              "description": "Fits columns to their content: the header, the pinned rows and the body rows\nrendered now (rows out of view aren't measured). It resizes them like a drag\nwould, so `argus-column-sizing-change` fires for each column that changes, and with a\ncontrolled `columnSizing` nothing changes until you set it. Without `ids`, fits\nevery resizable column; columns with `resizable: false` keep their width.\nWith `virtualizeColumns`, columns out of view render for the measurement.\nResolves once the table has re-rendered."
             },
             {
               "kind": "method",
@@ -927,7 +1001,7 @@
                   "text": "Required<TableState>"
                 }
               },
-              "description": "The state users change, as one object of plain JSON for saving a user's\nlayout: `sorting`, `columnSizing`, `columnOrder`, `columnPinning`,\n`columnVisibility`, `columnFilters`, `selection`, `quickFilter`, and `scroll`\n(the row at the top and the horizontal offset). Controlled properties are\nincluded with the values you set. The object is a copy: changing it changes\nnothing in the table."
+              "description": "The state users change, as one object of plain JSON for saving a user's\nlayout: `sorting`, `columnSizing`, `columnOrder`, `columnPinning`,\n`columnVisibility`, `columnFilters`, `selection`, `quickFilter`, and `scroll`\n(the row at the top and the inline offset), with `version: 1`. Controlled properties are\nincluded with the values you set. The object is a copy: changing it changes\nnothing in the table."
             },
             {
               "kind": "method",
@@ -945,57 +1019,64 @@
                   }
                 }
               ],
-              "description": "Restores state from `getState()`, for example a layout saved in\n`localStorage`. Only the keys given change; ids of columns that no longer\nexist are ignored. Properties you control are left alone (set them\nyourself), and the others stay uncontrolled. No change events fire.\n`quickFilter` is set like the property: a search box of yours shows it only\nif you read it back. `scroll` is applied after the rest, so with a\n`dataSource` the restored rows load where it points. Resolves once the table\nhas re-rendered there."
+              "description": "Restores state from `getState()`, for example a layout saved in\n`localStorage`. Only the keys given change; ids of columns that no longer\nexist are ignored. State of another `version` is ignored as a whole. Properties you control are left alone (set them\nyourself), and the others stay uncontrolled. No change events fire.\n`quickFilter` is set like the property: a search box of yours shows it only\nif you read it back. `scroll` is applied after the rest, so with a\n`dataSource` the restored rows load where it points. Resolves once the table\nhas re-rendered there."
             }
           ],
           "events": [
             {
               "type": {
-                "text": "CustomEvent<SortChangeDetail>"
+                "text": "CustomEvent<SortingChangeDetail>"
+              },
+              "description": "`sorting` changed: a sortable header was clicked, or activated with Enter or Space. `detail: { sorting }`. The new value fires after the update that applied it; when the property is controlled, the proposed value fires right away and nothing changes until the host sets it.",
+              "name": "argus-sorting-change"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<ColumnSizingChangeDetail>"
               },
-              "description": "A sortable header was clicked, or activated with Enter or Space. `detail: { sorting }`: the new order, or the proposed one when `sorting` is controlled.",
-              "name": "argus-sort-change"
+              "description": "`columnSizing` changed: a column was resized by dragging its handle, with Alt+Arrow on its header, by a double-click on its handle (fit to content) or by `autosizeColumns()`. `detail: { columnSizing, columnId, width }`. Fires on every frame of a drag, and once per column that changes (a group resize, `autosizeColumns()`). The new value fires after the update that applied it; when the property is controlled, the proposed value fires right away and nothing changes until the host sets it.",
+              "name": "argus-column-sizing-change"
             },
             {
               "type": {
-                "text": "CustomEvent<ColumnResizeDetail>"
+                "text": "CustomEvent<ColumnOrderChangeDetail>"
               },
-              "description": "A column was resized: by dragging its handle, with Alt+Arrow on its header, by a double-click on its handle (fit to content) or by `autosizeColumns()`. `detail: { columnId, width, sizing }`: the new widths, or the proposed ones when `columnSizing` is controlled. Fires on every frame of a drag, and once per column that `autosizeColumns()` changes.",
-              "name": "argus-column-resize"
+              "description": "`columnOrder` changed: a column or column group was moved by dragging its header, or with Alt+Shift+Arrow on its focused header. Columns move within their pin side (start-pinned, scrolling, end-pinned) and their column group; groups move as a whole. `detail: { columnOrder, columnId, groupId? }`: `groupId` is set when a group moved, and `columnId` is then its first column. Fires once per move, on drop. The new value fires after the update that applied it; when the property is controlled, the proposed value fires right away and nothing changes until the host sets it.",
+              "name": "argus-column-order-change"
             },
             {
               "type": {
-                "text": "CustomEvent<ColumnReorderDetail>"
+                "text": "CustomEvent<ColumnPinningChangeDetail>"
               },
-              "description": "A column was moved: by dragging its header, or with Alt+Shift+Arrow on its focused header. Columns move within their own group (start-pinned, scrolling, end-pinned). `detail: { columnId, order }`: the new order, or the proposed one when `columnOrder` is controlled. Fires once per move, on drop.",
-              "name": "argus-column-reorder"
+              "description": "`columnPinning` changed: a column was pinned to a side or unpinned, through a plugin such as the column menu. `detail: { columnPinning, columnId, pin }`: `pin` is `'start'`, `'end'` or `false`. The new value fires after the update that applied it; when the property is controlled, the proposed value fires right away and nothing changes until the host sets it.",
+              "name": "argus-column-pinning-change"
             },
             {
               "type": {
-                "text": "CustomEvent<ColumnPinDetail>"
+                "text": "CustomEvent<ColumnVisibilityChangeDetail>"
               },
-              "description": "A column was pinned to a side or unpinned, through a plugin such as the column menu. `detail: { columnId, pin, pinning }`: `pin` is `'start'`, `'end'` or `false`; `pinning` is the new state, or the proposed one when `columnPinning` is controlled.",
-              "name": "argus-column-pin"
+              "description": "`columnVisibility` changed: a column was hidden or shown, through a plugin such as the column menu. `detail: { columnVisibility, columnId, visible }`: `visible` is `false` when it was hidden. The new value fires after the update that applied it; when the property is controlled, the proposed value fires right away and nothing changes until the host sets it.",
+              "name": "argus-column-visibility-change"
             },
             {
               "type": {
-                "text": "CustomEvent<ColumnHideDetail>"
+                "text": "CustomEvent<ColumnFiltersChangeDetail>"
               },
-              "description": "A column was hidden or shown, through a plugin such as the column menu. `detail: { columnId, hidden, visibility }`: `hidden` is `true` when it was hidden; `visibility` is the new state, or the proposed one when `columnVisibility` is controlled.",
-              "name": "argus-column-hide"
+              "description": "`columnFilters` changed: a column's filter was set, changed or cleared, through a plugin such as the column menu. `detail: { columnFilters, columnId, columnFilter }`: `columnFilter` is the column's new filter, or `undefined` when it was cleared. The new value fires after the update that applied it; when the property is controlled, the proposed value fires right away and nothing changes until the host sets it.",
+              "name": "argus-column-filters-change"
             },
             {
               "type": {
-                "text": "CustomEvent<ColumnFilterDetail>"
+                "text": "CustomEvent<SelectionChangeDetail>"
               },
-              "description": "A column's filter was set, changed or cleared, through a plugin such as the column menu. `detail: { columnId, filter, filters }`: `filter` is the column's new filter, or `undefined` when it was cleared; `filters` is the new state, or the proposed one when `columnFilters` is controlled.",
-              "name": "argus-column-filter"
+              "description": "`selection` changed: by a click on a row (Ctrl/Cmd toggles, Shift selects a range), with Space, Shift+Arrow or Shift+PageUp/PageDown on a body cell, or with Ctrl/Cmd+A. Only with a `selectionMode`. `detail: { selection }`. The new value fires after the update that applied it; when the property is controlled, the proposed value fires right away and nothing changes until the host sets it.",
+              "name": "argus-selection-change"
             },
             {
               "type": {
                 "text": "CustomEvent<CellClickDetail<T>>"
               },
-              "description": "A body or pinned-row cell was clicked, or Enter was pressed on it. `detail: { row, columnId, value, pinned? }`; `pinned` is `'top'` or `'bottom'` for a pinned row. Fires before `argus-row-click`.",
+              "description": "A body or pinned-row cell was clicked, or Enter was pressed on it. `detail: { row, rowId, index, columnId, value, pinned? }`; `pinned` is `'top'` or `'bottom'` for a pinned row, and `index` is then its index in its list. Fires before `argus-row-click`.",
               "name": "argus-cell-click"
             },
             {
@@ -1009,16 +1090,9 @@
               "type": {
                 "text": "CustomEvent<RangeChangeDetail>"
               },
-              "description": "The visible rows changed. `detail: { start, end }` (row indices, inclusive).",
+              "description": "The rows in view changed (rows rendered ahead of the scroll position not counted). `detail: { first, last }` (row indices in the current order, both inclusive).",
               "name": "argus-range-change"
             },
-            {
-              "type": {
-                "text": "CustomEvent<RowSelectDetail>"
-              },
-              "description": "The selected rows changed: by a click on a row (Ctrl/Cmd toggles, Shift selects a range), with Space, Shift+Arrow or Shift+PageUp/PageDown on a body cell, or with Ctrl/Cmd+A. Only with a `selectionMode`. `detail: { selection }`: the new row ids, or the proposed ones when `selection` is controlled.",
-              "name": "argus-row-select"
-            },
             {
               "type": {
                 "text": "CustomEvent<LoadErrorDetail>"
@@ -1059,7 +1133,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Renders only the scrolling columns in view (plus two on each side), for\nwide tables: a few dozen columns and more. Pinned columns, the checkbox\ncolumn and the focused cell's column always render. Off by default: then\nevery column renders, as before. Cells are placed in their grid column\nexplicitly, so page CSS that relies on their order in the DOM (`:nth-child`\non cells) doesn't apply. `autosizeColumns()` and `width: 'auto'` columns\nstill measure columns out of view: they render for the measurement.",
+              "description": "Renders only the scrolling columns in view (plus two on each side), for\nwide tables: a few dozen columns and more. Pinned columns, the checkbox\ncolumn and the focused cell's column always render. Off by default: then\nevery column renders, as before. Cells are placed in their grid column\nexplicitly, so page CSS that relies on their order in the DOM (`:nth-child`\non cells) doesn't apply. `autosizeColumns()` and `width: 'auto'` columns\nstill measure columns out of view: they render for the measurement.\nAs an attribute, `virtualize-columns=\"false\"` is off, like no attribute.",
               "fieldName": "virtualizeColumns"
             },
             {
@@ -1085,7 +1159,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Adds a checkbox column, pinned first at the start, while `selectionMode` is\n`single` or `multi`. A row's checkbox toggles it (Shift+click adds the range\nfrom the last row clicked); in `multi` mode the header's checkbox selects\nevery row, or clears the selection when all are selected. Space on a\nfocused checkbox cell does the same. The column isn't part of `columns`,\n`columnOrder` or `columnSizing`, and it fires no `argus-cell-click`.",
+              "description": "Adds a checkbox column, pinned first at the start, while `selectionMode` is\n`single` or `multi`. A row's checkbox toggles it (Shift+click adds the range\nfrom the last row clicked); in `multi` mode the header's checkbox selects\nevery row, or clears the selection when all are selected. Space on a\nfocused checkbox cell does the same. The column isn't part of `columns`,\n`columnOrder` or `columnSizing`, and it fires no `argus-cell-click`.\nAs an attribute, `selection-checkboxes=\"false\"` is off, like no attribute.",
               "fieldName": "selectionCheckboxes"
             }
           ],
@@ -1117,6 +1191,103 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/attributes.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/column-registry.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "watchColumns",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "host",
+              "type": {
+                "text": "Element"
+              }
+            },
+            {
+              "name": "onChange",
+              "type": {
+                "text": "() => void"
+              }
+            }
+          ],
+          "description": "Calls `onChange` whenever a column or group child of `host` is added, removed, moved or changed."
+        },
+        {
+          "kind": "function",
+          "name": "unwatchColumns",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "host",
+              "type": {
+                "text": "Element"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "notify",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "parent",
+              "type": {
+                "text": "Element | null"
+              }
+            }
+          ],
+          "description": "Tells a column's or group's parent that it changed."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "watchColumns",
+          "declaration": {
+            "name": "watchColumns",
+            "module": "src/column-registry.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "unwatchColumns",
+          "declaration": {
+            "name": "unwatchColumns",
+            "module": "src/column-registry.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "notify",
+          "declaration": {
+            "name": "notify",
+            "module": "src/column-registry.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/events.ts",
@@ -1128,88 +1299,88 @@
             "text": "string"
           },
           "default": "'argus-range-change'",
-          "description": "Fired after an update when the visible row range changed."
+          "description": "Fired after an update when the rows in view changed."
         },
         {
           "kind": "variable",
-          "name": "SORT_CHANGE",
+          "name": "SORTING_CHANGE",
           "type": {
             "text": "string"
           },
-          "default": "'argus-sort-change'",
-          "description": "Fired after the sort order changed (uncontrolled), or with the proposed order (controlled)."
+          "default": "'argus-sorting-change'",
+          "description": "`sorting` changed (uncontrolled), or the proposed order (controlled)."
         },
         {
           "kind": "variable",
-          "name": "COLUMN_RESIZE",
+          "name": "COLUMN_SIZING_CHANGE",
           "type": {
             "text": "string"
           },
-          "default": "'argus-column-resize'",
-          "description": "Fired when a column was resized (uncontrolled), or with the proposed widths (controlled)."
+          "default": "'argus-column-sizing-change'",
+          "description": "`columnSizing` changed (uncontrolled), or the proposed widths (controlled). Once per column."
         },
         {
           "kind": "variable",
-          "name": "COLUMN_REORDER",
+          "name": "COLUMN_ORDER_CHANGE",
           "type": {
             "text": "string"
           },
-          "default": "'argus-column-reorder'",
-          "description": "Fired when a column was moved (uncontrolled), or with the proposed order (controlled)."
+          "default": "'argus-column-order-change'",
+          "description": "`columnOrder` changed (uncontrolled), or the proposed order (controlled)."
         },
         {
           "kind": "variable",
-          "name": "COLUMN_PIN",
+          "name": "COLUMN_PINNING_CHANGE",
           "type": {
             "text": "string"
           },
-          "default": "'argus-column-pin'",
-          "description": "Fired when a column was pinned or unpinned (uncontrolled), or with the proposed pins (controlled)."
+          "default": "'argus-column-pinning-change'",
+          "description": "`columnPinning` changed (uncontrolled), or the proposed pins (controlled)."
         },
         {
           "kind": "variable",
-          "name": "COLUMN_HIDE",
+          "name": "COLUMN_VISIBILITY_CHANGE",
           "type": {
             "text": "string"
           },
-          "default": "'argus-column-hide'",
-          "description": "Fired when a column was hidden or shown (uncontrolled), or with the proposed visibility (controlled)."
+          "default": "'argus-column-visibility-change'",
+          "description": "`columnVisibility` changed (uncontrolled), or the proposed visibility (controlled)."
         },
         {
           "kind": "variable",
-          "name": "COLUMN_FILTER",
+          "name": "COLUMN_FILTERS_CHANGE",
           "type": {
             "text": "string"
           },
-          "default": "'argus-column-filter'",
-          "description": "Fired when a column's filter was set, changed or cleared (uncontrolled), or with the proposed filters (controlled)."
+          "default": "'argus-column-filters-change'",
+          "description": "`columnFilters` changed (uncontrolled), or the proposed filters (controlled)."
         },
         {
           "kind": "variable",
-          "name": "ROW_CLICK",
+          "name": "SELECTION_CHANGE",
           "type": {
             "text": "string"
           },
-          "default": "'argus-row-click'",
-          "description": "Fired when a body row was clicked, after `argus-cell-click`."
+          "default": "'argus-selection-change'",
+          "description": "`selection` changed (uncontrolled), or the proposed ids (controlled)."
         },
         {
           "kind": "variable",
-          "name": "CELL_CLICK",
+          "name": "ROW_CLICK",
           "type": {
             "text": "string"
           },
-          "default": "'argus-cell-click'",
-          "description": "Fired when a body cell was clicked, before `argus-row-click`."
+          "default": "'argus-row-click'",
+          "description": "Fired when a body row was clicked, after `argus-cell-click`."
         },
         {
           "kind": "variable",
-          "name": "ROW_SELECT",
+          "name": "CELL_CLICK",
           "type": {
             "text": "string"
           },
-          "default": "'argus-row-select'",
-          "description": "Fired when the selected rows changed (uncontrolled), or with the proposed ids (controlled)."
+          "default": "'argus-cell-click'",
+          "description": "Fired when a body cell was clicked, before `argus-row-click`."
         },
         {
           "kind": "variable",
@@ -1262,73 +1433,73 @@
         },
         {
           "kind": "js",
-          "name": "SORT_CHANGE",
+          "name": "SORTING_CHANGE",
           "declaration": {
-            "name": "SORT_CHANGE",
+            "name": "SORTING_CHANGE",
             "module": "src/events.ts"
           }
         },
         {
           "kind": "js",
-          "name": "COLUMN_RESIZE",
+          "name": "COLUMN_SIZING_CHANGE",
           "declaration": {
-            "name": "COLUMN_RESIZE",
+            "name": "COLUMN_SIZING_CHANGE",
             "module": "src/events.ts"
           }
         },
         {
           "kind": "js",
-          "name": "COLUMN_REORDER",
+          "name": "COLUMN_ORDER_CHANGE",
           "declaration": {
-            "name": "COLUMN_REORDER",
+            "name": "COLUMN_ORDER_CHANGE",
             "module": "src/events.ts"
           }
         },
         {
           "kind": "js",
-          "name": "COLUMN_PIN",
+          "name": "COLUMN_PINNING_CHANGE",
           "declaration": {
-            "name": "COLUMN_PIN",
+            "name": "COLUMN_PINNING_CHANGE",
             "module": "src/events.ts"
           }
         },
         {
           "kind": "js",
-          "name": "COLUMN_HIDE",
+          "name": "COLUMN_VISIBILITY_CHANGE",
           "declaration": {
-            "name": "COLUMN_HIDE",
+            "name": "COLUMN_VISIBILITY_CHANGE",
             "module": "src/events.ts"
           }
         },
         {
           "kind": "js",
-          "name": "COLUMN_FILTER",
+          "name": "COLUMN_FILTERS_CHANGE",
           "declaration": {
-            "name": "COLUMN_FILTER",
+            "name": "COLUMN_FILTERS_CHANGE",
             "module": "src/events.ts"
           }
         },
         {
           "kind": "js",
-          "name": "ROW_CLICK",
+          "name": "SELECTION_CHANGE",
           "declaration": {
-            "name": "ROW_CLICK",
+            "name": "SELECTION_CHANGE",
             "module": "src/events.ts"
           }
         },
         {
           "kind": "js",
-          "name": "CELL_CLICK",
+          "name": "ROW_CLICK",
           "declaration": {
-            "name": "CELL_CLICK",
+            "name": "ROW_CLICK",
             "module": "src/events.ts"
           }
         },
         {
           "kind": "js",
-          "name": "ROW_SELECT",
+          "name": "CELL_CLICK",
           "declaration": {
-            "name": "ROW_SELECT",
+            "name": "CELL_CLICK",
             "module": "src/events.ts"
           }
         },
@@ -1363,6 +1534,14 @@
             "module": "./argus-column.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "ArgusColumnGroup",
+          "declaration": {
+            "name": "ArgusColumnGroup",
+            "module": "./argus-column-group.js"
+          }
+        },
         {
           "kind": "js",
           "name": "ArgusTable",
@@ -1389,41 +1568,41 @@
         },
         {
           "kind": "js",
-          "name": "COLUMN_FILTER",
+          "name": "COLUMN_FILTERS_CHANGE",
           "declaration": {
-            "name": "COLUMN_FILTER",
+            "name": "COLUMN_FILTERS_CHANGE",
             "module": "./events.js"
           }
         },
         {
           "kind": "js",
-          "name": "COLUMN_HIDE",
+          "name": "COLUMN_ORDER_CHANGE",
           "declaration": {
-            "name": "COLUMN_HIDE",
+            "name": "COLUMN_ORDER_CHANGE",
             "module": "./events.js"
           }
         },
         {
           "kind": "js",
-          "name": "COLUMN_PIN",
+          "name": "COLUMN_PINNING_CHANGE",
           "declaration": {
-            "name": "COLUMN_PIN",
+            "name": "COLUMN_PINNING_CHANGE",
             "module": "./events.js"
           }
         },
         {
           "kind": "js",
-          "name": "COLUMN_REORDER",
+          "name": "COLUMN_SIZING_CHANGE",
           "declaration": {
-            "name": "COLUMN_REORDER",
+            "name": "COLUMN_SIZING_CHANGE",
             "module": "./events.js"
           }
         },
         {
           "kind": "js",
-          "name": "COLUMN_RESIZE",
+          "name": "COLUMN_VISIBILITY_CHANGE",
           "declaration": {
-            "name": "COLUMN_RESIZE",
+            "name": "COLUMN_VISIBILITY_CHANGE",
             "module": "./events.js"
           }
         },
@@ -1453,17 +1632,17 @@
         },
         {
           "kind": "js",
-          "name": "ROW_SELECT",
+          "name": "SELECTION_CHANGE",
           "declaration": {
-            "name": "ROW_SELECT",
+            "name": "SELECTION_CHANGE",
             "module": "./events.js"
           }
         },
         {
           "kind": "js",
-          "name": "SORT_CHANGE",
+          "name": "SORTING_CHANGE",
           "declaration": {
-            "name": "SORT_CHANGE",
+            "name": "SORTING_CHANGE",
             "module": "./events.js"
           }
         },
@@ -1711,9 +1890,9 @@
         },
         {
           "kind": "js",
-          "name": "ColumnFilterDetail",
+          "name": "ColumnFiltersChangeDetail",
           "declaration": {
-            "name": "ColumnFilterDetail",
+            "name": "ColumnFiltersChangeDetail",
             "package": "@argus-table/core"
           }
         },
@@ -1727,9 +1906,9 @@
         },
         {
           "kind": "js",
-          "name": "ColumnHideDetail",
+          "name": "ColumnOrderChangeDetail",
           "declaration": {
-            "name": "ColumnHideDetail",
+            "name": "ColumnOrderChangeDetail",
             "package": "@argus-table/core"
           }
         },
@@ -1751,9 +1930,9 @@
         },
         {
           "kind": "js",
-          "name": "ColumnPinDetail",
+          "name": "ColumnPinningChangeDetail",
           "declaration": {
-            "name": "ColumnPinDetail",
+            "name": "ColumnPinningChangeDetail",
             "package": "@argus-table/core"
           }
         },
@@ -1767,25 +1946,25 @@
         },
         {
           "kind": "js",
-          "name": "ColumnReorderDetail",
+          "name": "ColumnSizingChangeDetail",
           "declaration": {
-            "name": "ColumnReorderDetail",
+            "name": "ColumnSizingChangeDetail",
             "package": "@argus-table/core"
           }
         },
         {
           "kind": "js",
-          "name": "ColumnResizeDetail",
+          "name": "ColumnSizingState",
           "declaration": {
-            "name": "ColumnResizeDetail",
+            "name": "ColumnSizingState",
             "package": "@argus-table/core"
           }
         },
         {
           "kind": "js",
-          "name": "ColumnSizingState",
+          "name": "ColumnVisibilityChangeDetail",
           "declaration": {
-            "name": "ColumnSizingState",
+            "name": "ColumnVisibilityChangeDetail",
             "package": "@argus-table/core"
           }
         },
@@ -1911,17 +2090,17 @@
         },
         {
           "kind": "js",
-          "name": "RowSelectDetail",
+          "name": "ScrollState",
           "declaration": {
-            "name": "RowSelectDetail",
+            "name": "ScrollState",
             "package": "@argus-table/core"
           }
         },
         {
           "kind": "js",
-          "name": "ScrollState",
+          "name": "SelectionChangeDetail",
           "declaration": {
-            "name": "ScrollState",
+            "name": "SelectionChangeDetail",
             "package": "@argus-table/core"
           }
         },
@@ -1951,9 +2130,17 @@
         },
         {
           "kind": "js",
-          "name": "SortChangeDetail",
+          "name": "SortDirection",
+          "declaration": {
+            "name": "SortDirection",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SortingChangeDetail",
           "declaration": {
-            "name": "SortChangeDetail",
+            "name": "SortingChangeDetail",
             "package": "@argus-table/core"
           }
         },
@@ -2135,7 +2322,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Reads the host's `<argus-column>` children into `ColumnDef`s. The columns tell\nthe host when they change (`watchColumns`); the list is rebuilt only then, so\n`defs` keeps its identity between changes.",
+          "description": "Reads the host's `<argus-column>` children, and those in its\n`<argus-column-group>` children, into `ColumnDef`s, and the groups into\n`ColumnGroup`s. Columns and groups tell the host when they change\n(`watchColumns`); the lists are rebuilt only then, so they keep their identity\nbetween changes.",
           "name": "ColumnChildrenController",
           "members": [
             {
@@ -2171,7 +2358,16 @@
               "type": {
                 "text": "readonly ColumnDef<T>[]"
               },
-              "description": "The children's columns, in document order.",
+              "description": "The children's columns, in document order, those in groups included.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "groups",
+              "type": {
+                "text": "readonly ColumnGroup[]"
+              },
+              "description": "The `<argus-column-group>` children's groups, in document order.",
               "readonly": true
             }
           ]
@@ -2233,15 +2429,6 @@
                 }
               }
             },
-            {
-              "kind": "field",
-              "name": "poolSize",
-              "type": {
-                "text": "number"
-              },
-              "description": "Number of column pool slots created so far.",
-              "readonly": true
-            },
             {
               "kind": "method",
               "name": "compute",
@@ -2598,6 +2785,24 @@
               ],
               "description": "The plugins' `columns` transforms applied in order; the same array while nothing changed."
             },
+            {
+              "kind": "method",
+              "name": "transformGroups",
+              "return": {
+                "type": {
+                  "text": "readonly ColumnGroup[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "input",
+                  "type": {
+                    "text": "readonly ColumnGroup[]"
+                  }
+                }
+              ],
+              "description": "The plugins' `columnGroups` transforms applied in order; the same array while nothing changed."
+            },
             {
               "kind": "method",
               "name": "invalidate",
@@ -2864,7 +3069,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Rows of different heights (`rowHeight: 'auto'`): reads the heights of the\nrendered body rows and of the pinned row groups once their content has\nrendered, and watches them for changes the table doesn't render (an image\nloading, a web font, a framework component updating), which request an\nupdate that reads them again. Pooled rows show other rows as the body\nscrolls, so every update reads every rendered row: one that now shows a row\nof the same height doesn't resize, and the observer wouldn't report it.",
+          "description": "Rows of different heights (`rowHeight: 'auto'`): reads the heights of the\nrendered body rows and of the pinned row groups once their content has\nrendered, and watches them for changes the table doesn't render (an image\nloading, a web font, a framework component updating), which request an\nupdate that reads them again. Pooled rows show other rows as the body\nscrolls, so each update reads every rendered row that shows another row than\nat its last read (all of them after `invalidate()`): one that now shows a row\nof the same height doesn't resize, and the observer wouldn't report it.",
           "name": "RowMeasure",
           "members": [
             {
@@ -3097,15 +3302,6 @@
               ],
               "description": "Auto mode: how many rows a page moves from row `from`, the rows that fit in\n`view` px below it (`down`) or above it. At least one."
             },
-            {
-              "kind": "field",
-              "name": "poolSize",
-              "type": {
-                "text": "number"
-              },
-              "description": "Number of pool slots created so far: bounded by the most rows rendered at once.",
-              "readonly": true
-            },
             {
               "kind": "field",
               "name": "scaled",
@@ -3390,6 +3586,12 @@
                 "text": "readonly RenderedColumn<T>[]"
               }
             },
+            {
+              "name": "groups",
+              "type": {
+                "text": "readonly (readonly HeaderGroupCell<CellContent>[])[]"
+              }
+            },
             {
               "name": "renderBefore",
               "type": {
@@ -3397,7 +3599,7 @@
               }
             }
           ],
-          "description": "Renders header and cell content into the host's light DOM, as direct children\n(a slot only takes the host's own children). Keyed and ordered by pool slot,\nso recycled content updates in place instead of moving (ADR 0001). The part\nends at `renderBefore`, so the host's other children (`<argus-column>`) stay\noutside it, wherever they are added. `rendered` are the columns the shadow\nroot renders, with their slots and keys. What `header` and `cell` return goes\nthrough `content()`, so foreign content reaches the table's `contentRenderer`.\nReturns the part, which the table disconnects when it is disconnected."
+          "description": "Renders header and cell content into the host's light DOM, as direct children\n(a slot only takes the host's own children). Keyed and ordered by pool slot,\nso recycled content updates in place instead of moving (ADR 0001). The part\nends at `renderBefore`, so the host's other children (`<argus-column>`) stay\noutside it, wherever they are added. `rendered` are the columns the shadow\nroot renders, with their slots and keys. What `header` and `cell` return goes\nthrough `content()`, so foreign content reaches the table's `contentRenderer`.\nGroup headers come first, one per group and pin side (`groups`, the header's\ngroup rows).\nReturns the part, which the table disconnects when it is disconnected."
         }
       ],
       "exports": [
@@ -3540,7 +3742,7 @@
               }
             }
           ],
-          "description": "Private slot names (ADR 0001): cells by row pool slot and column slot,\nheaders by column slot, pinned rows by side, index and column slot. A\ncolumn's slot is its `colIndex`, or its pool slot with `virtualizeColumns`."
+          "description": "Private slot names (ADR 0001): cells by row pool slot and column slot,\nheaders by column slot, group headers by group and pin side, pinned rows by side,\nindex and column slot. A\ncolumn's slot is its `colIndex`, or its pool slot with `virtualizeColumns`."
         },
         {
           "kind": "function",
@@ -3554,6 +3756,19 @@
             }
           ]
         },
+        {
+          "kind": "function",
+          "name": "groupSlot",
+          "parameters": [
+            {
+              "name": "slot",
+              "type": {
+                "text": "number"
+              }
+            }
+          ],
+          "description": "A column group's header, by the group's slot number (`HeaderGroupCell.slot`)."
+        },
         {
           "kind": "function",
           "name": "pinnedSlot",
@@ -3635,6 +3850,24 @@
             }
           ],
           "description": "Inline style of a cell or header: a pinned one's sticky inset, from the\nstart or the end edge, and with `virtualizeColumns` the grid cell it is\nplaced in. Cells are in pool order there, not in column order, so the row is\nexplicit too: auto-placement would wrap a cell that comes after one of a\nlater column into a new grid row."
+        },
+        {
+          "kind": "function",
+          "name": "groupStyle",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
+            {
+              "name": "cell",
+              "type": {
+                "text": "Pinnable & { offset: number; colIndex: number; span: number }"
+              }
+            }
+          ],
+          "description": "Inline style of a group header row's cell: the columns it spans, placed\nexplicitly (the rows are grids on every column's track), and a pinned one's\nsticky inset."
         }
       ],
       "exports": [
@@ -3670,6 +3903,14 @@
             "module": "src/render/content.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "groupSlot",
+          "declaration": {
+            "name": "groupSlot",
+            "module": "src/render/content.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "pinnedSlot",
@@ -3701,6 +3942,14 @@
             "name": "cellStyle",
             "module": "src/render/content.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "groupStyle",
+          "declaration": {
+            "name": "groupStyle",
+            "module": "src/render/content.ts"
+          }
         }
       ]
     },
@@ -3710,45 +3959,40 @@
       "declarations": [
         {
           "kind": "function",
-          "name": "renderHeader",
+          "name": "columnKey",
           "parameters": [
             {
-              "name": "columns",
-              "type": {
-                "text": "readonly RenderedColumn<T>[]"
-              }
-            },
-            {
-              "name": "handlers",
-              "type": {
-                "text": "HeaderHandlers"
-              }
-            },
-            {
-              "name": "activeCol",
-              "type": {
-                "text": "string | undefined"
-              }
-            },
-            {
-              "name": "drag",
-              "optional": true,
+              "name": "columnId",
               "type": {
-                "text": "HeaderDrag"
+                "text": "string"
               }
-            },
+            }
+          ],
+          "description": "The drop slot key of a column (`c:` and its id) or a group cell (its `key`)."
+        },
+        {
+          "kind": "function",
+          "name": "renderHeader",
+          "parameters": [
             {
-              "name": "checkAll",
-              "optional": true,
+              "name": "{\n  columns,\n  groups,\n  handlers,\n  active,\n  drag,\n  checkAll,\n}",
               "type": {
-                "text": "CheckAll"
+                "text": "HeaderOptions<T>"
               }
             }
           ],
-          "description": "The sticky header row. Header content is slotted from the light DOM. Pinned\nheader cells use the same private `data-pin` hooks as body cells, but no parts.\nEvery header carries `data-col` (its column id) and sortable ones also\n`data-sort-col`; the element's delegated handlers read them. Headers take part\nin the grid's roving tabindex: the active one is the tab stop (`activeCol`).\nResizable columns get a `resize-handle` on the header's inline-end edge; a\ndouble-click on it fits the column to its content. It is not focusable: the\nfocused header resizes with Alt+Arrow.\n\nReorderable columns carry `data-move-col`: a drag on the header moves the\ncolumn. While one is dragged (`drag`), its header adds `header-cell-dragging`\nand the target header shows a `drop-indicator` on the edge it would land at."
+          "description": "The sticky header: a row per level of column groups, then the row of column\nheaders. Header content is slotted from the light DOM. Pinned\nheader cells use the same private `data-pin` hooks as body cells, and the parts\n`header-cell-pinned` and `header-cell-pinned-edge`.\nEvery header carries `data-col` (its column id) and sortable ones also\n`data-sort-col`; the element's delegated handlers read them. Headers take part\nin the grid's roving tabindex: the active one is the tab stop (`activeCol`).\nResizable columns get a `resize-handle` on the header's inline-end edge; a\ndouble-click on it fits the column to its content. It is not focusable: the\nfocused header resizes with Alt+Arrow.\n\nReorderable columns carry `data-move-col`: a drag on the header moves the\ncolumn. While one is dragged (`drag`), its header adds `header-cell-dragging`\nand the target header shows a `drop-indicator` on the edge it would land at."
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "columnKey",
+          "declaration": {
+            "name": "columnKey",
+            "module": "src/render/header.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "renderHeader",
@@ -3819,7 +4063,7 @@
         {
           "kind": "variable",
           "name": "baseStyles",
-          "default": "css` @layer argus-base { :host { display: block; /* A table that virtualizes needs a bounded height; set your own on the element. */ block-size: 400px; box-sizing: border-box; contain: content; color-scheme: light dark; color: var(--argus-fg, CanvasText); background: var(--argus-bg, Canvas); font: var(--argus-font, inherit); /* contain: content clips the header, rows and pinned shadows to the rounded corners. */ border: var(--argus-outline, none); border-radius: var(--argus-radius, 0); --_row-height: var(--argus-row-height, 40px); --_pad: var(--argus-cell-padding-inline, 12px); --_border: var(--argus-border-width, 1px) solid var(--argus-border-color, light-dark(#e5e7eb, #374151)); /* 1 in LTR, -1 in RTL: mirrors the pinned-edge shadow. */ --_dir: 1; } :host(:dir(rtl)) { --_dir: -1; } :host([density='compact']) { --_row-height: var(--argus-row-height, 32px); --_pad: var(--argus-cell-padding-inline, 8px); } :host([density='spacious']) { --_row-height: var(--argus-row-height, 52px); --_pad: var(--argus-cell-padding-inline, 16px); } :host([hidden]) { display: none; } [part~='table'] { position: relative; block-size: 100%; overflow: auto; overscroll-behavior: contain; } /* * A cell focused or moved to by keyboard scrolls clear of the sticky header, the * pinned rows and the pinned columns: scroll margins on the cells that scroll. * Not scroll padding on the scroller: Chromium and WebKit measure the sticky * header and pinned rows against it too, so focusing one of them (a click, Tab, * an arrow key) scrolled the body. */ [part~='body'] > .row > [role='gridcell'] { scroll-margin-block: calc((1 + var(--_pin-top-rows, 0)) * var(--_row-height)) calc(var(--_pin-bottom-rows, 0) * var(--_row-height)); } [role='gridcell']:not([data-pin]), [role='columnheader']:not([data-pin]) { scroll-margin-inline: var(--_pin-start, 0) var(--_pin-end, 0); } .row { display: grid; grid-template-columns: var(--_cols); inline-size: var(--_width); min-inline-size: 100%; block-size: var(--_row-height); box-sizing: border-box; } [part~='header'] { position: sticky; inset-block-start: 0; z-index: 2; } [part~='body'] { position: relative; contain: layout; } [part~='body'] > .row { position: absolute; inset-block-start: 0; inset-inline-start: 0; } [part~='row'] { --_row-bg: var(--argus-bg, Canvas); --_row-surface: var(--_row-bg); background: var(--_row-surface); } [part~='row-odd'] { --_row-bg: var(--argus-row-stripe-bg, var(--argus-bg, Canvas)); } [part~='row']:hover { --_row-surface: var(--argus-row-hover-bg, var(--_row-bg)); } /* Selected wins over stripes and hover. */ [part~='row-selected'], [part~='row-selected']:hover { --_row-bg: var( --argus-row-selected-bg, color-mix(in srgb, Highlight 22%, var(--argus-bg, Canvas)) ); --_row-surface: var(--_row-bg); } @media (forced-colors: active) { [part~='row-selected'] { forced-color-adjust: none; --_row-bg: Highlight; color: HighlightText; } } /* * Pinned rows: a sticky row group below the header and one at the bottom of * the view. The header is one row tall. They keep their place in the flow, * so body row i still starts i rows below the top group. */ .pinned { position: sticky; z-index: 2; } .pinned[data-side='top'] { inset-block-start: var(--_row-height); } .pinned[data-side='bottom'] { inset-block-end: 0; } [part~='row-pinned'] { --_row-bg: var(--argus-pinned-row-bg, var(--argus-bg, Canvas)); } [part~='cell'], [part~='header-cell'] { display: flex; align-items: center; min-inline-size: 0; box-sizing: border-box; padding-inline: var(--_pad); overflow: hidden; white-space: nowrap; border-block-end: var(--_border); } /* The checkbox column: the checkbox centred, no padding to squeeze it. */ [part~='cell-selection'], [part~='header-cell-selection'] { justify-content: center; padding-inline: 0; } [part~='selection-checkbox'] { margin: 0; cursor: pointer; } [part~='header-cell'] { background: var(--argus-header-bg, light-dark(#f9fafb, #111827)); color: var(--argus-header-fg, inherit); font-weight: 600; } [part~='header-cell'] { position: relative; } [part~='resize-handle'] { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 8px; z-index: 1; cursor: col-resize; touch-action: none; } [part~='resize-handle']::after { content: ''; position: absolute; inset-block: 25%; inset-inline-end: 0; inline-size: 2px; background: var(--argus-resize-handle-color, light-dark(#9ca3af, #6b7280)); opacity: 0; } [part~='header-cell']:hover [part~='resize-handle']::after, [part~='header-cell']:focus-visible [part~='resize-handle']::after, [part~='resize-handle'][data-active]::after { opacity: 1; } [data-sort-col] { cursor: pointer; user-select: none; } /* A drag on a reorderable header moves the column, so its text isn't selectable. */ [data-move-col] { user-select: none; } [data-dragging], [data-dragging] [part~='header-cell'] { cursor: grabbing; } [part~='header-cell-dragging'] { opacity: 0.5; } /* The line where a dragged column would land, on the target header's logical edge. */ [part~='drop-indicator'] { position: absolute; inset-block: 0; inline-size: 2px; z-index: 2; background: var(--argus-drop-indicator-color, Highlight); pointer-events: none; } [part~='drop-indicator'][data-edge='start'] { inset-inline-start: 0; } [part~='drop-indicator'][data-edge='end'] { inset-inline-end: 0; } [part~='header-cell']:focus-visible, [part~='cell']:focus-visible { outline: var(--argus-focus-ring, 2px solid Highlight); outline-offset: -2px; } /* A small chevron after the header content; only the sorted column shows it. */ .sort-indicator { flex: none; inline-size: 0.35em; block-size: 0.35em; margin-inline-start: 0.4em; /* Physical sides on purpose: the chevron is rotated, so it must not mirror in RTL. */ border-right: 0.12em solid currentColor; border-bottom: 0.12em solid currentColor; visibility: hidden; } [aria-sort] .sort-indicator { visibility: visible; } [aria-sort='ascending'] .sort-indicator { transform: translateY(0.1em) rotate(-135deg); } [aria-sort='descending'] .sort-indicator { transform: translateY(-0.1em) rotate(45deg); } [data-align='end'] .sort-indicator { order: -1; margin-inline: 0 0.4em; } /* A funnel: the column is filtered. */ [part~='filter-indicator'] { flex: none; inline-size: 0.7em; block-size: 0.7em; margin-inline-start: 0.35em; background: var(--argus-filter-indicator-color, currentColor); clip-path: polygon(0 0, 100% 0, 62% 48%, 62% 100%, 38% 82%, 38% 48%); } [data-align='end'] [part~='filter-indicator'] { order: -2; margin-inline: 0 0.35em; } @media (forced-colors: active) { /* Backgrounds are forced to Canvas there, which would hide the funnel. */ [part~='filter-indicator'] { forced-color-adjust: none; background: CanvasText; } } /* * Pinned columns: sticky inside the scroll container, with offsets from the * table model. Logical insets make RTL work without extra rules. */ [data-pin] { position: sticky; z-index: 1; } [data-pin='start'] { inset-inline-start: var(--_pin-offset); } [data-pin='end'] { inset-inline-end: var(--_pin-offset); } /* * Pinned body cells are sticky only while the table scrolls sideways * (data-hscroll on the scroller). At rest they are plain cells shifted by the * horizontal scroll offset, which vertical scrolling never changes: a sticky * cell per row is a compositing layer each, and Safari stutters moving them * (PinScrollController). Both place the cells at the same spot. */ [part~='row'] > [data-pin] { position: relative; inset-inline: auto; } [part~='row'] > [data-pin='start'] { transform: translateX(var(--_sx, 0px)); } [part~='row'] > [data-pin='end'] { transform: translateX(calc(var(--_sx, 0px) - var(--_dir) * var(--_max-x, 0px))); } [data-hscroll] [part~='row'] > [data-pin] { position: sticky; transform: none; } [data-hscroll] [part~='row'] > [data-pin='start'] { inset-inline-start: var(--_pin-offset); } [data-hscroll] [part~='row'] > [data-pin='end'] { inset-inline-end: var(--_pin-offset); } [part~='cell-pinned'] { background: var(--_row-surface); } /* * The edge shadow, once per pinned side (.pin-shadow, beside the scroller). * --argus-pinned-shadow is written for a shadow falling toward the end side; * the start edge in RTL and the end edge in LTR mirror it. */ .pin-shadow { position: absolute; inset-block-start: 0; block-size: min(var(--_view-h, 100%), var(--_content-h, 100%)); z-index: 3; pointer-events: none; } .pin-shadow[data-side='start'] { inset-inline-start: 0; } .pin-shadow[data-side='end'] { inset-inline-end: var(--_sb-x, 0px); } .pin-shadow::after { content: ''; position: absolute; inset: 0; box-shadow: var( --argus-pinned-shadow, 4px 0 6px -4px light-dark(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.6)) ); transform: scaleX(var(--_dir)); } .pin-shadow[data-side='end']::after { transform: scaleX(calc(-1 * var(--_dir))); } [data-align='center'] { justify-content: center; text-align: center; } [data-align='end'] { justify-content: flex-end; text-align: end; } /* * Wrapped text (ColumnDef.wrap). In a fixed-height row, text taller than the row * starts at the top (safe) and is clipped below. */ [part~='cell'][data-wrap] { white-space: normal; overflow-wrap: anywhere; align-items: center; align-items: safe center; } /* * rowHeight: 'auto'. Body and pinned rows fit their content, at least one row * tall; the header keeps its height. Content sits at the top of the cell, with * the block padding that centres one line in a one-row cell, so one-line rows * look as they do with a fixed height. The rows' heights are measured and * placed by the table: the browser's scroll anchoring would fight it. */ [data-auto-rows] { overflow-anchor: none; } [data-auto-rows] > [part~='body'] > .row, [data-auto-rows] > .pinned > .row { block-size: auto; min-block-size: var(--_row-height); grid-template-rows: minmax(var(--_row-height), auto); } /* Reading the rows' own heights: without the height each row renders at. */ [data-auto-rows] > [part~='body'] > .row[data-measure-row] { min-block-size: var(--_row-height) !important; } [data-auto-rows] [part~='cell'] { align-items: start; padding-block: var( --argus-cell-padding-block, max(0px, (var(--_row-height) - 1lh - var(--argus-border-width, 1px)) / 2) ); } /* Skeleton bars and the Retry button, centred in a one-row row as before. */ [data-auto-rows] [part~='row-loading'] > [part~='cell'] { align-items: center; padding-block: 0; } [data-auto-rows] > [part~='body'] > .row > [role='gridcell'] { scroll-margin-block: calc(var(--_row-height) + var(--_pin-top-h, 0px)) var(--_pin-bottom-h, 0px); } [data-auto-rows] > [part~='empty'] { min-block-size: calc( 100% - var(--_row-height) - var(--_pin-top-h, 0px) - var(--_pin-bottom-h, 0px) ); } ::slotted(*) { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; } /* Fitting a column to its content: set for one synchronous measurement, never painted. */ [data-measure] { inline-size: max-content; } /* Rows of a data source that haven't loaded: a bar per cell, pulsing gently. */ [part~='skeleton'] { flex: none; inline-size: min(60%, 8em); block-size: 0.6em; border-radius: 0.3em; background: var(--argus-skeleton-bg, color-mix(in srgb, currentColor 12%, transparent)); animation: argus-skeleton-pulse 1.6s ease-in-out infinite; } [part~='skeleton-error'] { animation: none; opacity: 0.5; } @keyframes argus-skeleton-pulse { 50% { opacity: 0.45; } } @media (prefers-reduced-motion: reduce) { [part~='skeleton'] { animation: none; } } [part~='retry'] { font: inherit; color: inherit; cursor: pointer; } [part~='empty'] { display: flex; align-items: center; justify-content: center; min-block-size: calc( 100% - (1 + var(--_pin-top-rows, 0) + var(--_pin-bottom-rows, 0)) * var(--_row-height) ); padding: var(--_pad); box-sizing: border-box; } /* Measures the resolved row height in px for the virtualizer. */ .probe { position: absolute; inset-block-start: 0; inline-size: 0; block-size: var(--_row-height); visibility: hidden; pointer-events: none; } } `",
+          "default": "css` @layer argus-base { :host { display: block; /* A table that virtualizes needs a bounded height; set your own on the element. */ block-size: 400px; box-sizing: border-box; contain: content; color-scheme: light dark; color: var(--argus-fg, CanvasText); background: var(--argus-bg, Canvas); font: var(--argus-font, inherit); /* contain: content clips the header, rows and pinned shadows to the rounded corners. */ border: var(--argus-border, none); border-radius: var(--argus-border-radius, 0); --_row-height: var(--argus-row-height, 40px); --_pad: var(--argus-cell-padding-inline, 12px); --_border: var(--argus-border-width, 1px) solid var(--argus-border-color, light-dark(#e5e7eb, #374151)); /* 1 in LTR, -1 in RTL: mirrors the pinned-edge shadow. */ --_dir: 1; } :host(:dir(rtl)) { --_dir: -1; } :host([density='compact']) { --_row-height: var(--argus-row-height, 32px); --_pad: var(--argus-cell-padding-inline, 8px); } :host([density='spacious']) { --_row-height: var(--argus-row-height, 52px); --_pad: var(--argus-cell-padding-inline, 16px); } :host([hidden]) { display: none; } [part~='table'] { position: relative; block-size: 100%; overflow: auto; overscroll-behavior: contain; /* The header: one row tall, and a row more per level of column groups. */ --_header-h: calc(var(--_header-rows, 1) * var(--_row-height)); } /* * A cell focused or moved to by keyboard scrolls clear of the sticky header, the * pinned rows and the pinned columns: scroll margins on the cells that scroll. * Not scroll padding on the scroller: Chromium and WebKit measure the sticky * header and pinned rows against it too, so focusing one of them (a click, Tab, * an arrow key) scrolled the body. */ [part~='body'] > .row > [role='gridcell'] { scroll-margin-block: calc(var(--_header-h) + var(--_pin-top-rows, 0) * var(--_row-height)) calc(var(--_pin-bottom-rows, 0) * var(--_row-height)); } [role='gridcell']:not([data-pin]), [role='columnheader']:not([data-pin]) { scroll-margin-inline: var(--_pin-start, 0) var(--_pin-end, 0); } .row { display: grid; grid-template-columns: var(--_cols); inline-size: var(--_width); min-inline-size: 100%; block-size: var(--_row-height); box-sizing: border-box; } [part~='header'] { position: sticky; inset-block-start: 0; z-index: 2; } [part~='body'] { position: relative; contain: layout; } [part~='body'] > .row { position: absolute; inset-block-start: 0; inset-inline-start: 0; } [part~='row'] { --_row-bg: var(--argus-bg, Canvas); --_row-surface: var(--_row-bg); background: var(--_row-surface); } [part~='row-odd'] { --_row-bg: var(--argus-row-odd-bg, var(--argus-bg, Canvas)); } [part~='row']:hover { --_row-surface: var(--argus-row-hover-bg, var(--_row-bg)); } /* Selected wins over stripes and hover. */ [part~='row-selected'], [part~='row-selected']:hover { --_row-bg: var( --argus-row-selected-bg, color-mix(in srgb, Highlight 22%, var(--argus-bg, Canvas)) ); --_row-surface: var(--_row-bg); } @media (forced-colors: active) { [part~='row-selected'] { forced-color-adjust: none; --_row-bg: Highlight; color: HighlightText; } } /* * Pinned rows: a sticky row group below the header and one at the bottom of * the view. The header is --_header-h tall. They keep their place in the flow, * so body row i still starts i rows below the top group. */ .pinned { position: sticky; z-index: 2; } .pinned[data-side='top'] { inset-block-start: var(--_header-h); } .pinned[data-side='bottom'] { inset-block-end: 0; } [part~='row-pinned'] { --_row-bg: var(--argus-row-pinned-bg, var(--argus-bg, Canvas)); } [part~='cell'], [part~='header-cell'] { display: flex; align-items: center; min-inline-size: 0; box-sizing: border-box; padding-inline: var(--_pad); overflow: hidden; white-space: nowrap; border-block-end: var(--_border); } /* The checkbox column: the checkbox centred, no padding to squeeze it. */ [part~='cell-selection'], [part~='header-cell-selection'] { justify-content: center; padding-inline: 0; } [part~='selection-checkbox'] { margin: 0; cursor: pointer; } [part~='header-cell'] { background: var(--argus-header-bg, light-dark(#f9fafb, #111827)); color: var(--argus-header-fg, inherit); font-weight: 600; position: relative; } /* * Column groups: a cell per group over its columns, and an empty filler over * columns without a group at that level, so the header reads as one block. The * label of a group in the scrolling area stays in view while its columns scroll * past (sticky inside the cell, which clips rather than scrolls). */ [part~='header-group-cell'], [part~='header-group-filler'] { box-sizing: border-box; min-inline-size: 0; background: var(--argus-header-bg, light-dark(#f9fafb, #111827)); color: var(--argus-header-fg, inherit); } [part~='header-group-cell'] { display: flex; align-items: center; position: relative; padding-inline: var(--_pad); overflow: clip; white-space: nowrap; font-weight: 600; border-block-end: var(--_border); border-inline-end: var(--_border); } .group-label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; } [part~='header-group-cell']:not([data-pin]) > .group-label { position: sticky; inset-inline-start: calc(var(--_pin-start, 0px) + var(--_pad)); } [data-move-group] { user-select: none; } [data-dragging] [part~='header-group-cell'] { cursor: grabbing; } [part~='header-group-cell-dragging'] { opacity: 0.5; } [part~='resize-handle'] { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 8px; z-index: 1; cursor: col-resize; touch-action: none; } [part~='resize-handle']::after { content: ''; position: absolute; inset-block: 25%; inset-inline-end: 0; inline-size: 2px; background: var(--argus-resize-handle-color, light-dark(#9ca3af, #6b7280)); opacity: 0; } [part~='header-cell']:hover [part~='resize-handle']::after, [part~='header-cell']:focus-visible [part~='resize-handle']::after, [part~='header-group-cell']:hover [part~='resize-handle']::after, [part~='header-group-cell']:focus-visible [part~='resize-handle']::after, [part~='resize-handle'][data-active]::after { opacity: 1; } [data-sort-col] { cursor: pointer; user-select: none; } /* A drag on a reorderable header moves the column, so its text isn't selectable. */ [data-move-col] { user-select: none; } [data-dragging], [data-dragging] [part~='header-cell'] { cursor: grabbing; } [part~='header-cell-dragging'] { opacity: 0.5; } /* The line where a dragged column would land, on the target header's logical edge. */ [part~='drop-indicator'] { position: absolute; inset-block: 0; inline-size: 2px; z-index: 2; background: var(--argus-drop-indicator-color, Highlight); pointer-events: none; } [part~='drop-indicator'][data-edge='start'] { inset-inline-start: 0; } [part~='drop-indicator'][data-edge='end'] { inset-inline-end: 0; } [part~='header-cell']:focus-visible, [part~='header-group-cell']:focus-visible, [part~='cell']:focus-visible { outline: var(--argus-focus-ring, 2px solid Highlight); outline-offset: -2px; } /* A small chevron after the header content; only the sorted column shows it. */ .sort-indicator { flex: none; inline-size: 0.35em; block-size: 0.35em; margin-inline-start: 0.4em; /* Physical sides on purpose: the chevron is rotated, so it must not mirror in RTL. */ border-right: 0.12em solid currentColor; border-bottom: 0.12em solid currentColor; visibility: hidden; } [aria-sort] .sort-indicator { visibility: visible; } [aria-sort='ascending'] .sort-indicator { transform: translateY(0.1em) rotate(-135deg); } [aria-sort='descending'] .sort-indicator { transform: translateY(-0.1em) rotate(45deg); } [data-align='end'] .sort-indicator { order: -1; margin-inline: 0 0.4em; } /* A funnel: the column is filtered. */ [part~='filter-indicator'] { flex: none; inline-size: 0.7em; block-size: 0.7em; margin-inline-start: 0.35em; background: var(--argus-filter-indicator-color, currentColor); clip-path: polygon(0 0, 100% 0, 62% 48%, 62% 100%, 38% 82%, 38% 48%); } [data-align='end'] [part~='filter-indicator'] { order: -2; margin-inline: 0 0.35em; } @media (forced-colors: active) { /* Backgrounds are forced to Canvas there, which would hide the funnel. */ [part~='filter-indicator'] { forced-color-adjust: none; background: CanvasText; } } /* * Pinned columns: sticky inside the scroll container, with offsets from the * table model. Logical insets make RTL work without extra rules. */ [data-pin] { position: sticky; z-index: 1; } [data-pin='start'] { inset-inline-start: var(--_pin-offset); } [data-pin='end'] { inset-inline-end: var(--_pin-offset); } /* * Pinned body cells are sticky only while the table scrolls sideways * (data-hscroll on the scroller). At rest they are plain cells shifted by the * horizontal scroll offset, which vertical scrolling never changes: a sticky * cell per row is a compositing layer each, and Safari stutters moving them * (PinScrollController). Both place the cells at the same spot. */ [part~='row'] > [data-pin] { position: relative; inset-inline: auto; } [part~='row'] > [data-pin='start'] { transform: translateX(var(--_sx, 0px)); } [part~='row'] > [data-pin='end'] { transform: translateX(calc(var(--_sx, 0px) - var(--_dir) * var(--_max-x, 0px))); } [data-hscroll] [part~='row'] > [data-pin] { position: sticky; transform: none; } [data-hscroll] [part~='row'] > [data-pin='start'] { inset-inline-start: var(--_pin-offset); } [data-hscroll] [part~='row'] > [data-pin='end'] { inset-inline-end: var(--_pin-offset); } [part~='cell-pinned'] { background: var(--_row-surface); } /* * The edge shadow, once per pinned side (.pin-shadow, beside the scroller). * --argus-pinned-shadow is written for a shadow falling toward the end side; * the start edge in RTL and the end edge in LTR mirror it. */ .pin-shadow { position: absolute; inset-block-start: 0; block-size: min(var(--_view-h, 100%), var(--_content-h, 100%)); z-index: 3; pointer-events: none; } .pin-shadow[data-side='start'] { inset-inline-start: 0; } .pin-shadow[data-side='end'] { inset-inline-end: var(--_sb-x, 0px); } .pin-shadow::after { content: ''; position: absolute; inset: 0; box-shadow: var( --argus-pinned-shadow, 4px 0 6px -4px light-dark(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.6)) ); transform: scaleX(var(--_dir)); } .pin-shadow[data-side='end']::after { transform: scaleX(calc(-1 * var(--_dir))); } [data-align='center'] { justify-content: center; text-align: center; } [data-align='end'] { justify-content: flex-end; text-align: end; } /* * Wrapped text (ColumnDef.wrap). In a fixed-height row, text taller than the row * starts at the top (safe) and is clipped below. */ [part~='cell'][data-wrap] { white-space: normal; overflow-wrap: anywhere; align-items: center; align-items: safe center; } /* * rowHeight: 'auto'. Body and pinned rows fit their content, at least one row * tall; the header keeps its height. Content sits at the top of the cell, with * the block padding that centres one line in a one-row cell, so one-line rows * look as they do with a fixed height. The rows' heights are measured and * placed by the table: the browser's scroll anchoring would fight it. */ [data-auto-rows] { overflow-anchor: none; } [data-auto-rows] > [part~='body'] > .row, [data-auto-rows] > .pinned > .row { block-size: auto; min-block-size: var(--_row-height); grid-template-rows: minmax(var(--_row-height), auto); } /* Reading the rows' own heights: without the height each row renders at. */ [data-auto-rows] > [part~='body'] > .row[data-measure-row] { min-block-size: var(--_row-height) !important; } [data-auto-rows] [part~='cell'] { align-items: start; padding-block: var( --argus-cell-padding-block, max(0px, (var(--_row-height) - 1lh - var(--argus-border-width, 1px)) / 2) ); } /* Skeleton bars and the Retry button, centred in a one-row row as before. */ [data-auto-rows] [part~='row-loading'] > [part~='cell'] { align-items: center; padding-block: 0; } [data-auto-rows] > [part~='body'] > .row > [role='gridcell'] { scroll-margin-block: calc(var(--_header-h) + var(--_pin-top-h, 0px)) var(--_pin-bottom-h, 0px); } [data-auto-rows] > [part~='empty'] { min-block-size: calc( 100% - var(--_header-h) - var(--_pin-top-h, 0px) - var(--_pin-bottom-h, 0px) ); } ::slotted(*) { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; } /* Fitting a column to its content: set for one synchronous measurement, never painted. */ [data-measure] { inline-size: max-content; } /* Rows of a data source that haven't loaded: a bar per cell, pulsing gently. */ [part~='skeleton'] { flex: none; inline-size: min(60%, 8em); block-size: 0.6em; border-radius: 0.3em; background: var(--argus-skeleton-bg, color-mix(in srgb, currentColor 12%, transparent)); animation: argus-skeleton-pulse 1.6s ease-in-out infinite; } [part~='skeleton-error'] { animation: none; opacity: 0.5; } @keyframes argus-skeleton-pulse { 50% { opacity: 0.45; } } @media (prefers-reduced-motion: reduce) { [part~='skeleton'] { animation: none; } } [part~='retry'] { font: inherit; color: inherit; cursor: pointer; } [part~='empty'] { display: flex; align-items: center; justify-content: center; min-block-size: calc( 100% - var(--_header-h) - (var(--_pin-top-rows, 0) + var(--_pin-bottom-rows, 0)) * var(--_row-height) ); padding: var(--_pad); box-sizing: border-box; } /* Measures the resolved row height in px for the virtualizer. */ .probe { position: absolute; inset-block-start: 0; inline-size: 0; block-size: var(--_row-height); visibility: hidden; pointer-events: none; } } `",
           "description": "Base styles. Everything sits in `@layer argus-base`, and every value reads a\npublic token with a neutral fallback, so themes and page CSS always win.\n`--_*` properties are private."
         }
       ],