@payfit/unity-components 2.65.27 → 2.66.0

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

@@ -1,8 +1,15 @@
-import { Table as TableType } from '@tanstack/react-table';
+import { ReactTable as TableType, RowData, TableFeatures } from '@tanstack/react-table';
 import { ActionBarActionItem } from '../../action-bar/ActionBar.js';
-export interface DataTableBulkActionsProps<TData> {
+export interface DataTableBulkActionsProps<TFeatures extends TableFeatures, TData extends RowData> {
     /** The table instance from @tanstack/react-table */
-    table: TableType<TData>;
+    table: TableType<TFeatures, TData> & {
+        getIsAllPageRowsSelected: () => boolean;
+        getIsSomePageRowsSelected: () => boolean;
+        getSelectedRowModel: () => {
+            rows: unknown[];
+        };
+        resetRowSelection: () => void;
+    };
     /** Bulk actions to perform over the table, rendered in the action bar */
     actions: ActionBarActionItem[];
     /**
@@ -50,6 +57,7 @@ export interface DataTableBulkActionsProps<TData> {
  * }
  * ```
  * @remarks
+ * - DataTableBulkActions automatically reserves space when the table includes `rowPaginationFeature`, matching the pagination footer rendered by DataTable
  * - Use F6 keyboard shortcut to focus the action bar when it's visible and has actions
  * - The keyboard shortcut provides quick access to bulk actions for users with disabilities
  * - When triggered, focus moves to the first focusable element in the action bar (typically the first action button)
@@ -59,7 +67,7 @@ export interface DataTableBulkActionsProps<TData> {
  * @see {@link DataTableBulkActionsProps} for all available props
  * @see Source code in [Github](https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/data-table)
  */
-declare function DataTableBulkActions<TData extends object>({ table, actions, renderSelectionText, }: DataTableBulkActionsProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare function DataTableBulkActions<TFeatures extends TableFeatures, TData extends RowData>({ table, actions, renderSelectionText, }: DataTableBulkActionsProps<TFeatures, TData>): import("react/jsx-runtime").JSX.Element;
 declare namespace DataTableBulkActions {
     var displayName: string;
 }

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

@@ -3,85 +3,86 @@ import { ActionBarButton as t } from "../../action-bar/parts/ActionBarButton.js"
 import { ActionBarIconButton as n } from "../../action-bar/parts/ActionBarIconButton.js";
 import { ActionBar as r } from "../../action-bar/ActionBar.js";
 import { ActionBarRoot as i } from "../../action-bar/parts/ActionBarRoot.js";
-import { useCallback as a, useRef as o, useState as s } from "react";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
-import { FormattedMessage as d, useIntl as f } from "react-intl";
-import { useHotkeys as p } from "react-hotkeys-hook";
+import { getPaginationTable as a } from "../DataTablePagination.js";
+import { useCallback as o, useRef as s, useState as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { FormattedMessage as f, useIntl as p } from "react-intl";
+import { useHotkeys as m } from "react-hotkeys-hook";
 //#region src/components/data-table/parts/DataTableBulkActions.tsx
-function m({ selectionCount: t, onClearSelection: n, renderSelectionText: r, hasKeyshortcuts: i, keyShortcuts: a }) {
-	return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ u("div", {
+function h({ selectionCount: t, onClearSelection: n, renderSelectionText: r, hasKeyshortcuts: i, keyShortcuts: a }) {
+	return /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ d("div", {
 		className: "uy:typography-body uy:whitespace-nowrap! uy:sr-only uy:md:not-sr-only",
 		role: "status",
 		"aria-live": "polite",
 		"aria-atomic": "true",
-		children: [r ? r(t) : /* @__PURE__ */ l(d, {
+		children: [r ? r(t) : /* @__PURE__ */ u(f, {
 			id: "unity:component:action-bar:selection-count-text",
 			defaultMessage: "{selectionCount, plural, =0 {no items} one {item} other {items}} selected",
 			values: { selectionCount: t }
-		}), i && /* @__PURE__ */ l("span", {
+		}), i && /* @__PURE__ */ u("span", {
 			className: "uy:sr-only",
-			children: /* @__PURE__ */ l(d, {
+			children: /* @__PURE__ */ u(f, {
 				id: "unity:component:action-bar:key-shortcuts-text",
 				defaultMessage: "Use {keyShortcuts} to focus the action bar",
 				values: { keyShortcuts: a }
 			})
 		})]
-	}), /* @__PURE__ */ l(e, {
+	}), /* @__PURE__ */ u(e, {
 		color: "inverted",
 		variant: "ghost",
 		onPress: n,
-		children: /* @__PURE__ */ l(d, {
+		children: /* @__PURE__ */ u(f, {
 			id: "unity:component:action-bar:clear-selection-button",
 			defaultMessage: "Clear selection"
 		})
 	})] });
 }
-var h = (e) => e.type === "icon-button";
-function g({ table: e, actions: c, renderSelectionText: u }) {
-	let d = o(null), g = o(null), [_, v] = s(!1), y = f();
-	p("f6", () => {
-		if ((e.getIsAllPageRowsSelected() || e.getIsSomePageRowsSelected()) && d.current) {
-			let e = d.current.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])");
-			g.current = document.activeElement, e.length > 0 && (e[0].focus(), v(!0));
+var g = (e) => e.type === "icon-button";
+function _({ table: e, actions: l, renderSelectionText: d }) {
+	let f = s(null), _ = s(null), [v, y] = c(!1), b = p();
+	m("f6", () => {
+		if ((e.getIsAllPageRowsSelected() || e.getIsSomePageRowsSelected()) && f.current) {
+			let e = f.current.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])");
+			_.current = document.activeElement, e.length > 0 && (e[0].focus(), y(!0));
 		}
-	}, { enableOnFormTags: !0 }), p("esc", () => {
-		_ && g.current && (g.current.focus(), v(!1));
+	}, { enableOnFormTags: !0 }), m("esc", () => {
+		v && _.current && (_.current.focus(), y(!1));
 	}, { enableOnFormTags: !0 });
-	let b = e.getIsAllPageRowsSelected() || e.getIsSomePageRowsSelected(), x = e.getSelectedRowModel().rows.length, S = e.getPageCount() > 0, C = a(() => {
+	let x = e.getIsAllPageRowsSelected() || e.getIsSomePageRowsSelected(), S = e.getSelectedRowModel().rows.length, C = a(e) !== void 0, w = o(() => {
 		e.resetRowSelection();
 	}, [e]);
-	return /* @__PURE__ */ l(i, {
-		isVisible: b,
-		offsetBottom: S ? "$600" : 0,
-		children: /* @__PURE__ */ l(r, {
-			ref: d,
-			actions: c,
-			prefixContent: /* @__PURE__ */ l(m, {
-				selectionCount: x,
-				onClearSelection: C,
-				renderSelectionText: u,
+	return /* @__PURE__ */ u(i, {
+		isVisible: x,
+		offsetBottom: C ? "$600" : 0,
+		children: /* @__PURE__ */ u(r, {
+			ref: f,
+			actions: l,
+			prefixContent: /* @__PURE__ */ u(h, {
+				selectionCount: S,
+				onClearSelection: w,
+				renderSelectionText: d,
 				hasKeyshortcuts: !0,
 				keyShortcuts: "f6"
 			}),
 			onFocus: () => {
-				v(!0);
+				y(!0);
 			},
 			onBlur: () => {
-				v(!1);
+				y(!1);
 			},
 			"aria-keyshortcuts": "f6",
-			"aria-label": y.formatMessage({
+			"aria-label": b.formatMessage({
 				id: "unity:component:action-bar:toolbar-label",
 				defaultMessage: "Bulk actions toolbar"
 			}),
-			children: (e) => h(e) ? /* @__PURE__ */ l(n, {
+			children: (e) => g(e) ? /* @__PURE__ */ u(n, {
 				icon: e.meta.icon,
 				label: e.label,
 				variant: e.variant,
 				onPress: e.meta.onPress,
 				isDisabled: e.meta.isDisabled,
 				isLoading: e.meta.isLoading
-			}, e.id) : /* @__PURE__ */ l(t, {
+			}, e.id) : /* @__PURE__ */ u(t, {
 				variant: e.variant,
 				onPress: e.meta?.onPress,
 				prefixIcon: e.meta?.prefixIcon,
@@ -92,6 +93,6 @@ function g({ table: e, actions: c, renderSelectionText: u }) {
 		})
 	});
 }
-g.displayName = "DataTableBulkActions";
+_.displayName = "DataTableBulkActions";
 //#endregion
-export { g as DataTableBulkActions };
+export { _ as DataTableBulkActions };

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

@@ -0,0 +1,13 @@
+import { RowData } from '@tanstack/react-table';
+import { LegacyTable as TableType } from '@tanstack/react-table/legacy';
+import { ActionBarActionItem } from '../../action-bar/ActionBar.js';
+export interface DataTableBulkActionsLegacyProps<TData extends RowData> {
+    table: TableType<TData>;
+    actions: ActionBarActionItem[];
+    renderSelectionText?: (count: number) => string;
+}
+declare function DataTableBulkActionsLegacy<TData extends RowData>({ table, actions, renderSelectionText, }: DataTableBulkActionsLegacyProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare namespace DataTableBulkActionsLegacy {
+    var displayName: string;
+}
+export { DataTableBulkActionsLegacy };

package/dist/esm/components/filter-toolbar/utils/filter-adapters.d.ts

@@ -24,12 +24,26 @@ export declare const FilterAdapters: {
      * Tanstack Table's ColumnFiltersState format.
      * @example
      * ```tsx
+     * import {
+     *   columnFilteringFeature,
+     *   createFilteredRowModel,
+     *   tableFeatures,
+     *   useTable,
+     * } from '@tanstack/react-table'
+     *
+     * const features = tableFeatures({
+     *   columnFilteringFeature,
+     *   filteredRowModel: createFilteredRowModel(),
+     * })
+     *
      * const [appliedFilters, setAppliedFilters] = useState<AppliedFilter[]>([])
      * const columnFilters = FilterAdapters.TanstackTable.toColumnFilters(appliedFilters)
      *
-     * const table = useReactTable({
+     * const table = useTable({
+     *   features,
+     *   data,
+     *   columns,
      *   state: { columnFilters },
-     *   // ... other config
      * })
      *
      * return (

package/dist/esm/components/inline-field/parts/InlineFieldEditView.js

@@ -9,13 +9,13 @@ import { uyTv as u } from "@payfit/unity-themes";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 import { Group as p } from "react-aria-components/Group";
 import { useIntl as m } from "react-intl";
-import { FocusScope as h } from "react-aria/FocusScope";
-import { useSelector as g } from "@tanstack/react-store";
+import { useSelector as h } from "@tanstack/react-store";
+import { FocusScope as g } from "react-aria/FocusScope";
 import { useKeyboard as _ } from "react-aria/useKeyboard";
 //#region src/components/inline-field/parts/InlineFieldEditView.tsx
 var v = u({ slots: { base: "uy:flex uy:flex-row uy:gap-100 uy:items-start" } });
 function y({ children: u, onCancel: y, onSave: b, saveLabel: x, cancelLabel: S, helperText: C, errorMessage: w }) {
-	let T = a(), E = m(), D = t(), { isDirty: O, isSubmitting: k, submissionAttempts: A, isValid: j, isSubmitSuccessful: M } = g(D.store, (e) => ({
+	let T = a(), E = m(), D = t(), { isDirty: O, isSubmitting: k, submissionAttempts: A, isValid: j, isSubmitSuccessful: M } = h(D.store, (e) => ({
 		isDirty: e.isDirty,
 		isSubmitting: e.isSubmitting,
 		isValid: e.isValid,
@@ -60,7 +60,7 @@ function y({ children: u, onCancel: y, onSave: b, saveLabel: x, cancelLabel: S,
 		hidden: !L,
 		"aria-hidden": !L,
 		...!L && { inert: "" },
-		children: [/* @__PURE__ */ d(h, {
+		children: [/* @__PURE__ */ d(g, {
 			contain: !0,
 			restoreFocus: !0,
 			children: /* @__PURE__ */ d("form", {

package/dist/esm/components/inline-field-group/InlineFieldGroup.js

@@ -8,8 +8,8 @@ import { uyTv as u } from "@payfit/unity-themes";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 import { useIntl as p } from "react-intl";
 import { useId as m } from "react-aria/useId";
-import { FocusScope as ne } from "react-aria/FocusScope";
-import { useSelector as h } from "@tanstack/react-store";
+import { useSelector as ne } from "@tanstack/react-store";
+import { FocusScope as h } from "react-aria/FocusScope";
 import { useKeyboard as re } from "react-aria/useKeyboard";
 //#region src/components/inline-field-group/InlineFieldGroup.tsx
 var ie = u({ slots: { form: "uy:flex uy:flex-col uy:gap-300" } }), g = (e) => {
@@ -22,7 +22,7 @@ var ie = u({ slots: { form: "uy:flex uy:flex-col uy:gap-300" } }), g = (e) => {
 		defaultMode: v,
 		onModeChange: ae,
 		shouldModeChange: y
-	}), { isSubmitting: q, isValid: J, isSubmitSuccessful: Y, submissionAttempts: X } = h(V.store, (e) => ({
+	}), { isSubmitting: q, isValid: J, isSubmitSuccessful: Y, submissionAttempts: X } = ne(V.store, (e) => ({
 		isSubmitting: e.isSubmitting,
 		isValid: e.isValid,
 		isSubmitSuccessful: e.isSubmitSuccessful,
@@ -162,7 +162,7 @@ var ie = u({ slots: { form: "uy:flex uy:flex-col uy:gap-300" } }), g = (e) => {
 			onSubmit: le,
 			"aria-label": x,
 			"aria-labelledby": x ? void 0 : j,
-			children: /* @__PURE__ */ f(ne, {
+			children: /* @__PURE__ */ f(h, {
 				contain: se && W === "edit",
 				children: [
 					i,

package/dist/esm/components/table/parts/TableHeader.d.ts

@@ -1,10 +1,11 @@
-import { default as React, PropsWithChildren } from 'react';
+import { default as React, PropsWithChildren, ReactNode } from 'react';
 import { VariantProps } from '@payfit/unity-themes';
 export declare const tableHeader: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnTypeLike<unknown, undefined>>;
 export type TableHeaderProps = PropsWithChildren<VariantProps<typeof tableHeader>>;
 /**
  * The `TableHeader` component renders the header section of a table, containing column headers.
- * It automatically processes its children to add row indices and applies appropriate styling.
+ * It accepts column headers directly for a single row, or explicit `tr` elements for grouped headers.
+ * It automatically assigns row and column indices while preserving indices set by consumers.
  * @param {TableHeaderProps} props - The props for the `TableHeader` component
  * @param {ReactNode} props.children - The column headers to render (typically TableColumnHeader components)
  * @example
@@ -17,6 +18,20 @@ export type TableHeaderProps = PropsWithChildren<VariantProps<typeof tableHeader
  *   <TableColumnHeader>Department</TableColumnHeader>
  * </TableHeader>
  * ```
+ * @example
+ * ```tsx
+ * // Grouped column headers
+ * <TableHeader>
+ *   <tr>
+ *     <TableColumnHeader scope="col" rowSpan={2}>Employee</TableColumnHeader>
+ *     <TableColumnHeader scope="colgroup" colSpan={2}>Contact</TableColumnHeader>
+ *   </tr>
+ *   <tr>
+ *     <TableColumnHeader scope="col">Email</TableColumnHeader>
+ *     <TableColumnHeader scope="col">Phone</TableColumnHeader>
+ *   </tr>
+ * </TableHeader>
+ * ```
  * @see {@link TableHeaderProps} for all available props
  * @see {@link TableColumnHeader} for the column header component
  * @remarks
@@ -24,6 +39,6 @@ export type TableHeaderProps = PropsWithChildren<VariantProps<typeof tableHeader
  * {@link https://payfit.design|Design docs}
  */
 declare const TableHeader: React.MemoExoticComponent<React.ForwardRefExoticComponent<VariantProps<import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnTypeLike<unknown, undefined>>> & {
-    children?: React.ReactNode | undefined;
+    children?: ReactNode | undefined;
 } & React.RefAttributes<HTMLTableSectionElement>>>;
 export { TableHeader };

package/dist/esm/components/table/parts/TableHeader.js

@@ -5,18 +5,33 @@ import { jsx as a } from "react/jsx-runtime";
 var o = i({ base: [
 	"uy:h-500 uy:bg-surface-neutral-low uy:rounded-tl-100 uy:rounded-tr-100 uy:overflow-hidden",
 	"uy:sticky uy:top-0 uy:z-[1]",
-	"uy:[&_tr]:border-b uy:[&_tr]:border-solid uy:[&_tr]:border-b-border-neutral-enabled"
+	"uy:[&_th]:relative uy:[&_th]:after:absolute uy:[&_th]:after:inset-x-0 uy:[&_th]:after:bottom-0",
+	"uy:[&_th]:after:h-px uy:[&_th]:after:bg-border-neutral-enabled uy:[&_th]:after:content-[''] uy:[&_th]:after:pointer-events-none"
 ] }), s = n(t(({ children: t, ...n }, i) => {
-	let s = r(() => e.Children.map(t, (t, n) => e.isValidElement(t) ? e.cloneElement(t, {
-		rowIndex: n,
-		...t.props
-	}) : t), [t]);
+	let s = r(() => {
+		let n = (t, n) => {
+			let r = 0;
+			return e.Children.map(t, (t) => {
+				if (!e.isValidElement(t)) return t;
+				let i = t, a = r;
+				return r += i.props.colSpan ?? 1, e.cloneElement(i, {
+					rowIndex: n,
+					colIndex: a,
+					...i.props
+				});
+			});
+		}, r = e.Children.toArray(t);
+		return r.length > 0 && r.every((t) => e.isValidElement(t) && t.type === "tr") ? r.map((t, r) => {
+			let i = t;
+			return e.cloneElement(i, { children: n(i.props.children, r) });
+		}) : /* @__PURE__ */ a("tr", { children: n(t, 0) });
+	}, [t]);
 	return /* @__PURE__ */ a("thead", {
 		ref: i,
 		className: o(),
 		"data-dd-privacy": "allow",
 		...n,
-		children: /* @__PURE__ */ a("tr", { children: s })
+		children: s
 	});
 }));
 s.displayName = "TableHeader";

package/dist/esm/docs/examples/data/mocks/employee-columns.d.ts

@@ -1,3 +1,225 @@
 import { Employee } from '../../../../mocks/employees.js';
-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 employeeTableFeatures: {
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    globalFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnFacetingFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    filteredRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+    facetedRowModel: (table: import('@tanstack/react-table').Table<any, any>, columnId: string) => () => import('@tanstack/react-table').RowModel<any, any>;
+    facetedUniqueValues: (table: import('@tanstack/react-table').Table<import('@tanstack/react-table').TableFeatures, any>, columnId: string) => () => Map<any, number>;
+    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: {
+        includesString: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+        inList: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+    };
+};
+export declare const employeeColumns: import('@tanstack/react-table').ColumnDef<{
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    globalFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnFacetingFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    filteredRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+    facetedRowModel: (table: import('@tanstack/react-table').Table<any, any>, columnId: string) => () => import('@tanstack/react-table').RowModel<any, any>;
+    facetedUniqueValues: (table: import('@tanstack/react-table').Table<import('@tanstack/react-table').TableFeatures, any>, columnId: string) => () => Map<any, number>;
+    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: {
+        includesString: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+        inList: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+    };
+}, Employee, any>[] & [import('@tanstack/react-table').AccessorKeyColumnDef<{
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    globalFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnFacetingFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    filteredRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+    facetedRowModel: (table: import('@tanstack/react-table').Table<any, any>, columnId: string) => () => import('@tanstack/react-table').RowModel<any, any>;
+    facetedUniqueValues: (table: import('@tanstack/react-table').Table<import('@tanstack/react-table').TableFeatures, any>, columnId: string) => () => Map<any, number>;
+    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: {
+        includesString: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+        inList: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+    };
+}, Employee, string>, import('@tanstack/react-table').AccessorKeyColumnDef<{
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    globalFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnFacetingFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    filteredRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+    facetedRowModel: (table: import('@tanstack/react-table').Table<any, any>, columnId: string) => () => import('@tanstack/react-table').RowModel<any, any>;
+    facetedUniqueValues: (table: import('@tanstack/react-table').Table<import('@tanstack/react-table').TableFeatures, any>, columnId: string) => () => Map<any, number>;
+    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: {
+        includesString: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+        inList: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+    };
+}, Employee, "Full-time" | "Part-time" | "Freelance" | "Contractor">, import('@tanstack/react-table').AccessorKeyColumnDef<{
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    globalFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnFacetingFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    filteredRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+    facetedRowModel: (table: import('@tanstack/react-table').Table<any, any>, columnId: string) => () => import('@tanstack/react-table').RowModel<any, any>;
+    facetedUniqueValues: (table: import('@tanstack/react-table').Table<import('@tanstack/react-table').TableFeatures, any>, columnId: string) => () => Map<any, number>;
+    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: {
+        includesString: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+        inList: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+    };
+}, Employee, Pick<Employee, "position" | "name" | "team"> | null>, import('@tanstack/react-table').AccessorKeyColumnDef<{
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    globalFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnFacetingFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    filteredRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+    facetedRowModel: (table: import('@tanstack/react-table').Table<any, any>, columnId: string) => () => import('@tanstack/react-table').RowModel<any, any>;
+    facetedUniqueValues: (table: import('@tanstack/react-table').Table<import('@tanstack/react-table').TableFeatures, any>, columnId: string) => () => Map<any, number>;
+    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: {
+        includesString: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+        inList: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+    };
+}, Employee, "active" | "inactive" | "onboarding" | "offboarding" | "retired">];
+export declare const employeeColumnsWithCheckbox: import('@tanstack/react-table').ColumnDef<{
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    globalFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnFacetingFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    filteredRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+    facetedRowModel: (table: import('@tanstack/react-table').Table<any, any>, columnId: string) => () => import('@tanstack/react-table').RowModel<any, any>;
+    facetedUniqueValues: (table: import('@tanstack/react-table').Table<import('@tanstack/react-table').TableFeatures, any>, columnId: string) => () => Map<any, number>;
+    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: {
+        includesString: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+        inList: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+    };
+}, Employee, any>[] & [import('@tanstack/react-table').DisplayColumnDef<{
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    globalFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnFacetingFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    filteredRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+    facetedRowModel: (table: import('@tanstack/react-table').Table<any, any>, columnId: string) => () => import('@tanstack/react-table').RowModel<any, any>;
+    facetedUniqueValues: (table: import('@tanstack/react-table').Table<import('@tanstack/react-table').TableFeatures, any>, columnId: string) => () => Map<any, number>;
+    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: {
+        includesString: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+        inList: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+    };
+}, Employee, unknown>, ...(import('@tanstack/react-table').ColumnDef<{
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    globalFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnFacetingFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    filteredRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+    facetedRowModel: (table: import('@tanstack/react-table').Table<any, any>, columnId: string) => () => import('@tanstack/react-table').RowModel<any, any>;
+    facetedUniqueValues: (table: import('@tanstack/react-table').Table<import('@tanstack/react-table').TableFeatures, any>, columnId: string) => () => Map<any, number>;
+    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: {
+        includesString: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+        inList: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+    };
+}, Employee, any> & (import('@tanstack/react-table').AccessorKeyColumnDef<{
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    globalFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnFacetingFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    filteredRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+    facetedRowModel: (table: import('@tanstack/react-table').Table<any, any>, columnId: string) => () => import('@tanstack/react-table').RowModel<any, any>;
+    facetedUniqueValues: (table: import('@tanstack/react-table').Table<import('@tanstack/react-table').TableFeatures, any>, columnId: string) => () => Map<any, number>;
+    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: {
+        includesString: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+        inList: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+    };
+}, Employee, string> | import('@tanstack/react-table').AccessorKeyColumnDef<{
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    globalFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnFacetingFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    filteredRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+    facetedRowModel: (table: import('@tanstack/react-table').Table<any, any>, columnId: string) => () => import('@tanstack/react-table').RowModel<any, any>;
+    facetedUniqueValues: (table: import('@tanstack/react-table').Table<import('@tanstack/react-table').TableFeatures, any>, columnId: string) => () => Map<any, number>;
+    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: {
+        includesString: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+        inList: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+    };
+}, Employee, "Full-time" | "Part-time" | "Freelance" | "Contractor"> | import('@tanstack/react-table').AccessorKeyColumnDef<{
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    globalFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnFacetingFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    filteredRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+    facetedRowModel: (table: import('@tanstack/react-table').Table<any, any>, columnId: string) => () => import('@tanstack/react-table').RowModel<any, any>;
+    facetedUniqueValues: (table: import('@tanstack/react-table').Table<import('@tanstack/react-table').TableFeatures, any>, columnId: string) => () => Map<any, number>;
+    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: {
+        includesString: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+        inList: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+    };
+}, Employee, Pick<Employee, "position" | "name" | "team"> | null> | import('@tanstack/react-table').AccessorKeyColumnDef<{
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    globalFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnFacetingFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSelectionFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    filteredRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+    facetedRowModel: (table: import('@tanstack/react-table').Table<any, any>, columnId: string) => () => import('@tanstack/react-table').RowModel<any, any>;
+    facetedUniqueValues: (table: import('@tanstack/react-table').Table<import('@tanstack/react-table').TableFeatures, any>, columnId: string) => () => Map<any, number>;
+    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: {
+        includesString: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+        inList: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+    };
+}, Employee, "active" | "inactive" | "onboarding" | "offboarding" | "retired">))[]];