@accelint/design-toolkit 9.9.1 → 9.10.0

package/dist/components/select-field/context.d.ts

@@ -13,13 +13,13 @@
 import { ProviderProps } from "../../lib/types.js";
 import { SelectFieldProps } from "./types.js";
 import "client-only";
-import * as react30 from "react";
+import * as react39 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime141 from "react/jsx-runtime";
+import * as react_jsx_runtime155 from "react/jsx-runtime";
 
 //#region src/components/select-field/context.d.ts
 /** Context for SelectField component */
-declare const SelectFieldContext: react30.Context<ContextValue<SelectFieldProps, HTMLDivElement>>;
+declare const SelectFieldContext: react39.Context<ContextValue<SelectFieldProps, HTMLDivElement>>;
 /**
  * Provider for setting default props across multiple SelectField components
  *
@@ -29,7 +29,7 @@ declare const SelectFieldContext: react30.Context<ContextValue<SelectFieldProps,
 declare function SelectFieldProvider({
   children,
   ...props
-}: ProviderProps<SelectFieldProps>): react_jsx_runtime141.JSX.Element;
+}: ProviderProps<SelectFieldProps>): react_jsx_runtime155.JSX.Element;
 //#endregion
 export { SelectFieldContext, SelectFieldProvider };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/select-field/index.d.ts

@@ -12,7 +12,7 @@
 
 import { SelectFieldProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime142 from "react/jsx-runtime";
+import * as react_jsx_runtime157 from "react/jsx-runtime";
 
 //#region src/components/select-field/index.d.ts
 
@@ -43,7 +43,7 @@ import * as react_jsx_runtime142 from "react/jsx-runtime";
 declare function SelectField({
   ref,
   ...props
-}: SelectFieldProps): react_jsx_runtime142.JSX.Element;
+}: SelectFieldProps): react_jsx_runtime157.JSX.Element;
 //#endregion
 export { SelectField };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/sidenav/avatar.d.ts

@@ -12,7 +12,7 @@
 
 import { SidenavAvatarProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime145 from "react/jsx-runtime";
+import * as react_jsx_runtime164 from "react/jsx-runtime";
 
 //#region src/components/sidenav/avatar.d.ts
 
@@ -41,7 +41,7 @@ declare function SidenavAvatar({
   children,
   className,
   ...rest
-}: SidenavAvatarProps): react_jsx_runtime145.JSX.Element;
+}: SidenavAvatarProps): react_jsx_runtime164.JSX.Element;
 //#endregion
 export { SidenavAvatar };
 //# sourceMappingURL=avatar.d.ts.map

package/dist/components/sidenav/content.d.ts

@@ -12,7 +12,7 @@
 
 import { SidenavContentProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime146 from "react/jsx-runtime";
+import * as react_jsx_runtime165 from "react/jsx-runtime";
 
 //#region src/components/sidenav/content.d.ts
 
@@ -45,7 +45,7 @@ declare function SidenavContent({
   className,
   children,
   ...rest
-}: SidenavContentProps): react_jsx_runtime146.JSX.Element;
+}: SidenavContentProps): react_jsx_runtime165.JSX.Element;
 //#endregion
 export { SidenavContent };
 //# sourceMappingURL=content.d.ts.map

package/dist/components/sidenav/context.d.ts

@@ -12,11 +12,11 @@
 
 import { SidenavContextValue } from "./types.js";
 import "client-only";
-import * as react32 from "react";
+import * as react42 from "react";
 
 //#region src/components/sidenav/context.d.ts
 /** Context for sidenav state and identification */
-declare const SidenavContext: react32.Context<SidenavContextValue>;
+declare const SidenavContext: react42.Context<SidenavContextValue>;
 //#endregion
 export { SidenavContext };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/sidenav/footer.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { SidenavFooterProps } from "./types.js";
-import * as react_jsx_runtime147 from "react/jsx-runtime";
+import * as react_jsx_runtime168 from "react/jsx-runtime";
 
 //#region src/components/sidenav/footer.d.ts
 
