@eifi1/ui-kit 0.48.1 → 0.49.0

package/dist/components/data-table-head.js

@@ -33,13 +33,17 @@ function DataTableHead({
   clearFilter,
   startResize,
   moveResize,
-  finishResize
+  finishResize,
+  ariaRowIndex,
+  lockedWidths,
+  selectionLockKey
 }) {
-  return /* @__PURE__ */ jsx("thead", { className: "bg-surface-2 text-secondary", children: /* @__PURE__ */ jsxs("tr", { className: "text-start", children: [
+  return /* @__PURE__ */ jsx("thead", { className: "bg-surface-2 text-secondary", children: /* @__PURE__ */ jsxs("tr", { className: "text-start", "aria-rowindex": ariaRowIndex, children: [
     selection && /* @__PURE__ */ jsx(
       "th",
       {
         scope: "col",
+        style: selectionLockKey && lockedWidths?.[selectionLockKey] !== void 0 ? { minWidth: lockedWidths[selectionLockKey] } : void 0,
         className: cn(
           "sticky top-0 z-10 bg-surface-2 align-middle backdrop-blur-sm",
           compact ? "w-8 px-2 py-1" : "w-10 px-3 py-2"
@@ -83,7 +87,11 @@ function DataTableHead({
           },
           scope: "col",
           "aria-sort": sortable ? sortIdx === 0 ? sorts[0].dir === "asc" ? "ascending" : "descending" : "none" : void 0,
-          style: ownHead.style || pinnedHead ? { ...ownHead.style, ...pinnedHead } : void 0,
+          style: ownHead.style || pinnedHead || lockedWidths?.[col.key] !== void 0 ? {
+            ...ownHead.style,
+            ...lockedWidths?.[col.key] !== void 0 ? { minWidth: lockedWidths[col.key] } : null,
+            ...pinnedHead
+          } : void 0,
           className: cn(
             "relative font-medium align-middle whitespace-nowrap",
             compact ? "px-2 py-1" : "px-3 py-2",

package/dist/components/data-table-head.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-table-head.tsx"],"sourcesContent":["import type { Dispatch, SetStateAction } from \"react\";\nimport { ArrowDown, ArrowUp, ArrowUpDown, Filter } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { defaultFilterState, isFilterActive, resolveFilter } from \"./data-table-filters\";\nimport type { FilterValue } from \"./data-table-filters\";\nimport type { SortState } from \"./data-table-sort\";\nimport { FilterPopover } from \"./data-table-filter-popover\";\nimport { Popover } from \"./popover\";\nimport { Tooltip } from \"./tooltip\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport { isTableOwnColumn } from \"./data-table-row-actions\";\nimport { columnLabel, logicalAlign, splitCellProps } from \"./data-table-shared\";\nimport { GROW_HEAD_CLASS } from \"./data-table-fit\";\nimport type { DataTableColumn, DataTableProps, FilterState } from \"./data-table\";\n\n// DataTable's `<thead>` on a wide screen: the select-all box, and per column the sort\n// button, the filter popover and the resize handle. Moved out of data-table.tsx whole\n// (refactor audit 2026-10, MOD-3 step 5); the state it shows and changes stays the\n// table's.\n\n/** Whether a column is end-aligned — the header then puts its filter button first. */\nconst END_ALIGN = /(^|\\s)text-end(?=\\s|$)/;\n\n/** The wide-screen table's header row. */\nexport function DataTableHead<T>({\n  visibleColumns,\n  selection,\n  compact,\n  labels,\n  locale,\n  isServer,\n  hasSortCallback,\n  hasFilterCallback,\n  sorts,\n  filters,\n  selectOptionsByKey,\n  multiSort,\n  resizable,\n  widths,\n  setWidths,\n  headRefs,\n  toggleSort,\n  setFilterValue,\n  clearFilter,\n  startResize,\n  moveResize,\n  finishResize,\n}: {\n  visibleColumns: DataTableColumn<T>[];\n  selection: DataTableProps<T>[\"selection\"];\n  compact: boolean;\n  labels: DataTableLabels;\n  locale?: string;\n  isServer: boolean;\n  /** The caller owns the sort (`onSortsChange`), so a server table can offer it. */\n  hasSortCallback: boolean;\n  /** The caller owns the filters (`onFiltersChange`), likewise. */\n  hasFilterCallback: boolean;\n  sorts: SortState[];\n  filters: FilterState;\n  selectOptionsByKey: Record<string, { value: string; label: string }[]>;\n  multiSort: boolean;\n  resizable: boolean;\n  widths: Record<string, number>;\n  setWidths: Dispatch<SetStateAction<Record<string, number>>>;\n  /** Filled here, one `<th>` per column — what a resize and \"Auto-size\" measure. */\n  headRefs: Map<string, HTMLTableCellElement>;\n  toggleSort: (key: string, shiftKey: boolean) => void;\n  setFilterValue: (key: string, value: FilterValue) => void;\n  clearFilter: (key: string) => void;\n  startResize: (e: React.PointerEvent<HTMLElement>, key: string) => void;\n  moveResize: (e: React.PointerEvent<HTMLElement>) => void;\n  finishResize: (e: React.PointerEvent<HTMLElement>, commit: boolean) => void;\n}) {\n  return (\n    <thead className=\"bg-surface-2 text-secondary\">\n      <tr className=\"text-start\">\n        {selection && (\n          <th\n            scope=\"col\"\n            className={cn(\n              \"sticky top-0 z-10 bg-surface-2 align-middle backdrop-blur-sm\",\n              compact ? \"w-8 px-2 py-1\" : \"w-10 px-3 py-2\",\n            )}\n          >\n            <input\n              type=\"checkbox\"\n              className={cn(\"align-middle accent-indigo-600\", compact ? \"size-3.5\" : \"size-4\")}\n              checked={selection.allSelected}\n              ref={(el) => {\n                if (el) el.indeterminate = selection.someSelected && !selection.allSelected;\n              }}\n              onChange={(e) => selection.onToggleAll(e.target.checked)}\n              aria-label={labels.selectAllRows}\n            />\n          </th>\n        )}\n        {visibleColumns.map((col) => {\n          // In server mode the utilities stay hidden unless the caller\n          // takes them over and feeds them back into the server query.\n          const sortable = (!isServer || hasSortCallback) && !!col.sortBy;\n          const filter = !isServer || hasFilterCallback ? resolveFilter(col) : null;\n          const filterState = filters[col.key] ?? (filter ? defaultFilterState(filter) : undefined);\n          const sortIdx = sorts.findIndex((s) => s.key === col.key);\n          const active = sortIdx !== -1;\n          const Icon = active ? (sorts[sortIdx].dir === \"asc\" ? ArrowUp : ArrowDown) : ArrowUpDown;\n          const filterActive = filterState && isFilterActive(filterState);\n          // Logical, and a legacy `text-right` still counts — see `logicalAlign`.\n          const headClass = logicalAlign(col.headClassName);\n          const isEndAligned = !!headClass && END_ALIGN.test(headClass);\n          const width = widths[col.key];\n          const ownHead = splitCellProps(col.headProps);\n          const pinnedHead = width ? { width, minWidth: width, maxWidth: width } : undefined;\n          return (\n            <th\n              {...ownHead.attrs}\n              key={col.key}\n              ref={(el) => {\n                if (el) headRefs.set(col.key, el);\n                else headRefs.delete(col.key);\n              }}\n              scope=\"col\"\n              // Only a header the user can actually sort says anything: an\n              // `aria-sort` on a plain column is a control that is not there,\n              // and a persisted or URL sort can name a column with no `sortBy`\n              // (the sort chain drops it silently) — which would otherwise\n              // claim a sort the table is not applying.\n              //\n              // \"none\" on the rest is the half that was missing. Without it a\n              // sortable header is indistinguishable from a plain one until the\n              // user presses it. Secondary criteria read \"none\" too: ARIA allows\n              // exactly one sorted column, and the priority is carried by the\n              // badge and by what the header button announces on press.\n              aria-sort={\n                sortable\n                  ? sortIdx === 0\n                    ? sorts[0].dir === \"asc\"\n                      ? \"ascending\"\n                      : \"descending\"\n                    : \"none\"\n                  : undefined\n              }\n              style={ownHead.style || pinnedHead ? { ...ownHead.style, ...pinnedHead } : undefined}\n              className={cn(\n                \"relative font-medium align-middle whitespace-nowrap\",\n                compact ? \"px-2 py-1\" : \"px-3 py-2\",\n                // Keep the header visible while the user scrolls the page.\n                // Each <th> carries its own bg so the row doesn't render\n                // transparent over the data rows underneath.\n                \"sticky top-0 z-10 bg-surface-2 backdrop-blur-sm\",\n                col.grow && GROW_HEAD_CLASS,\n                logicalAlign(ownHead.className),\n                headClass,\n              )}\n            >\n              <div\n                className={cn(\n                  \"flex items-center gap-1\",\n                  isEndAligned && \"flex-row-reverse\",\n                )}\n              >\n                <Tooltip label={sortable && multiSort ? labels.sortHint : undefined} portal>\n                  <button\n                    type=\"button\"\n                    onClick={(e) => sortable && toggleSort(col.key, e.shiftKey)}\n                    disabled={!sortable}\n                    className={cn(\n                      \"flex items-center gap-1 text-start\",\n                      sortable && \"hover:text-primary\",\n                    )}\n                  >\n                    <span>{col.header}</span>\n                    {sortable && (\n                      <Icon className={cn(\"size-3\", active ? \"opacity-100\" : \"opacity-40\")} />\n                    )}\n                    {/* Priority badge, only meaningful with 2+ sort keys */}\n                    {active && sorts.length > 1 && (\n                      <span className=\"text-micro font-semibold leading-none text-brand\">\n                        {sortIdx + 1}\n                      </span>\n                    )}\n                  </button>\n                </Tooltip>\n                {filter && (\n                  <Popover\n                    // 420 px at Normal, in rem so the calendar grows with its\n                    // text (§3.2); Popover caps it at the viewport.\n                    width={filter.type === \"date\" ? \"26.25rem\" : undefined}\n                    // The panel is THIS column's filter, and says so. Unnamed it was\n                    // announced as the kit-wide fallback, \"Popover\"; then as \"Filter\"\n                    // in every column alike (round 0.34 Wave 2, BUG-7c).\n                    labels={{ panel: labels.filterColumn(columnLabel(col, labels), false) }}\n                    trigger={({ open, toggle, ref }) => (\n                      <button\n                        type=\"button\"\n                        ref={ref}\n                        onClick={toggle}\n                        // Named for its column, and for being filtered: the tint\n                        // alone said that to nobody who cannot see it (BUG-7c).\n                        aria-label={labels.filterColumn(columnLabel(col, labels), Boolean(filterActive))}\n                        aria-haspopup=\"dialog\"\n                        aria-expanded={open}\n                        className={cn(\n                          \"rounded p-1 transition-colors\",\n                          filterActive\n                            ? \"bg-brand-soft text-brand-muted\"\n                            : \"text-placeholder hover:text-secondary hover:bg-hover\",\n                        )}\n                      >\n                        <Filter className=\"size-3\" />\n                      </button>\n                    )}\n                  >\n                    {() => (\n                      <FilterPopover\n                        column={col}\n                        state={filterState ?? defaultFilterState(filter)}\n                        onChange={(next) => setFilterValue(col.key, next)}\n                        onClear={() => clearFilter(col.key)}\n                        selectOptions={selectOptionsByKey[col.key] ?? []}\n                        labels={labels}\n                        locale={locale}\n                      />\n                    )}\n                  </Popover>\n                )}\n              </div>\n              {/* A `grow` column takes the rest: no width of its own to drag (0.48, KS N2). */}\n              {resizable && !isTableOwnColumn(col.key) && !col.grow && (\n              /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- a\n                 pointer-only drag handle for a visual preference (column width); it is\n                 deliberately not a tab stop, and no content or action depends on it. */\n              <span\n                role=\"separator\"\n                aria-orientation=\"vertical\"\n                onPointerDown={(e) => startResize(e, col.key)}\n                onPointerMove={moveResize}\n                onPointerUp={(e) => finishResize(e, true)}\n                onPointerCancel={(e) => finishResize(e, false)}\n                onDoubleClick={(e) => {\n                  e.preventDefault();\n                  setWidths((w) => {\n                    const next = { ...w };\n                    delete next[col.key];\n                    return next;\n                  });\n                }}\n                // `touch-none`: without it the browser claims a finger drag for\n                // scrolling before the first `pointermove` ever arrives.\n                // `end-0` and a translate that flips with it: the handle sits on the column's\n                // trailing edge, which is its left one in a right-to-left table.\n                className=\"absolute end-0 top-0 z-10 h-full w-1.5 -translate-x-1/2 rtl:translate-x-1/2 cursor-col-resize select-none touch-none hover:bg-brand-soft-hover\"\n              />\n              )}\n            </th>\n          );\n        })}\n      </tr>\n    </thead>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/data-table-head.tsx"],"sourcesContent":["import type { Dispatch, SetStateAction } from \"react\";\nimport { ArrowDown, ArrowUp, ArrowUpDown, Filter } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { defaultFilterState, isFilterActive, resolveFilter } from \"./data-table-filters\";\nimport type { FilterValue } from \"./data-table-filters\";\nimport type { SortState } from \"./data-table-sort\";\nimport { FilterPopover } from \"./data-table-filter-popover\";\nimport { Popover } from \"./popover\";\nimport { Tooltip } from \"./tooltip\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport { isTableOwnColumn } from \"./data-table-row-actions\";\nimport { columnLabel, logicalAlign, splitCellProps } from \"./data-table-shared\";\nimport { GROW_HEAD_CLASS } from \"./data-table-fit\";\nimport type { DataTableColumn, DataTableProps, FilterState } from \"./data-table\";\n\n// DataTable's `<thead>` on a wide screen: the select-all box, and per column the sort\n// button, the filter popover and the resize handle. Moved out of data-table.tsx whole\n// (refactor audit 2026-10, MOD-3 step 5); the state it shows and changes stays the\n// table's.\n\n/** Whether a column is end-aligned — the header then puts its filter button first. */\nconst END_ALIGN = /(^|\\s)text-end(?=\\s|$)/;\n\n/** The wide-screen table's header row. */\nexport function DataTableHead<T>({\n  visibleColumns,\n  selection,\n  compact,\n  labels,\n  locale,\n  isServer,\n  hasSortCallback,\n  hasFilterCallback,\n  sorts,\n  filters,\n  selectOptionsByKey,\n  multiSort,\n  resizable,\n  widths,\n  setWidths,\n  headRefs,\n  toggleSort,\n  setFilterValue,\n  clearFilter,\n  startResize,\n  moveResize,\n  finishResize,\n  ariaRowIndex,\n  lockedWidths,\n  selectionLockKey,\n}: {\n  visibleColumns: DataTableColumn<T>[];\n  selection: DataTableProps<T>[\"selection\"];\n  compact: boolean;\n  labels: DataTableLabels;\n  locale?: string;\n  isServer: boolean;\n  /** The caller owns the sort (`onSortsChange`), so a server table can offer it. */\n  hasSortCallback: boolean;\n  /** The caller owns the filters (`onFiltersChange`), likewise. */\n  hasFilterCallback: boolean;\n  sorts: SortState[];\n  filters: FilterState;\n  selectOptionsByKey: Record<string, { value: string; label: string }[]>;\n  multiSort: boolean;\n  resizable: boolean;\n  widths: Record<string, number>;\n  setWidths: Dispatch<SetStateAction<Record<string, number>>>;\n  /** Filled here, one `<th>` per column — what a resize and \"Auto-size\" measure. */\n  headRefs: Map<string, HTMLTableCellElement>;\n  toggleSort: (key: string, shiftKey: boolean) => void;\n  setFilterValue: (key: string, value: FilterValue) => void;\n  clearFilter: (key: string) => void;\n  startResize: (e: React.PointerEvent<HTMLElement>, key: string) => void;\n  moveResize: (e: React.PointerEvent<HTMLElement>) => void;\n  finishResize: (e: React.PointerEvent<HTMLElement>, commit: boolean) => void;\n  /** Under `virtualize` (0.48.2): 1. */\n  ariaRowIndex?: number;\n  /** Under `virtualize` (0.48.2): each column's locked width, as the header cell's\n   *  `min-width` — a `<col>` width alone gave way to a `grow` column's 100%. */\n  lockedWidths?: Record<string, number> | null;\n  /** The selection column's key in `lockedWidths`. */\n  selectionLockKey?: string;\n}) {\n  return (\n    <thead className=\"bg-surface-2 text-secondary\">\n      <tr className=\"text-start\" aria-rowindex={ariaRowIndex}>\n        {selection && (\n          <th\n            scope=\"col\"\n            style={\n              selectionLockKey && lockedWidths?.[selectionLockKey] !== undefined\n                ? { minWidth: lockedWidths[selectionLockKey] }\n                : undefined\n            }\n            className={cn(\n              \"sticky top-0 z-10 bg-surface-2 align-middle backdrop-blur-sm\",\n              compact ? \"w-8 px-2 py-1\" : \"w-10 px-3 py-2\",\n            )}\n          >\n            <input\n              type=\"checkbox\"\n              className={cn(\"align-middle accent-indigo-600\", compact ? \"size-3.5\" : \"size-4\")}\n              checked={selection.allSelected}\n              ref={(el) => {\n                if (el) el.indeterminate = selection.someSelected && !selection.allSelected;\n              }}\n              onChange={(e) => selection.onToggleAll(e.target.checked)}\n              aria-label={labels.selectAllRows}\n            />\n          </th>\n        )}\n        {visibleColumns.map((col) => {\n          // In server mode the utilities stay hidden unless the caller\n          // takes them over and feeds them back into the server query.\n          const sortable = (!isServer || hasSortCallback) && !!col.sortBy;\n          const filter = !isServer || hasFilterCallback ? resolveFilter(col) : null;\n          const filterState = filters[col.key] ?? (filter ? defaultFilterState(filter) : undefined);\n          const sortIdx = sorts.findIndex((s) => s.key === col.key);\n          const active = sortIdx !== -1;\n          const Icon = active ? (sorts[sortIdx].dir === \"asc\" ? ArrowUp : ArrowDown) : ArrowUpDown;\n          const filterActive = filterState && isFilterActive(filterState);\n          // Logical, and a legacy `text-right` still counts — see `logicalAlign`.\n          const headClass = logicalAlign(col.headClassName);\n          const isEndAligned = !!headClass && END_ALIGN.test(headClass);\n          const width = widths[col.key];\n          const ownHead = splitCellProps(col.headProps);\n          const pinnedHead = width ? { width, minWidth: width, maxWidth: width } : undefined;\n          return (\n            <th\n              {...ownHead.attrs}\n              key={col.key}\n              ref={(el) => {\n                if (el) headRefs.set(col.key, el);\n                else headRefs.delete(col.key);\n              }}\n              scope=\"col\"\n              // Only a header the user can actually sort says anything: an\n              // `aria-sort` on a plain column is a control that is not there,\n              // and a persisted or URL sort can name a column with no `sortBy`\n              // (the sort chain drops it silently) — which would otherwise\n              // claim a sort the table is not applying.\n              //\n              // \"none\" on the rest is the half that was missing. Without it a\n              // sortable header is indistinguishable from a plain one until the\n              // user presses it. Secondary criteria read \"none\" too: ARIA allows\n              // exactly one sorted column, and the priority is carried by the\n              // badge and by what the header button announces on press.\n              aria-sort={\n                sortable\n                  ? sortIdx === 0\n                    ? sorts[0].dir === \"asc\"\n                      ? \"ascending\"\n                      : \"descending\"\n                    : \"none\"\n                  : undefined\n              }\n              style={\n                ownHead.style || pinnedHead || lockedWidths?.[col.key] !== undefined\n                  ? {\n                      ...ownHead.style,\n                      ...(lockedWidths?.[col.key] !== undefined ? { minWidth: lockedWidths[col.key] } : null),\n                      ...pinnedHead,\n                    }\n                  : undefined\n              }\n              className={cn(\n                \"relative font-medium align-middle whitespace-nowrap\",\n                compact ? \"px-2 py-1\" : \"px-3 py-2\",\n                // Keep the header visible while the user scrolls the page.\n                // Each <th> carries its own bg so the row doesn't render\n                // transparent over the data rows underneath.\n                \"sticky top-0 z-10 bg-surface-2 backdrop-blur-sm\",\n                col.grow && GROW_HEAD_CLASS,\n                logicalAlign(ownHead.className),\n                headClass,\n              )}\n            >\n              <div\n                className={cn(\n                  \"flex items-center gap-1\",\n                  isEndAligned && \"flex-row-reverse\",\n                )}\n              >\n                <Tooltip label={sortable && multiSort ? labels.sortHint : undefined} portal>\n                  <button\n                    type=\"button\"\n                    onClick={(e) => sortable && toggleSort(col.key, e.shiftKey)}\n                    disabled={!sortable}\n                    className={cn(\n                      \"flex items-center gap-1 text-start\",\n                      sortable && \"hover:text-primary\",\n                    )}\n                  >\n                    <span>{col.header}</span>\n                    {sortable && (\n                      <Icon className={cn(\"size-3\", active ? \"opacity-100\" : \"opacity-40\")} />\n                    )}\n                    {/* Priority badge, only meaningful with 2+ sort keys */}\n                    {active && sorts.length > 1 && (\n                      <span className=\"text-micro font-semibold leading-none text-brand\">\n                        {sortIdx + 1}\n                      </span>\n                    )}\n                  </button>\n                </Tooltip>\n                {filter && (\n                  <Popover\n                    // 420 px at Normal, in rem so the calendar grows with its\n                    // text (§3.2); Popover caps it at the viewport.\n                    width={filter.type === \"date\" ? \"26.25rem\" : undefined}\n                    // The panel is THIS column's filter, and says so. Unnamed it was\n                    // announced as the kit-wide fallback, \"Popover\"; then as \"Filter\"\n                    // in every column alike (round 0.34 Wave 2, BUG-7c).\n                    labels={{ panel: labels.filterColumn(columnLabel(col, labels), false) }}\n                    trigger={({ open, toggle, ref }) => (\n                      <button\n                        type=\"button\"\n                        ref={ref}\n                        onClick={toggle}\n                        // Named for its column, and for being filtered: the tint\n                        // alone said that to nobody who cannot see it (BUG-7c).\n                        aria-label={labels.filterColumn(columnLabel(col, labels), Boolean(filterActive))}\n                        aria-haspopup=\"dialog\"\n                        aria-expanded={open}\n                        className={cn(\n                          \"rounded p-1 transition-colors\",\n                          filterActive\n                            ? \"bg-brand-soft text-brand-muted\"\n                            : \"text-placeholder hover:text-secondary hover:bg-hover\",\n                        )}\n                      >\n                        <Filter className=\"size-3\" />\n                      </button>\n                    )}\n                  >\n                    {() => (\n                      <FilterPopover\n                        column={col}\n                        state={filterState ?? defaultFilterState(filter)}\n                        onChange={(next) => setFilterValue(col.key, next)}\n                        onClear={() => clearFilter(col.key)}\n                        selectOptions={selectOptionsByKey[col.key] ?? []}\n                        labels={labels}\n                        locale={locale}\n                      />\n                    )}\n                  </Popover>\n                )}\n              </div>\n              {/* A `grow` column takes the rest: no width of its own to drag (0.48, KS N2). */}\n              {resizable && !isTableOwnColumn(col.key) && !col.grow && (\n              /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- a\n                 pointer-only drag handle for a visual preference (column width); it is\n                 deliberately not a tab stop, and no content or action depends on it. */\n              <span\n                role=\"separator\"\n                aria-orientation=\"vertical\"\n                onPointerDown={(e) => startResize(e, col.key)}\n                onPointerMove={moveResize}\n                onPointerUp={(e) => finishResize(e, true)}\n                onPointerCancel={(e) => finishResize(e, false)}\n                onDoubleClick={(e) => {\n                  e.preventDefault();\n                  setWidths((w) => {\n                    const next = { ...w };\n                    delete next[col.key];\n                    return next;\n                  });\n                }}\n                // `touch-none`: without it the browser claims a finger drag for\n                // scrolling before the first `pointermove` ever arrives.\n                // `end-0` and a translate that flips with it: the handle sits on the column's\n                // trailing edge, which is its left one in a right-to-left table.\n                className=\"absolute end-0 top-0 z-10 h-full w-1.5 -translate-x-1/2 rtl:translate-x-1/2 cursor-col-resize select-none touch-none hover:bg-brand-soft-hover\"\n              />\n              )}\n            </th>\n          );\n        })}\n      </tr>\n    </thead>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/data-table-leading-row.d.ts

@@ -10,8 +10,10 @@ import type { ReactNode } from "react";
  * the content (a full-width disclosure header paints its own fill) and moving with the
  * cell; a collapsed table's row border would stay behind at the row's place.
  */
-export declare function DataTableLeadingRow({ colSpan, sticky, children, }: {
+export declare function DataTableLeadingRow({ colSpan, sticky, ariaRowIndex, children, }: {
     colSpan: number;
     sticky?: boolean;
+    /** Under `virtualize` (0.48.2). */
+    ariaRowIndex?: number;
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/components/data-table-leading-row.js

@@ -5,6 +5,7 @@ import { cn } from "../lib/cn.js";
 function DataTableLeadingRow({
   colSpan,
   sticky = false,
+  ariaRowIndex,
   children
 }) {
   const cellRef = useRef(null);
@@ -20,7 +21,7 @@ function DataTableLeadingRow({
     observer.observe(head);
     return () => observer.disconnect();
   }, [sticky]);
-  return /* @__PURE__ */ jsx("tr", { className: cn(!sticky && "border-t border-subtle"), children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("tr", { "aria-rowindex": ariaRowIndex, className: cn(!sticky && "border-t border-subtle"), children: /* @__PURE__ */ jsx(
     "td",
     {
       ref: cellRef,

package/dist/components/data-table-leading-row.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-table-leading-row.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * The desktop table's `leadingRow`: one full-width cell above the data rows. With\n * `sticky` (0.48, keksdose dev #603) the cell is pinned under the sticky header while the\n * rows scroll — `top` is the header's height, measured and followed (a header that wraps\n * at Large text grows). On the cell, not the `<tr>`: position:sticky on a table row is not\n * reliable across browsers, the reason the header's sticky sits on each `<th>`. Opaque\n * (`bg-surface`), so the rows pass beneath it; `z-[5]`, under the header's `z-10` and over\n * the rows' own sticky cells. The line over it is the cell's own `::before`, drawn over\n * the content (a full-width disclosure header paints its own fill) and moving with the\n * cell; a collapsed table's row border would stay behind at the row's place.\n */\nexport function DataTableLeadingRow({\n  colSpan,\n  sticky = false,\n  children,\n}: {\n  colSpan: number;\n  sticky?: boolean;\n  children: ReactNode;\n}) {\n  const cellRef = useRef<HTMLTableCellElement>(null);\n  const [top, setTop] = useState(0);\n  useLayoutEffect(() => {\n    if (!sticky) return;\n    const head = cellRef.current?.closest(\"table\")?.tHead;\n    if (!head) return;\n    const measure = () => setTop(head.getBoundingClientRect().height);\n    measure();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(measure);\n    observer.observe(head);\n    return () => observer.disconnect();\n  }, [sticky]);\n  return (\n    <tr className={cn(!sticky && \"border-t border-subtle\")}>\n      <td\n        ref={cellRef}\n        colSpan={colSpan}\n        data-leading-row={sticky ? \"sticky\" : \"\"}\n        className={cn(\n          \"p-0\",\n          sticky &&\n            \"sticky z-[5] bg-surface before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:z-[1] before:h-px before:bg-[var(--border)] before:content-['']\",\n        )}\n        style={sticky ? { top } : undefined}\n      >\n        {children}\n      </td>\n    </tr>\n  );\n}\n"],"mappings":";AAuCM;AAvCN,SAAS,iBAAiB,QAAQ,gBAAgB;AAElD,SAAS,UAAU;AAaZ,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA,SAAS;AAAA,EACT;AACF,GAIG;AACD,QAAM,UAAU,OAA6B,IAAI;AACjD,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,CAAC;AAChC,kBAAgB,MAAM;AACpB,QAAI,CAAC,OAAQ;AACb,UAAM,OAAO,QAAQ,SAAS,QAAQ,OAAO,GAAG;AAChD,QAAI,CAAC,KAAM;AACX,UAAM,UAAU,MAAM,OAAO,KAAK,sBAAsB,EAAE,MAAM;AAChE,YAAQ;AACR,QAAI,OAAO,mBAAmB,YAAa;AAC3C,UAAM,WAAW,IAAI,eAAe,OAAO;AAC3C,aAAS,QAAQ,IAAI;AACrB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,MAAM,CAAC;AACX,SACE,oBAAC,QAAG,WAAW,GAAG,CAAC,UAAU,wBAAwB,GACnD;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,oBAAkB,SAAS,WAAW;AAAA,MACtC,WAAW;AAAA,QACT;AAAA,QACA,UACE;AAAA,MACJ;AAAA,MACA,OAAO,SAAS,EAAE,IAAI,IAAI;AAAA,MAEzB;AAAA;AAAA,EACH,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/data-table-leading-row.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * The desktop table's `leadingRow`: one full-width cell above the data rows. With\n * `sticky` (0.48, keksdose dev #603) the cell is pinned under the sticky header while the\n * rows scroll — `top` is the header's height, measured and followed (a header that wraps\n * at Large text grows). On the cell, not the `<tr>`: position:sticky on a table row is not\n * reliable across browsers, the reason the header's sticky sits on each `<th>`. Opaque\n * (`bg-surface`), so the rows pass beneath it; `z-[5]`, under the header's `z-10` and over\n * the rows' own sticky cells. The line over it is the cell's own `::before`, drawn over\n * the content (a full-width disclosure header paints its own fill) and moving with the\n * cell; a collapsed table's row border would stay behind at the row's place.\n */\nexport function DataTableLeadingRow({\n  colSpan,\n  sticky = false,\n  ariaRowIndex,\n  children,\n}: {\n  colSpan: number;\n  sticky?: boolean;\n  /** Under `virtualize` (0.48.2). */\n  ariaRowIndex?: number;\n  children: ReactNode;\n}) {\n  const cellRef = useRef<HTMLTableCellElement>(null);\n  const [top, setTop] = useState(0);\n  useLayoutEffect(() => {\n    if (!sticky) return;\n    const head = cellRef.current?.closest(\"table\")?.tHead;\n    if (!head) return;\n    const measure = () => setTop(head.getBoundingClientRect().height);\n    measure();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(measure);\n    observer.observe(head);\n    return () => observer.disconnect();\n  }, [sticky]);\n  return (\n    <tr aria-rowindex={ariaRowIndex} className={cn(!sticky && \"border-t border-subtle\")}>\n      <td\n        ref={cellRef}\n        colSpan={colSpan}\n        data-leading-row={sticky ? \"sticky\" : \"\"}\n        className={cn(\n          \"p-0\",\n          sticky &&\n            \"sticky z-[5] bg-surface before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:z-[1] before:h-px before:bg-[var(--border)] before:content-['']\",\n        )}\n        style={sticky ? { top } : undefined}\n      >\n        {children}\n      </td>\n    </tr>\n  );\n}\n"],"mappings":";AA0CM;AA1CN,SAAS,iBAAiB,QAAQ,gBAAgB;AAElD,SAAS,UAAU;AAaZ,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AACF,GAMG;AACD,QAAM,UAAU,OAA6B,IAAI;AACjD,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,CAAC;AAChC,kBAAgB,MAAM;AACpB,QAAI,CAAC,OAAQ;AACb,UAAM,OAAO,QAAQ,SAAS,QAAQ,OAAO,GAAG;AAChD,QAAI,CAAC,KAAM;AACX,UAAM,UAAU,MAAM,OAAO,KAAK,sBAAsB,EAAE,MAAM;AAChE,YAAQ;AACR,QAAI,OAAO,mBAAmB,YAAa;AAC3C,UAAM,WAAW,IAAI,eAAe,OAAO;AAC3C,aAAS,QAAQ,IAAI;AACrB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,MAAM,CAAC;AACX,SACE,oBAAC,QAAG,iBAAe,cAAc,WAAW,GAAG,CAAC,UAAU,wBAAwB,GAChF;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,oBAAkB,SAAS,WAAW;AAAA,MACtC,WAAW;AAAA,QACT;AAAA,QACA,UACE;AAAA,MACJ;AAAA,MACA,OAAO,SAAS,EAAE,IAAI,IAAI;AAAA,MAEzB;AAAA;AAAA,EACH,GACF;AAEJ;","names":[]}

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

@@ -15,7 +15,49 @@ export declare function StackedFields<T>({ columns, row, compact }: {
     columns: DataTableColumn<T>[];
     row: T;
     compact: boolean;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;
+/** The most fields the default phone card shows under its title (0.49 KIT-7). */
+export declare const MOBILE_CARD_FIELDS = 3;
+/**
+ * The default phone card's columns (0.49 KIT-7), out of the phone's columns (visible,
+ * not `mobileHidden`): the title — `mobile: "primary"` or `mobilePrimary`, else the
+ * first that is not a status — the `role: "status"` columns for beside it, at most
+ * {@link MOBILE_CARD_FIELDS} fields: those marked `mobile: "secondary"` when any is,
+ * else the first after the title, and the `role: "actions"` columns, drawn after the
+ * fields. An actions column is never the title and never one of the fields, so the
+ * fields and the marks leave it on the card; only `mobileHidden` / `mobile: "hidden"`
+ * (which keep it out of `columns`) remove it.
+ */
+export declare function mobileCardColumns<T>(columns: DataTableColumn<T>[]): {
+    primary: DataTableColumn<T> | null;
+    status: DataTableColumn<T>[];
+    fields: DataTableColumn<T>[];
+    actions: DataTableColumn<T>[];
+};
+/** A column whose cell keeps its own clicks — `noRowLink`, or `role: "actions"`: no row
+ *  link may wrap it, and a card that draws it is not a link itself. */
+export declare function keepsOwnClicks<T>(col: DataTableColumn<T>): boolean;
+/**
+ * A development build's note on the default phone card (0.49 KIT-7): a `noRowLink`
+ * column past its three fields. Such a column holds the cell's own controls — a per-row
+ * delete, a link — and the card leaves it out with them, so on a phone the action is
+ * gone. Never for a `role: "actions"` column, which the card draws after its fields.
+ * Read off the declared `columns` (not the ones a person or the width hid), and only
+ * while the table lets the card choose: `enabled` is false with a `mobileCard` or
+ * `mobileDetailsInRow` (the column is then in the opened row), and a column marked
+ * `mobile: "secondary"` means the app chose. Once per table and column key; `name`
+ * (the table's `storageKey` or `urlSync` prefix) says which table, else its title
+ * column does.
+ */
+export declare function useCardColumnWarnings<T>(columns: DataTableColumn<T>[], enabled: boolean, name?: string): void;
+/**
+ * Whether a rendered cell shows nothing worth a line (0.49 KIT-7): `null`, `undefined`,
+ * a boolean (React draws neither), `""` or blank text, and the formatters' empty value
+ * "—" ({@link EMPTY_FORMATTED_VALUE}), and `booleanColumn`'s mark for an unset value.
+ * Any other element is never empty here — its output is the component's — so a column
+ * whose empty value should drop off the card returns `null` (or "—") from `cell` for it.
+ */
+export declare function isEmptyCell(value: ReactNode): boolean;
 /**
  * The card list's sort control: a "Sort by" select and a direction button.
  *
@@ -65,7 +107,11 @@ export interface MobileRowProps<T> {
     mobileCardLinkable: boolean;
     mobileCard: DataTableProps<T>["mobileCard"];
     mobilePrimaryCol: DataTableColumn<T> | null;
+    /** The `role: "status"` columns, drawn as chips beside the title (0.49 KIT-7). */
+    mobileStatusColumns: DataTableColumn<T>[];
     mobileSecondaryColumns: DataTableColumn<T>[];
+    /** The `role: "actions"` columns, drawn after the fields at the card's end (0.49 KIT-7). */
+    mobileActionColumns: DataTableColumn<T>[];
     mobileExpandAsDialog: boolean;
     compact: boolean;
     /** The text size is Large or Extra large (§4). */
@@ -86,7 +132,7 @@ export interface MobileRowSelect {
 }
 /** One mobile card. Shared by the flat list and the grouped list, so both draw
  *  identical row markup. */
-export declare function MobileRow<T>({ row, isExpanded, openedRowContent, opensRow, rowClassName, rowAttributes, onRowClick, rowHref, swipeActionsFor, mobileDir, mobileCardLinkable, mobileCard, mobilePrimaryCol, mobileSecondaryColumns, mobileExpandAsDialog, compact, large, select, }: MobileRowProps<T>): import("react").JSX.Element;
+export declare function MobileRow<T>({ row, isExpanded, openedRowContent, opensRow, rowClassName, rowAttributes, onRowClick, rowHref, swipeActionsFor, mobileDir, mobileCardLinkable, mobileCard, mobilePrimaryCol, mobileStatusColumns, mobileSecondaryColumns, mobileActionColumns, mobileExpandAsDialog, compact, large, select, }: MobileRowProps<T>): import("react").JSX.Element;
 /**
  * The card list's way into and out of selection mode for a keyboard and a screen
  * reader — the long press is a touch gesture, and a gesture alone is no path at all.

package/dist/components/data-table-mobile.js

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment2, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment2, isValidElement, useEffect, useId, useMemo, useRef, useState } from "react";
 import { ArrowDownWideNarrow, ArrowUpNarrowWide, ChevronDown, ChevronRight, Filter } from "lucide-react";
 import { FOCUS_RING } from "./focus-ring.js";
 import { IconButton } from "./icon-button.js";
@@ -12,6 +12,9 @@ import { FilterPopover } from "./data-table-filter-popover.js";
 import { SwipeableRow } from "./swipeable-row.js";
 import { DialogFrame } from "./dialog-frame.js";
 import { Checkbox } from "./checkbox.js";
+import { Chip } from "./chip.js";
+import { BooleanMark } from "./data-table-cells.js";
+import { EMPTY_FORMATTED_VALUE } from "../lib/format.js";
 import { useLongPress } from "../hooks/use-long-press.js";
 import { RowLink, cleanAttrs, columnLabel, fromOutside, fromOwnControl } from "./data-table-shared.js";
 function dataAttrsOf(props) {
@@ -29,25 +32,77 @@ function physicalSwipe(actions, dir) {
 }
 const CARD_NO_TRUNCATE = "large:[&_.truncate]:whitespace-normal large:[&_.truncate]:[overflow-wrap:anywhere]";
 function StackedFields({ columns, row, compact }) {
+  const fields = filledFields(columns, row);
+  if (fields.length === 0) return null;
   return /* @__PURE__ */ jsx(
     "dl",
     {
       "data-card-fields": "stacked",
       className: cn("relative flex min-w-0 flex-col", compact ? "gap-1.5 text-xs" : "gap-2.5 text-sm", CARD_NO_TRUNCATE),
-      children: columns.map((col) => /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      children: fields.map(({ col, value }) => /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
         /* @__PURE__ */ jsx("dt", { className: "text-xs uppercase tracking-wide text-muted", children: col.header }),
         /* @__PURE__ */ jsx(
           "dd",
           {
             ...dataAttrsOf(col.cellProps?.(row)),
             className: "mt-0.5 min-w-0 break-words text-secondary",
-            children: col.cell(row)
+            children: value
           }
         )
       ] }, col.key))
     }
   );
 }
+const MOBILE_CARD_FIELDS = 3;
+function mobileCardColumns(columns) {
+  const titles = columns.filter((c) => c.role !== "actions");
+  const primary = titles.find((c) => c.mobile === "primary") ?? titles.find((c) => c.mobilePrimary) ?? titles.find((c) => c.role !== "status") ?? titles[0] ?? null;
+  const status = columns.filter((c) => c !== primary && c.role === "status");
+  const actions = columns.filter((c) => c.role === "actions");
+  const rest = titles.filter((c) => c !== primary && c.role !== "status");
+  const marked = rest.filter((c) => c.mobile === "secondary");
+  return { primary, status, fields: (marked.length > 0 ? marked : rest).slice(0, MOBILE_CARD_FIELDS), actions };
+}
+function keepsOwnClicks(col) {
+  return !!col.noRowLink || col.role === "actions";
+}
+function devWarnings() {
+  return Boolean(import.meta.env?.DEV) && !import.meta.env?.VITEST;
+}
+function useCardColumnWarnings(columns, enabled, name) {
+  const warned = useRef(null);
+  useEffect(() => {
+    if (!enabled || !devWarnings()) return;
+    const phone = columns.filter((c) => !c.mobileHidden && c.mobile !== "hidden");
+    if (phone.some((c) => c.mobile === "secondary")) return;
+    const { primary, status, fields, actions } = mobileCardColumns(phone);
+    const onCard = /* @__PURE__ */ new Set([primary, ...status, ...fields, ...actions]);
+    const table = name ? ` "${name}"` : primary ? ` (title column "${primary.key}")` : "";
+    warned.current ??= /* @__PURE__ */ new Set();
+    for (const col of phone) {
+      if (onCard.has(col) || !col.noRowLink || warned.current.has(col.key)) continue;
+      warned.current.add(col.key);
+      console.warn(
+        `[ui-kit] DataTable${table}: column "${col.key}" (noRowLink) is past the phone card's three fields and leaves the card \u2014 give it role: "actions" (drawn after the fields), or move its action to rowActions.`
+      );
+    }
+  }, [columns, enabled, name]);
+}
+function isEmptyCell(value) {
+  if (value === null || value === void 0 || typeof value === "boolean") return true;
+  if (isValidElement(value) && value.type === BooleanMark) return value.props.value == null;
+  if (typeof value === "string") {
+    const text = value.trim();
+    return text === "" || text === EMPTY_FORMATTED_VALUE;
+  }
+  return false;
+}
+function filledFields(columns, row) {
+  return columns.map((col) => ({ col, value: col.cell(row) })).filter(({ value }) => !isEmptyCell(value));
+}
+function StatusChip({ value }) {
+  return typeof value === "string" || typeof value === "number" ? /* @__PURE__ */ jsx(Chip, { size: "sm", children: value }) : /* @__PURE__ */ jsx(Fragment, { children: value });
+}
 function MobileSort({
   columns,
   sorts,
@@ -118,7 +173,9 @@ function MobileRow({
   mobileCardLinkable,
   mobileCard,
   mobilePrimaryCol,
+  mobileStatusColumns,
   mobileSecondaryColumns,
+  mobileActionColumns,
   mobileExpandAsDialog,
   compact,
   large,
@@ -162,6 +219,9 @@ function MobileRow({
     // is not selectable on a phone where the table offers selection.
     select && "select-none [-webkit-touch-callout:none]"
   );
+  const fields = mobileCard ? [] : filledFields(mobileSecondaryColumns, row);
+  const statuses = mobileCard ? [] : filledFields(mobileStatusColumns, row);
+  const actionCells = mobileCard ? [] : filledFields(mobileActionColumns, row);
   const cardInner = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "div",
@@ -175,31 +235,43 @@ function MobileRow({
           !mobileCard && CARD_NO_TRUNCATE
         ),
         children: mobileCard ? mobileCard(row) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          mobilePrimaryCol && /* @__PURE__ */ jsx("div", { ...dataAttrsOf(mobilePrimaryCol.cellProps?.(row)), className: "min-w-0 break-words font-medium", children: mobilePrimaryCol.cell(row) }),
-          mobileSecondaryColumns.length > 0 && large ? (
+          (mobilePrimaryCol || statuses.length > 0) && /* @__PURE__ */ jsxs("div", { "data-card-head": "", className: "flex min-w-0 items-start justify-between gap-2", children: [
+            mobilePrimaryCol && /* @__PURE__ */ jsx(
+              "div",
+              {
+                ...dataAttrsOf(mobilePrimaryCol.cellProps?.(row)),
+                "data-card-title": "",
+                className: "min-w-0 flex-1 break-words font-medium",
+                children: mobilePrimaryCol.cell(row)
+              }
+            ),
+            statuses.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 flex-wrap items-center justify-end gap-1", children: statuses.map(({ col, value }) => /* @__PURE__ */ jsx("span", { ...dataAttrsOf(col.cellProps?.(row)), "data-card-status": "", className: "inline-flex", children: /* @__PURE__ */ jsx(StatusChip, { value }) }, col.key)) })
+          ] }),
+          fields.length > 0 && large ? (
             // §4: each label ABOVE its value at Large. Side by side, a label column
             // sized to the widest label leaves a value a sliver of a 240 px card.
             /* @__PURE__ */ jsx(StackedFields, { columns: mobileSecondaryColumns, row, compact })
-          ) : mobileSecondaryColumns.length > 0 && /* @__PURE__ */ jsx(
+          ) : fields.length > 0 && /* @__PURE__ */ jsx(
             "dl",
             {
               className: cn(
                 "grid grid-cols-[auto_1fr] gap-x-3",
                 compact ? "gap-y-0.5 text-xs" : "gap-y-1 text-sm"
               ),
-              children: mobileSecondaryColumns.map((col) => /* @__PURE__ */ jsxs(Fragment2, { children: [
+              children: fields.map(({ col, value }) => /* @__PURE__ */ jsxs(Fragment2, { children: [
                 /* @__PURE__ */ jsx("dt", { className: "text-xs uppercase tracking-wide text-muted self-center", children: col.header }),
                 /* @__PURE__ */ jsx(
                   "dd",
                   {
                     ...dataAttrsOf(col.cellProps?.(row)),
                     className: "min-w-0 text-secondary self-center",
-                    children: col.cell(row)
+                    children: value
                   }
                 )
               ] }, col.key))
             }
-          )
+          ),
+          actionCells.length > 0 && /* @__PURE__ */ jsx("div", { "data-card-actions": "", className: "flex min-w-0 flex-wrap items-center justify-end gap-2", children: actionCells.map(({ col, value }) => /* @__PURE__ */ jsx("div", { ...dataAttrsOf(col.cellProps?.(row)), className: "flex min-w-0 justify-end", children: value }, col.key)) })
         ] })
       }
     ),
@@ -565,10 +637,15 @@ function MobileFilters({
   ] });
 }
 export {
+  MOBILE_CARD_FIELDS,
   MobileFilters,
   MobileRow,
   MobileSelectBar,
   MobileSort,
-  StackedFields
+  StackedFields,
+  isEmptyCell,
+  keepsOwnClicks,
+  mobileCardColumns,
+  useCardColumnWarnings
 };
 //# sourceMappingURL=data-table-mobile.js.map