@fusion.dev/helix-headless 0.184.0 → 0.185.0

package/custom-elements.json

@@ -46797,7 +46797,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Declare the columns as `TableColumn` children and pass the rows as an array.\nThe schema stays readable in the HTML, and the rows can be windowed, which\nten thousand row elements cannot be.\n\n```html\n<helix-headless-data-table .rows=${rows} sort=\"name:asc\" page-size=\"20\">\n  <helix-headless-table-column field=\"name\" sortable>Name</helix-headless-table-column>\n  <helix-headless-table-column field=\"size\" text-align=\"end\" sortable .cell=${bytes}>Size</helix-headless-table-column>\n</helix-headless-data-table>\n```\n\nFor a short table written out by hand, use `Table`, which takes rows as\nmarkup.\n\nSort and filter apply to the whole set, including the rows on other pages.\n\n**Write the first page as rows, so the served HTML carries the values.** The\ntable reads each cell from its column, and a server does not pass the column\nchildren to this element, so on its own it serves the headings and no values.\nWrite the first page under the columns as `TableRow` and `TableCell`\nelements, in the table's sort and page size and formatted as its columns draw\nthem. The table shows your rows until `rows` holds a row, then draws its own\nin their place and leaves yours in the page, unshown. A development build\nwarns when the two differ. In React, map the first page of the same array in\nthe same server component.\n\n`selectable` adds a column of checkboxes, keyed on `row-key`:\n\n- A row is selected by its key, so the selection survives a sort, a filter,\n  and a page change.\n- `selected` holds the chosen keys, comma separated, the same shape `Listbox`\n  uses for a multiple choice. As with `sort`, writing it applies the\n  selection, and `default-selected` holds what the markup declared.\n- The checkbox in the heading selects every row in the result, across pages,\n  and shows a dash while only some are chosen.\n- Shift with a press on a checkbox selects every row between it and the row\n  last chosen.\n- `selection-behavior=\"replace\"` makes a press or a move select the row\n  alone, as a file list does. Control or Command with a press adds or takes\n  out one row, and Shift with a press selects every row from the one last\n  chosen.\n\nTo act on a single row, such as opening it, put a link or a button in a cell.\n\n**Keyboard.** The grid is one tab stop, and the arrow keys move between its\ncells, the headings included.\n\n| Key | What it does |\n|---|---|\n| Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. |\n| Down, Up | Moves one row, the heading row and the `load-more` row included. |\n| Home, End | Moves to the first or the last cell of the row. |\n| Control with Home or End | Moves to the first or the last cell of the grid. |\n| Page Down, Page Up | Moves by the rows that fit in view. |\n| Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. |\n| Enter, Space on a sortable heading | Sorts by the column. |\n| Enter, Space on the `load-more` row | Sends `helix-load-more`. |\n| Space on a row | Selects the row, in a `selectable` table. Under `selection-behavior=\"replace\"`, selects it alone, and Control or Command with Space adds or takes out the row. |\n| Down, Up, Page Down, Page Up under `selection-behavior=\"replace\"` | Selects the row it moves to alone. Control or Command with the key moves without selecting. |\n| Shift with Down or Up | Selects the rows it moves across, in a `selectable` table. |\n| Shift with Space | Selects every row from the one last chosen, in a `selectable` table. |\n| Control or Command with A | Selects every row, in a `selectable` table. |\n| Right on a row header in a tree grid | Opens a closed row, and moves one cell along an open one. |\n| Left on a row header in a tree grid | Closes an open row, and moves to the parent of a closed one. |\n| A letter or a word | Moves to the next row whose row header starts with what you typed. |\n\n`selected` and `expanded` hold their keys in the order of the rows, as do\n`helix-select`, `helix-selected` and `helix-expand`.\n\nEach row is named by its row header, the column marked `row-header`, or the\nfirst column with a `field` where none is. A screen reader says it as a reader\nmoves between rows.\n\n**Rows that hold rows.** `child-field` names the field that holds a row's\nchild rows, and the grid becomes a tree grid. The row header column draws a\nmark that a press opens and closes a row by, and `expanded` holds the keys of the open\nrows, which `row-key` names. Right on a closed row's header opens it, Left on\nan open one closes it, and Left on a child moves to its parent. A sort orders\nthe rows under each parent, and a search shows the rows that lead to each\nmatch, open.\n\n`load-more` adds a row after the last one with a button that sends\n`helix-load-more`. A `windowed` table also sends it by itself once a reader\nscrolls within one screen of the end, once for each number of rows. Add the\nnext rows to `rows`, and set `loading` while they are on their way.\n\nWhen a fetch fails, set `error-text`, such as \"The files did not load\", and\nput a button that tries again in the `error` slot. The line shows after the\nrows in place of the empty and loading lines, the live region says it, and\nthe table takes the `error` state. Clear it once you try again.\n\nThe controls inside the cells leave the tab order, so Tab moves past the\nwhole grid. A windowed table keeps the row holding focus drawn while the\nrest scroll away.\n\nPeople can resize and reorder the columns. `resizable` on a column puts a\nseparator on its edge. `reorderable` on the table puts a grip on each heading\nthat has a `field`, moved by dragging or with the arrow keys. The new order\nis written to `order` as a list of fields. Your markup is not rewritten: the\ntable assigns the headings to its header in that order.\n\n**`reorderable-rows` lets people move rows.** A column of grips leads each\nrow, named by `move-row-label`. Drag a grip to move its row, and the table\nscrolls near an edge. Or press Space or Enter on a grip, or click it, to pick\nup its row, move it with Down and Up, Home and End, and press Space or Enter\nagain to drop it. A click on another row drops it there, and Escape puts it\nback. The table says each step in its `live` region. A drop sends\n`helix-before-reorder`, which you can refuse, and then `helix-reorder` with\n`kind` set to `row`, whose `keys` hold every key of `rows` in the new order.\n**You move the rows**: set `rows` to the new order, and the table draws it.\nSet `row-key`, so a row is known by its key once it has moved. The grips do\nnothing while a `sort` is set, since the sort decides the order, and a tree\ngrid draws none.\n\n`csv()` returns the result as text: every row that passes the filter, in the\norder and the columns on screen. Saving the file is up to you.\n\n`DataTable` has no `columns` attribute. Each `TableColumn` is part of the\nschema, so you size a column with its own `width`. `Table` has `columns`\nbecause its cells are markup you write and it can have no columns at all.\nWritten on `DataTable`, `columns` has no effect, so watch for it when you\nmove a table from `Table` to `DataTable`.\n\n**The columns are an import of their own.** A column is the Table family's\n`TableColumn`, which the data table does not register, so a page that writes\none imports the Table entry beside the data table:\n\n```js\nimport '@fusion.dev/helix/data-table'\nimport '@fusion.dev/helix/table'\n```\n\nIn development, a data table holding a column nobody registered says so once\nthe page has loaded, with the line to add.",
+          "description": "Declare the columns as `TableColumn` children and pass the rows as an array.\nThe schema stays readable in the HTML, and the rows can be windowed, which\nten thousand row elements cannot be.\n\n```html\n<helix-headless-data-table .rows=${rows} sort=\"name:asc\" page-size=\"20\">\n  <helix-headless-table-column field=\"name\" sortable>Name</helix-headless-table-column>\n  <helix-headless-table-column field=\"size\" text-align=\"end\" sortable .cell=${bytes}>Size</helix-headless-table-column>\n</helix-headless-data-table>\n```\n\nFor a short table written out by hand, use `Table`, which takes rows as\nmarkup.\n\nSort and filter apply to the whole set, including the rows on other pages.\n\n**Write the first page as rows, so the served HTML carries the values.** The\ntable reads each cell from its column, and a server does not pass the column\nchildren to this element, so on its own it serves the headings and no values.\nWrite the first page under the columns as `TableRow` and `TableCell`\nelements, in the table's sort and page size and formatted as its columns draw\nthem. The table shows your rows until `rows` holds a row, then draws its own\nin their place and leaves yours in the page, unshown. A development build\nwarns when the two differ. In React, map the first page of the same array in\nthe same server component.\n\n`selectable` adds a column of checkboxes, keyed on `row-key`:\n\n- A row is selected by its key, so the selection survives a sort, a filter,\n  and a page change.\n- `selected` holds the chosen keys, comma separated, the same shape `Listbox`\n  uses for a multiple choice. As with `sort`, writing it applies the\n  selection, and `default-selected` holds what the markup declared.\n- The checkbox in the heading selects every row in the result, across pages,\n  and shows a dash while only some are chosen.\n- Shift with a press on a checkbox selects every row between it and the row\n  last chosen.\n- `selection-behavior=\"replace\"` makes a press or a move select the row\n  alone, as a file list does. Control or Command with a press adds or takes\n  out one row, and Shift with a press selects every row from the one last\n  chosen.\n\nTo act on a single row, such as opening it, put a link or a button in a cell.\n\n**Keyboard.** The grid is one tab stop, and the arrow keys move between its\ncells, the headings included.\n\n| Key | What it does |\n|---|---|\n| Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. |\n| Down, Up | Moves one row, the heading row and the `load-more` row included. |\n| Home, End | Moves to the first or the last cell of the row. |\n| Control with Home or End | Moves to the first or the last cell of the grid. |\n| Page Down, Page Up | Moves by the rows that fit in view. |\n| Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. |\n| Enter, Space on a sortable heading | Sorts by the column. |\n| Enter, Space on the `load-more` row | Sends `helix-load-more`. |\n| Space on a row | Selects the row, in a `selectable` table. Under `selection-behavior=\"replace\"`, selects it alone, and Control or Command with Space adds or takes out the row. |\n| Down, Up, Page Down, Page Up under `selection-behavior=\"replace\"` | Selects the row it moves to alone. Control or Command with the key moves without selecting. |\n| Shift with Down or Up | Selects the rows it moves across, in a `selectable` table. |\n| Shift with Space | Selects every row from the one last chosen, in a `selectable` table. |\n| Control or Command with A | Selects every row, in a `selectable` table. |\n| Right on a row header in a tree grid | Opens a closed row, and moves one cell along an open one. |\n| Left on a row header in a tree grid | Closes an open row, and moves to the parent of a closed one. |\n| A letter or a word | Moves to the next row whose row header starts with what you typed. |\n\n`selected` and `expanded` hold their keys in the order of the rows, as do\n`helix-select`, `helix-selected` and `helix-expand`.\n\nEach row is named by its row header, the column marked `row-header`, or the\nfirst column with a `field` where none is. A screen reader says it as a reader\nmoves between rows.\n\n**Rows that hold rows.** `child-field` names the field that holds a row's\nchild rows, and the grid becomes a tree grid. The row header column draws a\nmark that a press opens and closes a row by, and `expanded` holds the keys of the open\nrows, which `row-key` names. Right on a closed row's header opens it, Left on\nan open one closes it, and Left on a child moves to its parent. A sort orders\nthe rows under each parent, and a search shows the rows that lead to each\nmatch, open.\n\n`load-more` adds a row after the last one with a button that sends\n`helix-load-more`. A `windowed` table also sends it by itself once a reader\nscrolls within one screen of the end, once for each number of rows. Add the\nnext rows to `rows`, and set `loading` while they are on their way.\n\nWhen a fetch fails, set `error-text`, such as \"The files did not load\", and\nput a button that tries again in the `error` slot. The line shows after the\nrows in place of the empty and loading lines, the live region says it, and\nthe table takes the `error` state. Clear it once you try again.\n\nThe controls inside the cells leave the tab order, so Tab moves past the\nwhole grid. A windowed table keeps the row holding focus drawn while the\nrest scroll away.\n\nPeople can resize and reorder the columns. `resizable` on a column puts a\nseparator on its edge. `reorderable` on the table puts a grip on each heading\nthat has a `field`, moved by dragging or with the arrow keys. The new order\nis written to `order` as a list of fields. Your markup is not rewritten: the\ntable assigns the headings to its header in that order.\n\n**`reorderable-rows` lets people move rows.** A column of grips leads each\nrow, named by `move-row-label`. Drag a grip to move its row, and the table\nscrolls near an edge. Or press Space or Enter on a grip, or click it, to pick\nup its row, move it with Down and Up, Home and End, and press Space or Enter\nagain to drop it. A click on another row drops it there, and Escape puts it\nback. The table says each step in its `live` region. A drop sends\n`helix-before-reorder`, which you can refuse, and then `helix-reorder` with\n`kind` set to `row`, whose `keys` hold every key of `rows` in the new order.\n**You move the rows**: set `rows` to the new order, and the table draws it.\nSet `row-key`, so a row is known by its key once it has moved. The grips do\nnothing while a `sort` is set, since the sort decides the order, and a tree\ngrid draws none.\n\n`csv()` returns the result as text: every row that passes the filter, in the\norder and the columns on screen. Saving the file is up to you.\n\nSize a column with its own `width`, or every column at once with `columns`,\na track list dealt out one track to a column in the order they are written,\nas `Table` deals it. A column's `width` wins in its place. **A table that\nserves its first page takes its widths from `columns`**: a server and a\nstylesheet can read the table's own attributes and not its columns', so the\nserved rows are laid out at the widths the table draws.\n\n**The columns are an import of their own.** A column is the Table family's\n`TableColumn`, which the data table does not register, so a page that writes\none imports the Table entry beside the data table:\n\n```js\nimport '@fusion.dev/helix/data-table'\nimport '@fusion.dev/helix/table'\n```\n\nIn development, a data table holding a column nobody registered says so once\nthe page has loaded, with the line to add.",
           "name": "HelixHeadlessDataTable",
           "cssProperties": [
             {
@@ -47151,6 +47151,16 @@
               "attribute": "child-field",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "columns",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The column tracks, as a grid track list such as `2fr 1fr max-content`,\ndealt out one track to a column in the order the columns are written. A\ncolumn's own `width` wins in its place, and a column it does not reach\ntakes the track a column with no `width` takes.\n\n**The one track list a server can send.** A server rendering this element\nhas no columns to read a `width` from, and neither has a stylesheet laying\nout the rows a page served before the table upgrades, so a table sized here\nlays those rows out at the widths it draws.",
+              "attribute": "columns"
+            },
             {
               "kind": "field",
               "name": "defaultExpanded",
@@ -48225,7 +48235,7 @@
                 "text": "string"
               },
               "privacy": "private",
-              "description": "The track list, from the columns if there are any.",
+              "description": "The track list: each column's `width`, or its track in `columns`, or the\ntrack a column with neither takes.\n\nA render that knows no columns, on a server or hydrating what one sent,\nhas `columns` alone, and sends it as it is.",
               "readonly": true
             },
             {
@@ -50274,6 +50284,15 @@
               "description": "The field that holds a row's child rows, as an array. Set it, and `row-key`,\nand the grid becomes a tree grid.\n\nReflected, because the styled tier indents a tree grid's row headers by\nit. No default, so a table that sets none writes nothing onto its host.",
               "fieldName": "childField"
             },