@@ -33,7 +33,7 @@ import * as react_jsx_runtime147 from "react/jsx-runtime";
  * @param props - {@link SidenavFooterProps}
  * @returns The rendered SidenavFooter component.
  */
-declare function SidenavFooter(props: SidenavFooterProps): react_jsx_runtime147.JSX.Element;
+declare function SidenavFooter(props: SidenavFooterProps): react_jsx_runtime168.JSX.Element;
 //#endregion
 export { SidenavFooter };
 //# sourceMappingURL=footer.d.ts.map

package/dist/components/sidenav/header.d.ts

@@ -12,7 +12,7 @@
 
 import { SidenavHeaderProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime148 from "react/jsx-runtime";
+import * as react_jsx_runtime170 from "react/jsx-runtime";
 
 //#region src/components/sidenav/header.d.ts
 
@@ -42,7 +42,7 @@ declare function SidenavHeader({
   children,
   classNames,
   ...rest
-}: SidenavHeaderProps): react_jsx_runtime148.JSX.Element;
+}: SidenavHeaderProps): react_jsx_runtime170.JSX.Element;
 //#endregion
 export { SidenavHeader };
 //# sourceMappingURL=header.d.ts.map

package/dist/components/sidenav/index.d.ts

@@ -12,7 +12,7 @@
 
 import { SidenavProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime149 from "react/jsx-runtime";
+import * as react_jsx_runtime171 from "react/jsx-runtime";
 
 //#region src/components/sidenav/index.d.ts
 
@@ -87,7 +87,7 @@ declare function Sidenav({
   isHiddenWhenClosed,
   children,
   ...rest
-}: SidenavProps): react_jsx_runtime149.JSX.Element | null;
+}: SidenavProps): react_jsx_runtime171.JSX.Element | null;
 //#endregion
 export { Sidenav };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/sidenav/item.d.ts

@@ -12,7 +12,7 @@
 
 import { SidenavItemProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime150 from "react/jsx-runtime";
+import * as react_jsx_runtime172 from "react/jsx-runtime";
 
 //#region src/components/sidenav/item.d.ts
 
@@ -40,7 +40,7 @@ declare function SidenavItem({
   classNames,
   textValue,
   ...rest
-}: SidenavItemProps): react_jsx_runtime150.JSX.Element;
+}: SidenavItemProps): react_jsx_runtime172.JSX.Element;
 //#endregion
 export { SidenavItem };
 //# sourceMappingURL=item.d.ts.map

package/dist/components/sidenav/link.d.ts

@@ -12,7 +12,7 @@
 
 import { SidenavLinkProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime151 from "react/jsx-runtime";
+import * as react_jsx_runtime175 from "react/jsx-runtime";
 
 //#region src/components/sidenav/link.d.ts
 
@@ -40,7 +40,7 @@ declare function SidenavLink({
   classNames,
   textValue,
   ...rest
-}: SidenavLinkProps): react_jsx_runtime151.JSX.Element;
+}: SidenavLinkProps): react_jsx_runtime175.JSX.Element;
 //#endregion
 export { SidenavLink };
 //# sourceMappingURL=link.d.ts.map

package/dist/components/sidenav/menu-item.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { SidenavMenuItemProps } from "./types.js";
-import * as react_jsx_runtime152 from "react/jsx-runtime";
+import * as react_jsx_runtime179 from "react/jsx-runtime";
 
 //#region src/components/sidenav/menu-item.d.ts
 
@@ -37,7 +37,7 @@ declare function SidenavMenuItem({
   className,
   children,
   ...rest
-}: SidenavMenuItemProps): react_jsx_runtime152.JSX.Element;
+}: SidenavMenuItemProps): react_jsx_runtime179.JSX.Element;
 //#endregion
 export { SidenavMenuItem };
 //# sourceMappingURL=menu-item.d.ts.map

package/dist/components/sidenav/menu.d.ts

