@camstack/ui-library 1.2.95 → 1.2.97

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

@@ -7,15 +7,11 @@
  * is not one of them. `DataTable` supports both; this module decides which, so
  * the choice is a pure, testable rule instead of per-page CSS.
  *
- * The default rule is column count. Below the card breakpoint a phone fits
- * roughly three readable columns; past that, a sideways scroll means the
- * operator reads a wide table through a slit and loses the row they started
- * on. Cards trade the column alignment (which nobody can use at that width
- * anyway) for every field of one row being readable at once.
+ * The default is a table that scrolls horizontally inside its own container.
+ * Cards exist as an explicit `mobileMode="cards"` opt-in. `auto` still
+ * applies a column-count rule for surfaces that want the old behaviour.
  *
- * Pass an explicit `mobileMode` to override per table — a wide table whose
- * value IS the side-by-side comparison (a schedule, a matrix) is better
- * scrolled than carded, and says so at its call site.
+ * Pass an explicit `mobileMode` to override per table.
  */
 /** Per-table override. `auto` applies the column-count rule below. */
 export type TableMobileMode = 'auto' | 'scroll' | 'cards';

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

@@ -10,7 +10,9 @@ export interface DataColumn<T> {
     readonly headerRender?: () => ReactNode;
     /** Cell horizontal alignment. Default: `left`. */
     readonly align?: 'left' | 'right' | 'center';
-    /** Suppress text wrapping on header + cell. Default: header `true`, cell `false`. */
+    /** Suppress text wrapping on header + cell. Default: `true` — a cell that
+     *  wraps is a row that has already lost its table. Pass `false` only for a
+     *  column whose value is meant to wrap (a description, a blob). */
     readonly nowrap?: boolean;
     /** Cell renderer. Receives the row value. */
     readonly render: (row: T, rowIndex: number) => ReactNode;
@@ -58,10 +60,9 @@ export interface DataTableProps<T> {
     /** Per-row className resolver (e.g. status-coloured backgrounds). */
     readonly rowClassName?: (row: T, rowIndex: number) => string | undefined;
     /**
-     * Narrow-viewport rendering. Default `auto` — cards from
-     * `CARD_MODE_MIN_COLUMNS` columns up, rows below it. Pass `scroll` when the
-     * point of the table is the side-by-side comparison, `cards` to force the
-     * card list at any column count.
+     * Narrow-viewport rendering. Default `scroll` — the table stays a table and
+     * the wrapper scrolls sideways. Pass `cards` to force the card list,
+     * `auto` for the old column-count rule (`CARD_MODE_MIN_COLUMNS`).
      */
     readonly mobileMode?: TableMobileMode;
     /**

package/dist/index.cjs

@@ -26327,11 +26327,12 @@ function ariaSortForColumn(sort, columnKey) {
 * `header` (e.g. for a sortable click affordance).
 *
 * ── Narrow viewports ──────────────────────────────────────────────────────
-* Below the mobile breakpoint a table with `CARD_MODE_MIN_COLUMNS` columns or
-* more re-renders as one card per row (label above value) instead of a
-* sideways scroll through a slit. Narrower tables keep their rows — they fit,
-* and aligned rows compare better than cards. `mobileMode` overrides per
-* table; see `resolveTableLayout` for the rule and the reasoning.
+* The table stays a table. The wrapper is `overflow-x-auto`, so a phone
+* scrolls the columns sideways INSIDE the table — the page body never moves
+* sideways, and the cells stay one line (`whitespace-nowrap`). That is the
+* default (`mobileMode="scroll"`). Cards are opt-in via `mobileMode="cards"`;
+* `auto` still applies the old column-count rule for a surface that wants it.
+* See `resolveTableLayout`.
 *
 * ── Scrolling the BODY, not the page ──────────────────────────────────────
 * `maxBodyHeight` caps the table and scrolls its rows INSIDE the container
@@ -26356,7 +26357,7 @@ var ALIGN_CLASS = {
 	right: "text-right",
 	center: "text-center"
 };
-function DataTable({ columns, rows, rowKey, onRowClick, minWidthPx = 480, emptyMessage, className, bordered = true, rowClassName, mobileMode = "auto", maxBodyHeight, defaultSort }) {
+function DataTable({ columns, rows, rowKey, onRowClick, minWidthPx = 480, emptyMessage, className, bordered = true, rowClassName, mobileMode = "scroll", maxBodyHeight, defaultSort }) {
 	const isNarrow = useIsMobile();
 	const [sort, setSort] = (0, react$1.useState)(defaultSort ?? null);
 	const layout = resolveTableLayout({
@@ -26434,7 +26435,7 @@ function DataTable({ columns, rows, rowKey, onRowClick, minWidthPx = 480, emptyM
 					className: [interactive ? "cursor-pointer hover:bg-primary/5" : "hover:bg-primary/5", extra].filter(Boolean).join(" "),
 					children: columns.map((col) => {
 						const align = col.align ?? "left";
-						const nowrap = col.nowrap ?? false;
+						const nowrap = col.nowrap ?? true;
 						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
 							className: [
 								"px-3 py-2 text-foreground border-b border-border",

package/dist/index.js

@@ -26303,11 +26303,12 @@ function ariaSortForColumn(sort, columnKey) {
 * `header` (e.g. for a sortable click affordance).
 *
 * ── Narrow viewports ──────────────────────────────────────────────────────
-* Below the mobile breakpoint a table with `CARD_MODE_MIN_COLUMNS` columns or
-* more re-renders as one card per row (label above value) instead of a
-* sideways scroll through a slit. Narrower tables keep their rows — they fit,
-* and aligned rows compare better than cards. `mobileMode` overrides per
-* table; see `resolveTableLayout` for the rule and the reasoning.
+* The table stays a table. The wrapper is `overflow-x-auto`, so a phone
+* scrolls the columns sideways INSIDE the table — the page body never moves
+* sideways, and the cells stay one line (`whitespace-nowrap`). That is the
+* default (`mobileMode="scroll"`). Cards are opt-in via `mobileMode="cards"`;
+* `auto` still applies the old column-count rule for a surface that wants it.
+* See `resolveTableLayout`.
 *
 * ── Scrolling the BODY, not the page ──────────────────────────────────────
 * `maxBodyHeight` caps the table and scrolls its rows INSIDE the container
@@ -26332,7 +26333,7 @@ var ALIGN_CLASS = {
 	right: "text-right",
 	center: "text-center"
 };
-function DataTable({ columns, rows, rowKey, onRowClick, minWidthPx = 480, emptyMessage, className, bordered = true, rowClassName, mobileMode = "auto", maxBodyHeight, defaultSort }) {
+function DataTable({ columns, rows, rowKey, onRowClick, minWidthPx = 480, emptyMessage, className, bordered = true, rowClassName, mobileMode = "scroll", maxBodyHeight, defaultSort }) {
 	const isNarrow = useIsMobile();
 	const [sort, setSort] = useState(defaultSort ?? null);
 	const layout = resolveTableLayout({
@@ -26410,7 +26411,7 @@ function DataTable({ columns, rows, rowKey, onRowClick, minWidthPx = 480, emptyM
 					className: [interactive ? "cursor-pointer hover:bg-primary/5" : "hover:bg-primary/5", extra].filter(Boolean).join(" "),
 					children: columns.map((col) => {
 						const align = col.align ?? "left";
-						const nowrap = col.nowrap ?? false;
+						const nowrap = col.nowrap ?? true;
 						return /* @__PURE__ */ jsx("td", {
 							className: [
 								"px-3 py-2 text-foreground border-b border-border",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.95",
+  "version": "1.2.97",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",