@techsio/ui-kit 0.37.1 → 0.38.0

package/dist/src/organisms/data-table.helpers.d.ts

@@ -0,0 +1,240 @@
+/**
+ * DataTable helpers — types, conditional filter operators and pin styling.
+ *
+ * Kept separate from `data-table.tsx` so the component file stays focused on
+ * rendering. Re-exported through `data-table.tsx` for consumers.
+ */
+import { type CellData, type ColumnSizingState, type ReactTable, type RowData, type TableFeatures, type Cell as TanstackCell, type CellContext as TanstackCellContext, type Column as TanstackColumn, type ColumnDef as TanstackColumnDef, type FilterFn as TanstackFilterFn, type Header as TanstackHeader, type Row as TanstackRow } from "@tanstack/react-table";
+import type { CSSProperties, ReactNode } from "react";
+/** The feature set every DataTable type is parameterised by. */
+export type DataTableFeatures = typeof dataTableFeatures;
+export type Cell<T extends RowData, V extends CellData = CellData> = TanstackCell<DataTableFeatures, T, V>;
+export type CellContext<T extends RowData, V extends CellData = CellData> = TanstackCellContext<DataTableFeatures, T, V>;
+export type Column<T extends RowData, V extends CellData = CellData> = TanstackColumn<DataTableFeatures, T, V>;
+export type ColumnDef<T extends RowData, V extends CellData = CellData> = TanstackColumnDef<DataTableFeatures, T, V>;
+export type Row<T extends RowData> = TanstackRow<DataTableFeatures, T>;
+/**
+ * The instance `useTable` hands back. It is the React wrapper rather than the
+ * core table: only the wrapper carries `table.state` and `table.Subscribe`,
+ * and both are part of what DataTable hands to `onReady`/`renderToolbar`.
+ */
+export type TanstackTable<T extends RowData> = ReactTable<DataTableFeatures, T>;
+export type Header<T extends RowData, V extends CellData = CellData> = TanstackHeader<DataTableFeatures, T, V>;
+export type FilterFn<T extends RowData> = TanstackFilterFn<DataTableFeatures, T>;
+import type { DataTableColumnType, DataTableEditorContext, DataTableFilterContext, DataTableOption } from "./data-table.fields";
+/**
+ * Signature for the filter functions DataTable registers on its own feature
+ * set. `TFeatures` is left as `any` on purpose: the feature set is defined in
+ * terms of these functions, so naming it here would make the type circular.
+ * TanStack widens an `any` feature set to the full API surface, so nothing is
+ * lost inside the function body.
+ */
+type AnyFilterFn = TanstackFilterFn<any, any>;
+declare module "@tanstack/react-table" {
+    interface ColumnMeta<TFeatures extends TableFeatures, TData extends RowData, TValue> {
+        /**
+         * Horizontal alignment of the column's header and cells. Purely a
+         * presentation choice — nothing is inferred from the column type, so a
+         * boolean/icon column is centered and a number right-aligned only if you
+         * say so. Defaults to `"start"`.
+         */
+        align?: "start" | "center" | "end";
+        /**
+         * Fixed column width. A number is treated as `px`; a string is used as-is,
+         * so design tokens (`"var(--dimension-120)"`), percentages and `ch` all
+         * work. Widths are only honoured exactly with `tableLayout="fixed"`.
+         */
+        width?: DataTableColumnWidth;
+        /** Lower bound for the column width (same units as `width`). */
+        minWidth?: DataTableColumnWidth;
+        /** Upper bound for the column width (same units as `width`). */
+        maxWidth?: DataTableColumnWidth;
+        /**
+         * Declared data type. Drives which ui-kit control DataTable renders in the
+         * header filter row and in the inline row editor. Use `"custom"` (or omit)
+         * together with `renderFilter`/`renderEditor` for non-standard columns.
+         */
+        type?: DataTableColumnType;
+        /** Choices for `enum` / `multiEnum` columns (filter + editor). */
+        options?: DataTableOption[];
+        /** Enable inline editing for this column's cells. */
+        editable?: boolean;
+        /** Reject an empty value on commit. */
+        required?: boolean;
+        /** Per-field validation run on commit; return a message to block it. */
+        validate?: (value: unknown, draft: Record<string, unknown>) => string | undefined;
+        /** Escape hatch: render this column's header filter yourself. */
+        renderFilter?: (ctx: DataTableFilterContext<TData>) => ReactNode;
+        /** Escape hatch: render this column's inline editor yourself. */
+        renderEditor?: (ctx: DataTableEditorContext<TData>) => ReactNode;
+        /** @deprecated use `type` — kept so existing columns keep working. */
+        filterVariant?: "text" | "number" | "range" | "select";
+        /** @deprecated use `options`. */
+        filterOptions?: DataTableOption[];
+    }
+    interface TableMeta<TFeatures extends TableFeatures, TData extends RowData> {
+        /** Commit an inline cell edit; wired by DataTable to `onCellEditCommit`. */
+        updateData?: (rowId: string, columnId: string, value: unknown) => void;
+    }
+}
+/**
+ * The single source of truth for "what type is this column", shared by the
+ * filter-row control that renders `meta.type` (or its deprecated
+ * `filterVariant` alias) and the `typed` filter function that matches
+ * against it. The two resolving `type` independently — as they briefly did —
+ * is how a `filterVariant`-only column ends up with a number control writing
+ * `{ operator: "gt", value, to }` while the matcher still treats it as
+ * `"string"` and reads that object through `matchText`.
+ */
+export declare function resolveColumnType(meta?: {
+    type?: DataTableColumnType;
+    filterVariant?: "text" | "number" | "range" | "select";
+}): DataTableColumnType;
+export declare const typedFilterFn: AnyFilterFn;
+export type DataTableFilterOperator = "contains" | "notContains" | "equals" | "notEquals" | "startsWith" | "endsWith" | "gt" | "gte" | "lt" | "lte" | "between" | "empty" | "notEmpty";
+/** Value shape stored in `columnFilters` when using `conditionalFilterFn`. */
+export type DataTableConditionalFilterValue = {
+    operator: DataTableFilterOperator;
+    value?: unknown;
+    /** Upper bound for the `between` operator. */
+    to?: unknown;
+};
+/**
+ * TanStack `filterFn` implementing operator-based ("with conditions") column
+ * filtering. Register on a column via `filterFn: conditionalFilterFn` and store
+ * `{ operator, value, to? }` as the filter value.
+ *
+ * The operator set (contains/equals/startsWith/gt/between/…) only has
+ * meaning for `"string"`/`"number"`/`"int"` columns. The `enum`, `multiEnum`,
+ * `boolean` and date/time controls never write an `operator` at all — they
+ * store `{ values }`, `{ value }` or `{ from, to }` — so an operator-less
+ * value is handed to the typed matcher rather than treated as "no filter".
+ * Returning `true` for those (as this used to) made any such column opting
+ * into `"conditional"` match every row while `autoRemove` kept the entry, so
+ * the UI and `onColumnFiltersChange` both reported an active filter that did
+ * nothing.
+ */
+export declare const conditionalFilterFn: AnyFilterFn;
+/** A column width: a number (px) or any CSS length, including `var(--token)`. */
+export type DataTableColumnWidth = number | string;
+/**
+ * Fills in the column defaults DataTable's own controls depend on.
+ *
+ * **`filterFn`.** Every column in the filter row renders one of the typed
+ * controls — `meta.type` defaults to `"string"`, so this is true even for a
+ * column that declares no type at all — and those controls write an
+ * `{ operator, value }` object. TanStack's default `auto` comparator has no
+ * idea what to do with that object and matches nothing, so a column that
+ * forgot `filterFn: "typed"` silently emptied the table the moment anyone
+ * filtered it. Defaulting it here is what the docs always claimed happened.
+ * An explicit `filterFn`, string or function, always wins.
+ *
+ * **Sizes.** Mirrors numeric `meta.width` / `meta.minWidth` / `meta.maxWidth`
+ * into TanStack's own `size` / `minSize` / `maxSize`.
+ *
+ * Without this the two disagree: sticky offsets for pinned columns come from
+ * `column.getStart()`, which sums `getSize()`, so a frozen column rendered at
+ * `meta.width: 80` would push its neighbour by TanStack's default 150 and the
+ * frozen block would be misaligned. Resizing would drift the same way.
+ *
+ * CSS-string widths (`"15%"`, `"var(--dimension-120)"`) cannot be resolved to
+ * pixels here, so they stay CSS-only — see `getColumnSizeStyles`.
+ */
+export declare function applyColumnDefaults<T extends RowData>(columns: ColumnDef<T, unknown>[]): ColumnDef<T, unknown>[];
+/**
+ * Resolves the inline sizing styles for a column.
+ *
+ * `meta.width` is the declarative API. `columnDef.size` is deliberately *not*
+ * read as a fallback: TanStack merges `size: 150` into every column def, so it
+ * cannot distinguish a declared width from the default. Numeric widths are
+ * mirrored into `size` by `applyColumnDefaults`, so `getSize()` is the
+ * authority for them and the rendered width always matches the sticky offsets.
+ *
+ * A CSS-string width (`"15%"`, `"var(--dimension-120)"`) has no pixel value to
+ * mirror, so it stays CSS-only — including while resizing is enabled, where
+ * `getSize()` would otherwise report the 150px default and collapse the
+ * declared width the moment the feature is switched on. Once the user actually
+ * drags such a column its id appears in `columnSizing` and the dragged size
+ * takes over; `resetSize()` drops the entry and the declared width returns.
+ */
+export declare function getColumnSizeStyles<T extends RowData>(column: Column<T>, enableColumnResizing?: boolean, columnSizing?: ColumnSizingState): CSSProperties;
+/**
+ * Sticky-positioning styles for a pinned (frozen) column. Applied inline
+ * because the offsets are data-driven (`getStart`/`getAfter`). The visual
+ * treatment (shadow at the frozen edge) is done via `data-pinned` + tokens.
+ */
+/**
+ * Stacking order for sticky cells. A pinned header cell must beat both the
+ * sticky header row (z-10 from the Table organism) and pinned body cells,
+ * otherwise a frozen column's header is painted over while scrolling.
+ */
+export declare const DATA_TABLE_Z: {
+    readonly pinnedCell: 1;
+    /**
+     * The sticky actions cell sits one level above pinned body cells. Both
+     * freeze at the trailing edge (`getAfter("end")` is 0 for the last
+     * end-pinned column, and the actions cell is `end-0`), and the actions
+     * column is not part of TanStack's column model so `getAfter` cannot
+     * account for its width. At equal z-index the winner came down to DOM
+     * order; this at least makes the actions cell deterministically on top.
+     * The overlap itself is a known limitation — see the dev warning in
+     * DataTable for the `enableColumnPinning` + `stickyActions` combination.
+     */
+    readonly stickyActionsCell: 2;
+    /**
+     * Any sticky header-area cell that is not pinned — notably the filter row,
+     * whose `<td>`s are raw elements and so never pick up the `sticky top-0
+     * z-10` the `Table` organism puts on real header cells. Without a level of
+     * their own they sat at `z-index: auto` while pinned *body* cells carry
+     * `pinnedCell`, so scrolling painted a frozen column straight over the
+     * sticky filter row. Above every body level, below the pinned header ones.
+     */
+    readonly stickyHeaderCell: 10;
+    readonly pinnedHeaderCell: 20;
+    readonly stickyActionsHeaderCell: 21;
+};
+export declare function getPinningStyles<T extends RowData>(column: Column<T>, kind?: "header" | "body"): CSSProperties;
+/** True when this column is the last of the start-pinned group (edge shadow). */
+export declare function isLastStartPinned<T extends RowData>(column: Column<T>): boolean;
+/** True when this column is the first of the end-pinned group (edge shadow). */
+export declare function isFirstEndPinned<T extends RowData>(column: Column<T>): boolean;
+export type DataTableCellSpan = {
+    colSpan?: number;
+    rowSpan?: number;
+    hidden?: boolean;
+};
+export type DataTableGetCellSpan<T extends RowData> = (cell: Cell<T, unknown>, context: {
+    row: Row<T>;
+    rows: Row<T>[];
+    rowIndex: number;
+}) => DataTableCellSpan | undefined;
+export type DataTableInstance<T extends RowData> = TanstackTable<T>;
+export declare const dataTableFeatures: {
+    columnFilteringFeature: import("@tanstack/react-table").TableFeature;
+    columnOrderingFeature: import("@tanstack/react-table").TableFeature;
+    columnPinningFeature: import("@tanstack/react-table").TableFeature;
+    columnResizingFeature: import("@tanstack/react-table").TableFeature;
+    columnSizingFeature: import("@tanstack/react-table").TableFeature;
+    columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
+    globalFilteringFeature: import("@tanstack/react-table").TableFeature;
+    rowExpandingFeature: import("@tanstack/react-table").TableFeature;
+    rowPaginationFeature: import("@tanstack/react-table").TableFeature;
+    rowSelectionFeature: import("@tanstack/react-table").TableFeature;
+    rowSortingFeature: import("@tanstack/react-table").TableFeature;
+    expandedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    filterFns: {
+        conditional: AnyFilterFn;
+        includesString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+        typed: AnyFilterFn;
+    };
+    sortFns: {
+        alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
+        datetime: import("@tanstack/react-table").CreatedSortFn<any, any>;
+        text: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    };
+};
+export {};
+//# sourceMappingURL=data-table.helpers.d.ts.map