@@ -12,7 +12,7 @@
 
 import { SidenavMenuProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime153 from "react/jsx-runtime";
+import * as react_jsx_runtime176 from "react/jsx-runtime";
 
 //#region src/components/sidenav/menu.d.ts
 
@@ -43,7 +43,7 @@ declare function SidenavMenu({
   classNames,
   children,
   ...rest
-}: SidenavMenuProps): react_jsx_runtime153.JSX.Element;
+}: SidenavMenuProps): react_jsx_runtime176.JSX.Element;
 //#endregion
 export { SidenavMenu };
 //# sourceMappingURL=menu.d.ts.map

package/dist/components/sidenav/styles.module.css

@@ -14,14 +14,22 @@
 
 @layer components.l1 {
   .sidenav {
-    @apply fg-a11y-on-accent gap-xs bg-surface-default p-m absolute left-0 row-span-full flex h-full flex-col;
+    --sidenav-width: 64px;
+    @apply fg-primary-bold gap-xs bg-surface-default p-m absolute left-0 row-span-full flex h-full flex-col;
 
-    @variant closed {
-      @apply items-center;
+    @variant motion-safe {
+      transition: transform var(--animation-duration-normal)
+        var(--animation-easing-standard);
     }
 
     @variant group-push-left/layout {
       @apply relative;
+      transform: translateX(0);
+    }
+
+    @variant closed {
+      @apply items-center;
+      transform: translateX(calc(-100% + var(--sidenav-width)));
     }
   }
 
@@ -81,11 +89,11 @@
     }
 
     @variant pressed {
-      @apply bg-accent-primary-pressed;
+      @apply fg-a11y-on-accent bg-accent-primary-pressed;
     }
 
     @variant selected {
-      @apply bg-accent-primary-bold;
+      @apply fg-a11y-on-accent bg-accent-primary-bold;
 
       @variant hover {
         @apply bg-accent-primary-hover;
@@ -98,6 +106,10 @@
       @variant pressed {
         @apply bg-accent-primary-pressed;
       }
+
+      @variant disabled {
+        @apply fg-a11y-on-accent;
+      }
     }
 
     @variant disabled {
@@ -129,7 +141,7 @@
     }
 
     @variant pressed {
-      @apply bg-accent-primary-pressed;
+      @apply fg-a11y-on-accent bg-accent-primary-pressed;
     }
 
     @variant disabled {
@@ -164,11 +176,11 @@
       }
 
       @variant pressed {
-        @apply bg-accent-primary-pressed;
+        @apply fg-a11y-on-accent bg-accent-primary-pressed;
       }
 
       @variant selected {
-        @apply bg-accent-primary-bold;
+        @apply fg-a11y-on-accent bg-accent-primary-bold;
 
         @variant hover {
           @apply bg-accent-primary-hover;
@@ -181,6 +193,10 @@
         @variant pressed {
           @apply bg-accent-primary-pressed;
         }
+
+        @variant disabled {
+          @apply fg-a11y-on-accent;
+        }
       }
 
       @variant disabled {
@@ -248,11 +264,11 @@
       }
 
       @variant pressed {
-        @apply bg-accent-primary-pressed;
+        @apply fg-a11y-on-accent bg-accent-primary-pressed;
       }
 
       @variant selected {
-        @apply bg-accent-primary-bold;
+        @apply fg-a11y-on-accent bg-accent-primary-bold;
 
         @variant hover {
           @apply bg-accent-primary-hover;
@@ -265,6 +281,10 @@
         @variant pressed {
           @apply bg-accent-primary-pressed;
         }
+
+        @variant disabled {
+          @apply fg-a11y-on-accent;
+        }
       }
 
       @variant disabled {

package/dist/components/sidenav/trigger.d.ts

@@ -12,7 +12,7 @@
 
 import { SidenavTriggerProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime155 from "react/jsx-runtime";
+import * as react_jsx_runtime173 from "react/jsx-runtime";
 
 //#region src/components/sidenav/trigger.d.ts
 
@@ -39,7 +39,7 @@ declare function SidenavTrigger({
   children,
   for: type,
   ...rest
-}: SidenavTriggerProps): react_jsx_runtime155.JSX.Element;
+}: SidenavTriggerProps): react_jsx_runtime173.JSX.Element;
 //#endregion
 export { SidenavTrigger };
 //# sourceMappingURL=trigger.d.ts.map

package/dist/components/skeleton/index.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { SkeletonProps } from "./types.js";
-import * as react_jsx_runtime144 from "react/jsx-runtime";
+import * as react_jsx_runtime177 from "react/jsx-runtime";
 
 //#region src/components/skeleton/index.d.ts
 /**
@@ -34,7 +34,7 @@ declare function Skeleton({
   className,
   variant,
   ...rest
-}: SkeletonProps): react_jsx_runtime144.JSX.Element;
+}: SkeletonProps): react_jsx_runtime177.JSX.Element;
 //#endregion
 export { Skeleton };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/slider/index.d.ts

@@ -12,7 +12,7 @@
 
 import { SliderProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime156 from "react/jsx-runtime";
+import * as react_jsx_runtime178 from "react/jsx-runtime";
 
 //#region src/components/slider/index.d.ts
 
@@ -71,7 +71,7 @@ declare function Slider({
   step: stepProp,
   value: valueProp,
   ...rest
-}: SliderProps): react_jsx_runtime156.JSX.Element;
+}: SliderProps): react_jsx_runtime178.JSX.Element;
 //#endregion
 export { Slider };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/status-indicator/index.d.ts

@@ -12,7 +12,7 @@
 
 import { StatusIndicatorProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime158 from "react/jsx-runtime";
+import * as react_jsx_runtime184 from "react/jsx-runtime";
 
 //#region src/components/status-indicator/index.d.ts
 /**
@@ -35,7 +35,7 @@ declare function StatusIndicator({
   className,
   status,
   ...rest
-}: StatusIndicatorProps): react_jsx_runtime158.JSX.Element;
+}: StatusIndicatorProps): react_jsx_runtime184.JSX.Element;
 //#endregion
 export { StatusIndicator };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/switch/context.d.ts

@@ -13,13 +13,13 @@
 import { ProviderProps } from "../../lib/types.js";
 import { SwitchProps as SwitchProps$1 } from "./types.js";
 import "client-only";
-import * as react31 from "react";
+import * as react43 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime143 from "react/jsx-runtime";
+import * as react_jsx_runtime180 from "react/jsx-runtime";
 
 //#region src/components/switch/context.d.ts
 /** Context for sharing props across Switch components */
-declare const SwitchContext: react31.Context<ContextValue<SwitchProps$1, HTMLLabelElement>>;
+declare const SwitchContext: react43.Context<ContextValue<SwitchProps$1, HTMLLabelElement>>;
 /**
  * Sets default props for all Switch components within.
  *
@@ -38,7 +38,7 @@ declare const SwitchContext: react31.Context<ContextValue<SwitchProps$1, HTMLLab
 declare function SwitchProvider({
   children,
   ...props
-}: ProviderProps<SwitchProps$1>): react_jsx_runtime143.JSX.Element;
+}: ProviderProps<SwitchProps$1>): react_jsx_runtime180.JSX.Element;
 //#endregion
 export { SwitchContext, SwitchProvider };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/switch/index.d.ts

@@ -12,7 +12,7 @@
 
 import { SwitchProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime163 from "react/jsx-runtime";
+import * as react_jsx_runtime181 from "react/jsx-runtime";
 
 //#region src/components/switch/index.d.ts
 
@@ -38,7 +38,7 @@ import * as react_jsx_runtime163 from "react/jsx-runtime";
 declare function Switch({
   ref,
   ...props
-}: SwitchProps): react_jsx_runtime163.JSX.Element;
+}: SwitchProps): react_jsx_runtime181.JSX.Element;
 //#endregion
 export { Switch };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/switch/styles.module.css

@@ -35,6 +35,14 @@
     &:before {
       @apply size-m mr-l block rounded-full bg-(--fg-primary-muted);
       content: '';
+
+      @variant motion-safe {
+        transition:
+          margin var(--animation-duration-normal)
+            var(--animation-easing-standard),
+          background-color var(--animation-duration-fast)
+            var(--animation-easing-standard);
+      }
     }
 
     @variant group-hover/switch {

package/dist/components/table/body.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { TableBodyProps } from "./types.js";
-import * as react_jsx_runtime160 from "react/jsx-runtime";
+import * as react_jsx_runtime215 from "react/jsx-runtime";
 
 //#region src/components/table/body.d.ts
 
@@ -39,7 +39,7 @@ declare function TableBody<T>({
   ref,
   rows,
   ...rest
-}: TableBodyProps<T>): react_jsx_runtime160.JSX.Element;
+}: TableBodyProps<T>): react_jsx_runtime215.JSX.Element;
 //#endregion
 export { TableBody };
 //# sourceMappingURL=body.d.ts.map

package/dist/components/table/cell.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { TableCellProps } from "./types.js";
-import * as react_jsx_runtime162 from "react/jsx-runtime";
+import * as react_jsx_runtime224 from "react/jsx-runtime";
 
 //#region src/components/table/cell.d.ts
 
@@ -40,7 +40,7 @@ declare function TableCell<T>({
   className,
   cell,
   ...rest
-}: TableCellProps<T>): react_jsx_runtime162.JSX.Element;
+}: TableCellProps<T>): react_jsx_runtime224.JSX.Element;
 //#endregion
 export { TableCell };
 //# sourceMappingURL=cell.d.ts.map

package/dist/components/table/header-cell.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { TableHeaderCellProps } from "./types.js";
-import * as react_jsx_runtime168 from "react/jsx-runtime";
+import * as react_jsx_runtime217 from "react/jsx-runtime";
 
 //#region src/components/table/header-cell.d.ts
 
@@ -42,7 +42,7 @@ declare function TableHeaderCell<T>({
   className,
   header,
   ...rest
-}: TableHeaderCellProps<T>): react_jsx_runtime168.JSX.Element;
+}: TableHeaderCellProps<T>): react_jsx_runtime217.JSX.Element;
 //#endregion
 export { TableHeaderCell };
 //# sourceMappingURL=header-cell.d.ts.map

package/dist/components/table/header.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { TableHeaderProps } from "./types.js";
-import * as react_jsx_runtime183 from "react/jsx-runtime";
+import * as react_jsx_runtime220 from "react/jsx-runtime";
 
 //#region src/components/table/header.d.ts
 
@@ -41,7 +41,7 @@ declare function TableHeader<T>({
   headerGroups,
   columnSelection,
   ...rest
-}: TableHeaderProps<T>): react_jsx_runtime183.JSX.Element;
+}: TableHeaderProps<T>): react_jsx_runtime220.JSX.Element;
 //#endregion
 export { TableHeader };
 //# sourceMappingURL=header.d.ts.map

package/dist/components/table/index.d.ts

@@ -12,7 +12,7 @@
 
 import { TableProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime169 from "react/jsx-runtime";
+import * as react_jsx_runtime221 from "react/jsx-runtime";
 import { Key } from "@react-types/shared";
 
 //#region src/components/table/index.d.ts
@@ -67,8 +67,12 @@ declare function Table<T extends {
   onColumnReorderChange,
   onRowSelectionChange,
   fullWidth,
+  pageSize,
+  page: pageProp,
+  defaultPage,
+  onPageChange,
   ...rest
-}: TableProps<T>): react_jsx_runtime169.JSX.Element;
+}: TableProps<T>): react_jsx_runtime221.JSX.Element;
 //#endregion
 export { Table };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/table/index.js

@@ -28,9 +28,10 @@ import { useCallback, useContext, useMemo, useState } from "react";
 import { clsx } from "@accelint/design-foundation/lib/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Kebab from "@accelint/icons/kebab";
-import Pin from "@accelint/icons/pin";
+import { useControlledState } from "@react-stately/utils";
+import PinIcon from "@accelint/icons/pin";
 import { useListData } from "@react-stately/data";
-import { getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import styles from "./styles.module.css";
 
 //#region src/components/table/index.tsx
@@ -93,7 +94,7 @@ function RowActionsMenu({ moveRowsDown, moveRowsUp, row, rows }) {
 * <Table columns={columns} data={rows} enableSorting showCheckbox />
 * ```
 */
-function Table({ children, columns: columnsProp, data: dataProp, showCheckbox, rowSelection: rowSelectionProp, kebabPosition = "right", persistRowKebabMenu = true, persistHeaderKebabMenu = true, persistNumerals = false, enableSorting = true, enableColumnReordering = true, enableRowActions = true, manualSorting = false, onSortChange, onColumnReorderChange, onRowSelectionChange, fullWidth = false, ...rest }) {
+function Table({ children, columns: columnsProp, data: dataProp, showCheckbox, rowSelection: rowSelectionProp, kebabPosition = "right", persistRowKebabMenu = true, persistHeaderKebabMenu = true, persistNumerals = false, enableSorting = true, enableColumnReordering = true, enableRowActions = true, manualSorting = false, onSortChange, onColumnReorderChange, onRowSelectionChange, fullWidth = false, pageSize, page: pageProp, defaultPage = 1, onPageChange, ...rest }) {
 	const { items: data, moveAfter, moveBefore } = useListData({ initialItems: dataProp });
 	const [rowSelection, setRowSelection] = useState(rowSelectionProp ?? {});
 	const [columnSelection, setColumnSelection] = useState(null);
@@ -101,6 +102,15 @@ function Table({ children, columns: columnsProp, data: dataProp, showCheckbox, r
 		top: [],
 		bottom: []
 	});
+	const [currentPage, setCurrentPage] = useControlledState(pageProp, defaultPage, onPageChange);
+	const pagination = useMemo(() => pageSize != null ? {
+		pageIndex: currentPage - 1,
+		pageSize
+	} : void 0, [currentPage, pageSize]);
+	const handlePaginationChange = useCallback((updater) => {
+		if (pagination == null) return;
+		setCurrentPage((typeof updater === "function" ? updater(pagination) : updater).pageIndex + 1);
+	}, [pagination, setCurrentPage]);
 	/**
 	* moveUpSelectedRows moves the selected rows up in the table.
 	* It finds the first selected row, determines its index,
@@ -152,7 +162,7 @@ function Table({ children, columns: columnsProp, data: dataProp, showCheckbox, r
 			id: "numeral",
 			cell: ({ row }) => row.getIsPinned() ? /* @__PURE__ */ jsx(Icon, {
 				size: "small",
-				children: /* @__PURE__ */ jsx(Pin, {})
+				children: /* @__PURE__ */ jsx(PinIcon, {})
 			}) : /* @__PURE__ */ jsx("span", {
 				"data-testid": "numeral",
 				children: row.index + 1
@@ -202,7 +212,8 @@ function Table({ children, columns: columnsProp, data: dataProp, showCheckbox, r
 		},
 		state: {
 			rowSelection,
-			rowPinning
+			rowPinning,
+			...pagination != null && { pagination }
 		},
 		getRowId: (row, index) => {
 			return row.id ? row.id.toString() : index.toString();
@@ -212,8 +223,10 @@ function Table({ children, columns: columnsProp, data: dataProp, showCheckbox, r
 		manualSorting,
 		onRowSelectionChange: handleRowSelectionChange,
 		onRowPinningChange: setRowPinning,
+		onPaginationChange: handlePaginationChange,
 		getCoreRowModel: getCoreRowModel(),
-		getSortedRowModel: getSortedRowModel()
+		getSortedRowModel: getSortedRowModel(),
+		...pageSize != null && { getPaginationRowModel: getPaginationRowModel() }
 	});
 	const moveColumnLeft = useCallback((oldIndex) => {
 		setColumnOrder((order) => {