@igne-agency/react-web-ui 0.3.1 → 0.4.0

package/dist/data-table/data-table.css

@@ -1,6 +1,6 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._root_i4wmq_3 {
+  ._root_k21i7_3 {
     --_table-radius: var(
     	--table-radius,
     	var(--sys-radius-md)
@@ -74,14 +74,14 @@
     color: var(--sys-color-text);
     min-block-size: 0;
   }
-  ._toolbar_i4wmq_77 {
+  ._toolbar_k21i7_77 {
     display: flex;
     flex-shrink: 0;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--sys-unit-8);
   }
-  ._scrollFrame_i4wmq_84 {
+  ._scrollFrame_k21i7_84 {
     position: relative;
     display: flex;
     flex: 0 1 auto;
@@ -89,16 +89,16 @@
     min-block-size: 0;
     timeline-scope: --table-scroll;
   }
-  ._stale_i4wmq_92 {
+  ._stale_k21i7_92 {
     display: flex;
     flex: 1 1 0;
     min-inline-size: 0;
     min-block-size: 0;
   }
-  ._staleOverlay_i4wmq_98 {
+  ._staleOverlay_k21i7_98 {
     border-radius: var(--_table-radius);
   }
-  ._contentWrap_i4wmq_101 {
+  ._contentWrap_k21i7_101 {
     position: relative;
     isolation: isolate;
     flex: 1 1 0;
@@ -109,16 +109,16 @@
     background: var(--sys-color-surface);
     scroll-timeline: --table-scroll inline;
   }
-  ._contentWrap_i4wmq_101 {
+  ._contentWrap_k21i7_101 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._contentWrap_i4wmq_101:focus-visible {
+  ._contentWrap_k21i7_101:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
   @supports (animation-timeline: scroll()) {
-    ._scrollFrame_i4wmq_84::before,
-    ._scrollFrame_i4wmq_84::after {
+    ._scrollFrame_k21i7_84::before,
+    ._scrollFrame_k21i7_84::after {
       position: absolute;
       z-index: 1;
       inset-block: 0 var(--table-scrollbar-block, 0px);
@@ -129,24 +129,24 @@
       animation-fill-mode: both;
       animation-timeline: --table-scroll;
     }
-    ._scrollFrame_i4wmq_84:has(._th_i4wmq_132[data-sticky=start])::before,
-    ._scrollFrame_i4wmq_84:has(._th_i4wmq_132[data-sticky=end])::after {
+    ._scrollFrame_k21i7_84:has(._th_k21i7_132[data-sticky=start])::before,
+    ._scrollFrame_k21i7_84:has(._th_k21i7_132[data-sticky=end])::after {
       content: "";
     }
-    ._scrollFrame_i4wmq_84::before {
+    ._scrollFrame_k21i7_84::before {
       inset-inline-start: var(--table-sticky-total, 0px);
       background: linear-gradient(to right, var(--_table-edge-shadow), transparent);
-      animation-name: _edgeStart_i4wmq_1;
+      animation-name: _edgeStart_k21i7_1;
       animation-range: var(--_table-edge-slack) calc(var(--_table-edge-cue) + var(--_table-edge-slack));
     }
-    ._scrollFrame_i4wmq_84::after {
+    ._scrollFrame_k21i7_84::after {
       inset-inline-end: calc(var(--table-sticky-end-total, 0px) + var(--table-scrollbar-inline, 0px));
       background: linear-gradient(to left, var(--_table-edge-shadow), transparent);
-      animation-name: _edgeEnd_i4wmq_1;
+      animation-name: _edgeEnd_k21i7_1;
       animation-range: calc(100% - var(--_table-edge-cue) - var(--_table-edge-slack)) calc(100% - var(--_table-edge-slack));
     }
   }
-  @keyframes _edgeStart_i4wmq_1 {
+  @keyframes _edgeStart_k21i7_1 {
     from {
       opacity: 0;
     }
@@ -154,7 +154,7 @@
       opacity: 1;
     }
   }
-  @keyframes _edgeEnd_i4wmq_1 {
+  @keyframes _edgeEnd_k21i7_1 {
     from {
       opacity: 1;
     }
@@ -162,7 +162,7 @@
       opacity: 0;
     }
   }
-  ._refreshFailed_i4wmq_165 {
+  ._refreshFailed_k21i7_165 {
     display: flex;
     flex-shrink: 0;
     flex-wrap: wrap;
@@ -174,7 +174,7 @@
     color: var(--sys-color-error-fg);
     font: var(--sys-font-label-medium);
   }
-  ._table_i4wmq_177 {
+  ._table_k21i7_177 {
     inline-size: max-content;
     min-inline-size: var(--_table-min-inline);
     border-collapse: separate;
@@ -182,13 +182,13 @@
     font: var(--sys-font-body-medium);
     font-variant-numeric: tabular-nums;
   }
-  ._thead_i4wmq_185 {
+  ._thead_k21i7_185 {
     position: sticky;
     inset-block-start: 0;
     z-index: 2;
     background: var(--_table-header-bg);
   }
-  ._th_i4wmq_132 {
+  ._th_k21i7_132 {
     block-size: var(--_table-header-min-block);
     padding: var(--_table-header-pad-y) var(--_table-cell-pad-x);
     vertical-align: middle;
@@ -197,10 +197,10 @@
     font: var(--sys-font-label-small);
     white-space: nowrap;
   }
-  ._th_i4wmq_132:has(> ._sortToggle_i4wmq_200) {
+  ._th_k21i7_132:has(> ._sortToggle_k21i7_200) {
     padding: 0;
   }
-  ._sortToggle_i4wmq_200 {
+  ._sortToggle_k21i7_200 {
     display: flex;
     align-items: center;
     gap: var(--sys-unit-4);
@@ -210,18 +210,18 @@
     color: inherit;
     font: inherit;
   }
-  ._sortToggle_i4wmq_200 {
+  ._sortToggle_k21i7_200 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._sortToggle_i4wmq_200:focus-visible {
+  ._sortToggle_k21i7_200:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._sortToggle_i4wmq_200 {
+  ._sortToggle_k21i7_200 {
     position: relative;
     isolation: isolate;
   }
-  ._sortToggle_i4wmq_200::after {
+  ._sortToggle_k21i7_200::after {
     content: "";
     position: absolute;
     z-index: -1;
@@ -232,86 +232,91 @@
     pointer-events: none;
   }
   @media not (prefers-reduced-motion) {
-    ._sortToggle_i4wmq_200::after {
+    ._sortToggle_k21i7_200::after {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._sortToggle_i4wmq_200:hover:not(:disabled, [data-disabled])::after {
+  ._sortToggle_k21i7_200:hover:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-hover);
   }
-  ._sortToggle_i4wmq_200:active:not(:disabled, [data-disabled])::after {
+  ._sortToggle_k21i7_200:active:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-pressed);
   }
-  ._sortToggle_i4wmq_200 {
+  ._sortToggle_k21i7_200 {
     outline-offset: calc(-1 * var(--sys-focus-ring-width));
   }
-  ._th_i4wmq_132[data-numeric=true] ._sortToggle_i4wmq_200 {
+  ._th_k21i7_132[data-numeric=true] ._sortToggle_k21i7_200 {
     justify-content: flex-end;
   }
-  ._sortIconIdle_i4wmq_251 {
+  ._sortIcon_k21i7_251 {
+    display: inline-flex;
+    flex-shrink: 0;
+    font-size: var(--table-sort-icon-size, 1em);
+  }
+  ._sortIcon_k21i7_251[data-sort=none] {
     color: color-mix(in oklab, var(--_table-header-fg) 55%, var(--_table-header-bg));
   }
-  ._th_i4wmq_132[data-fit=true],
-  ._td_i4wmq_255[data-fit=true] {
+  ._th_k21i7_132[data-fit=true],
+  ._td_k21i7_260[data-fit=true] {
     inline-size: 1px;
     white-space: nowrap;
   }
-  ._th_i4wmq_132[data-numeric=true],
-  ._td_i4wmq_255[data-numeric=true] {
+  ._th_k21i7_132[data-numeric=true],
+  ._td_k21i7_260[data-numeric=true] {
     text-align: end;
     font-variant-numeric: tabular-nums;
   }
-  ._th_i4wmq_132[data-sticky],
-  ._td_i4wmq_255[data-sticky] {
+  ._th_k21i7_132[data-sticky],
+  ._td_k21i7_260[data-sticky] {
     position: sticky;
     z-index: 1;
   }
-  ._th_i4wmq_132[data-sticky] {
+  ._th_k21i7_132[data-sticky] {
     background: var(--_table-header-bg);
   }
-  ._td_i4wmq_255[data-sticky] {
+  ._td_k21i7_260[data-sticky] {
     background: var(--sys-color-surface);
   }
   @media not (prefers-reduced-motion) {
-    ._td_i4wmq_255[data-sticky] {
+    ._td_k21i7_260[data-sticky] {
       transition: background-color var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._row_i4wmq_280[data-stripe=true] ._td_i4wmq_255[data-sticky] {
+  ._row_k21i7_285[data-stripe=true] ._td_k21i7_260[data-sticky] {
     background: var(--_table-row-stripe);
   }
-  ._row_i4wmq_280:hover ._td_i4wmq_255[data-sticky] {
+  ._row_k21i7_285:hover ._td_k21i7_260[data-sticky] {
     background: var(--_table-row-hover);
   }
   @media not (prefers-reduced-motion) {
-    ._row_i4wmq_280 {
+    ._row_k21i7_285 {
       transition: background-color var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._row_i4wmq_280[data-stripe=true] {
+  ._row_k21i7_285[data-stripe=true] {
     background: var(--_table-row-stripe);
   }
-  ._row_i4wmq_280:hover {
+  ._row_k21i7_285:hover {
     background: var(--_table-row-hover);
   }
-  ._td_i4wmq_255 {
+  ._td_k21i7_260 {
     padding: var(--_table-cell-pad-y) var(--_table-cell-pad-x);
     vertical-align: middle;
     white-space: nowrap;
   }
-  ._subRow_i4wmq_302 {
+  ._subRow_k21i7_307 {
     background: var(--_table-subrow-bg);
   }
-  ._subRow_i4wmq_302 > td {
+  ._subRow_k21i7_307 > td {
     padding: 0;
   }
-  ._subRow_i4wmq_302 > ._td_i4wmq_255[data-sticky] {
+  ._subRow_k21i7_307 > ._td_k21i7_260[data-sticky] {
     background: var(--_table-subrow-bg);
   }
-  ._skeletonBar_i4wmq_311 {
+  ._skeletonBar_k21i7_316 {
     min-inline-size: var(--sys-unit-16);
   }
-  ._busyCaption_i4wmq_314 {
+  ._busyCaption_k21i7_319 {
     position: absolute;
     overflow: hidden;
     clip-path: inset(50%);
@@ -319,23 +324,23 @@
     block-size: 1px;
     white-space: nowrap;
   }
-  ._stateCell_i4wmq_322 {
+  ._stateCell_k21i7_327 {
     padding: var(--sys-unit-24) var(--_table-cell-pad-x);
     color: var(--sys-color-text-muted);
     text-align: center;
   }
-  ._errorState_i4wmq_327 {
+  ._errorState_k21i7_332 {
     color: var(--sys-color-error-fg);
   }
-  ._pagination_i4wmq_330 {
+  ._pagination_k21i7_335 {
     flex-shrink: 0;
     align-self: flex-end;
   }
-  ._selectionContainer_i4wmq_334 {
+  ._selectionContainer_k21i7_339 {
     container: selection-bar/inline-size;
     min-inline-size: 0;
   }
-  ._selectionBar_i4wmq_338 {
+  ._selectionBar_k21i7_343 {
     --_selection-stagger: var(
     	--selection-stagger,
     	calc(var(--sys-motion-instant) / 4)
@@ -364,14 +369,14 @@
     color: var(--sys-color-text);
     white-space: nowrap;
   }
-  ._selectionBar_i4wmq_338 {
+  ._selectionBar_k21i7_343 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._selectionBar_i4wmq_338:focus-visible {
+  ._selectionBar_k21i7_343:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._selectionBar_i4wmq_338::before {
+  ._selectionBar_k21i7_343::before {
     position: absolute;
     inset: 0;
     z-index: -1;
@@ -381,80 +386,80 @@
     opacity: 0;
     scale: 0.98 0.8;
   }
-  ._selectionBar_i4wmq_338[data-selected] {
+  ._selectionBar_k21i7_343[data-selected] {
     --_selection-text-inset: var(--sys-unit-6);
     padding-inline: var(--_selection-pad);
   }
-  ._selectionBar_i4wmq_338[data-selected]::before {
+  ._selectionBar_k21i7_343[data-selected]::before {
     opacity: 1;
     scale: 1;
   }
   @media not (prefers-reduced-motion) {
-    ._selectionBar_i4wmq_338 {
+    ._selectionBar_k21i7_343 {
       transition: padding-inline var(--sys-motion-instant) var(--sys-motion-accelerate);
     }
-    ._selectionBar_i4wmq_338::before {
+    ._selectionBar_k21i7_343::before {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-accelerate), scale var(--sys-motion-instant) var(--sys-motion-accelerate);
     }
-    ._selectionBar_i4wmq_338[data-selected] {
+    ._selectionBar_k21i7_343[data-selected] {
       transition-duration: var(--sys-motion-short);
       transition-timing-function: var(--sys-motion-emphasized);
     }
-    ._selectionBar_i4wmq_338[data-selected]::before {
+    ._selectionBar_k21i7_343[data-selected]::before {
       transition-duration: var(--sys-motion-short);
       transition-timing-function: var(--sys-motion-emphasized);
     }
   }
-  ._selectionSummary_i4wmq_408 {
+  ._selectionSummary_k21i7_413 {
     display: grid;
     flex-shrink: 0;
     align-items: center;
     padding-inline-start: var(--_selection-text-inset);
   }
   @media not (prefers-reduced-motion) {
-    ._selectionSummary_i4wmq_408 {
+    ._selectionSummary_k21i7_413 {
       transition: padding-inline-start var(--sys-motion-instant) var(--sys-motion-accelerate);
     }
-    ._selectionBar_i4wmq_338[data-selected] ._selectionSummary_i4wmq_408 {
+    ._selectionBar_k21i7_343[data-selected] ._selectionSummary_k21i7_413 {
       transition-duration: var(--sys-motion-short);
       transition-timing-function: var(--sys-motion-emphasized);
     }
   }
-  ._selectionTotal_i4wmq_423,
-  ._selectionCount_i4wmq_424,
-  ._selectionMeasure_i4wmq_425 {
+  ._selectionTotal_k21i7_428,
+  ._selectionCount_k21i7_429,
+  ._selectionMeasure_k21i7_430 {
     grid-area: 1/1;
     font: var(--sys-font-body-medium);
   }
-  ._selectionTotal_i4wmq_423 {
+  ._selectionTotal_k21i7_428 {
     color: var(--sys-color-text-muted);
   }
-  ._selectionCount_i4wmq_424 {
+  ._selectionCount_k21i7_429 {
     font-variant-numeric: tabular-nums;
   }
-  ._selectionBar_i4wmq_338:not([data-selected]) ._selectionCount_i4wmq_424 {
+  ._selectionBar_k21i7_343:not([data-selected]) ._selectionCount_k21i7_429 {
     opacity: 0;
     translate: 0 var(--sys-unit-2);
   }
-  ._selectionBar_i4wmq_338[data-selected] ._selectionCount_i4wmq_424 {
+  ._selectionBar_k21i7_343[data-selected] ._selectionCount_k21i7_429 {
     opacity: 1;
     translate: 0;
   }
-  ._selectionMeasure_i4wmq_425 {
+  ._selectionMeasure_k21i7_430 {
     visibility: hidden;
     font-variant-numeric: tabular-nums;
   }
-  ._selectionBar_i4wmq_338[data-selected] ._selectionTotal_i4wmq_423 {
+  ._selectionBar_k21i7_343[data-selected] ._selectionTotal_k21i7_428 {
     opacity: 0;
     translate: 0 calc(-1 * var(--sys-unit-2));
   }
   @media not (prefers-reduced-motion) {
-    ._selectionTotal_i4wmq_423,
-    ._selectionCount_i4wmq_424 {
+    ._selectionTotal_k21i7_428,
+    ._selectionCount_k21i7_429 {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), translate var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._selectionStatus_i4wmq_457 {
+  ._selectionStatus_k21i7_462 {
     position: absolute;
     overflow: hidden;
     clip-path: inset(50%);
@@ -462,40 +467,40 @@
     block-size: 1px;
     white-space: nowrap;
   }
-  ._selectionActions_i4wmq_465 {
+  ._selectionActions_k21i7_470 {
     display: flex;
     flex: 1 1 auto;
     flex-wrap: nowrap;
     align-items: center;
     gap: var(--_selection-pad);
   }
-  ._selectionActions_i4wmq_465 > * {
+  ._selectionActions_k21i7_470 > * {
     opacity: 1;
   }
-  ._selectionActions_i4wmq_465[inert] {
+  ._selectionActions_k21i7_470[inert] {
     visibility: hidden;
   }
-  ._selectionActions_i4wmq_465[inert] > * {
+  ._selectionActions_k21i7_470[inert] > * {
     opacity: 0;
   }
   @media not (prefers-reduced-motion) {
-    ._selectionActions_i4wmq_465 {
+    ._selectionActions_k21i7_470 {
       transition: visibility var(--sys-motion-instant);
     }
-    ._selectionActions_i4wmq_465 > * {
+    ._selectionActions_k21i7_470 > * {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
     }
-    ._selectionActions_i4wmq_465:not([inert]) > :nth-child(1) {
+    ._selectionActions_k21i7_470:not([inert]) > :nth-child(1) {
       transition-delay: var(--_selection-stagger);
     }
-    ._selectionActions_i4wmq_465:not([inert]) > :nth-child(2) {
+    ._selectionActions_k21i7_470:not([inert]) > :nth-child(2) {
       transition-delay: calc(var(--_selection-stagger) * 2);
     }
   }
-  ._selectionSelectAll_i4wmq_495[data-starting-style], ._selectionSelectAll_i4wmq_495[data-ending-style] {
+  ._selectionSelectAll_k21i7_500[data-starting-style], ._selectionSelectAll_k21i7_500[data-ending-style] {
     opacity: 0;
   }
-  ._selectionBulk_i4wmq_498 {
+  ._selectionBulk_k21i7_503 {
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
@@ -503,12 +508,12 @@
     margin-inline-start: auto;
   }
   @container selection-bar (max-width: 36rem) {
-    ._selectionBar_i4wmq_338 {
+    ._selectionBar_k21i7_343 {
       flex-wrap: wrap;
       overflow-x: visible;
       row-gap: var(--_selection-pad);
     }
-    ._selectionActions_i4wmq_465 {
+    ._selectionActions_k21i7_470 {
       flex-wrap: wrap;
     }
   }

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

@@ -1,8 +1,9 @@
 import type { ReactTable } from "@tanstack/react-table";
 import type { ReactNode } from "react";
-import { type PaginationIndexProps } from "../components/pagination/pagination.tsx";
+import { type PaginationContentProps, type PaginationRootProps } from "../components/pagination/pagination.tsx";
 import type { RowSelectionView } from "../lib/hooks/use-row-selection.ts";
 import { DataTableContent } from "./data-table-content.tsx";
+import { Body, Cell, ErrorMessage, Frame, Head, HeaderCell, HeaderRow, LoadingCaption, PlaceholderRows, RefreshFailed, Row, Scroller, SortButton, StaleOverlay, StateRow, SubRow, Table } from "./data-table-parts.tsx";
 import { DataTableSelectionBar } from "./data-table-selection.tsx";
 import type { DataTableStatus } from "./resolve-view.ts";
 import { type DataTableFeatures } from "./table-features.ts";
@@ -26,6 +27,7 @@ export type DataTableRootProps<TData extends Record<string, unknown>> = Readonly
     children: ReactNode;
     className?: string;
 }>;
+/** Holds the table instance and the injected query state for the parts inside it. */
 declare const Root: <TData extends Record<string, unknown>>({ table, selection, status, isFetching, onRetry, children, className, }: DataTableRootProps<TData>) => ReactNode;
 export type DataTableToolbarProps = Readonly<{
     children: ReactNode;
@@ -33,39 +35,54 @@ export type DataTableToolbarProps = Readonly<{
 }>;
 /** Layout slot above the table for search, filters and actions. */
 declare const Toolbar: ({ children, className, }: DataTableToolbarProps) => ReactNode;
-export type DataTablePaginationProps = Readonly<{
-    /** The page-size select's label, such as "Rows per page". */
-    pageSizeLabel: string;
-    /** What the index says, such as `Page 3 of 12`, from where the table stands. */
-    indexLabel: PaginationIndexProps["label"];
-    /** The first-page button's name, such as "First page". */
-    firstLabel: string;
-    /** The previous-page button's name, such as "Previous page". */
-    previousLabel: string;
-    /** The next-page button's name, such as "Next page". */
-    nextLabel: string;
-    /** The last-page button's name, such as "Last page". */
-    lastLabel: string;
-    className?: string;
-}>;
+type TableBoundPagination = "pageIndex" | "pageCount" | "pageSize" | "pageSizes" | "onPageIndexChange" | "onPageSizeChange";
+export type DataTablePaginationProps = Omit<PaginationRootProps, TableBoundPagination | "children"> & ((PaginationContentProps & Readonly<{
+    children?: undefined;
+}>) | (Readonly<{
+    /** The `Pagination` parts, such as `Pagination.PageSize`, `Pagination.Index` and `Pagination.Controls`, in place of the ready-made pager. */
+    children: ReactNode;
+}> & Readonly<Partial<Record<keyof PaginationContentProps, undefined>>>));
 /**
- * The kit's `Pagination`, driven by the instance's pagination API (built with
- * `manualPagination` + server `rowCount`). The page sizes come from the
- * table's `meta.pageSizeOptions`, and picking one returns to the first page.
+ * The pager driven by the instance's pagination API (built with
+ * `manualPagination` + server `rowCount`): the ready-made `Pagination` from its
+ * labels and icons, or a `Pagination.Root` holding the parts it is given. The
+ * page sizes come from the table's `meta.pageSizeOptions`, and picking one
+ * returns to the first page.
  */
-declare const DataTablePagination: ({ pageSizeLabel, indexLabel, firstLabel, previousLabel, nextLabel, lastLabel, className, }: DataTablePaginationProps) => ReactNode;
+declare const DataTablePagination: (props: DataTablePaginationProps) => ReactNode;
 type DataTableParts = Readonly<{
     Root: typeof Root;
     Toolbar: typeof Toolbar;
     Content: typeof DataTableContent;
     Pagination: typeof DataTablePagination;
     SelectionBar: typeof DataTableSelectionBar;
+    RefreshFailed: typeof RefreshFailed;
+    Frame: typeof Frame;
+    Scroller: typeof Scroller;
+    StaleOverlay: typeof StaleOverlay;
+    Table: typeof Table;
+    LoadingCaption: typeof LoadingCaption;
+    Head: typeof Head;
+    HeaderRow: typeof HeaderRow;
+    HeaderCell: typeof HeaderCell;
+    SortButton: typeof SortButton;
+    Body: typeof Body;
+    Row: typeof Row;
+    Cell: typeof Cell;
+    SubRow: typeof SubRow;
+    PlaceholderRows: typeof PlaceholderRows;
+    StateRow: typeof StateRow;
+    ErrorMessage: typeof ErrorMessage;
 }>;
 /**
  * Composite data table over a TanStack Table instance. `Root` holds the
  * instance and the injected query state in context; the parts lay it out:
- * `Toolbar`, `SelectionBar`, `Content` and `Pagination`. A nested sub-table
- * gets its own `DataTable.Root`, with its own instance and context.
+ * `Toolbar`, `SelectionBar`, `Content` and `Pagination`. `Content` is the
+ * whole table; where a table needs other markup, compose its parts instead:
+ * `RefreshFailed`, then a `Frame` holding a `Scroller` and a `StaleOverlay`,
+ * the `Scroller` holding the `Table` and its rows and cells, with
+ * `useDataTableView` to pick the body. A nested sub-table gets its own
+ * `DataTable.Root`, with its own instance and context.
  *
  * @example
  * <DataTable.Root table={table} status={query.status} isFetching={query.isFetching}>
@@ -73,11 +90,13 @@ type DataTableParts = Readonly<{
  * 		<FilterBar.Root filters={filters}>…</FilterBar.Root>
  * 	</DataTable.Toolbar>
  * 	<DataTable.Content
- * 		emptyState="No declarations yet."
- * 		errorLabel="The declarations could not be loaded."
- * 		loadingLabel="Loading declarations"
+ * 		emptyState="No invoices yet."
+ * 		errorLabel="The invoices could not be loaded."
+ * 		loadingLabel="Loading invoices"
  * 		slowLabel="This is taking longer than usual."
  * 		retryLabel="Try again"
+ * 		sortAscendingIcon={<ArrowUpwardIcon />}
+ * 		sortDescendingIcon={<ArrowDownwardIcon />}
  * 	/>
  * 	<DataTable.Pagination
  * 		pageSizeLabel="Rows per page"
@@ -86,6 +105,11 @@ type DataTableParts = Readonly<{
  * 		previousLabel="Previous page"
  * 		nextLabel="Next page"
  * 		lastLabel="Last page"
+ * 		firstIcon={<FirstPageIcon />}
+ * 		previousIcon={<ChevronLeftIcon />}
+ * 		nextIcon={<ChevronRightIcon />}
+ * 		lastIcon={<LastPageIcon />}
+ * 		checkIcon={<CheckIcon />}
  * 	/>
  * </DataTable.Root>
  */