argus-table 0.2.2 → 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.",
+          "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": [
             {
@@ -120,6 +172,15 @@
               "description": "How to read the cell value: a property path such as `customer.name`, or (as a\nproperty) a function of the row and its index.",
               "attribute": "accessor"
             },
+            {
+              "kind": "field",
+              "name": "formula",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "A spreadsheet formula computed per row from other columns, such as\n`[price] * [quantity]`. Needs the `formulas()` plugin from `@argus-table/formulas`.",
+              "attribute": "formula"
+            },
             {
               "kind": "field",
               "name": "cell",
@@ -161,9 +222,27 @@
               "type": {
                 "text": "ColumnPin | undefined"
               },
-              "description": "Pins the column to the `start` or `end` side.",
+              "description": "Pins the column to the `start` or `end` side. The table's `columnPinning` overrides it.",
               "attribute": "pin"
             },
+            {
+              "kind": "field",
+              "name": "pinnable",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether the user can pin or unpin the column. Default: `true`; `pinnable=\"false\"` turns it off.",
+              "attribute": "pinnable"
+            },
+            {
+              "kind": "field",
+              "name": "hideable",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether the user can hide the column. Default: `true`; `hideable=\"false\"` turns it off.",
+              "attribute": "hideable"
+            },
             {
               "kind": "field",
               "name": "align",
@@ -173,6 +252,15 @@
               "description": "Text alignment: `start`, `center` or `end`. Default: `start`.",
               "attribute": "align"
             },
+            {
+              "kind": "field",
+              "name": "wrap",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Wraps the cell text onto more lines instead of cutting it off. Default:\n`false`. With a fixed row height, text that doesn't fit is clipped.",
+              "attribute": "wrap"
+            },
             {
               "kind": "field",
               "name": "sortable",
@@ -201,17 +289,35 @@
               "attribute": "reorderable"
             },
             {
-              "kind": "method",
-              "name": "toColumnDef",
-              "return": {
-                "type": {
-                  "text": "ColumnDef<T>"
-                }
+              "kind": "field",
+              "name": "filter",
+              "type": {
+                "text": "FilterKind | undefined"
+              },
+              "description": "The kind of filter users can set, e.g. from the column menu: `text`, `number`,\n`date` or `set`. Unset: users can't filter the column.",
+              "attribute": "filter"
+            },
+            {
+              "kind": "field",
+              "name": "filterFn",
+              "type": {
+                "text": "ColumnDef<T>['filterFn'] | undefined"
+              },
+              "description": "Replaces the built-in matching for this column's filter. Property only."
+            },
+            {
+              "kind": "field",
+              "name": "filterOptions",
+              "type": {
+                "text": "readonly FilterValue[] | undefined"
               },
-              "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`."
+              "description": "The values a `set` filter offers; needed with a `dataSource`. Property only."
             }
           ],
           "attributes": [
+            {
+              "name": "hidden"
+            },
             {
               "name": "column-id",
               "type": {
@@ -237,6 +343,14 @@
               "description": "How to read the cell value: a property path such as `customer.name`, or (as a\nproperty) a function of the row and its index.",
               "fieldName": "accessor"
             },
+            {
+              "name": "formula",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "A spreadsheet formula computed per row from other columns, such as\n`[price] * [quantity]`. Needs the `formulas()` plugin from `@argus-table/formulas`.",
+              "fieldName": "formula"
+            },
             {
               "name": "width",
               "type": {
@@ -266,9 +380,25 @@
               "type": {
                 "text": "ColumnPin | undefined"
               },
-              "description": "Pins the column to the `start` or `end` side.",
+              "description": "Pins the column to the `start` or `end` side. The table's `columnPinning` overrides it.",
               "fieldName": "pin"
             },
+            {
+              "name": "pinnable",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether the user can pin or unpin the column. Default: `true`; `pinnable=\"false\"` turns it off.",
+              "fieldName": "pinnable"
+            },
+            {
+              "name": "hideable",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether the user can hide the column. Default: `true`; `hideable=\"false\"` turns it off.",
+              "fieldName": "hideable"
+            },
             {
               "name": "align",
               "type": {
@@ -277,6 +407,14 @@
               "description": "Text alignment: `start`, `center` or `end`. Default: `start`.",
               "fieldName": "align"
             },
+            {
+              "name": "wrap",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Wraps the cell text onto more lines instead of cutting it off. Default:\n`false`. With a fixed row height, text that doesn't fit is clipped.",
+              "fieldName": "wrap"
+            },
             {
               "name": "sortable",
               "type": {
@@ -300,6 +438,14 @@
               },
               "description": "Whether the column can be moved. Default: `true`; `reorderable=\"false\"` turns it off.",
               "fieldName": "reorderable"
+            },
+            {
+              "name": "filter",
+              "type": {
+                "text": "FilterKind | undefined"
+              },
+              "description": "The kind of filter users can set, e.g. from the column menu: `text`, `number`,\n`date` or `set`. Unset: users can't filter the column.",
+              "fieldName": "filter"
             }
           ],
           "superclass": {
@@ -312,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",
@@ -352,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": [
             {
@@ -389,26 +519,30 @@
               "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.",
+              "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"
             },
             {
               "description": "Inline padding of cells. Default per density: 8px, 12px, 16px.",
               "name": "--argus-cell-padding-inline"
             },
+            {
+              "description": "Block padding of body and pinned-row cells with `rowHeight: 'auto'`, where content sits at the top of the cell. Default: what centres one line of text in `--argus-row-height`.",
+              "name": "--argus-cell-padding-block"
+            },
             {
               "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.",
@@ -423,6 +557,11 @@
               "name": "--argus-focus-ring",
               "default": "2px solid Highlight"
             },
+            {
+              "description": "Colour of the mark in the header of a filtered column.",
+              "name": "--argus-filter-indicator-color",
+              "default": "currentColor"
+            },
             {
               "description": "Colour of the line that marks where a dragged column would land.",
               "name": "--argus-drop-indicator-color",
@@ -434,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)"
             },
             {
@@ -442,7 +581,7 @@
               "name": "--argus-skeleton-bg"
             },
             {
-              "description": "Reserved for row selection, which comes after v0.1. The table doesn't read it yet.",
+              "description": "Background of selected rows, pinned columns included. Default: the system highlight colour, mixed into `--argus-bg`. It wins over `--argus-row-hover-bg`.",
               "name": "--argus-row-selected-bg"
             }
           ],
@@ -456,27 +595,71 @@
               "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 header being dragged to a new position.",
+              "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"
+            },
+            {
+              "description": "The mark in the header of a filtered column, after the sort indicator.",
+              "name": "filter-indicator"
+            },
+            {
+              "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"
             },
             {
@@ -499,6 +682,26 @@
               "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"
+            },
+            {
+              "description": "Added to `cell` in the checkbox column (`selectionCheckboxes`), pinned rows included.",
+              "name": "cell-selection"
+            },
+            {
+              "description": "Added to `header-cell` on the checkbox column's header.",
+              "name": "header-cell-selection"
+            },
+            {
+              "description": "The checkboxes of the checkbox column: one per selectable row, and the select-all one in the header (`multi` mode).",
+              "name": "selection-checkbox"
+            },
             {
               "description": "Every row from `pinnedRows`, on either side. Also has `row`, but no `row-even`/`row-odd`.",
               "name": "row-pinned"
@@ -513,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"
             },
             {
@@ -563,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",
@@ -577,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",
@@ -599,9 +810,9 @@
               "kind": "field",
               "name": "rowHeight",
               "type": {
-                "text": "number | undefined"
+                "text": "number | 'auto' | undefined"
               },
-              "description": "Row height in px. Unset: the density (or the `--argus-row-height` token) decides.",
+              "description": "Row height in px, or `'auto'` to fit each row to its content (`row-height=\"auto\"`).\nUnset: the density (or the `--argus-row-height` token) decides. With\n`'auto'`, that height is the header's and the least a body or pinned row is;\nrows grow to fit wrapped text (`wrap` columns) and taller content, and cell\ncontent sits at the top. Rows are measured as they render: a row's height\ncounts the columns rendered (see `virtualizeColumns`), and rows not seen yet\ncount as one line. Give images a size, so rows don't move when they load.",
               "attribute": "row-height"
             },
             {
@@ -624,13 +835,23 @@
               "description": "Rows rendered above and below the visible ones. `null` or `undefined` means the default, 6.",
               "attribute": "overscan"
             },
+            {
+              "kind": "field",
+              "name": "virtualizeColumns",
+              "type": {
+                "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.\nAs an attribute, `virtualize-columns=\"false\"` is off, like no attribute.",
+              "attribute": "virtualize-columns"
+            },
             {
               "kind": "field",
               "name": "sorting",
               "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",
@@ -638,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",
@@ -646,47 +867,124 @@
               "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": "method",
-              "name": "refresh",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
+              "kind": "field",
+              "name": "columnPinning",
+              "type": {
+                "text": "ColumnPinningState"
               },
-              "description": "With a `dataSource`, drops every loaded page and loads the rows in view\nagain, keeping the scroll position. With `data`, re-renders the cells (after\nchanging row objects in place). Resolves once the table has re-rendered;\nreloaded rows arrive as their pages load."
+              "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": "method",
-              "name": "autosizeColumns",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
+              "kind": "field",
+              "name": "columnVisibility",
+              "type": {
+                "text": "ColumnVisibilityState"
               },
-              "parameters": [
-                {
-                  "name": "ids",
-                  "optional": true,
-                  "type": {
-                    "text": "readonly string[]"
-                  }
-                }
-              ],
-              "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.\nResolves once the table has re-rendered."
+              "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": "method",
-              "name": "scrollToRow",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
+              "kind": "field",
+              "name": "columnFilters",
+              "type": {
+                "text": "ColumnFilterState"
               },
-              "parameters": [
-                {
+              "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",
+              "name": "quickFilter",
+              "type": {
+                "text": "string"
+              },
+              "description": "Shows only rows that contain each word of this text in one of their shown\ncolumns, ignoring case, e.g. from a search box. Values are matched as text\n(dates as `2026-11-10`); objects aren't searched. With a `dataSource`, it goes\nto `getRows()` and the server filters. `''` (the default) shows every row.",
+              "attribute": "quick-filter"
+            },
+            {
+              "kind": "field",
+              "name": "selectionMode",
+              "type": {
+                "text": "SelectionMode"
+              },
+              "default": "'none'",
+              "description": "How rows can be selected: `none` (the default), `single` or `multi`. A click\non a body row selects it; in `multi` mode Ctrl/Cmd+click toggles a row,\nShift+click selects the range from the last clicked row, and Ctrl/Cmd+A\nselects every row. Space toggles the focused row. Clicks on buttons, links\nand inputs inside cells don't select. Pinned rows, and `dataSource` rows not\nloaded yet, can't be selected.",
+              "attribute": "selection-mode"
+            },
+            {
+              "kind": "field",
+              "name": "selectionCheckboxes",
+              "type": {
+                "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`.\nAs an attribute, `selection-checkboxes=\"false\"` is off, like no attribute.",
+              "attribute": "selection-checkboxes"
+            },
+            {
+              "kind": "field",
+              "name": "selection",
+              "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-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",
+              "name": "contentRenderer",
+              "type": {
+                "text": "ContentRenderer | undefined"
+              },
+              "description": "Renders header and cell content the table can't render itself, such as React\nelements, Vue VNodes or Angular templates: `{ render(target, content),\nrelease(target), flush?() }`. A `header` or `cell` that returns anything other\nthan a string, a number, a DOM node or a Lit template hands it to the renderer,\nwith a target element the table keeps while the cell is reused for other rows.\nThe framework wrappers set it; set it yourself only for another framework."
+            },
+            {
+              "kind": "field",
+              "name": "plugins",
+              "type": {
+                "text": "readonly ArgusPlugin<T>[]"
+              },
+              "description": "Add-ons, such as `headerMenu()` from `@argus-table/header-menu`. Each one can\nchange the column definitions, handle keys on a focused header or cell, and\nuse the table through a small API. They run in array order. Replace the\narray to change them; an array with the same plugins in the same order\nchanges nothing. `null` or `undefined` means `[]`."
+            },
+            {
+              "kind": "method",
+              "name": "refresh",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "description": "With a `dataSource`, drops every loaded page and loads the rows in view\nagain, keeping the scroll position. With `data`, re-renders the cells (after\nchanging row objects in place). Resolves once the table has re-rendered;\nreloaded rows arrive as their pages load."
+            },
+            {
+              "kind": "method",
+              "name": "autosizeColumns",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "ids",
+                  "optional": true,
+                  "type": {
+                    "text": "readonly string[]"
+                  }
+                }
+              ],
+              "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",
+              "name": "scrollToRow",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
                   "name": "index",
                   "type": {
                     "text": "number"
@@ -694,35 +992,91 @@
                 }
               ],
               "description": "Scrolls so that the row at `index` (in the current row order) is at the top."
+            },
+            {
+              "kind": "method",
+              "name": "getState",
+              "return": {
+                "type": {
+                  "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 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",
+              "name": "setState",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "state",
+                  "type": {
+                    "text": "TableState"
+                  }
+                }
+              ],
+              "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<ColumnVisibilityChangeDetail>"
+              },
+              "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<ColumnFiltersChangeDetail>"
+              },
+              "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<SelectionChangeDetail>"
+              },
+              "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"
             },
             {
@@ -736,7 +1090,7 @@
               "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"
             },
             {
@@ -751,9 +1105,9 @@
             {
               "name": "row-height",
               "type": {
-                "text": "number | undefined"
+                "text": "number | 'auto' | undefined"
               },
-              "description": "Row height in px. Unset: the density (or the `--argus-row-height` token) decides.",
+              "description": "Row height in px, or `'auto'` to fit each row to its content (`row-height=\"auto\"`).\nUnset: the density (or the `--argus-row-height` token) decides. With\n`'auto'`, that height is the header's and the least a body or pinned row is;\nrows grow to fit wrapped text (`wrap` columns) and taller content, and cell\ncontent sits at the top. Rows are measured as they render: a row's height\ncounts the columns rendered (see `virtualizeColumns`), and rows not seen yet\ncount as one line. Give images a size, so rows don't move when they load.",
               "fieldName": "rowHeight"
             },
             {
@@ -772,6 +1126,41 @@
               },
               "description": "Rows rendered above and below the visible ones. `null` or `undefined` means the default, 6.",
               "fieldName": "overscan"
+            },
+            {
+              "name": "virtualize-columns",
+              "type": {
+                "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.\nAs an attribute, `virtualize-columns=\"false\"` is off, like no attribute.",
+              "fieldName": "virtualizeColumns"
+            },
+            {
+              "name": "quick-filter",
+              "type": {
+                "text": "string"
+              },
+              "description": "Shows only rows that contain each word of this text in one of their shown\ncolumns, ignoring case, e.g. from a search box. Values are matched as text\n(dates as `2026-11-10`); objects aren't searched. With a `dataSource`, it goes\nto `getRows()` and the server filters. `''` (the default) shows every row.",
+              "fieldName": "quickFilter"
+            },
+            {
+              "name": "selection-mode",
+              "type": {
+                "text": "SelectionMode"
+              },
+              "default": "'none'",
+              "description": "How rows can be selected: `none` (the default), `single` or `multi`. A click\non a body row selects it; in `multi` mode Ctrl/Cmd+click toggles a row,\nShift+click selects the range from the last clicked row, and Ctrl/Cmd+A\nselects every row. Space toggles the focused row. Clicks on buttons, links\nand inputs inside cells don't select. Pinned rows, and `dataSource` rows not\nloaded yet, can't be selected.",
+              "fieldName": "selectionMode"
+            },
+            {
+              "name": "selection-checkboxes",
+              "type": {
+                "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`.\nAs an attribute, `selection-checkboxes=\"false\"` is off, like no attribute.",
+              "fieldName": "selectionCheckboxes"
             }
           ],
           "superclass": {
@@ -802,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",
@@ -813,34 +1299,70 @@
             "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": "SORTING_CHANGE",
+          "type": {
+            "text": "string"
+          },
+          "default": "'argus-sorting-change'",
+          "description": "`sorting` changed (uncontrolled), or the proposed order (controlled)."
         },
         {
           "kind": "variable",
-          "name": "SORT_CHANGE",
+          "name": "COLUMN_SIZING_CHANGE",
           "type": {
             "text": "string"
           },
-          "default": "'argus-sort-change'",
-          "description": "Fired after the sort order changed (uncontrolled), or with the proposed order (controlled)."
+          "default": "'argus-column-sizing-change'",
+          "description": "`columnSizing` changed (uncontrolled), or the proposed widths (controlled). Once per column."
         },
         {
           "kind": "variable",
-          "name": "COLUMN_RESIZE",
+          "name": "COLUMN_ORDER_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-order-change'",
+          "description": "`columnOrder` changed (uncontrolled), or the proposed order (controlled)."
         },
         {
           "kind": "variable",
-          "name": "COLUMN_REORDER",
+          "name": "COLUMN_PINNING_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-pinning-change'",
+          "description": "`columnPinning` changed (uncontrolled), or the proposed pins (controlled)."
+        },
+        {
+          "kind": "variable",
+          "name": "COLUMN_VISIBILITY_CHANGE",
+          "type": {
+            "text": "string"
+          },
+          "default": "'argus-column-visibility-change'",
+          "description": "`columnVisibility` changed (uncontrolled), or the proposed visibility (controlled)."
+        },
+        {
+          "kind": "variable",
+          "name": "COLUMN_FILTERS_CHANGE",
+          "type": {
+            "text": "string"
+          },
+          "default": "'argus-column-filters-change'",
+          "description": "`columnFilters` changed (uncontrolled), or the proposed filters (controlled)."
+        },
+        {
+          "kind": "variable",
+          "name": "SELECTION_CHANGE",
+          "type": {
+            "text": "string"
+          },
+          "default": "'argus-selection-change'",
+          "description": "`selection` changed (uncontrolled), or the proposed ids (controlled)."
         },
         {
           "kind": "variable",
@@ -911,25 +1433,57 @@
         },
         {
           "kind": "js",
-          "name": "SORT_CHANGE",
+          "name": "SORTING_CHANGE",
+          "declaration": {
+            "name": "SORTING_CHANGE",
+            "module": "src/events.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "COLUMN_SIZING_CHANGE",
+          "declaration": {
+            "name": "COLUMN_SIZING_CHANGE",
+            "module": "src/events.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "COLUMN_ORDER_CHANGE",
+          "declaration": {
+            "name": "COLUMN_ORDER_CHANGE",
+            "module": "src/events.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "COLUMN_PINNING_CHANGE",
           "declaration": {
-            "name": "SORT_CHANGE",
+            "name": "COLUMN_PINNING_CHANGE",
             "module": "src/events.ts"
           }
         },
         {
           "kind": "js",
-          "name": "COLUMN_RESIZE",
+          "name": "COLUMN_VISIBILITY_CHANGE",
           "declaration": {
-            "name": "COLUMN_RESIZE",
+            "name": "COLUMN_VISIBILITY_CHANGE",
             "module": "src/events.ts"
           }
         },
         {
           "kind": "js",
-          "name": "COLUMN_REORDER",
+          "name": "COLUMN_FILTERS_CHANGE",
           "declaration": {
-            "name": "COLUMN_REORDER",
+            "name": "COLUMN_FILTERS_CHANGE",
+            "module": "src/events.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SELECTION_CHANGE",
+          "declaration": {
+            "name": "SELECTION_CHANGE",
             "module": "src/events.ts"
           }
         },
@@ -980,6 +1534,14 @@
             "module": "./argus-column.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "ArgusColumnGroup",
+          "declaration": {
+            "name": "ArgusColumnGroup",
+            "module": "./argus-column-group.js"
+          }
+        },
         {
           "kind": "js",
           "name": "ArgusTable",
@@ -988,6 +1550,14 @@
             "module": "./argus-table.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "content",
+          "declaration": {
+            "name": "content",
+            "module": "./render/content-directive.js"
+          }
+        },
         {
           "kind": "js",
           "name": "CELL_CLICK",
@@ -998,17 +1568,41 @@
         },
         {
           "kind": "js",
-          "name": "COLUMN_REORDER",
+          "name": "COLUMN_FILTERS_CHANGE",
+          "declaration": {
+            "name": "COLUMN_FILTERS_CHANGE",
+            "module": "./events.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "COLUMN_ORDER_CHANGE",
+          "declaration": {
+            "name": "COLUMN_ORDER_CHANGE",
+            "module": "./events.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "COLUMN_PINNING_CHANGE",
+          "declaration": {
+            "name": "COLUMN_PINNING_CHANGE",
+            "module": "./events.js"
+          }
+        },
+        {
+          "kind": "js",
+          "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"
           }
         },
@@ -1038,9 +1632,17 @@
         },
         {
           "kind": "js",
-          "name": "SORT_CHANGE",
+          "name": "SELECTION_CHANGE",
+          "declaration": {
+            "name": "SELECTION_CHANGE",
+            "module": "./events.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SORTING_CHANGE",
           "declaration": {
-            "name": "SORT_CHANGE",
+            "name": "SORTING_CHANGE",
             "module": "./events.js"
           }
         },
@@ -1054,6 +1656,63 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/interactive.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "INTERACTIVE",
+          "type": {
+            "text": "string"
+          },
+          "default": "'button,input,select,textarea,a[href],label,[contenteditable],[popover],dialog'",
+          "description": "Interactive content a page may put in a header or cell. A press on it belongs\nto that content: it doesn't sort, start a column drag or select a row. A\npopover or a dialog (a menu or an editor a plugin opens from a header) counts\nas a whole, padding included."
+        },
+        {
+          "kind": "function",
+          "name": "fromInteractive",
+          "return": {
+            "type": {
+              "text": "boolean"
+            }
+          },
+          "parameters": [
+            {
+              "name": "path",
+              "type": {
+                "text": "readonly EventTarget[]"
+              }
+            },
+            {
+              "name": "stop",
+              "type": {
+                "text": "Element"
+              }
+            }
+          ],
+          "description": "Whether an event path reaches interactive content before `stop` (the cell or\nrow the table handles the event for)."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "INTERACTIVE",
+          "declaration": {
+            "name": "INTERACTIVE",
+            "module": "src/interactive.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "fromInteractive",
+          "declaration": {
+            "name": "fromInteractive",
+            "module": "src/interactive.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/max-height.ts",
@@ -1146,11 +1805,57 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/plugins.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/types.ts",
       "declarations": [],
       "exports": [
+        {
+          "kind": "js",
+          "name": "ArgusPlugin",
+          "declaration": {
+            "name": "ArgusPlugin",
+            "module": "./plugins.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "CellTarget",
+          "declaration": {
+            "name": "CellTarget",
+            "module": "./plugins.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ColumnInfo",
+          "declaration": {
+            "name": "ColumnInfo",
+            "module": "./plugins.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PluginHost",
+          "declaration": {
+            "name": "PluginHost",
+            "module": "./plugins.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ContentRenderer",
+          "declaration": {
+            "name": "ContentRenderer",
+            "module": "./render/content-directive.js"
+          }
+        },
         {
           "kind": "js",
           "name": "CellClickDetail",
@@ -1175,6 +1880,38 @@
             "package": "@argus-table/core"
           }
         },
+        {
+          "kind": "js",
+          "name": "ColumnFilter",
+          "declaration": {
+            "name": "ColumnFilter",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ColumnFiltersChangeDetail",
+          "declaration": {
+            "name": "ColumnFiltersChangeDetail",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ColumnFilterState",
+          "declaration": {
+            "name": "ColumnFilterState",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ColumnOrderChangeDetail",
+          "declaration": {
+            "name": "ColumnOrderChangeDetail",
+            "package": "@argus-table/core"
+          }
+        },
         {
           "kind": "js",
           "name": "ColumnOrderState",
@@ -1193,17 +1930,25 @@
         },
         {
           "kind": "js",
-          "name": "ColumnReorderDetail",
+          "name": "ColumnPinningChangeDetail",
           "declaration": {
-            "name": "ColumnReorderDetail",
+            "name": "ColumnPinningChangeDetail",
             "package": "@argus-table/core"
           }
         },
         {
           "kind": "js",
-          "name": "ColumnResizeDetail",
+          "name": "ColumnPinningState",
           "declaration": {
-            "name": "ColumnResizeDetail",
+            "name": "ColumnPinningState",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ColumnSizingChangeDetail",
+          "declaration": {
+            "name": "ColumnSizingChangeDetail",
             "package": "@argus-table/core"
           }
         },
@@ -1215,6 +1960,22 @@
             "package": "@argus-table/core"
           }
         },
+        {
+          "kind": "js",
+          "name": "ColumnVisibilityChangeDetail",
+          "declaration": {
+            "name": "ColumnVisibilityChangeDetail",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ColumnVisibilityState",
+          "declaration": {
+            "name": "ColumnVisibilityState",
+            "package": "@argus-table/core"
+          }
+        },
         {
           "kind": "js",
           "name": "ColumnWidth",
@@ -1231,6 +1992,30 @@
             "package": "@argus-table/core"
           }
         },
+        {
+          "kind": "js",
+          "name": "DateFilter",
+          "declaration": {
+            "name": "DateFilter",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FilterKind",
+          "declaration": {
+            "name": "FilterKind",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FilterValue",
+          "declaration": {
+            "name": "FilterValue",
+            "package": "@argus-table/core"
+          }
+        },
         {
           "kind": "js",
           "name": "LoadErrorDetail",
@@ -1239,6 +2024,14 @@
             "package": "@argus-table/core"
           }
         },
+        {
+          "kind": "js",
+          "name": "NumberFilter",
+          "declaration": {
+            "name": "NumberFilter",
+            "package": "@argus-table/core"
+          }
+        },
         {
           "kind": "js",
           "name": "PinnedRows",
@@ -1255,6 +2048,14 @@
             "package": "@argus-table/core"
           }
         },
+        {
+          "kind": "js",
+          "name": "RangeFilterOp",
+          "declaration": {
+            "name": "RangeFilterOp",
+            "package": "@argus-table/core"
+          }
+        },
         {
           "kind": "js",
           "name": "RowClickDetail",
@@ -1289,9 +2090,57 @@
         },
         {
           "kind": "js",
-          "name": "SortChangeDetail",
+          "name": "ScrollState",
+          "declaration": {
+            "name": "ScrollState",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SelectionChangeDetail",
+          "declaration": {
+            "name": "SelectionChangeDetail",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SelectionMode",
+          "declaration": {
+            "name": "SelectionMode",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SelectionState",
+          "declaration": {
+            "name": "SelectionState",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SetFilter",
+          "declaration": {
+            "name": "SetFilter",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SortDirection",
+          "declaration": {
+            "name": "SortDirection",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SortingChangeDetail",
           "declaration": {
-            "name": "SortChangeDetail",
+            "name": "SortingChangeDetail",
             "package": "@argus-table/core"
           }
         },
@@ -1310,6 +2159,30 @@
             "name": "SortState",
             "package": "@argus-table/core"
           }
+        },
+        {
+          "kind": "js",
+          "name": "TableState",
+          "declaration": {
+            "name": "TableState",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TextFilter",
+          "declaration": {
+            "name": "TextFilter",
+            "package": "@argus-table/core"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TextFilterOp",
+          "declaration": {
+            "name": "TextFilterOp",
+            "package": "@argus-table/core"
+          }
         }
       ]
     },
@@ -1367,11 +2240,29 @@
                 {
                   "name": "ids",
                   "type": {
-                    "text": "Iterable<string>"
+                    "text": "Iterable<string>"
+                  }
+                }
+              ],
+              "description": "Forgets columns that are gone or no longer `'auto'`, given the ids of the auto columns."
+            },
+            {
+              "kind": "method",
+              "name": "pending",
+              "return": {
+                "type": {
+                  "text": "string[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "columns",
+                  "type": {
+                    "text": "readonly { id: string; auto: boolean }[]"
                   }
                 }
               ],
-              "description": "Forgets columns that are gone or no longer `'auto'`, given the ids of the auto columns."
+              "description": "The auto columns still to be measured: never, or without loaded rows yet.\nWith `virtualizeColumns` they render out of view until they are."
             },
             {
               "kind": "method",
@@ -1431,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": [
             {
@@ -1467,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
             }
           ]
@@ -1484,6 +2384,103 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/controllers/column-window.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "COLUMN_OVERSCAN",
+          "type": {
+            "text": "number"
+          },
+          "default": "2",
+          "description": "Scrolling columns rendered beyond each side of the visible ones."
+        },
+        {
+          "kind": "class",
+          "description": "Column virtualization (`virtualizeColumns`): which columns render, and which\npool slot's DOM each one uses.\n\nOff, every column renders in visual order, its slot is its `colIndex` and\nits cells are keyed by column id: the DOM is what it always was.\n\nOn, the scrolling columns in view render, plus `COLUMN_OVERSCAN` on each\nside, and the pinned columns, the checkbox column and the columns the table\nkeeps (the active one, one being dragged, auto widths still to measure)\nwhatever the scroll position. They are pooled like rows (ADR 0001): a column\nentering the view reuses the cells, slots and content of one that left, so\nthe DOM is updated in place, and the window has one size, so the pool fills\non the first render and scrolling only reuses it (in WebKit, new slots\nwhile scrolling cut a wheel scroll short; see `steadyWindow`). DOM order is\nthen pool order: each cell is placed in its grid column explicitly, and\n`aria-colindex` carries the position, as `aria-rowindex` does for rows.",
+          "name": "ColumnWindowController",
+          "members": [
+            {
+              "kind": "method",
+              "name": "hostConnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hostUpdated",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "compute",
+              "return": {
+                "type": {
+                  "text": "RenderedColumn<T>[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "columns",
+                  "type": {
+                    "text": "readonly Column<T>[]"
+                  }
+                },
+                {
+                  "name": "enabled",
+                  "type": {
+                    "text": "boolean"
+                  }
+                },
+                {
+                  "name": "keep",
+                  "type": {
+                    "text": "Iterable<string | undefined>"
+                  }
+                }
+              ],
+              "description": "The columns to render, given the model's columns in visual order. With\n`enabled`, `keep` names columns to render wherever they are. Call once per\nrender."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "COLUMN_OVERSCAN",
+          "declaration": {
+            "name": "COLUMN_OVERSCAN",
+            "module": "src/controllers/column-window.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ColumnWindowController",
+          "declaration": {
+            "name": "ColumnWindowController",
+            "module": "src/controllers/column-window.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/controllers/data-controller.ts",
@@ -1508,7 +2505,7 @@
         },
         {
           "kind": "class",
-          "description": "Loads `dataSource` pages for the rendered rows (infinite loading). It owns the\npage cache: a new source, sort order or row id function starts a fresh one, and\nanswers for an old cache are dropped. Requests wait until the range has been\nquiet for `LOAD_DEBOUNCE_MS`; pages that scrolled away are aborted.",
+          "description": "Loads `dataSource` pages for the rendered rows (infinite loading). It owns the\npage cache: a new source, sort order, filter or row id function starts a fresh one, and\nanswers for an old cache are dropped. Requests wait until the range has been\nquiet for `LOAD_DEBOUNCE_MS`; pages that scrolled away are aborted.",
           "name": "DataController",
           "members": [
             {
@@ -1554,7 +2551,7 @@
                   }
                 }
               ],
-              "description": "Takes the source, sort order and row id function. Any change starts a fresh\ncache; a sort or row id change keeps the row count (the rows are the same)."
+              "description": "Takes the source, sort order, filters and row id function. Any change starts a\nfresh cache; a sort or row id change keeps the row count (the rows are the same),\na new source or filter doesn't (the rows aren't)."
             },
             {
               "kind": "method",
@@ -1725,6 +2722,167 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/controllers/plugins.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Runs the table's plugins: connects them while the table is connected (in\narray order, cleaning up in reverse), chains their column transforms, and\noffers keys to them before the table handles them. A hook that throws is\nreported and skipped, so a broken plugin can't break the update.",
+          "name": "PluginController",
+          "members": [
+            {
+              "kind": "method",
+              "name": "set",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "plugins",
+                  "type": {
+                    "text": "readonly ArgusPlugin<T>[]"
+                  }
+                }
+              ],
+              "description": "Takes a new plugin list; connects and cleans up to match it if the host is connected."
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "transform",
+              "return": {
+                "type": {
+                  "text": "readonly ColumnDef<T>[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "input",
+                  "type": {
+                    "text": "readonly ColumnDef<T>[]"
+                  }
+                }
+              ],
+              "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",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Runs the transforms again on the next `transform()`."
+            },
+            {
+              "kind": "method",
+              "name": "keydown",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                },
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "CellTarget"
+                  }
+                }
+              ],
+              "description": "Offers a key to the plugins in order; `true` once one claims it."
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "sameItems",
+          "return": {
+            "type": {
+              "text": "boolean"
+            }
+          },
+          "parameters": [
+            {
+              "name": "a",
+              "type": {
+                "text": "readonly V[]"
+              }
+            },
+            {
+              "name": "b",
+              "type": {
+                "text": "readonly V[]"
+              }
+            }
+          ],
+          "description": "Whether two lists hold the same items in the same order."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "PluginController",
+          "declaration": {
+            "name": "PluginController",
+            "module": "src/controllers/plugins.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "sameItems",
+          "declaration": {
+            "name": "sameItems",
+            "module": "src/controllers/plugins.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/controllers/reorder-drag.ts",
@@ -1763,7 +2921,7 @@
               }
             }
           ],
-          "description": "The drop target for a pointer at `x`: the gap between headers nearest to it,\ndecided by each header's midpoint. `undefined` where the column would stay\nput. `direction` is 1 in LTR and -1 in RTL, where the group runs right to left."
+          "description": "The drop target for a pointer at `x`: the gap between headers nearest to it,\ndecided by each header's midpoint. `undefined` where the column would stay\nput. `direction` is 1 in LTR and -1 in RTL, where the group runs right to left.\nThe slots needn't be next to each other in the order: with\n`virtualizeColumns`, headers out of view aren't rendered."
         },
         {
           "kind": "function",
@@ -1885,22 +3043,92 @@
               }
             },
             {
-              "name": "onWidth",
-              "type": {
-                "text": "(width: number) => void"
-              }
+              "name": "onWidth",
+              "type": {
+                "text": "(width: number) => void"
+              }
+            }
+          ],
+          "description": "One pointer drag on a resize handle. The pointer is captured, so the drag keeps\nworking outside the handle, and moves are batched to one `onWidth` call per\nanimation frame (TanStack's `onChange` mode: the width updates while dragging).\n\n`direction` is 1 in LTR and -1 in RTL: the handle sits on the inline-end edge,\nso moving toward the inline end always grows the column."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "startResizeDrag",
+          "declaration": {
+            "name": "startResizeDrag",
+            "module": "src/controllers/resize-drag.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/controllers/row-measure.ts",
+      "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 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": [
+            {
+              "kind": "field",
+              "name": "pinned",
+              "type": {
+                "text": "PinnedHeights"
+              },
+              "description": "The pinned groups' heights from the last `read()`.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "invalidate",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "The next `read()` reads every row: their content may have changed size\n(new data or columns, a resize, content that grew)."
+            },
+            {
+              "kind": "method",
+              "name": "read",
+              "return": {
+                "type": {
+                  "text": "{ rows: [number, number][]; pinnedChanged: boolean }"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "root",
+                  "type": {
+                    "text": "ParentNode"
+                  }
+                }
+              ],
+              "description": "Reads the rows in `root` (the shadow root): the body rows' heights as\n`[index, px]`, and whether the pinned groups changed height. Scrolling,\nonly the pooled rows that now show another row are read."
+            },
+            {
+              "kind": "method",
+              "name": "stop",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Stops watching (fixed row heights again, or the table left the page)."
             }
-          ],
-          "description": "One pointer drag on a resize handle. The pointer is captured, so the drag keeps\nworking outside the handle, and moves are batched to one `onWidth` call per\nanimation frame (TanStack's `onChange` mode: the width updates while dragging).\n\n`direction` is 1 in LTR and -1 in RTL: the handle sits on the inline-end edge,\nso moving toward the inline end always grows the column."
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "startResizeDrag",
+          "name": "RowMeasure",
           "declaration": {
-            "name": "startResizeDrag",
-            "module": "src/controllers/resize-drag.ts"
+            "name": "RowMeasure",
+            "module": "src/controllers/row-measure.ts"
           }
         }
       ]
@@ -1942,7 +3170,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Row virtualization (TanStack Virtual) plus the row pool: which rows render,\nwhere, and which pool slot's DOM each one uses. The virtualizer registers itself\nwith the host and requests updates on scroll.\n\nScroll scaling: engines limit an element's height, so a body taller than the\ncap renders at the cap and its scroll position maps linearly onto the rows\n(`ScrollScale`). The virtualizer works in logical offsets: it gets a stand-in\nfor the scroller whose `scrollTop`, `scrollHeight` and `scrollTo()` are\nlogical, and everything else passes through. Rows render relative to the\nscroll position (`start` minus the difference between the logical and the\nphysical offset). Scroll through this controller (`scrollBy`, `reveal`,\n`scrollToIndex`): physical px no longer match rows once the body is scaled.",
+          "description": "Row virtualization (TanStack Virtual) plus the row pool: which rows render,\nwhere, and which pool slot's DOM each one uses. The virtualizer registers itself\nwith the host and requests updates on scroll.\n\nScroll scaling: engines limit an element's height, so a body taller than the\ncap renders at the cap and its scroll position maps linearly onto the rows\n(`ScrollScale`). The virtualizer works in logical offsets: it gets a stand-in\nfor the scroller whose `scrollTop`, `scrollHeight` and `scrollTo()` are\nlogical, and everything else passes through. Rows render relative to the\nscroll position (`start` minus the difference between the logical and the\nphysical offset). Scroll through this controller (`scrollBy`, `reveal`,\n`scrollToIndex`): physical px no longer match rows once the body is scaled.\n\nRows of different heights (`auto`): TanStack's own measuring recomputes every\nrow below a measured one, too slow for a million rows, so in this mode the\nvirtualizer sits idle (no rows) and the controller does its part: the window\nfrom `RowSizes` (heights by index, O(log n) offsets), a scroll listener that\nre-renders when the window moves, and anchoring. Heights follow row ids, so\na sort or filter keeps them. A measured row above the top row would move\nthe rows in view: unscaled, the rows render shifted by the difference until\nscrolling stops (`#hold`); scaled, the mapping pivots at the current offset.\nNeither writes the scroll position while the user scrolls.",
           "name": "VirtualController",
           "members": [
             {
@@ -1971,6 +3199,15 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "hostDisconnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "computeWindow",
@@ -1982,13 +3219,88 @@
               "description": "Computes the rendered window and updates the pool. Call once per render."
             },
             {
-              "kind": "field",
-              "name": "poolSize",
-              "type": {
-                "text": "number"
+              "kind": "method",
+              "name": "measureRows",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
               },
-              "description": "Number of pool slots created so far: bounded by the most rows rendered at once.",
-              "readonly": true
+              "parameters": [
+                {
+                  "name": "measured",
+                  "type": {
+                    "text": "Iterable<readonly [number, number]>"
+                  }
+                }
+              ],
+              "description": "Auto mode: records the heights of rendered body rows (`[index, px]`), read\nonce their content has rendered. Heights under the row height count as it.\nReturns whether any changed; the controller then requests the update that\nplaces the rows. Rows above the top row keep the rows in view in place."
+            },
+            {
+              "kind": "method",
+              "name": "sizeOf",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "The height of the row at `index` (auto mode: measured, or the row height)."
+            },
+            {
+              "kind": "method",
+              "name": "startOf",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "The logical offset of the row at `index` in the body."
+            },
+            {
+              "kind": "method",
+              "name": "pageRows",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "from",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "down",
+                  "type": {
+                    "text": "boolean"
+                  }
+                },
+                {
+                  "name": "view",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "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",
@@ -1999,6 +3311,15 @@
               "description": "Whether the body is taller than the cap and scrolls scaled.",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "topRow",
+              "type": {
+                "text": "number"
+              },
+              "description": "The index of the row at the top of the body (0 before the first layout).",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "scrollToIndex",
@@ -2148,9 +3469,27 @@
               "type": {
                 "text": "Loading"
               }
+            },
+            {
+              "name": "selectedAt",
+              "optional": true,
+              "type": {
+                "text": "SelectedAt"
+              }
+            },
+            {
+              "name": "checkboxes",
+              "optional": true,
+              "type": {
+                "text": "CheckboxHandlers"
+              }
+            },
+            {
+              "name": "inset",
+              "default": "false"
             }
           ],
-          "description": "The virtualized body. Rows are keyed by pool slot, so a row entering the window\nreuses the DOM of one that left (ADR 0001), and they stay in pool order: screen\nreaders get the position from `aria-rowindex`. `firstRowIndex` is the\n`aria-rowindex` of row 0: after the header and the rows pinned to the top."
+          "description": "The virtualized body. Rows are keyed by pool slot, so a row entering the window\nreuses the DOM of one that left (ADR 0001), and they stay in pool order: screen\nreaders get the position from `aria-rowindex`. `firstRowIndex` is the\n`aria-rowindex` of row 0: after the header and the rows pinned to the top.\n`inset`: rows of different heights (`rowHeight: 'auto'`) are placed with\n`inset-block-start` and render at least their measured `size`, which is on\nthe controller's px grid, so they stay flush however far down they are."
         },
         {
           "kind": "function",
@@ -2159,7 +3498,7 @@
             {
               "name": "c",
               "type": {
-                "text": "ColumnView<T, CellContent>"
+                "text": "RenderedColumn<T>"
               }
             },
             {
@@ -2219,7 +3558,7 @@
           "name": "renderLightDom",
           "return": {
             "type": {
-              "text": "void"
+              "text": "RootPart"
             }
           },
           "parameters": [
@@ -2241,6 +3580,18 @@
                 "text": "readonly WindowRow[]"
               }
             },
+            {
+              "name": "rendered",
+              "type": {
+                "text": "readonly RenderedColumn<T>[]"
+              }
+            },
+            {
+              "name": "groups",
+              "type": {
+                "text": "readonly (readonly HeaderGroupCell<CellContent>[])[]"
+              }
+            },
             {
               "name": "renderBefore",
               "type": {
@@ -2248,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."
+          "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": [
@@ -2262,6 +3613,78 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/render/content-directive.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "flushContent",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "host",
+              "type": {
+                "text": "object"
+              }
+            }
+          ],
+          "description": "Calls `flush()` on the renderers that rendered or released for `host` since the last call."
+        },
+        {
+          "kind": "function",
+          "name": "isForeign",
+          "return": {
+            "type": {
+              "text": "boolean"
+            }
+          },
+          "parameters": [
+            {
+              "name": "value",
+              "type": {
+                "text": "unknown"
+              }
+            }
+          ],
+          "description": "Whether the table renders `value` itself: strings, numbers, Lit templates and\ndirective results, DOM nodes, `nothing` and empty values, and arrays of those.\nAnything else is foreign: it goes to the `contentRenderer`."
+        },
+        {
+          "kind": "variable",
+          "name": "content"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "flushContent",
+          "declaration": {
+            "name": "flushContent",
+            "module": "src/render/content-directive.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "isForeign",
+          "declaration": {
+            "name": "isForeign",
+            "module": "src/render/content-directive.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "content",
+          "declaration": {
+            "name": "content",
+            "module": "src/render/content-directive.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/render/content.ts",
@@ -2313,26 +3736,39 @@
               }
             },
             {
-              "name": "colIndex",
+              "name": "colSlot",
               "type": {
                 "text": "number"
               }
             }
           ],
-          "description": "Private slot names (ADR 0001): cells by pool slot and column, headers by\ncolumn, pinned rows by side, index and column."
+          "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",
           "name": "headerSlot",
           "parameters": [
             {
-              "name": "colIndex",
+              "name": "colSlot",
               "type": {
                 "text": "number"
               }
             }
           ]
         },
+        {
+          "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",
@@ -2350,7 +3786,7 @@
               }
             },
             {
-              "name": "colIndex",
+              "name": "colSlot",
               "type": {
                 "text": "number"
               }
@@ -2369,7 +3805,7 @@
             {
               "name": "column",
               "type": {
-                "text": "Pinnable & { sorted: 'asc' | 'desc' | false }"
+                "text": "Pinnable & { sorted: 'asc' | 'desc' | false; kind: 'data' | 'selection' }"
               }
             },
             {
@@ -2399,7 +3835,7 @@
         },
         {
           "kind": "function",
-          "name": "pinStyle",
+          "name": "cellStyle",
           "return": {
             "type": {
               "text": "string | undefined"
@@ -2409,11 +3845,29 @@
             {
               "name": "column",
               "type": {
-                "text": "Pinnable & { offset: number }"
+                "text": "Pinnable & { offset: number; place: number | undefined }"
+              }
+            }
+          ],
+          "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 pinned cell: its sticky inset, from the start or the end edge."
+          "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": [
@@ -2449,6 +3903,14 @@
             "module": "src/render/content.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "groupSlot",
+          "declaration": {
+            "name": "groupSlot",
+            "module": "src/render/content.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "pinnedSlot",
@@ -2475,9 +3937,17 @@
         },
         {
           "kind": "js",
-          "name": "pinStyle",
+          "name": "cellStyle",
+          "declaration": {
+            "name": "cellStyle",
+            "module": "src/render/content.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "groupStyle",
           "declaration": {
-            "name": "pinStyle",
+            "name": "groupStyle",
             "module": "src/render/content.ts"
           }
         }
@@ -2489,38 +3959,40 @@
       "declarations": [
         {
           "kind": "function",
-          "name": "renderHeader",
+          "name": "columnKey",
           "parameters": [
             {
-              "name": "columns",
-              "type": {
-                "text": "readonly ColumnView<T, CellContent>[]"
-              }
-            },
-            {
-              "name": "handlers",
-              "type": {
-                "text": "HeaderHandlers"
-              }
-            },
-            {
-              "name": "activeCol",
+              "name": "columnId",
               "type": {
-                "text": "string | undefined"
+                "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": "drag",
-              "optional": true,
+              "name": "{\n  columns,\n  groups,\n  handlers,\n  active,\n  drag,\n  checkAll,\n}",
               "type": {
-                "text": "HeaderDrag"
+                "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",
@@ -2554,7 +4026,7 @@
             {
               "name": "columns",
               "type": {
-                "text": "readonly ColumnView<T, CellContent>[]"
+                "text": "readonly RenderedColumn<T>[]"
               }
             },
             {
@@ -2591,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)); } /* * 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); } [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; } /* * 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; } ::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."
         }
       ],