@fusion.dev/helix-headless 0.184.0 → 0.185.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.184.0",
+  "version": "0.185.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -49,14 +49,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.184.0",
-    "@fusion.dev/helix-icons": "0.184.0",
+    "@fusion.dev/helix-core": "0.185.0",
+    "@fusion.dev/helix-icons": "0.185.0",
     "tslib": "^2.8.1",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.184.0",
-    "@fusion.dev/helix-testing": "0.184.0",
+    "@fusion.dev/helix-cem": "0.185.0",
+    "@fusion.dev/helix-testing": "0.185.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.14.5",
     "@lit-labs/ssr": "^4.1.0",

package/types/jsx.d.ts

@@ -9428,6 +9428,16 @@ and the grid becomes a tree grid.
 Reflected, because the styled tier indents a tree grid's row headers by
 it. No default, so a table that sets none writes nothing onto its host. */
   childField?: (HelixHeadlessDataTable["childField"]) | undefined;
+  /** 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?: (HelixHeadlessDataTable["columns"]) | undefined;
   /** The keys of the rows open at the start, separated by commas. Used until
 `expanded` is set. */
   "default-expanded"?: (HelixHeadlessDataTable["defaultExpanded"]) | undefined;
@@ -9861,6 +9871,16 @@ and the grid becomes a tree grid.
 Reflected, because the styled tier indents a tree grid's row headers by
 it. No default, so a table that sets none writes nothing onto its host. */
   "prop:childField"?: (HelixHeadlessDataTable["childField"]) | undefined;
+  /** 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. */
+  "prop:columns"?: (HelixHeadlessDataTable["columns"]) | undefined;
   /** The keys of the rows open at the start, separated by commas. Used until
 `expanded` is set. */
   "attr:default-expanded"?: (HelixHeadlessDataTable["defaultExpanded"]) | undefined;
@@ -30132,13 +30152,11 @@ and each column may say otherwise.
 **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?: (HelixHeadlessTable["columns"]) | undefined;
   /** The keys of the rows whose rows are shown at the start, separated by
 commas. Used until `expanded` is set. */
@@ -30397,13 +30415,11 @@ and each column may say otherwise.
 **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. */
   "prop:columns"?: (HelixHeadlessTable["columns"]) | undefined;
   /** The keys of the rows whose rows are shown at the start, separated by
 commas. Used until `expanded` is set. */