+            {
+              "name": "columns",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The column tracks, as a grid track list such as `2fr 1fr max-content`,\ndealt out one track to a column in the order the columns are written. A\ncolumn's own `width` wins in its place, and a column it does not reach\ntakes the track a column with no `width` takes.\n\n**The one track list a server can send.** A server rendering this element\nhas no columns to read a `width` from, and neither has a stylesheet laying\nout the rows a page served before the table upgrades, so a table sized here\nlays those rows out at the widths it draws.",
+              "fieldName": "columns"
+            },
             {
               "name": "default-expanded",
               "type": {
@@ -162849,7 +162868,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The column widths as one track list, written once on the table.\n\nWith `TableColumn` children, each track sizes the column in its place, a\nhidden column counted, so hiding one takes its track with it and the rest\nkeep theirs. The columns decide how many tracks there are and this list\nonly how wide: a track past the last column is dropped, and a column past\nthe last track shares what is left. With no columns declared it is the\nwhole track list. Tracks count as the grid counts them, so `minmax(0, 1fr)`\nis one and `repeat(2, 8rem)` is two, and one the grid would refuse leaves\nits column at the default rather than taking the table down to one column.\n\n**A column's own `width` wins over its track here.** The width is written\non the column it sizes, which is the more particular statement, and it is\nwhere a resize lands: a reader dragging a column's edge writes `width`, so\nwere this list to win, the drag would move the separator and leave the\ntrack where the list put it. This is the table's default for its columns,\nand each column may say otherwise.\n\n**It is also the only track list a server can send.** The shim has no tree\nto walk, so a render there knows of no columns and this attribute is the\nwhole answer: a table given one lays its grid out in the first paint, and a\ntable sized only by its columns is one track wide until it upgrades.\n\n**Data Table has none of this, and should not.** Its columns are its schema\nrather than an option, so there is always a column to write a `width` on\nand a list here would be a second way to say what that says. This table's\ncells are markup, and a table written as rows of cells with no column\ndeclared in it has nowhere else to be sized from.",
+              "description": "The column widths as one track list, written once on the table.\n\nWith `TableColumn` children, each track sizes the column in its place, a\nhidden column counted, so hiding one takes its track with it and the rest\nkeep theirs. The columns decide how many tracks there are and this list\nonly how wide: a track past the last column is dropped, and a column past\nthe last track shares what is left. With no columns declared it is the\nwhole track list. Tracks count as the grid counts them, so `minmax(0, 1fr)`\nis one and `repeat(2, 8rem)` is two, and one the grid would refuse leaves\nits column at the default rather than taking the table down to one column.\n\n**A column's own `width` wins over its track here.** The width is written\non the column it sizes, which is the more particular statement, and it is\nwhere a resize lands: a reader dragging a column's edge writes `width`, so\nwere this list to win, the drag would move the separator and leave the\ntrack where the list put it. This is the table's default for its columns,\nand each column may say otherwise.\n\n**It is also the only track list a server can send.** The shim has no tree\nto walk, so a render there knows of no columns and this attribute is the\nwhole answer: a table given one lays its grid out in the first paint, and a\ntable sized only by its columns takes, until it upgrades, a track for each\ncolumn at the width a column with no `width` takes (`helix.css`).\n\nData Table takes the same list, for the same reason: a data table that\nserves its first page as rows is laid out by it before it upgrades.",
               "attribute": "columns"
             },
             {
@@ -164785,7 +164804,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The column widths as one track list, written once on the table.\n\nWith `TableColumn` children, each track sizes the column in its place, a\nhidden column counted, so hiding one takes its track with it and the rest\nkeep theirs. The columns decide how many tracks there are and this list\nonly how wide: a track past the last column is dropped, and a column past\nthe last track shares what is left. With no columns declared it is the\nwhole track list. Tracks count as the grid counts them, so `minmax(0, 1fr)`\nis one and `repeat(2, 8rem)` is two, and one the grid would refuse leaves\nits column at the default rather than taking the table down to one column.\n\n**A column's own `width` wins over its track here.** The width is written\non the column it sizes, which is the more particular statement, and it is\nwhere a resize lands: a reader dragging a column's edge writes `width`, so\nwere this list to win, the drag would move the separator and leave the\ntrack where the list put it. This is the table's default for its columns,\nand each column may say otherwise.\n\n**It is also the only track list a server can send.** The shim has no tree\nto walk, so a render there knows of no columns and this attribute is the\nwhole answer: a table given one lays its grid out in the first paint, and a\ntable sized only by its columns is one track wide until it upgrades.\n\n**Data Table has none of this, and should not.** Its columns are its schema\nrather than an option, so there is always a column to write a `width` on\nand a list here would be a second way to say what that says. This table's\ncells are markup, and a table written as rows of cells with no column\ndeclared in it has nowhere else to be sized from.",
+              "description": "The column widths as one track list, written once on the table.\n\nWith `TableColumn` children, each track sizes the column in its place, a\nhidden column counted, so hiding one takes its track with it and the rest\nkeep theirs. The columns decide how many tracks there are and this list\nonly how wide: a track past the last column is dropped, and a column past\nthe last track shares what is left. With no columns declared it is the\nwhole track list. Tracks count as the grid counts them, so `minmax(0, 1fr)`\nis one and `repeat(2, 8rem)` is two, and one the grid would refuse leaves\nits column at the default rather than taking the table down to one column.\n\n**A column's own `width` wins over its track here.** The width is written\non the column it sizes, which is the more particular statement, and it is\nwhere a resize lands: a reader dragging a column's edge writes `width`, so\nwere this list to win, the drag would move the separator and leave the\ntrack where the list put it. This is the table's default for its columns,\nand each column may say otherwise.\n\n**It is also the only track list a server can send.** The shim has no tree\nto walk, so a render there knows of no columns and this attribute is the\nwhole answer: a table given one lays its grid out in the first paint, and a\ntable sized only by its columns takes, until it upgrades, a track for each\ncolumn at the width a column with no `width` takes (`helix.css`).\n\nData Table takes the same list, for the same reason: a data table that\nserves its first page as rows is laid out by it before it upgrades.",
               "fieldName": "columns"
             },
             {
@@ -165893,6 +165912,46 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/table/tracks.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "tracksOf",
+          "return": {
+            "type": {
+              "text": "string[]"
+            }
+          },
+          "parameters": [
+            {
+              "name": "list",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "wanted",
+              "type": {
+                "text": "number"
+              }
+            }
+          ],
+          "description": "The first `wanted` tracks of a track list, one entry each, so every declared\ncolumn can take the one in its place.\n\nSplit on the spaces between tracks and never inside a function, so\n`minmax(0, 1fr)` stays one track. A `repeat()` with a count is that many\ntracks, written out; an automatic one names no count and yields none. Line\nnames go with the track after them.\n\nEverything above the split is a fact about a grid track list rather than\nabout a value list, which is why only the split itself is shared.\n\n**A track the grid would refuse yields nothing either**, where the platform\ncan say. One invalid track makes the whole `grid-template-columns` invalid,\nwhich a grid ignores in silence and draws as one column. That is the failure\nthat once had `columns` deprecated, a list of headings handed over as widths,\nand dealt out a track at a time it costs the one column its width and no\nmore."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "tracksOf",
+          "declaration": {
+            "name": "tracksOf",
+            "module": "src/table/tracks.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/tabs/index.ts",
@@ -202555,6 +202614,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix-headless",
-    "version": "0.184.0"
+    "version": "0.185.0"
   }
 }

package/dist/data-table/root/data-table-root.d.ts

@@ -125,11 +125,12 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * `csv()` returns the result as text: every row that passes the filter, in the
  * order and the columns on screen. Saving the file is up to you.
  *
- * `DataTable` has no `columns` attribute. Each `TableColumn` is part of the
- * schema, so you size a column with its own `width`. `Table` has `columns`
- * because its cells are markup you write and it can have no columns at all.
- * Written on `DataTable`, `columns` has no effect, so watch for it when you
- * move a table from `Table` to `DataTable`.
+ * Size a column with its own `width`, or every column at once with `columns`,
+ * a track list dealt out one track to a column in the order they are written,
+ * as `Table` deals it. A column's `width` wins in its place. **A table that
+ * serves its first page takes its widths from `columns`**: a server and a
+ * stylesheet can read the table's own attributes and not its columns', so the
+ * served rows are laid out at the widths the table draws.
  *
  * **The columns are an import of their own.** A column is the Table family's
  * `TableColumn`, which the data table does not register, so a page that writes
@@ -275,6 +276,18 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * it. No default, so a table that sets none writes nothing onto its host.
      */
     childField?: string;
+    /**
+     * The column tracks, as a grid track list such as `2fr 1fr max-content`,
+     * dealt out one track to a column in the order the columns are written. A
+     * column's own `width` wins in its place, and a column it does not reach
+     * takes the track a column with no `width` takes.
+     *
+     * **The one track list a server can send.** A server rendering this element
+     * has no columns to read a `width` from, and neither has a stylesheet laying
+     * out the rows a page served before the table upgrades, so a table sized here
+     * lays those rows out at the widths it draws.
+     */
+    columns: string;
     /**
      * The keys of the rows open at the start, separated by commas. Used until
      * `expanded` is set.
@@ -786,7 +799,13 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
     private get shownFields();
     /** The columns reduced to what the ordering needs. */
     private get axes();
-    /** The track list, from the columns if there are any. */
+    /**
+     * The track list: each column's `width`, or its track in `columns`, or the
+     * track a column with neither takes.
+     *
+     * A render that knows no columns, on a server or hydrating what one sent,
+     * has `columns` alone, and sends it as it is.
+     */
     private get template();
     /**
      * How many rows this draws before it is worth saying something, and why 2,000.

package/dist/data-table/root/data-table-root.js

@@ -8,6 +8,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
 import { edgeOf } from '../../table/edge.js';
+import { tracksOf } from '../../table/tracks.js';
 import '../../checkbox/index.js';
 import '../../pagination/index.js';
 import { toggledOpen } from '../keys.js';
@@ -28,6 +29,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.statusSlots = true;
         this.ascendingLabel = 'ascending';
         this.canceledLabel = 'Canceled';
+        this.columns = '';
         this.defaultExpanded = '';
         this.defaultFilter = '';
         this.defaultOrder = '';
@@ -573,11 +575,16 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     }
     get template() {
         const declared = this.shownColumns;
-        if (declared.length === 0) {
-            return '';
-        }
-        const tracks = declared.map((column) => column.track).join(' ');
-        return [...Array.from({ length: this.lead }, () => 'max-content'), tracks].join(' ');
+        const written = this.tableColumns;
+        const listed = tracksOf(this.columns, written.length);
+        const tracks = written.length === 0
+            ? this.columns
+            : declared
+                .map((column) => column.width ? column.track : listed[written.indexOf(column)] || column.track)
+                .join(' ');
+        return tracks
+            ? [...Array.from({ length: this.lead }, () => 'max-content'), tracks].join(' ')
+            : '';
     }
     static { this.COMFORTABLE = 2_000; }
     warnIfCrowded(drawn) {
@@ -1217,6 +1224,10 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         const pagination = this.tag('pagination');
         const counted = this.mode === 'server' ? Math.max(this.total, available) : matched;
         const countKnown = counted > 0 || (this.sourceKnown && !serving);
+        const held = serving &&
+            this.paginated &&
+            !countKnown &&
+            (!this.sourceKnown || this.servedRows.length >= this.pageSize);
         this.counts = {
             columns: columns.length ? columns.length + this.lead : undefined,
             rows: countKnown ? counted + 1 + (this.moreDrawn ? 1 : 0) : undefined,
@@ -1231,9 +1242,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         @scroll=${this.handleScroll}
       >
         <div part="head" role="row" aria-rowindex="1">
-          ${this.rowGrips && this.sourceKnown
-            ? this.renderGripHead(headStop && this.currentColumn === 0)
-            : nothing}${this.selectable && this.sourceKnown
+          ${this.rowGrips ? this.renderGripHead(headStop && this.currentColumn === 0) : nothing}${this.selectable
             ? this.renderSelectAll(headStop && this.currentColumn === this.selectAt)
             : nothing}${this.assignsByName && !this.hydrating
             ? this.orderedColumns.map((_, index) => html `<slot name=${`column-${index + 1}`} @slotchange=${this.handleSlotChange}></slot>`)
@@ -1247,7 +1256,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         ${this.renderMore(page)}${this.errorText === '' ? this.renderStatus(filled, 'gridcell') : this.renderError()}
       </div>
       ${this.errorText === '' ? this.renderLive(filled) : html `<span part="live" role="status">${this.errorText}</span>`}
-      <div part="footer">
+      <div part="footer" ?data-held=${held}>
         <slot name="footer"></slot>
         ${this.paginated
             ? html `<${pagination}
@@ -1557,6 +1566,9 @@ __decorate([
 __decorate([
     property({ attribute: 'child-field', reflect: true })
 ], HelixHeadlessDataTable.prototype, "childField", void 0);
+__decorate([
+    property()
+], HelixHeadlessDataTable.prototype, "columns", void 0);
 __decorate([
     property({ attribute: 'default-expanded' })
 ], HelixHeadlessDataTable.prototype, "defaultExpanded", void 0);

package/dist/table/root/table-root.d.ts

@@ -243,13 +243,11 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * **It is also the only track list a server can send.** The shim has no tree
      * to walk, so a render there knows of no columns and this attribute is the
      * whole answer: a table given one lays its grid out in the first paint, and a
-     * table sized only by its columns is one track wide until it upgrades.
+     * table sized only by its columns takes, until it upgrades, a track for each
+     * column at the width a column with no `width` takes (`helix.css`).
      *
-     * **Data Table has none of this, and should not.** Its columns are its schema
-     * rather than an option, so there is always a column to write a `width` on
-     * and a list here would be a second way to say what that says. This table's
-     * cells are markup, and a table written as rows of cells with no column
-     * declared in it has nowhere else to be sized from.
+     * Data Table takes the same list, for the same reason: a data table that
+     * serves its first page as rows is laid out by it before it upgrades.
      */
     columns: string;
     /**

package/dist/table/root/table-root.js

@@ -1,38 +1,12 @@
 import { __decorate } from "tslib";
-import { AriaForwardController, anchorAt, assignSlots, auditName, commaList, customElement, cycle, everyState, followLink, format, formatWords, HelixBeforeToggleEvent, HelixElement, HelixLoadMoreEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, HelixToggleEvent, inRowOrder, MixinCollection, onAndroid, parse, ReorderController, rangeAdd, reflectElements, requestChange, scrollingAncestor, sort, splitValues, toggleEvery, treeArrow, VIRTUAL_RULE, VirtualizeController, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorAt, assignSlots, auditName, commaList, customElement, cycle, everyState, followLink, format, formatWords, HelixBeforeToggleEvent, HelixElement, HelixLoadMoreEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, HelixToggleEvent, inRowOrder, MixinCollection, onAndroid, parse, ReorderController, rangeAdd, reflectElements, requestChange, scrollingAncestor, sort, toggleEvery, treeArrow, VIRTUAL_RULE, VirtualizeController, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import '../../checkbox/index.js';
 import { edgeOf } from '../column/table-column.js';
 import { TableGridController } from '../grid-controller.js';
-const tracksOf = (list, wanted) => {
-    const words = splitValues(list, ' ');
-    const valid = (track) => typeof CSS === 'undefined' || CSS.supports('grid-template-columns', track);
-    const tracks = [];
-    let names = '';
-    for (const one of words) {
-        if (tracks.length >= wanted) {
-            break;
-        }
-        if (one.startsWith('[')) {
-            names += `${one} `;
-            continue;
-        }
-        const repeat = /^repeat\(\s*(\d+)\s*,(.*)\)$/is.exec(one);
-        if (repeat) {
-            const inner = tracksOf(repeat[2] ?? '', wanted);
-            for (let time = 0; time < Number(repeat[1]) && tracks.length < wanted; time += 1) {
-                tracks.push(...inner.map((track, index) => (time === 0 && index === 0 ? names + track : track)));
-            }
-        }
-        else if (!/^repeat\(/i.test(one)) {
-            tracks.push(valid(names + one) ? names + one : '');
-        }
-        names = '';
-    }
-    return tracks.slice(0, wanted);
-};
+import { tracksOf } from '../tracks.js';
 const SHORT = 32;
 const FLOOR = '14ch';
 const SAMPLE = 200;

package/dist/table/tracks.d.ts

@@ -0,0 +1,20 @@
+/**
+ * The first `wanted` tracks of a track list, one entry each, so every declared
+ * column can take the one in its place.
+ *
+ * Split on the spaces between tracks and never inside a function, so
+ * `minmax(0, 1fr)` stays one track. A `repeat()` with a count is that many
+ * tracks, written out; an automatic one names no count and yields none. Line
+ * names go with the track after them.
+ *
+ * Everything above the split is a fact about a grid track list rather than
+ * about a value list, which is why only the split itself is shared.
+ *
+ * **A track the grid would refuse yields nothing either**, where the platform
+ * can say. One invalid track makes the whole `grid-template-columns` invalid,
+ * which a grid ignores in silence and draws as one column. That is the failure
+ * that once had `columns` deprecated, a list of headings handed over as widths,
+ * and dealt out a track at a time it costs the one column its width and no
+ * more.
+ */
+export declare const tracksOf: (list: string, wanted: number) => string[];

package/dist/table/tracks.js

@@ -0,0 +1,28 @@
+import { splitValues } from '@fusion.dev/helix-core';
+export const tracksOf = (list, wanted) => {
+    const words = splitValues(list, ' ');
+    const valid = (track) => typeof CSS === 'undefined' || CSS.supports('grid-template-columns', track);
+    const tracks = [];
+    let names = '';
+    for (const one of words) {
+        if (tracks.length >= wanted) {
+            break;
+        }
+        if (one.startsWith('[')) {
+            names += `${one} `;
+            continue;
+        }
+        const repeat = /^repeat\(\s*(\d+)\s*,(.*)\)$/is.exec(one);
+        if (repeat) {
+            const inner = tracksOf(repeat[2] ?? '', wanted);
+            for (let time = 0; time < Number(repeat[1]) && tracks.length < wanted; time += 1) {
+                tracks.push(...inner.map((track, index) => (time === 0 && index === 0 ? names + track : track)));
+            }
+        }
+        else if (!/^repeat\(/i.test(one)) {
+            tracks.push(valid(names + one) ? names + one : '');
+        }
+        names = '';
+    }
+    return tracks.slice(0, wanted);
+};