package/dist/src/organisms/data-table.helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.helpers.d.ts","sourceRoot":"","sources":["../../../src/organisms/data-table.helpers.ts"],"names":[],"mappings":"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"}

package/dist/src/organisms/table.d.ts

@@ -2,7 +2,7 @@
  * Table — @techsio/ui-kit organism.
  *
  * @component Table
- * @componentVersion v1.0.0
+ * @componentVersion v1.1.0
  * @skill table-usage
  * @changelog libs/ui/stories/changelog/changelog.stories.tsx
  *
@@ -229,8 +229,8 @@ export declare namespace Table {
     var Body: ({ children, ref, className, ...props }: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
     var Footer: ({ children, ref, className, ...props }: TableFooterProps) => import("react/jsx-runtime").JSX.Element;
     var Row: ({ children, ref, className, selected, ...props }: TableRowProps) => import("react/jsx-runtime").JSX.Element;
-    var ColumnHeader: ({ children, ref, className, numeric, ...props }: TableColumnHeaderProps) => import("react/jsx-runtime").JSX.Element;
-    var Cell: ({ children, ref, className, numeric, ...props }: TableCellProps) => import("react/jsx-runtime").JSX.Element;
+    var ColumnHeader: ({ children, ref, className, numeric, align, ...props }: TableColumnHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    var Cell: ({ children, ref, className, numeric, align, ...props }: TableCellProps) => import("react/jsx-runtime").JSX.Element;
     var displayName: string;
 }
 interface TableCaptionProps extends ComponentPropsWithoutRef<"caption"> {
@@ -249,13 +249,21 @@ interface TableRowProps extends ComponentPropsWithoutRef<"tr"> {
     ref?: RefObject<HTMLTableRowElement>;
     selected?: boolean;
 }
-interface TableColumnHeaderProps extends ComponentPropsWithoutRef<"th"> {
+/**
+ * Horizontal alignment of a header or body cell. Typed so a misspelling like
+ * `"centre"` fails the build instead of silently rendering unaligned — passing
+ * `data-align` through the prop spread still works for existing call sites.
+ */
+export type TableAlign = "start" | "center" | "end";
+type TableColumnHeaderProps = Omit<ComponentPropsWithoutRef<"th">, "align"> & {
     ref?: RefObject<HTMLTableCellElement>;
     numeric?: boolean;
-}
-interface TableCellProps extends ComponentPropsWithoutRef<"td"> {
+    align?: TableAlign;
+};
+type TableCellProps = Omit<ComponentPropsWithoutRef<"td">, "align"> & {
     ref?: RefObject<HTMLTableCellElement>;
     numeric?: boolean;
-}
+    align?: TableAlign;
+};
 export {};
 //# sourceMappingURL=table.d.ts.map

package/dist/src/organisms/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/organisms/table.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EACL,KAAK,wBAAwB,EAE7B,KAAK,SAAS,EAEf,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGrD,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA4FjB,CAAA;AAyBF,UAAU,UACR,SAAQ,YAAY,CAAC,OAAO,aAAa,CAAC,EACxC,wBAAwB,CAAC,OAAO,CAAC;IACnC,GAAG,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAA;CAClC;AAED,wBAAgB,KAAK,CAAC,EACpB,OAAO,EACP,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,QAAQ,EACR,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,UAAU,2CA6BZ;yBAzCe,KAAK;0DAqDlB,iBAAiB;yDAoBjB,gBAAgB;uDAoBhB,cAAc;yDAoBd,gBAAgB;gEAsBhB,aAAa;wEA2Bb,sBAAsB;gEA4BtB,cAAc;;;AAlJjB,UAAU,iBAAkB,SAAQ,wBAAwB,CAAC,SAAS,CAAC;IACrE,GAAG,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAA;CACzC;AAkBD,UAAU,gBAAiB,SAAQ,wBAAwB,CAAC,OAAO,CAAC;IAClE,GAAG,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAA;CACzC;AAkBD,UAAU,cAAe,SAAQ,wBAAwB,CAAC,OAAO,CAAC;IAChE,GAAG,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAA;CACzC;AAkBD,UAAU,gBAAiB,SAAQ,wBAAwB,CAAC,OAAO,CAAC;IAClE,GAAG,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAA;CACzC;AAkBD,UAAU,aAAc,SAAQ,wBAAwB,CAAC,IAAI,CAAC;IAC5D,GAAG,CAAC,EAAE,SAAS,CAAC,mBAAmB,CAAC,CAAA;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAwBD,UAAU,sBAAuB,SAAQ,wBAAwB,CAAC,IAAI,CAAC;IACrE,GAAG,CAAC,EAAE,SAAS,CAAC,oBAAoB,CAAC,CAAA;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAyBD,UAAU,cAAe,SAAQ,wBAAwB,CAAC,IAAI,CAAC;IAC7D,GAAG,CAAC,EAAE,SAAS,CAAC,oBAAoB,CAAC,CAAA;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/organisms/table.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EACL,KAAK,wBAAwB,EAE7B,KAAK,SAAS,EAEf,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGrD,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAmGjB,CAAA;AAyBF,UAAU,UACR,SAAQ,YAAY,CAAC,OAAO,aAAa,CAAC,EACxC,wBAAwB,CAAC,OAAO,CAAC;IACnC,GAAG,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAA;CAClC;AAED,wBAAgB,KAAK,CAAC,EACpB,OAAO,EACP,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,QAAQ,EACR,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,UAAU,2CA6BZ;yBAzCe,KAAK;0DAqDlB,iBAAiB;yDAoBjB,gBAAgB;uDAoBhB,cAAc;yDAoBd,gBAAgB;gEAsBhB,aAAa;+EAsCb,sBAAsB;uEA+BtB,cAAc;;;AAhKjB,UAAU,iBAAkB,SAAQ,wBAAwB,CAAC,SAAS,CAAC;IACrE,GAAG,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAA;CACzC;AAkBD,UAAU,gBAAiB,SAAQ,wBAAwB,CAAC,OAAO,CAAC;IAClE,GAAG,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAA;CACzC;AAkBD,UAAU,cAAe,SAAQ,wBAAwB,CAAC,OAAO,CAAC;IAChE,GAAG,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAA;CACzC;AAkBD,UAAU,gBAAiB,SAAQ,wBAAwB,CAAC,OAAO,CAAC;IAClE,GAAG,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAA;CACzC;AAkBD,UAAU,aAAc,SAAQ,wBAAwB,CAAC,IAAI,CAAC;IAC5D,GAAG,CAAC,EAAE,SAAS,CAAC,mBAAmB,CAAC,CAAA;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAuBD;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;AAKnD,KAAK,sBAAsB,GAAG,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,GAAG;IAC5E,GAAG,CAAC,EAAE,SAAS,CAAC,oBAAoB,CAAC,CAAA;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB,CAAA;AA2BD,KAAK,cAAc,GAAG,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,GAAG;IACpE,GAAG,CAAC,EAAE,SAAS,CAAC,oBAAoB,CAAC,CAAA;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB,CAAA"}

package/dist/stories/changelog/changelog.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"changelog.stories.d.ts","sourceRoot":"","sources":["../../../stories/changelog/changelog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AA2JtD,iBAAS,SAAS,4CAUjB;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAKhC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,SAAS,CAAM,CAAA"}
+{"version":3,"file":"changelog.stories.d.ts","sourceRoot":"","sources":["../../../stories/changelog/changelog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAiKtD,iBAAS,SAAS,4CAUjB;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAKhC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,SAAS,CAAM,CAAA"}

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

@@ -0,0 +1,145 @@
+import type { StoryObj } from "@storybook/react";
+import { type ComponentType } from "react";
+import { type DataTableProps } from "../../src/organisms/data-table";
+type Person = {
+    id: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+    role: string;
+    status: "active" | "invited" | "suspended";
+    age: number;
+    visits: number;
+};
+declare const meta: {
+    title: string;
+    component: ComponentType<DataTableProps<Person>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: "select";
+            options: string[];
+        };
+        size: {
+            control: "select";
+            options: string[];
+        };
+        stickyHeader: {
+            control: "boolean";
+        };
+        striped: {
+            control: "boolean";
+        };
+        hideHeader: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<DataTableProps<Person>>;
+export declare const Playground: Story;
+export declare const Sorting: Story;
+export declare const ColumnFiltersWithConditions: Story;
+export declare const HeaderFilterTemplate: Story;
+export declare const GlobalSearch: Story;
+export declare const ToolbarActions: Story;
+/**
+ * Toolbar actions on their own, with no global search and no column-visibility
+ * cog. The toolbar has to render for these alone — it used to be gated on the
+ * other two, so a table configured this way silently dropped its actions.
+ */
+export declare const ToolbarActionsOnly: Story;
+export declare const EmptyState: Story;
+export declare const RowActions: Story;
+export declare const ColumnWidthsAndAlignment: Story;
+/**
+ * A numeric `meta.width` must also reach TanStack's size model, otherwise the
+ * sticky offset of the next pinned column is computed from the default 150 and
+ * the frozen block drifts out of alignment.
+ */
+export declare const FrozenColumnWidths: Story;
+export declare const FrozenColumns: Story;
+export declare const StickyHeader: Story;
+/**
+ * Grouped headers stack two label rows above the filter row. Each row needs its
+ * own sticky offset — `Table.ColumnHeader` sticks them all at `top: 0` by
+ * default, which piles them on top of each other — and the filter row has to
+ * clear both. Scroll the body to check nothing overlaps.
+ */
+export declare const GroupedStickyHeader: Story;
+export declare const HiddenHeader: Story;
+export declare const StripedRows: Story;
+export declare const StripedOutlined: Story;
+export declare const InfiniteScrollVirtualized: Story;
+/**
+ * Without `maxHeight`, `onReachEnd` watches the *page* scroll instead of an
+ * internal container. A second, unrelated effect used to force-measure the
+ * (always unbounded, so always "at the bottom") scroll container on every
+ * appended page — re-arming the "already reported" latch the instant new rows
+ * landed, regardless of where the page had actually scrolled to. On a fast,
+ * continuous scroll (no incidental upward wobble to reset it first) the next
+ * real reach-end went silently missing. Both existing infinite-scroll stories
+ * set `maxHeight`, which is exactly why this went unnoticed.
+ */
+export declare const WindowScrollInfiniteLoad: Story;
+/**
+ * `enableVirtualization` without `maxHeight` has no bounded scroll container
+ * to measure, so windowing falls back to rendering every row — this asserts
+ * that fallback rather than a truncated table. Check the browser console for
+ * the accompanying dev warning.
+ */
+export declare const VirtualizationWithoutMaxHeight: Story;
+export declare const ColSpanRowSpan: Story;
+export declare const RowClick: Story;
+export declare const RowSelection: Story;
+export declare const ColumnReorder: Story;
+export declare const RowReorder: Story;
+export declare const ColumnVisibility: Story;
+export declare const CustomCellTemplate: Story;
+export declare const TreeStructure: Story;
+export declare const TreeStructureTinted: Story;
+export declare const ExpandedRowDetail: Story;
+export declare const InlineEdit: Story;
+export declare const InlineEditCancel: Story;
+export declare const InlineEditCustomCell: Story;
+export declare const Pagination: Story;
+type Employee = {
+    id: string;
+    name: string;
+    department: string;
+    skills: string[];
+    active: boolean;
+    salary: number;
+    startDate: string;
+    shiftStart: string;
+};
+/** The Employee stories are typed against their own row shape rather than
+ * being cast through `Person`, so a `meta` that does not match the column-meta
+ * contract this component introduces fails the build. */
+type EmployeeStory = StoryObj<DataTableProps<Employee>>;
+export declare const TypedColumnFilters: EmployeeStory;
+/**
+ * A column declaring only the deprecated `meta.filterVariant` — no
+ * `meta.type`, no explicit `filterFn` — is what `applyColumnDefaults` and
+ * `resolveColumnType` exist to keep working: the default `filterFn: "typed"`
+ * and the number control both have to resolve the same type from
+ * `filterVariant` alone, or the control writes an operator object the
+ * matcher reads as plain text.
+ */
+export declare const DeprecatedFilterVariant: Story;
+export declare const CustomFilterTemplate: EmployeeStory;
+export declare const InlineEditByColumnType: EmployeeStory;
+export declare const EditModeLocksInteractions: EmployeeStory;
+export declare const SizeSynchronised: EmployeeStory;
+export declare const SingleRowSelection: Story;
+export declare const MaxTwoRowsSelectable: Story;
+export declare const ConditionalRowSelection: Story;
+export declare const PerRowActionPermissions: Story;
+export declare const LoadingSkeletons: Story;
+export declare const LoadingMore: Story;
+export declare const DragAffordances: Story;
+export declare const AccessibleSemantics: Story;
+//# sourceMappingURL=data-table.stories.d.ts.map

package/dist/stories/organisms/data-table.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.stories.d.ts","sourceRoot":"","sources":["../../../stories/organisms/data-table.stories.tsx"],"names":[],"mappings":"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"}

package/dist/stories/organisms/table.stories.d.ts

@@ -53,4 +53,11 @@ export declare const CaptionBottom: Story;
 export declare const WithStickyColumn: Story;
 export declare const WithSelection: Story;
 export declare const WithSelectionAndActions: Story;
+/**
+ * Per-cell horizontal alignment via `data-align` (`start | center | end`).
+ * Unlike `numeric` — which says "this value is a number" — `data-align` is a
+ * pure presentation choice, so an icon or boolean column can be centred without
+ * claiming to be numeric.
+ */
+export declare const Alignment: Story;
 //# sourceMappingURL=table.stories.d.ts.map

package/dist/stories/organisms/table.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.stories.d.ts","sourceRoot":"","sources":["../../../stories/organisms/table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAA;AAKjD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCoB,CAAA;AAE9B,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AA2ClC,eAAO,MAAM,KAAK,EAAE,KA4BnB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KA4BrB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAgCzB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KA4BrB,CAAA;AAID,eAAO,MAAM,KAAK,EAAE,KAiCnB,CAAA;AAKD,eAAO,MAAM,UAAU,EAAE,KA8CxB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KA0C1B,CAAA;AAID,eAAO,MAAM,YAAY,EAAE,KA0E1B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAmB1B,CAAA;AAID,eAAO,MAAM,iBAAiB,EAAE,KA6B/B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KA2B3B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KA4C9B,CAAA;AAID,eAAO,MAAM,aAAa,EAAE,KAmF3B,CAAA;AAED,eAAO,MAAM,uBAAuB,EAAE,KAyGrC,CAAA"}
+{"version":3,"file":"table.stories.d.ts","sourceRoot":"","sources":["../../../stories/organisms/table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAA;AAKjD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCoB,CAAA;AAE9B,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AA2ClC,eAAO,MAAM,KAAK,EAAE,KA4BnB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KA4BrB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAgCzB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KA4BrB,CAAA;AAID,eAAO,MAAM,KAAK,EAAE,KAiCnB,CAAA;AAKD,eAAO,MAAM,UAAU,EAAE,KA8CxB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KA0C1B,CAAA;AAID,eAAO,MAAM,YAAY,EAAE,KA0E1B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAmB1B,CAAA;AAID,eAAO,MAAM,iBAAiB,EAAE,KA6B/B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KA2B3B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KA4C9B,CAAA;AAID,eAAO,MAAM,aAAa,EAAE,KAmF3B,CAAA;AAED,eAAO,MAAM,uBAAuB,EAAE,KAyGrC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,SAAS,EAAE,KA6BvB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techsio/ui-kit",
-  "version": "0.37.1",
+  "version": "0.38.0",
   "type": "module",
   "repository": {
     "type": "git",
@@ -78,10 +78,16 @@
     "semantic-release": "semantic-release"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/mdi-light": "^1.2.2",
     "@iconify-json/svg-spinners": "^1.2.4",
     "@iconify/tailwind4": "^1.1.0",
+    "@tanstack/react-table": "^9.1.2",
+    "@tanstack/react-virtual": "^3.14.8",
     "@zag-js/accordion": "^1.41.2",
     "@zag-js/carousel": "^1.41.2",
     "@zag-js/checkbox": "^1.41.2",

package/src/tokens/components/components.css

@@ -39,6 +39,7 @@
 @import "./molecules/_tree-view.css";
 
 @import "./organisms/_table.css";
+@import "./organisms/_data-table.css";
 @import "./organisms/_footer.css";
 @import "./organisms/_header.css";
 @import "./organisms/_gallery.css";

package/src/tokens/components/organisms/_data-table.css

@@ -0,0 +1,51 @@
+/*
+ * DataTable — nested-row tint.
+ *
+ * `tintNestedRows` shades a row by `row.depth` as an inset box-shadow rather
+ * than a background, so it composes with `striped`'s zebra background instead
+ * of losing the Tailwind-merge conflict against it (two `bg-*` utilities on
+ * one element can't both render; a shadow layers on top of whichever
+ * background is already there). Reuses `--color-table-row-bg-hover`, an
+ * existing Figma-exported Table token, rather than a raw semantic token or a
+ * new one added ahead of the Figma sync this component's other colors are
+ * still waiting on (see the "PROTOTYPE styling" note in data-table.tsx).
+ */
+/*
+ * Verified: box-shadow on a `<tr>` *does* paint under `border-collapse` in
+ * Blink (Chromium 149) — a differential screenshot of a plain vs tinted row in
+ * a collapsed table measures 255,255,255 vs 178,178,178. This has been
+ * reported several times as a no-op; it is not one in Chrome. Not verified in
+ * WebKit/Safari, so if the tint is ever confirmed missing there, the fix is a
+ * `background-image` gradient layer (as `data-table-frozen-cell` uses), which
+ * composes with `striped` without the Tailwind-merge conflict a `background`
+ * would cause.
+ */
+@utility data-table-row-nested-tint {
+  box-shadow: inset 0 0 0 9999px var(--color-table-row-bg-hover);
+}
+
+/*
+ * DataTable — frozen (pinned / sticky-actions) cell surface.
+ *
+ * A frozen cell must be opaque, or the horizontally-scrolled content passes
+ * straight under it. It must *also* show the row's own colour, or striping and
+ * selection stop dead at the frozen column.
+ *
+ * `background: inherit` gives the second without the first: every row-level
+ * tint in this system is an alpha overlay meant to composite over a surface
+ * (`--color-table-row-striped-secondary` is literally `oklch(0 0 0 / 0)`), so
+ * inheriting it yields a see-through cell.
+ *
+ * Compositing solves both at once — the same trick `OPAQUE_HEADER_BG` uses for
+ * the header. The opaque table surface is the background-*color*; the row tint
+ * is painted over it as a gradient image, read from a custom property the row
+ * sets. Custom properties inherit, so the row can drive its cells' tint
+ * without either knowing about the other.
+ */
+@utility data-table-frozen-cell {
+  background-color: var(--color-table-bg);
+  background-image: linear-gradient(
+    var(--dt-row-tint, transparent),
+    var(--dt-row-tint, transparent)
+  );
+}