@@ -44390,11 +44406,12 @@ export type CustomElements = {
    * `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
@@ -44420,6 +44437,15 @@ export type CustomElements = {
    *
    * Reflected, because the styled tier indents a tree grid's row headers by
    * it. No default, so a table that sets none writes nothing onto its host.
+   * - `columns`: 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.
    * - `default-expanded`/`defaultExpanded`: The keys of the rows open at the start, separated by commas. Used until
    * `expanded` is set.
    * - `default-filter`/`defaultFilter`: The starting search query, used until `filter` is set.
@@ -61412,13 +61438,11 @@ export type CustomElements = {
    * **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.
    * - `default-expanded`/`defaultExpanded`: The keys of the rows whose rows are shown at the start, separated by
    * commas. Used until `expanded` is set.
    * - `default-selected`/`defaultSelected`: The keys selected at the start, separated by commas. Used until `selected`
@@ -74214,11 +74238,12 @@ export type CustomElementsSolidJs = {
    * `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
@@ -74244,6 +74269,15 @@ export type CustomElementsSolidJs = {
    *
    * Reflected, because the styled tier indents a tree grid's row headers by
    * it. No default, so a table that sets none writes nothing onto its host.
+   * - `columns`: 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.
    * - `default-expanded`/`defaultExpanded`: The keys of the rows open at the start, separated by commas. Used until
    * `expanded` is set.
    * - `default-filter`/`defaultFilter`: The starting search query, used until `filter` is set.
@@ -91431,13 +91465,11 @@ export type CustomElementsSolidJs = {
    * **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.
    * - `default-expanded`/`defaultExpanded`: The keys of the rows whose rows are shown at the start, separated by
    * commas. Used until `expanded` is set.
    * - `default-selected`/`defaultSelected`: The keys selected at the start, separated by commas. Used until `selected`

package/types/vue.d.ts

@@ -4889,6 +4889,16 @@ and the grid becomes a tree grid.
 Reflected, because the styled tier indents a tree grid's row headers by
 it. No default, so a table that sets none writes nothing onto its host. */
   childField?: (HelixHeadlessDataTable["childField"]) | undefined;
+  /** 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?: (HelixHeadlessDataTable["columns"]) | undefined;
   /** The keys of the rows open at the start, separated by commas. Used until
 `expanded` is set. */
   "default-expanded"?: (HelixHeadlessDataTable["defaultExpanded"]) | undefined;
@@ -15441,13 +15451,11 @@ and each column may say otherwise.
 **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?: (HelixHeadlessTable["columns"]) | undefined;
   /** The keys of the rows whose rows are shown at the start, separated by
 commas. Used until `expanded` is set. */
@@ -19509,7 +19517,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCopyButtonVueProps,
     HelixHeadlessCopyButtonVueEvents
   >;
-  /** Declare the columns as 'TableColumn' children and pass the rows as an array. The schema stays readable in the HTML, and the rows can be windowed, which ten thousand row elements cannot be.  '''html <helix-headless-data-table .rows=${rows} sort="name:asc" page-size="20">   <helix-headless-table-column field="name" sortable>Name</helix-headless-table-column>   <helix-headless-table-column field="size" text-align="end" sortable .cell=${bytes}>Size</helix-headless-table-column> </helix-headless-data-table> '''  For a short table written out by hand, use 'Table', which takes rows as markup.  Sort and filter apply to the whole set, including the rows on other pages.  **Write the first page as rows, so the served HTML carries the values.** The table reads each cell from its column, and a server does not pass the column children to this element, so on its own it serves the headings and no values. Write the first page under the columns as 'TableRow' and 'TableCell' elements, in the table's sort and page size and formatted as its columns draw them. The table shows your rows until 'rows' holds a row, then draws its own in their place and leaves yours in the page, unshown. A development build warns when the two differ. In React, map the first page of the same array in the same server component.  'selectable' adds a column of checkboxes, keyed on 'row-key':  - A row is selected by its key, so the selection survives a sort, a filter,   and a page change. - 'selected' holds the chosen keys, comma separated, the same shape 'Listbox'   uses for a multiple choice. As with 'sort', writing it applies the   selection, and 'default-selected' holds what the markup declared. - The checkbox in the heading selects every row in the result, across pages,   and shows a dash while only some are chosen. - Shift with a press on a checkbox selects every row between it and the row   last chosen. - 'selection-behavior="replace"' makes a press or a move select the row   alone, as a file list does. Control or Command with a press adds or takes   out one row, and Shift with a press selects every row from the one last   chosen.  To act on a single row, such as opening it, put a link or a button in a cell.  **Keyboard.** The grid is one tab stop, and the arrow keys move between its cells, the headings included.  | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the heading row and the 'load-more' row included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the grid. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. | | Enter, Space on a sortable heading | Sorts by the column. | | Enter, Space on the 'load-more' row | Sends 'helix-load-more'. | | 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. | | 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. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | Right on a row header in a tree grid | Opens a closed row, and moves one cell along an open one. | | Left on a row header in a tree grid | Closes an open row, and moves to the parent of a closed one. | | A letter or a word | Moves to the next row whose row header starts with what you typed. |  'selected' and 'expanded' hold their keys in the order of the rows, as do 'helix-select', 'helix-selected' and 'helix-expand'.  Each row is named by its row header, the column marked 'row-header', or the first column with a 'field' where none is. A screen reader says it as a reader moves between rows.  **Rows that hold rows.** 'child-field' names the field that holds a row's child rows, and the grid becomes a tree grid. The row header column draws a mark that a press opens and closes a row by, and 'expanded' holds the keys of the open rows, which 'row-key' names. Right on a closed row's header opens it, Left on an open one closes it, and Left on a child moves to its parent. A sort orders the rows under each parent, and a search shows the rows that lead to each match, open.  'load-more' adds a row after the last one with a button that sends 'helix-load-more'. A 'windowed' table also sends it by itself once a reader scrolls within one screen of the end, once for each number of rows. Add the next rows to 'rows', and set 'loading' while they are on their way.  When a fetch fails, set 'error-text', such as "The files did not load", and put a button that tries again in the 'error' slot. The line shows after the rows in place of the empty and loading lines, the live region says it, and the table takes the 'error' state. Clear it once you try again.  The controls inside the cells leave the tab order, so Tab moves past the whole grid. A windowed table keeps the row holding focus drawn while the rest scroll away.  People can resize and reorder the columns. 'resizable' on a column puts a separator on its edge. 'reorderable' on the table puts a grip on each heading that has a 'field', moved by dragging or with the arrow keys. The new order is written to 'order' as a list of fields. Your markup is not rewritten: the table assigns the headings to its header in that order.  **'reorderable-rows' lets people move rows.** A column of grips leads each row, named by 'move-row-label'. Drag a grip to move its row, and the table scrolls near an edge. Or press Space or Enter on a grip, or click it, to pick up its row, move it with Down and Up, Home and End, and press Space or Enter again to drop it. A click on another row drops it there, and Escape puts it back. The table says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder' with 'kind' set to 'row', whose 'keys' hold every key of 'rows' in the new order. **You move the rows**: set 'rows' to the new order, and the table draws it. Set 'row-key', so a row is known by its key once it has moved. The grips do nothing while a 'sort' is set, since the sort decides the order, and a tree grid draws none.  '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'.  **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 one imports the Table entry beside the data table:  '''js import '@fusion.dev/helix/data-table' import '@fusion.dev/helix/table' '''  In development, a data table holding a column nobody registered says so once the page has loaded, with the line to add. */
+  /** Declare the columns as 'TableColumn' children and pass the rows as an array. The schema stays readable in the HTML, and the rows can be windowed, which ten thousand row elements cannot be.  '''html <helix-headless-data-table .rows=${rows} sort="name:asc" page-size="20">   <helix-headless-table-column field="name" sortable>Name</helix-headless-table-column>   <helix-headless-table-column field="size" text-align="end" sortable .cell=${bytes}>Size</helix-headless-table-column> </helix-headless-data-table> '''  For a short table written out by hand, use 'Table', which takes rows as markup.  Sort and filter apply to the whole set, including the rows on other pages.  **Write the first page as rows, so the served HTML carries the values.** The table reads each cell from its column, and a server does not pass the column children to this element, so on its own it serves the headings and no values. Write the first page under the columns as 'TableRow' and 'TableCell' elements, in the table's sort and page size and formatted as its columns draw them. The table shows your rows until 'rows' holds a row, then draws its own in their place and leaves yours in the page, unshown. A development build warns when the two differ. In React, map the first page of the same array in the same server component.  'selectable' adds a column of checkboxes, keyed on 'row-key':  - A row is selected by its key, so the selection survives a sort, a filter,   and a page change. - 'selected' holds the chosen keys, comma separated, the same shape 'Listbox'   uses for a multiple choice. As with 'sort', writing it applies the   selection, and 'default-selected' holds what the markup declared. - The checkbox in the heading selects every row in the result, across pages,   and shows a dash while only some are chosen. - Shift with a press on a checkbox selects every row between it and the row   last chosen. - 'selection-behavior="replace"' makes a press or a move select the row   alone, as a file list does. Control or Command with a press adds or takes   out one row, and Shift with a press selects every row from the one last   chosen.  To act on a single row, such as opening it, put a link or a button in a cell.  **Keyboard.** The grid is one tab stop, and the arrow keys move between its cells, the headings included.  | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the heading row and the 'load-more' row included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the grid. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. | | Enter, Space on a sortable heading | Sorts by the column. | | Enter, Space on the 'load-more' row | Sends 'helix-load-more'. | | 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. | | 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. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | Right on a row header in a tree grid | Opens a closed row, and moves one cell along an open one. | | Left on a row header in a tree grid | Closes an open row, and moves to the parent of a closed one. | | A letter or a word | Moves to the next row whose row header starts with what you typed. |  'selected' and 'expanded' hold their keys in the order of the rows, as do 'helix-select', 'helix-selected' and 'helix-expand'.  Each row is named by its row header, the column marked 'row-header', or the first column with a 'field' where none is. A screen reader says it as a reader moves between rows.  **Rows that hold rows.** 'child-field' names the field that holds a row's child rows, and the grid becomes a tree grid. The row header column draws a mark that a press opens and closes a row by, and 'expanded' holds the keys of the open rows, which 'row-key' names. Right on a closed row's header opens it, Left on an open one closes it, and Left on a child moves to its parent. A sort orders the rows under each parent, and a search shows the rows that lead to each match, open.  'load-more' adds a row after the last one with a button that sends 'helix-load-more'. A 'windowed' table also sends it by itself once a reader scrolls within one screen of the end, once for each number of rows. Add the next rows to 'rows', and set 'loading' while they are on their way.  When a fetch fails, set 'error-text', such as "The files did not load", and put a button that tries again in the 'error' slot. The line shows after the rows in place of the empty and loading lines, the live region says it, and the table takes the 'error' state. Clear it once you try again.  The controls inside the cells leave the tab order, so Tab moves past the whole grid. A windowed table keeps the row holding focus drawn while the rest scroll away.  People can resize and reorder the columns. 'resizable' on a column puts a separator on its edge. 'reorderable' on the table puts a grip on each heading that has a 'field', moved by dragging or with the arrow keys. The new order is written to 'order' as a list of fields. Your markup is not rewritten: the table assigns the headings to its header in that order.  **'reorderable-rows' lets people move rows.** A column of grips leads each row, named by 'move-row-label'. Drag a grip to move its row, and the table scrolls near an edge. Or press Space or Enter on a grip, or click it, to pick up its row, move it with Down and Up, Home and End, and press Space or Enter again to drop it. A click on another row drops it there, and Escape puts it back. The table says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder' with 'kind' set to 'row', whose 'keys' hold every key of 'rows' in the new order. **You move the rows**: set 'rows' to the new order, and the table draws it. Set 'row-key', so a row is known by its key once it has moved. The grips do nothing while a 'sort' is set, since the sort decides the order, and a tree grid draws none.  '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.  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 one imports the Table entry beside the data table:  '''js import '@fusion.dev/helix/data-table' import '@fusion.dev/helix/table' '''  In development, a data table holding a column nobody registered says so once the page has loaded, with the line to add. */
   "helix-headless-data-table": DefineCustomElement<
     HelixHeadlessDataTable,
     HelixHeadlessDataTableVueProps,