@payfit/unity-components 2.65.27 → 2.66.0

package/README.md

@@ -19,5 +19,6 @@ Add an emoji below:
 - 🦄
 - 🏰
 - 🐧
+- 🦉
 
 In some cases, the library is not published properly, which fails publish for payslip-template.

package/dist/esm/components/data-table/DataTable.d.ts

@@ -1,9 +1,9 @@
-import { default as React, ReactNode } from 'react';
-import { Row, RowData, Table as TableType } from '@tanstack/react-table';
+import { ReactNode, default as React } from 'react';
+import { ReactTable as TableType, Row, RowData, TableFeatures } from '@tanstack/react-table';
 import { TablePaginationProps } from '../table/parts/TablePagination.js';
 import { TableProps, TableRootProps } from '../table/Table.js';
 declare module '@tanstack/react-table' {
-    interface ColumnMeta<TData extends RowData, TValue> {
+    interface ColumnMeta<TFeatures, TData extends RowData, TValue> {
         /**
          * Marks the cell as a row header. When true, the cell renders as `<th scope="row">` instead of `<td>`.
          * Use this for the first column that identifies each row (e.g., ID, name). Important for accessibility.
@@ -100,9 +100,9 @@ export interface DataTablePaginationOptions {
      */
     labels?: DataTablePaginationLabels;
 }
-export interface DataTableProps<TData> extends Omit<TableRootProps, 'children'>, Omit<TableProps, 'children'> {
+export interface DataTableProps<TFeatures extends TableFeatures, TData extends RowData> extends Omit<TableRootProps, 'children'>, Omit<TableProps, 'children'> {
     /** The table instance from @tanstack/react-table */
-    table: TableType<TData>;
+    table: TableType<TFeatures, TData>;
     /**
      * Optional loading state
      * @default false
@@ -129,18 +129,8 @@ export interface DataTableProps<TData> extends Omit<TableRootProps, 'children'>,
      */
     errorState?: React.ReactNode;
     /**
-     * Pagination customization options, including page size options and labels
-     * @default {
-     *   pageSizeOptions: [
-     *     { value: '10', label: '10' },
-     *     { value: '50', label: '50' },
-     *     { value: '100', label: '100' },
-     *     { value: '200', label: '200' },
-     *   ],
-     *   labels: {
-     *     itemLabel: 'unity:component:table:pagination:item',
-     *   },
-     * }
+     * Optional pagination customization options, including page size options and labels.
+     * The pagination footer is rendered automatically when the table includes `rowPaginationFeature`.
      */
     pagination?: DataTablePaginationOptions;
     /**
@@ -166,7 +156,7 @@ export interface DataTableProps<TData> extends Omit<TableRootProps, 'children'>,
      * Render function for table rows
      * @param row - The row data of a given row in the table
      */
-    children: (row: Row<TData>) => React.ReactNode;
+    children: (row: Row<TFeatures, TData>) => React.ReactNode;
     /**
      * Optional callback fired when the button is clicked in the error state.
      * Used to navigate away or retry when data loading fails.
@@ -228,14 +218,19 @@ export interface DataTableProps<TData> extends Omit<TableRootProps, 'children'>,
  * @example
  * ```tsx
  * import { DataTableRoot, DataTable, DataTableBulkActions, TableRow, TableCell } from '@payfit/unity-components'
- * import { flexRender, useReactTable, getCoreRowModel, getPaginationRowModel, createColumnHelper } from '@tanstack/react-table'
+ * import { createColumnHelper, createPaginatedRowModel, flexRender, stockFeatures, tableFeatures, useTable, type StockFeatures } from '@tanstack/react-table'
  * import { useState, useMemo } from 'react'
  *
+ * const features = tableFeatures({
+ *   ...stockFeatures,
+ *   paginatedRowModel: createPaginatedRowModel(),
+ * })
+ *
  * function EmployeeTable() {
  *   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 })
  *   const [rowSelection, setRowSelection] = useState({})
  *
- *   const columnHelper = createColumnHelper<Employee>()
+ *   const columnHelper = createColumnHelper<StockFeatures, Employee>()
  *
  *   // Define columns with optional width control for fixed layout
  *   const columns = useMemo(() => [
@@ -258,15 +253,14 @@ export interface DataTableProps<TData> extends Omit<TableRootProps, 'children'>,
  *     })
  *   ], [])
  *
- *   const table = useReactTable({
+ *   const table = useTable({
+ *     features,
  *     data: employees,
  *     columns,
  *     getRowId: (row) => row.id,
  *     state: { pagination, rowSelection },
  *     onPaginationChange: setPagination,
  *     onRowSelectionChange: setRowSelection,
- *     getCoreRowModel: getCoreRowModel(),
- *     getPaginationRowModel: getPaginationRowModel(),
  *     enableRowSelection: true,
  *     enableMultiRowSelection: true,
  *   })
@@ -297,12 +291,13 @@ export interface DataTableProps<TData> extends Omit<TableRootProps, 'children'>,
  * @remarks
  * - For bulk actions, use DataTableBulkActions component alongside DataTable within DataTableRoot
  * - DataTableBulkActions provides the F6 keyboard shortcut for accessibility
+ * - Configure `rowPaginationFeature` on the Tanstack table instance to render the Unity pagination footer automatically; use the `pagination` prop only to customize it
  * - **Layout modes**: Use `layout="auto"` (default) for content-driven columns with scrolling, or `layout="fixed"` for predictable widths that fit the container
  * - **Setting column widths**: Add `headerClassName` to column meta with width classes (e.g., `'uy:w-[200px]'`, `'uy:w-1/3'`)
  * - **Fixed layout best practices**: Set explicit widths on column headers and use truncation for overflow content
  * - [API](https://unity-components.payfit.io/?path=/docs/data-datatable--docs) • [Demo](https://unity-components.payfit.io/?path=/docs/data-datatable--docs)
  */
-declare function DataTable<TData extends object>({ table, isLoading, error, emptyState, loadingState, errorState, pagination, minRows, maxRows, onPageChange: onPaginationChange, onPageHover: onPaginationPageHover, onPageSizeChange: onPaginationSizeChange, children, enableVirtualization, estimatedRowHeight, overscan, onErrorButtonPress, onNoDataButtonPress, noDataDescription, onNoSearchResultsButtonPress, ...rest }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare function DataTable<TFeatures extends TableFeatures, TData extends RowData>({ table, isLoading, error, emptyState, loadingState, errorState, pagination, minRows, maxRows, onPageChange: onPaginationChange, onPageHover: onPaginationPageHover, onPageSizeChange: onPaginationSizeChange, children, enableVirtualization, estimatedRowHeight, overscan, onErrorButtonPress, onNoDataButtonPress, noDataDescription, onNoSearchResultsButtonPress, ...rest }: DataTableProps<TFeatures, TData>): import("react/jsx-runtime").JSX.Element;
 declare namespace DataTable {
     var displayName: string;
 }

package/dist/esm/components/data-table/DataTable.js

@@ -1,102 +1,125 @@
 import { CircularIconButton as e } from "../icon-button/CircularIconButton.js";
-import { TableBody as t } from "../table/parts/TableBody.js";
-import { TableColumnHeader as n } from "../table/parts/TableColumnHeader.js";
-import { TableEmptyStateError as r, TableEmptyStateLoading as i, TableEmptyStateNoData as a, TableNoSearchResults as o } from "../table/parts/TableEmptyState.js";
-import { TableHeader as s } from "../table/parts/TableHeader.js";
-import { TablePagination as c } from "../table/parts/TablePagination.js";
-import { Table as l, TableRoot as u } from "../table/Table.js";
-import { ColumnSortHeader as d } from "./parts/ColumnSortHeader.js";
-import { useEffect as f, useRef as p } from "react";
-import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
-import { useId as _ } from "react-aria/useId";
-import { flexRender as v } from "@tanstack/react-table";
+import { TablePagination as t } from "../table/parts/TablePagination.js";
+import { Table as n, TableRoot as r } from "../table/Table.js";
+import { TableBody as i } from "../table/parts/TableBody.js";
+import { TableColumnHeader as a } from "../table/parts/TableColumnHeader.js";
+import { TableEmptyStateError as o, TableEmptyStateLoading as s, TableEmptyStateNoData as c, TableNoSearchResults as l } from "../table/parts/TableEmptyState.js";
+import { TableHeader as u } from "../table/parts/TableHeader.js";
+import { getPaginationTable as d } from "./DataTablePagination.js";
+import { ColumnSortHeader as f, isSortableHeader as p } from "./parts/ColumnSortHeader.js";
+import { useMemo as m, useRef as h } from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { useId as y } from "react-aria/useId";
+import { flexRender as b } from "@tanstack/react-table";
+import { useSelector as x } from "@tanstack/react-store";
 //#region src/components/data-table/DataTable.tsx
-var y = ({ children: t, columnNameId: n, helperText: r }) => r === void 0 ? /* @__PURE__ */ h(m, { children: t }) : /* @__PURE__ */ g("div", {
+var S = ({ children: t, columnNameId: n, helperText: r }) => r === void 0 ? /* @__PURE__ */ _(g, { children: t }) : /* @__PURE__ */ v("div", {
 	className: "uy:flex uy:gap-50 uy:items-center",
-	children: [t, /* @__PURE__ */ h(e, {
+	children: [t, /* @__PURE__ */ _(e, {
 		"aria-labelledby": n,
 		icon: "QuestionOutlined",
 		title: r,
 		color: "content.neutral.lowest"
 	})]
-});
-function b({ table: e, isLoading: m, error: b, emptyState: x, loadingState: S, errorState: C, pagination: w, minRows: T, maxRows: E, onPageChange: D, onPageHover: O, onPageSizeChange: k, children: A, enableVirtualization: j, estimatedRowHeight: M, overscan: N, onErrorButtonPress: P, onNoDataButtonPress: F, noDataDescription: I, onNoSearchResultsButtonPress: L, ...R }) {
-	let z = p(null), B = _(), { pageIndex: V, pageSize: H } = e.getState().pagination;
-	f(() => {
-		z.current?.scrollToTop();
-	}, [V, H]);
-	let U = {
-		label: R.label,
-		description: R.description,
-		isHorizontalScrollEnabled: R.isHorizontalScrollEnabled,
-		layout: R.layout
+}), C = ({ table: e, tableRef: n, pagination: r, onPageChange: i, onPageHover: a, onPageSizeChange: o }) => {
+	let s = e.atoms.pagination, { pageIndex: c, pageSize: l } = x(m(() => ({
+		get: () => s.get(),
+		subscribe: (e) => s.subscribe((t) => {
+			n.current?.scrollToTop(), e(t);
+		})
+	}), [s, n]));
+	return e.getPageCount() <= 0 ? null : /* @__PURE__ */ _(t, {
+		pageCount: e.getPageCount(),
+		rowCount: e.getRowCount(),
+		currentPage: c + 1,
+		rowsPerPage: l,
+		pageSizeOptions: r.pageSizeOptions,
+		onPageChange: (t, n, r) => {
+			e.setPageIndex(t - 1), i?.(t - 1, n, r);
+		},
+		onPageHover: (e) => {
+			a?.(e);
+		},
+		onPageSizeChange: (t) => {
+			e.setPageSize(t), o?.(t);
+		},
+		itemLabel: r.labels?.itemLabel
+	});
+};
+function w({ table: e, isLoading: t, error: m, emptyState: g, loadingState: x, errorState: w, pagination: T, minRows: E, maxRows: D, onPageChange: O, onPageHover: k, onPageSizeChange: A, children: j, enableVirtualization: M, estimatedRowHeight: N, overscan: P, onErrorButtonPress: F, onNoDataButtonPress: I, noDataDescription: L, onNoSearchResultsButtonPress: R, ...z }) {
+	let B = h(null), V = y(), H = d(e), U = {
+		label: z.label,
+		description: z.description,
+		isHorizontalScrollEnabled: z.isHorizontalScrollEnabled,
+		layout: z.layout
 	}, W = () => {
-		if (m) return S ?? /* @__PURE__ */ h(i, {});
-		if (b) return C ?? /* @__PURE__ */ h(r, { onButtonPress: P });
+		if (t) return x ?? /* @__PURE__ */ _(s, {});
+		if (m) return w ?? /* @__PURE__ */ _(o, { onButtonPress: F });
 	}, G = () => {
-		let t = e.getState(), n = t.globalFilter !== void 0 && t.globalFilter !== "", r = t.columnFilters !== void 0 && t.columnFilters.length > 0;
+		let t = e.state, n = t.globalFilter !== void 0 && t.globalFilter !== "", r = t.columnFilters !== void 0 && t.columnFilters.length > 0;
 		return n || r;
-	}, K = () => m || b ? W() : e.getRowModel().rows.length === 0 ? G() && L ? /* @__PURE__ */ h(o, { onButtonPress: L }) : x ?? /* @__PURE__ */ h(a, {
-		onButtonPress: F,
-		description: I
-	}) : x;
-	return /* @__PURE__ */ g(u, {
-		minRows: T,
-		maxRows: E,
-		children: [/* @__PURE__ */ g(l, {
-			ref: z,
+	}, K = () => t || m ? W() : e.getRowModel().rows.length === 0 ? G() && R ? /* @__PURE__ */ _(l, { onButtonPress: R }) : g ?? /* @__PURE__ */ _(c, {
+		onButtonPress: I,
+		description: L
+	}) : g;
+	return /* @__PURE__ */ v(r, {
+		minRows: E,
+		maxRows: D,
+		children: [/* @__PURE__ */ v(n, {
+			ref: B,
 			...U,
-			enableVirtualization: j,
-			estimatedRowHeight: M,
-			overscan: N,
-			children: [/* @__PURE__ */ h(s, { children: e.getHeaderGroups().map((t) => t.headers.map((t) => {
-				let r = `${B}-column-name-${t.column.columnDef.id}`;
-				return /* @__PURE__ */ h(n, {
-					isFocusable: t.column.columnDef.meta?.isFocusable,
-					className: t.column.columnDef.meta?.headerClassName,
-					children: e.getRowModel().rows.length > 0 && t.column.getCanSort() ? /* @__PURE__ */ h(d, {
-						header: t,
-						children: /* @__PURE__ */ h(y, {
-							columnNameId: r,
-							helperText: t.column.columnDef.meta?.helperText,
-							children: /* @__PURE__ */ h("span", {
-								id: r,
-								children: v(t.column.columnDef.header, t.getContext())
+			enableVirtualization: M,
+			estimatedRowHeight: N,
+			overscan: P,
+			children: [/* @__PURE__ */ _(u, { children: e.getHeaderGroups().map((t) => {
+				let n = 0;
+				return /* @__PURE__ */ _("tr", { children: t.headers.map((r) => {
+					let i = n;
+					if (n += r.colSpan, r.rowSpan === 0) return null;
+					let o = !r.isPlaceholder || r.rowSpan > 1, s = `${V}-column-name-${r.column.id}`, c = r.column.columnDef.meta, l = p(r);
+					return /* @__PURE__ */ _(a, {
+						colIndex: i,
+						rowIndex: t.depth,
+						colSpan: r.colSpan,
+						rowSpan: r.rowSpan,
+						scope: r.colSpan > 1 ? "colgroup" : "col",
+						isFocusable: c?.isFocusable,
+						className: c?.headerClassName,
+						children: o && e.getRowModel().rows.length > 0 && l ? /* @__PURE__ */ _(f, {
+							header: r,
+							children: /* @__PURE__ */ _(S, {
+								columnNameId: s,
+								helperText: c?.helperText,
+								children: /* @__PURE__ */ _("span", {
+									id: s,
+									children: b(r.column.columnDef.header, r.getContext())
+								})
+							})
+						}) : o ? /* @__PURE__ */ _(S, {
+							columnNameId: s,
+							helperText: c?.helperText,
+							children: /* @__PURE__ */ _("span", {
+								id: s,
+								children: b(r.column.columnDef.header, r.getContext())
 							})
-						})
-					}) : /* @__PURE__ */ h(y, {
-						columnNameId: r,
-						helperText: t.column.columnDef.meta?.helperText,
-						children: /* @__PURE__ */ h("span", {
-							id: r,
-							children: v(t.column.columnDef.header, t.getContext())
-						})
-					})
-				}, t.id);
-			})) }), /* @__PURE__ */ h(t, {
+						}) : null
+					}, r.id);
+				}) }, t.id);
+			}) }), /* @__PURE__ */ _(i, {
 				renderEmptyState: K,
 				renderDataState: W,
-				children: !m && !b && e.getRowModel().rows.map(A)
+				children: !t && !m && e.getRowModel().rows.map(j)
 			})]
-		}), e.getPageCount() > 0 && /* @__PURE__ */ h(c, {
-			pageCount: e.getPageCount(),
-			rowCount: e.getRowCount(),
-			currentPage: V + 1,
-			rowsPerPage: H,
-			pageSizeOptions: w?.pageSizeOptions,
-			onPageChange: (t, n, r) => {
-				e.setPageIndex(t - 1), D?.(t - 1, n, r);
-			},
-			onPageHover: (e) => {
-				O?.(e);
-			},
-			onPageSizeChange: (t) => {
-				e.setPageSize(t), k?.(t);
-			},
-			itemLabel: w?.labels?.itemLabel
+		}), H !== void 0 && /* @__PURE__ */ _(C, {
+			table: H,
+			tableRef: B,
+			pagination: T ?? {},
+			onPageChange: O,
+			onPageHover: k,
+			onPageSizeChange: A
 		})]
 	});
 }
-b.displayName = "DataTable";
+w.displayName = "DataTable";
 //#endregion
-export { b as DataTable };
+export { w as DataTable };

package/dist/esm/components/data-table/DataTablePagination.d.ts

@@ -0,0 +1,22 @@
+import { ReactTable as TableType, RowData, TableFeatures } from '@tanstack/react-table';
+type SelectionSource<T> = {
+    get: () => T;
+    subscribe: (listener: (value: T) => void) => {
+        unsubscribe: () => void;
+    };
+};
+type PaginationState = {
+    pageIndex: number;
+    pageSize: number;
+};
+export type PaginationCapableTable<TFeatures extends TableFeatures, TData extends RowData> = TableType<TFeatures, TData> & {
+    atoms: TableType<TFeatures, TData>['atoms'] & {
+        pagination: SelectionSource<PaginationState>;
+    };
+    getPageCount: () => number;
+    getRowCount: () => number;
+    setPageIndex: (pageIndex: number) => void;
+    setPageSize: (pageSize: number) => void;
+};
+export declare const getPaginationTable: <TFeatures extends TableFeatures, TData extends RowData>(table: TableType<TFeatures, TData>) => PaginationCapableTable<TFeatures, TData> | undefined;
+export {};

package/dist/esm/components/data-table/DataTablePagination.js

@@ -0,0 +1,6 @@
+//#region src/components/data-table/DataTablePagination.ts
+var e = (e) => {
+	if (e.options.features.rowPaginationFeature !== void 0) return e;
+};
+//#endregion
+export { e as getPaginationTable };

package/dist/esm/components/data-table/mocks/employee-columns-legacy.d.ts

@@ -0,0 +1,15 @@
+import { Employee } from './employee-data.js';
+/**
+ * Creates optimized checkbox column with stable handlers to prevent unnecessary re-renders
+ */
+export declare const createCheckboxColumn: () => import('@tanstack/react-table').DisplayColumnDef<import('@tanstack/react-table').StockFeatures, Employee, unknown>;
+export declare const employeeColumns: import('@tanstack/react-table').ColumnDef<import('@tanstack/react-table').StockFeatures, Employee, any>[] & [import('@tanstack/react-table').AccessorKeyColumnDef<import('@tanstack/react-table').StockFeatures, Employee, string>, import('@tanstack/react-table').AccessorKeyColumnDef<import('@tanstack/react-table').StockFeatures, Employee, "Full-time" | "Part-time" | "Freelance" | "Contractor">, import('@tanstack/react-table').AccessorKeyColumnDef<import('@tanstack/react-table').StockFeatures, Employee, {
+    name: string;
+    position: string;
+    team: string;
+} | null>, import('@tanstack/react-table').AccessorKeyColumnDef<import('@tanstack/react-table').StockFeatures, Employee, "active" | "inactive" | "onboarding" | "offboarding" | "retired">];
+export declare const employeeColumnsWithCheckbox: import('@tanstack/react-table').ColumnDef<import('@tanstack/react-table').StockFeatures, Employee, any>[] & [import('@tanstack/react-table').DisplayColumnDef<import('@tanstack/react-table').StockFeatures, Employee, unknown>, ...(import('@tanstack/react-table').ColumnDef<import('@tanstack/react-table').StockFeatures, Employee, any> & (import('@tanstack/react-table').AccessorKeyColumnDef<import('@tanstack/react-table').StockFeatures, Employee, string> | import('@tanstack/react-table').AccessorKeyColumnDef<import('@tanstack/react-table').StockFeatures, Employee, "Full-time" | "Part-time" | "Freelance" | "Contractor"> | import('@tanstack/react-table').AccessorKeyColumnDef<import('@tanstack/react-table').StockFeatures, Employee, {
+    name: string;
+    position: string;
+    team: string;
+} | null> | import('@tanstack/react-table').AccessorKeyColumnDef<import('@tanstack/react-table').StockFeatures, Employee, "active" | "inactive" | "onboarding" | "offboarding" | "retired">))[]];

package/dist/esm/components/data-table/mocks/employee-columns.d.ts

@@ -1,7 +1,142 @@
 import { Employee } from './employee-data.js';
+export declare const employeeTableFeatures: {
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    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>;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    sortedRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+};
 /**
  * Creates optimized checkbox column with stable handlers to prevent unnecessary re-renders
  */
-export declare const createCheckboxColumn: () => import('@tanstack/react-table').DisplayColumnDef<Employee, unknown>;
-export declare const employeeColumns: (import('@tanstack/react-table').AccessorKeyColumnDefBase<Employee, string> & Partial<import('@tanstack/react-table').IdIdentifier<Employee, string>>)[];
-export declare const employeeColumnsWithCheckbox: ((import('@tanstack/react-table').AccessorKeyColumnDefBase<Employee, string> & Partial<import('@tanstack/react-table').IdIdentifier<Employee, string>>) | import('@tanstack/react-table').DisplayColumnDef<Employee, unknown>)[];
+export declare const createCheckboxColumn: () => import('@tanstack/react-table').DisplayColumnDef<{
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    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>;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    sortedRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+}, Employee, unknown>;
+export declare const employeeColumns: import('@tanstack/react-table').ColumnDef<{
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    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>;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    sortedRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+}, Employee, any>[] & [import('@tanstack/react-table').AccessorKeyColumnDef<{
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    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>;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    sortedRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+}, Employee, string>, import('@tanstack/react-table').AccessorKeyColumnDef<{
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    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>;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    sortedRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+}, Employee, "Full-time" | "Part-time" | "Freelance" | "Contractor">, import('@tanstack/react-table').AccessorKeyColumnDef<{
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    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>;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    sortedRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+}, Employee, {
+    name: string;
+    position: string;
+    team: string;
+} | null>, import('@tanstack/react-table').AccessorKeyColumnDef<{
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    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>;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    sortedRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+}, Employee, "active" | "inactive" | "onboarding" | "offboarding" | "retired">];
+export declare const employeeColumnsWithCheckbox: import('@tanstack/react-table').ColumnDef<{
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    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>;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    sortedRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+}, Employee, any>[] & [import('@tanstack/react-table').DisplayColumnDef<{
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    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>;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    sortedRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+}, Employee, unknown>, ...(import('@tanstack/react-table').ColumnDef<{
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    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>;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    sortedRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+}, Employee, any> & (import('@tanstack/react-table').AccessorKeyColumnDef<{
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    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>;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    sortedRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+}, Employee, string> | import('@tanstack/react-table').AccessorKeyColumnDef<{
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    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>;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    sortedRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+}, Employee, "Full-time" | "Part-time" | "Freelance" | "Contractor"> | import('@tanstack/react-table').AccessorKeyColumnDef<{
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    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>;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    sortedRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+}, Employee, {
+    name: string;
+    position: string;
+    team: string;
+} | null> | import('@tanstack/react-table').AccessorKeyColumnDef<{
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    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>;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    sortedRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+}, Employee, "active" | "inactive" | "onboarding" | "offboarding" | "retired">))[]];

package/dist/esm/components/data-table/parts/ColumnSortHeader.d.ts

@@ -1,10 +1,14 @@
-import { Header } from '@tanstack/react-table';
+import { Column_RowSorting, Header, RowData, TableFeatures } from '@tanstack/react-table';
 import { ActionableProps } from '../../actionable/Actionable.js';
-export interface ColumnSortHeaderProps<TData, TValue> extends ActionableProps {
-    header: Header<TData, TValue>;
+type SortableHeader<TFeatures extends TableFeatures, TData extends RowData, TValue> = Header<TFeatures, TData, TValue> & {
+    column: Header<TFeatures, TData, TValue>['column'] & Pick<Column_RowSorting<TFeatures, TData>, 'getCanSort' | 'getIsSorted' | 'getToggleSortingHandler'>;
+};
+declare function isSortableHeader<TFeatures extends TableFeatures, TData extends RowData, TValue>(header: Header<TFeatures, TData, TValue>): header is SortableHeader<TFeatures, TData, TValue>;
+export interface ColumnSortHeaderProps<TFeatures extends TableFeatures, TData extends RowData, TValue> extends ActionableProps {
+    header: SortableHeader<TFeatures, TData, TValue>;
 }
-declare function ColumnSortHeader<TData, TValue>({ children, header, ...props }: ColumnSortHeaderProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+declare function ColumnSortHeader<TFeatures extends TableFeatures, TData extends RowData, TValue>({ children, header, ...props }: ColumnSortHeaderProps<TFeatures, TData, TValue>): import("react/jsx-runtime").JSX.Element;
 declare namespace ColumnSortHeader {
     var displayName: string;
 }
-export { ColumnSortHeader };
+export { ColumnSortHeader, isSortableHeader };

package/dist/esm/components/data-table/parts/ColumnSortHeader.js

@@ -3,23 +3,29 @@ import { Icon as t } from "../../icon/Icon.js";
 import "react";
 import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/data-table/parts/ColumnSortHeader.tsx
-function a({ children: a, header: o, ...s }) {
+function a(e) {
+	return "getCanSort" in e.column && typeof e.column.getCanSort == "function" && e.column.getCanSort();
+}
+function o({ children: a, header: o, ...s }) {
 	return /* @__PURE__ */ r(e, {
 		...s,
 		className: "uy:flex uy:items-center uy:gap-50",
-		onPress: () => {
-			o.column.getCanSort() && o.column.toggleSorting();
+		onPress: (e) => {
+			o.column.getToggleSortingHandler()?.(e);
 		},
-		children: ({ isHovered: e }) => /* @__PURE__ */ i(n, { children: [a, o.column.getCanSort() && (o.column.getIsSorted() || e) ? /* @__PURE__ */ r(t, {
-			src: o.column.getIsSorted() === "asc" ? "ArrowUpOutlined" : "ArrowDownOutlined",
-			role: "presentation",
-			size: 20
-		}) : /* @__PURE__ */ r("span", {
-			"aria-hidden": "true",
-			className: "uy:size-250 uy:block"
-		})] })
+		children: ({ isHovered: e }) => {
+			let s = o.column.getIsSorted();
+			return /* @__PURE__ */ i(n, { children: [a, o.column.getCanSort() && (s || e) ? /* @__PURE__ */ r(t, {
+				src: s === "asc" ? "ArrowUpOutlined" : "ArrowDownOutlined",
+				role: "presentation",
+				size: 20
+			}) : /* @__PURE__ */ r("span", {
+				"aria-hidden": "true",
+				className: "uy:size-250 uy:block"
+			})] });
+		}
 	});
 }
-a.displayName = "ColumnSortHeader";
+o.displayName = "ColumnSortHeader";
 //#endregion
-export { a as ColumnSortHeader };
+export { o as ColumnSortHeader, a as isSortableHeader };