@neeyo/mantine-datatable 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -1,1046 +1,1126 @@
-import * as react from 'react';
-import { JSX, Ref, RefObject } from 'react';
-import { PopoverProps, MantineTheme, MantineStyleProp, TableTrProps, MantineSize, TextProps, PaginationProps, MantineColor, MantineLoader, CollapseProps, CheckboxProps, StylesRecord, MantineShadow, ScrollAreaProps, TableProps } from '@mantine/core';
-import { DropResult } from '@hello-pangea/dnd';
-
-type DataTableColumnTextAlign = 'left' | 'center' | 'right';
-
-type DataTableColumn<T = Record<string, unknown>> = {
-    /**
-     * Column accessor.
-     * You can use dot-notation for nested objects property drilling.
-     * (i.e. `department.name` or `department.company.name`)
-     */
-    accessor: keyof T | (string & NonNullable<unknown>);
-    /**
-     * Optional column header title.
-     * If not present, one will be generated by "humanizing" the provided column accessor.
-     * (i.e. `firstName` -> `First name`; `user.firstName` -> `User first name`)
-     */
-    title?: React.ReactNode;
-    /**
-     * Custom cell data render function.
-     * Accepts the current record and its index in `records` as arguments and returns a React node
-     * (remember that a string is a valid React node too).
-     */
-    render?: (record: T, index: number) => React.ReactNode;
-    /**
-     * Column text alignment.
-     * @default `left`
-     */
-    textAlign?: DataTableColumnTextAlign;
-    /**
-     * If true, column will be sortable.
-     */
-    sortable?: boolean;
-    sortKey?: string;
-    /**
-     * If set to true, the column can be dragged.
-     */
-    draggable?: boolean;
-    /**
-     * If set to true, the column can be toggled.
-     */
-    toggleable?: boolean;
-    /**
-     * If set to true, the column can be resized.
-     */
-    resizable?: boolean;
-    /**
-     * If set, the column will be pinned to the specified side of the table.
-     * If `pinnable` is false or undefined, this is a static pin (not changeable by user).
-     * If `pinnable` is true, this is the initial pinning state (user can change it).
-     */
-    pinned?: 'left' | 'right';
-    /**
-     * If set to true, the column can be pinned/unpinned by the user via UI.
-     * When true, `pinned` acts as the initial pinning state.
-     */
-    pinnable?: boolean;
-    /**
-     * If set to true, the column will be toggled by default.
-     */
-    defaultToggle?: boolean;
-    /**
-     * Optional node providing the user with filtering options.
-     * If present, a filter button will be added to the column's header. Upon clicking that button,
-     * a pop-over showing the provided node will be opened.
-     *
-     * Alternatively, a function returning a node can be provided. The function receives props with a `close`
-     * method which allows programmatically closing the pop-over.
-     *
-     * ```tsx
-     * // …
-     * columns={[
-     *   {
-     *     accessor: 'name',
-     *     filter: ({ close }) => {
-     *       return <Stack>
-     *         <Button onClick={() => { setFilter(undefined); close(); }}>Reset</Button>
-     *       </Stack>
-     *     },
-     *   }
-     * ]}
-     * // …
-     * ```
-     *
-     * Note: this property only takes care of rendering the node which provides the filtering options.
-     * It is assumed that the actual filtering is performed somewhere in user code.
-     */
-    filter?: React.ReactNode | ((params: {
-        close: () => void;
-    }) => React.ReactNode);
-    /**
-     * Filter popover props; override if necessary.
-     */
-    filterPopoverProps?: PopoverProps;
-    /**
-     * Disables the use of the Mantine useClickOutside hook inside the filter popover
-     */
-    filterPopoverDisableClickOutside?: boolean;
-    /**
-     * If true, filter icon will be styled differently to indicate the filter is in effect.
-     */
-    filtering?: boolean;
-    /**
-     * Desired column width.
-     */
-    width?: string | number;
-    /**
-     * If true, column will not be visible.
-     */
-    hidden?: boolean;
-    /**
-     * If true, tbody cells will not be visible.
-     */
-    hiddenContent?: boolean;
-    /**
-     * If set, the column will only be visible according to the specified media query.
-     * Can be a string, or a function receiving the current theme and returning a string.
-     */
-    visibleMediaQuery?: string | ((theme: MantineTheme) => string);
-    /**
-     * Optional class name passed to the column title
-     */
-    titleClassName?: string;
-    /**
-     * Optional style passed to the column title.
-     * Either a style object, or a function receiving the current theme and returning a style object.
-     */
-    titleStyle?: MantineStyleProp;
-    /**
-     * Optional class name passed to each data cell in the column.
-     * Can be a string, or a function receiving the current record and its index
-     * as arguments and returning a string.
-     */
-    cellsClassName?: string | ((record: T, index: number) => string | undefined);
-    /**
-     * Optional style passed to each data cell in the column.
-     * A function that receives the current record and its index as arguments and returns either
-     * a style object, or a function that accepts theme and returns a style object.
-     */
-    cellsStyle?: (record: T, index: number) => MantineStyleProp | undefined;
-    /**
-     * Optional function returning an object of custom attributes to be applied to each cell in the column.
-     * Receives the current record and its index as arguments.
-     * Useful for adding data attributes, handling middle-clicks, etc.
-     */
-    customCellAttributes?: (record: T, index: number) => Record<string, unknown>;
-    /**
-     * Optional column footer content.
-     * If at least one column has a footer, the table will display a footer row.
-     */
-    footer?: React.ReactNode;
-    /**
-     * Optional class name passed to the column footer.
-     */
-    footerClassName?: string;
-    /**
-     * Optional style passed to the column footer.
-     */
-    footerStyle?: MantineStyleProp;
+import { CheckboxProps, CollapseProps, MantineColor, MantineLoader, MantineShadow, MantineSize, MantineStyleProp, MantineTheme, PaginationProps, PopoverProps, ScrollAreaProps, StylesRecord, TableProps, TableTrProps, TextProps } from "@mantine/core";
+import { JSX, Ref, RefObject } from "react";
+import { Virtualizer } from "@tanstack/react-virtual";
+import { DropResult } from "@hello-pangea/dnd";
+//#region package/types/DataTableColumnTextAlign.d.ts
+export type DataTableColumnTextAlign = 'left' | 'center' | 'right';
+//#endregion
+//#region package/types/DataTableColumn.d.ts
+export type DataTableColumn<T = Record<string, unknown>> = {
+  /**
+   * Column accessor.
+   * You can use dot-notation for nested objects property drilling.
+   * (i.e. `department.name` or `department.company.name`)
+   */
+  accessor: keyof T | (string & NonNullable<unknown>);
+  /**
+   * Optional column header title.
+   * If not present, one will be generated by "humanizing" the provided column accessor.
+   * (i.e. `firstName` -> `First name`; `user.firstName` -> `User first name`)
+   */
+  title?: React.ReactNode;
+  /**
+   * Custom cell data render function.
+   * Accepts the current record and its index in `records` as arguments and returns a React node
+   * (remember that a string is a valid React node too).
+   */
+  render?: (record: T, index: number) => React.ReactNode;
+  /**
+   * Column text alignment.
+   * @default `left`
+   */
+  textAlign?: DataTableColumnTextAlign;
+  /**
+   * If true, column will be sortable.
+   */
+  sortable?: boolean;
+  sortKey?: string;
+  /**
+   * If set to true, the column can be dragged.
+   */
+  draggable?: boolean;
+  /**
+   * If set to true, the column can be toggled.
+   */
+  toggleable?: boolean;
+  /**
+   * If set to true, the column can be resized.
+   */
+  resizable?: boolean;
+  /**
+   * If true, dragging the resize handle only moves a guide line and the new width is applied when
+   * the handle is dropped. Use for columns whose cells are expensive to lay out on every frame
+   * (e.g. cells that measure themselves); other columns keep resizing live.
+   */
+  deferredResize?: boolean;
+  /**
+   * If set, the column will be pinned to the specified side of the table.
+   * If `pinnable` is false or undefined, this is a static pin (not changeable by user).
+   * If `pinnable` is true, this is the initial pinning state (user can change it).
+   */
+  pinned?: 'left' | 'right';
+  /**
+   * If set to true, the column can be pinned/unpinned by the user via UI.
+   * When true, `pinned` acts as the initial pinning state.
+   */
+  pinnable?: boolean;
+  /**
+   * If set to true, the column will be toggled by default.
+   */
+  defaultToggle?: boolean;
+  /**
+   * Optional node providing the user with filtering options.
+   * If present, a filter button will be added to the column's header. Upon clicking that button,
+   * a pop-over showing the provided node will be opened.
+   *
+   * Alternatively, a function returning a node can be provided. The function receives props with a `close`
+   * method which allows programmatically closing the pop-over.
+   *
+   * ```tsx
+   * // …
+   * columns={[
+   *   {
+   *     accessor: 'name',
+   *     filter: ({ close }) => {
+   *       return <Stack>
+   *         <Button onClick={() => { setFilter(undefined); close(); }}>Reset</Button>
+   *       </Stack>
+   *     },
+   *   }
+   * ]}
+   * // …
+   * ```
+   *
+   * Note: this property only takes care of rendering the node which provides the filtering options.
+   * It is assumed that the actual filtering is performed somewhere in user code.
+   */
+  filter?: React.ReactNode | ((params: {
+    close: () => void;
+  }) => React.ReactNode);
+  /**
+   * Filter popover props; override if necessary.
+   */
+  filterPopoverProps?: PopoverProps;
+  /**
+   * Disables the use of the Mantine useClickOutside hook inside the filter popover
+   */
+  filterPopoverDisableClickOutside?: boolean;
+  /**
+   * If true, filter icon will be styled differently to indicate the filter is in effect.
+   */
+  filtering?: boolean;
+  /**
+   * Desired column width.
+   */
+  width?: string | number;
+  /**
+   * If true, column will not be visible.
+   */
+  hidden?: boolean;
+  /**
+   * If true, tbody cells will not be visible.
+   */
+  hiddenContent?: boolean;
+  /**
+   * If set, the column will only be visible according to the specified media query.
+   * Can be a string, or a function receiving the current theme and returning a string.
+   */
+  visibleMediaQuery?: string | ((theme: MantineTheme) => string);
+  /**
+   * Optional class name passed to the column title
+   */
+  titleClassName?: string;
+  /**
+   * Optional style passed to the column title.
+   * Either a style object, or a function receiving the current theme and returning a style object.
+   */
+  titleStyle?: MantineStyleProp;
+  /**
+   * Optional class name passed to each data cell in the column.
+   * Can be a string, or a function receiving the current record and its index
+   * as arguments and returning a string.
+   */
+  cellsClassName?: string | ((record: T, index: number) => string | undefined);
+  /**
+   * Optional style passed to each data cell in the column.
+   * A function that receives the current record and its index as arguments and returns either
+   * a style object, or a function that accepts theme and returns a style object.
+   */
+  cellsStyle?: (record: T, index: number) => MantineStyleProp | undefined;
+  /**
+   * Optional function returning an object of custom attributes to be applied to each cell in the column.
+   * Receives the current record and its index as arguments.
+   * Useful for adding data attributes, handling middle-clicks, etc.
+   */
+  customCellAttributes?: (record: T, index: number) => Record<string, unknown>;
+  /**
+   * Optional column footer content.
+   * If at least one column has a footer, the table will display a footer row.
+   */
+  footer?: React.ReactNode;
+  /**
+   * Optional class name passed to the column footer.
+   */
+  footerClassName?: string;
+  /**
+   * Optional style passed to the column footer.
+   */
+  footerStyle?: MantineStyleProp;
 } & ({
-    /**
-     * If true, cell content in this column will be truncated with ellipsis as needed and will not wrap
-     * to multiple lines (i.e. `overflow: hidden; text-overflow: ellipsis`; `white-space: nowrap`).
-     * On a column, you can either set this property or `noWrap`, but not both.
-     */
-    ellipsis?: boolean;
-    noWrap?: never;
+  /**
+   * If true, cell content in this column will be truncated with ellipsis as needed and will not wrap
+   * to multiple lines (i.e. `overflow: hidden; text-overflow: ellipsis`; `white-space: nowrap`).
+   * On a column, you can either set this property or `noWrap`, but not both.
+   */
+  ellipsis?: boolean;
+  noWrap?: never;
 } | {
-    ellipsis?: never;
-    /**
-     * If true, cell content in this column will not wrap to multiple lines (i.e. `white-space: nowrap`).
-     * This is useful for columns containing long strings.
-     * On a column, you can either set this property or `ellipsis`, but not both.
-     */
-    noWrap?: boolean;
+  ellipsis?: never;
+  /**
+   * If true, cell content in this column will not wrap to multiple lines (i.e. `white-space: nowrap`).
+   * This is useful for columns containing long strings.
+   * On a column, you can either set this property or `ellipsis`, but not both.
+   */
+  noWrap?: boolean;
 });
-
-type DataTableCellClickHandler<T = Record<string, unknown>> = (params: {
-    /**
-     * Click event.
-     */
-    event: React.MouseEvent;
-    /**
-     * Clicked record.
-     */
-    record: T;
-    /**
-     * Clicked record index.
-     */
-    index: number;
-    /**
-     * Clicked column information.
-     */
-    column: DataTableColumn<T>;
-    /**
-     * Clicked column index.
-     */
-    columnIndex: number;
+//#endregion
+//#region package/types/DataTableCellClickHandler.d.ts
+export type DataTableCellClickHandler<T = Record<string, unknown>> = (params: {
+  /**
+   * Click event.
+   */
+  event: React.MouseEvent;
+  /**
+   * Clicked record.
+   */
+  record: T;
+  /**
+   * Clicked record index.
+   */
+  index: number;
+  /**
+   * Clicked column information.
+   */
+  column: DataTableColumn<T>;
+  /**
+   * Clicked column index.
+   */
+  columnIndex: number;
 }) => void;
-
-type DataTableColumnGroup<T = Record<string, unknown>> = {
-    /**
-     * Used as the `key` prop for the created `<th />`.
-     */
-    id: string;
-    /**
-     * Component to render inside the column group header.
-     */
-    title?: React.ReactNode;
-    /**
-     * Text alignment of the column group header.
-     * @default `left`
-     */
-    textAlign?: DataTableColumnTextAlign;
-    /**
-     * Columns which are part of the group.
-     * Optional when groups are provided for multilevel grouping.
-     */
-    columns?: DataTableColumn<T>[];
-    /**
-     * Nested column groups for multilevel grouping.
-     * When provided, columns should be omitted.
-     */
-    groups?: DataTableColumnGroup<T>[];
-    /**
-     * Optional className to apply to the column group header.
-     */
-    className?: string;
-    /**
-     * Optional style to apply to the column group header.
-     * Can be a style object or a function which receives the current theme and
-     * returns a style object.
-     */
-    style?: MantineStyleProp;
+//#endregion
+//#region package/types/DataTableColumnGroup.d.ts
+export type DataTableColumnGroup<T = Record<string, unknown>> = {
+  /**
+   * Used as the `key` prop for the created `<th />`.
+   */
+  id: string;
+  /**
+   * Component to render inside the column group header.
+   */
+  title?: React.ReactNode;
+  /**
+   * Text alignment of the column group header.
+   * @default `left`
+   */
+  textAlign?: DataTableColumnTextAlign;
+  /**
+   * Columns which are part of the group.
+   * Optional when groups are provided for multilevel grouping.
+   */
+  columns?: DataTableColumn<T>[];
+  /**
+   * Nested column groups for multilevel grouping.
+   * When provided, columns should be omitted.
+   */
+  groups?: DataTableColumnGroup<T>[];
+  /**
+   * Optional className to apply to the column group header.
+   */
+  className?: string;
+  /**
+   * Optional style to apply to the column group header.
+   * Can be a style object or a function which receives the current theme and
+   * returns a style object.
+   */
+  style?: MantineStyleProp;
 };
-
-type DataTableDefaultColumnProps<T = Record<string, unknown>> = Omit<DataTableColumn<T>, 'accessor' | 'hidden' | 'visibleMediaQuery' | 'render'>;
-
-type DataTableDraggableRowProps = {
-    /**
-     * Optional class name.
-     */
-    className?: string;
-    /**
-     * Current dragging status.
-     */
-    isDragging?: boolean;
+//#endregion
+//#region package/types/DataTableDefaultColumnProps.d.ts
+export type DataTableDefaultColumnProps<T = Record<string, unknown>> = Omit<DataTableColumn<T>, 'accessor' | 'hidden' | 'visibleMediaQuery' | 'render'>;
+//#endregion
+//#region package/types/DataTableDraggableRowProps.d.ts
+export type DataTableDraggableRowProps = {
+  /**
+   * Optional class name.
+   */
+  className?: string;
+  /**
+   * Current dragging status.
+   */
+  isDragging?: boolean;
 } & TableTrProps;
-
-type DataTableEmptyStateProps = {
-    /**
-     * Content to show when no records are available.
-     * The provided content will be overlaid and centered automatically.
-     * You can either provide this property or `noRecordsIcon`, but not both.
-     */
-    emptyState?: React.ReactNode;
-    noRecordsIcon?: never;
+//#endregion
+//#region package/types/DataTableEmptyStateProps.d.ts
+export type DataTableEmptyStateProps = {
+  /**
+   * Content to show when no records are available.
+   * The provided content will be overlaid and centered automatically.
+   * You can either provide this property or `noRecordsIcon`, but not both.
+   */
+  emptyState?: React.ReactNode;
+  noRecordsIcon?: never;
 } | {
-    emptyState?: never;
-    /**
-     * Icon to show when no records are available.
-     * The provided icon will be overlaid and centered automatically.
-     * You can either provide this property or `emptyState`, but not both.
-     */
-    noRecordsIcon?: React.ReactNode;
+  emptyState?: never;
+  /**
+   * Icon to show when no records are available.
+   * The provided icon will be overlaid and centered automatically.
+   * You can either provide this property or `emptyState`, but not both.
+   */
+  noRecordsIcon?: React.ReactNode;
 };
-
-type DataTableOuterBorderProps = {
-    withTableBorder?: never;
-    borderRadius?: never;
+//#endregion
+//#region package/types/DataTableIdAccessor.d.ts
+export type DataTableIdAccessor<T> = keyof T | (string & NonNullable<unknown>) | ((record: T) => React.Key);
+//#endregion
+//#region package/types/DataTableOuterBorderProps.d.ts
+export type DataTableOuterBorderProps = {
+  withTableBorder?: never;
+  borderRadius?: never;
 } | {
-    /**
-     * If true, table will have border.
-     */
-    withTableBorder: boolean;
-    /**
-     * Table border radius.
-     */
-    borderRadius?: MantineSize | (string & NonNullable<unknown>) | number;
+  /**
+   * If true, table will have border.
+   */
+  withTableBorder: boolean;
+  /**
+   * Table border radius.
+   */
+  borderRadius?: MantineSize | (string & NonNullable<unknown>) | number;
 };
-
+//#endregion
+//#region package/types/DataTablePageSizeSelectorProps.d.ts
 type DataTablePageSizeSelectorProps = {
-    onRecordsPerPageChange?: never;
-    recordsPerPageOptions?: never;
-    recordsPerPageLabel?: never;
+  onRecordsPerPageChange?: never;
+  recordsPerPageOptions?: never;
+  recordsPerPageLabel?: never;
 } | {
-    /**
-     * Callback fired a new page size is selected.
-     * Receives new page size as argument.
-     */
-    onRecordsPerPageChange: (recordsPerPage: number) => void;
-    /**
-     * Array of page sizes (numbers) to show in records per page selector.
-     */
-    recordsPerPageOptions: number[];
-    /**
-     * Label for records per page selector.
-     */
-    recordsPerPageLabel?: string;
-};
-
-type DataTablePaginationRenderContext = {
-    state: {
-        paginationSize: MantineSize;
-        page: number;
-        totalPages: number;
-        totalRecords: number | undefined;
-        recordsPerPage: number | undefined;
-        recordsLength: number | undefined;
-        fetching: boolean | undefined;
-        from?: number;
-        to?: number;
-        isWrapped: boolean;
-    };
-    actions: {
-        setPage: (page: number) => void;
-        setRecordsPerPage?: (n: number) => void;
-    };
-    Controls: {
-        Text: (props?: Partial<TextProps>) => JSX.Element;
-        PageSizeSelector: (props?: Partial<DataTablePageSizeSelectorProps>) => JSX.Element | null;
-        Pagination: (props?: Partial<PaginationProps>) => JSX.Element;
-    };
+  /**
+   * Callback fired a new page size is selected.
+   * Receives new page size as argument.
+   */
+  onRecordsPerPageChange: (recordsPerPage: number) => void;
+  /**
+   * Array of page sizes (numbers) to show in records per page selector.
+   */
+  recordsPerPageOptions: number[];
+  /**
+   * Label for records per page selector.
+   */
+  recordsPerPageLabel?: string;
 };
-
-type DataTablePaginationProps = ({
-    paginationWithEdges?: never;
-    paginationWithControls?: never;
-    page?: never;
-    onPageChange?: never;
-    totalRecords?: never;
-    recordsPerPage?: never;
-    paginationActiveTextColor?: never;
-    paginationActiveBackgroundColor?: never;
-    paginationSize?: never;
-    loadingText?: never;
-    paginationText?: never;
-    paginationWrapBreakpoint?: never;
-    getPaginationControlProps?: never;
-    getPaginationItemProps?: never;
-    renderPagination?: never;
-} | {
-    /**
-     * Whether to show first and last page navigation buttons.
-     */
-    paginationWithEdges?: boolean;
-    /**
-     * Whether to show next and previous page navigation buttons.
-     */
-    paginationWithControls?: boolean;
-    /**
-     * Current page number (1-based).
-     * If provided, a pagination component is shown.
-     */
+//#endregion
+//#region package/types/DataTablePaginationRenderContext.d.ts
+export type DataTablePaginationRenderContext = {
+  state: {
+    paginationSize: MantineSize;
     page: number;
-    /**
-     * Callback fired after page change.
-     * Receives the new page number as argument.
-     */
-    onPageChange: (page: number) => void;
-    /**
-     * Total number of records in the dataset.
-     */
+    totalPages: number;
     totalRecords: number | undefined;
-    /**
-     * Number of records per page.
-     */
-    recordsPerPage: number;
-    /**
-     * Pagination component size.
-     * @default `sm`
-     */
-    paginationSize?: MantineSize;
-    /**
-     * Color applied to active page button text.
-     * Can be a `MantineColor` (key of `theme.colors` or any valid CSS color string),
-     * or an object with `light` and `dark` keys and `MantineColor` values.
-     * Defaults to white.
-     */
-    paginationActiveTextColor?: MantineColor | {
-        light: MantineColor;
-        dark: MantineColor;
-    };
-    /**
-     * Color applied to active page button background.
-     * Can be a `MantineColor` (key of `theme.colors` or any valid CSS color string),
-     * or an object with `light` and `dark` keys and `MantineColor` values.
-     * Defaults to primary theme color.
-     */
-    paginationActiveBackgroundColor?: MantineColor | {
-        light: MantineColor;
-        dark: MantineColor;
-    };
-    /**
-     * Text to show while records are loading.
-     */
-    loadingText?: string;
-    /**
-     * Pagination text. Defaults to ```({ from, to, totalRecords }) => `${from}-${to}/${totalRecords}`
-     * ```
-     */
-    paginationText?: (params: {
-        from: number;
-        to: number;
-        totalRecords: number;
-    }) => React.ReactNode;
-    /**
-     * Pagination wrap breakpoints.
-     * Below this breakpoint the content will be displayed on multiple lines,
-     * above it the content will be displayed on a single line.
-     * @default `sm`
-     */
-    paginationWrapBreakpoint?: MantineSize | (string & NonNullable<unknown>) | number;
-    /**
-     * Function that returns props object for pagination control.
-     * Useful for improving accessibility.
-     */
-    getPaginationControlProps?: (control: 'first' | 'last' | 'previous' | 'next') => Record<string, unknown>;
-    /**
-     * Function that returns props object for pagination item (page number button).
-     */
-    getPaginationItemProps?: (page: number) => Record<string, unknown>;
-    /**
-     * Optional render function to replace the entire pagination component.
-     */
-    renderPagination?: (ctx: DataTablePaginationRenderContext) => React.ReactNode;
+    recordsPerPage: number | undefined;
+    recordsLength: number | undefined;
+    fetching: boolean | undefined;
+    from?: number;
+    to?: number;
+    isWrapped: boolean;
+  };
+  actions: {
+    setPage: (page: number) => void;
+    setRecordsPerPage?: (n: number) => void;
+  };
+  Controls: {
+    Text: (props?: Partial<TextProps>) => JSX.Element;
+    PageSizeSelector: (props?: Partial<DataTablePageSizeSelectorProps>) => JSX.Element | null;
+    Pagination: (props?: Partial<PaginationProps>) => JSX.Element;
+  };
+};
+//#endregion
+//#region package/types/DataTablePaginationProps.d.ts
+export type DataTablePaginationProps = ({
+  paginationWithEdges?: never;
+  paginationWithControls?: never;
+  page?: never;
+  onPageChange?: never;
+  totalRecords?: never;
+  recordsPerPage?: never;
+  paginationActiveTextColor?: never;
+  paginationActiveBackgroundColor?: never;
+  paginationSize?: never;
+  loadingText?: never;
+  paginationText?: never;
+  paginationWrapBreakpoint?: never;
+  getPaginationControlProps?: never;
+  getPaginationItemProps?: never;
+  renderPagination?: never;
+} | {
+  /**
+   * Whether to show first and last page navigation buttons.
+   */
+  paginationWithEdges?: boolean;
+  /**
+   * Whether to show next and previous page navigation buttons.
+   */
+  paginationWithControls?: boolean;
+  /**
+   * Current page number (1-based).
+   * If provided, a pagination component is shown.
+   */
+  page: number;
+  /**
+   * Callback fired after page change.
+   * Receives the new page number as argument.
+   */
+  onPageChange: (page: number) => void;
+  /**
+   * Total number of records in the dataset.
+   */
+  totalRecords: number | undefined;
+  /**
+   * Number of records per page.
+   */
+  recordsPerPage: number;
+  /**
+   * Pagination component size.
+   * @default `sm`
+   */
+  paginationSize?: MantineSize;
+  /**
+   * Color applied to active page button text.
+   * Can be a `MantineColor` (key of `theme.colors` or any valid CSS color string),
+   * or an object with `light` and `dark` keys and `MantineColor` values.
+   * Defaults to white.
+   */
+  paginationActiveTextColor?: MantineColor | {
+    light: MantineColor;
+    dark: MantineColor;
+  };
+  /**
+   * Color applied to active page button background.
+   * Can be a `MantineColor` (key of `theme.colors` or any valid CSS color string),
+   * or an object with `light` and `dark` keys and `MantineColor` values.
+   * Defaults to primary theme color.
+   */
+  paginationActiveBackgroundColor?: MantineColor | {
+    light: MantineColor;
+    dark: MantineColor;
+  };
+  /**
+   * Text to show while records are loading.
+   */
+  loadingText?: string;
+  /**
+   * Pagination text. Defaults to ```({ from, to, totalRecords }) => `${from}-${to}/${totalRecords}`
+   * ```
+   */
+  paginationText?: (params: {
+    from: number;
+    to: number;
+    totalRecords: number;
+  }) => React.ReactNode;
+  /**
+   * Pagination wrap breakpoints.
+   * Below this breakpoint the content will be displayed on multiple lines,
+   * above it the content will be displayed on a single line.
+   * @default `sm`
+   */
+  paginationWrapBreakpoint?: MantineSize | (string & NonNullable<unknown>) | number;
+  /**
+   * Function that returns props object for pagination control.
+   * Useful for improving accessibility.
+   */
+  getPaginationControlProps?: (control: 'first' | 'last' | 'previous' | 'next') => Record<string, unknown>;
+  /**
+   * Function that returns props object for pagination item (page number button).
+   */
+  getPaginationItemProps?: (page: number) => Record<string, unknown>;
+  /**
+   * Optional render function to replace the entire pagination component.
+   */
+  renderPagination?: (ctx: DataTablePaginationRenderContext) => React.ReactNode;
 }) & DataTablePageSizeSelectorProps;
-
+//#endregion
+//#region package/types/DataTableColorProps.d.ts
 type DataTableColorProps<T> = {
-    /**
-     * Data table text color.
-     * Can be a `MantineColor` (key of `theme.colors` or any valid CSS color string),
-     * or an object with `light` and `dark` keys and `MantineColor` values.
-     */
-    c?: MantineColor | {
-        light: MantineColor;
-        dark: MantineColor;
-    };
-    /**
-     * Data table background color.
-     * Can be a `MantineColor` (key of `theme.colors` or any valid CSS color string),
-     * or an object with `light` and `dark` keys and `MantineColor` values.
-     */
-    backgroundColor?: MantineColor | {
-        light: MantineColor;
-        dark: MantineColor;
-    };
-    /**
-     * Color of table borders, applied to all borders except row borders.
-     * Can be a `MantineColor` (key of `theme.colors` or any valid CSS color string),
-     * or an object with `light` and `dark` keys and `MantineColor` values.
-     */
-    borderColor?: MantineColor | {
-        light: MantineColor;
-        dark: MantineColor;
-    };
-    /**
-     * Color of row borders.
-     * Can be a `MantineColor` (key of `theme.colors` or any valid CSS color string),
-     * or an object with `light` and `dark` keys and `MantineColor` values.
-     */
-    rowBorderColor?: MantineColor | {
-        light: MantineColor;
-        dark: MantineColor;
-    };
-    /**
-     * Background color of striped rows.
-     * Can be a `MantineColor` (key of `theme.colors` or any valid CSS color string),
-     * or an object with `light` and `dark` keys and `MantineColor` values.
-     */
-    stripedColor?: MantineColor | {
-        light: MantineColor;
-        dark: MantineColor;
-    };
-    /**
-     * Background color of hover-highlighted row.
-     * Can be a `MantineColor` (key of `theme.colors` or any valid CSS color string),
-     * or an object with `light` and `dark` keys and `MantineColor` values.
-     */
-    highlightOnHoverColor?: MantineColor | {
-        light: MantineColor;
-        dark: MantineColor;
-    };
-    /**
-     * Data table row text color.
-     * A function that accepts row data and returns color.
-     * The returned color can be a `MantineColor` (key of `theme.colors` or any valid CSS color string),
-     * or an object with `light` and `dark` keys and `MantineColor` values.
-     */
-    rowColor?: (record: T, index: number) => MantineColor | undefined | {
-        light: MantineColor;
-        dark: MantineColor;
-    };
-    /**
-     * Data table row background color.
-     * A function that accepts row data and returns background color color.
-     * Can be a `MantineColor` (key of `theme.colors` or any valid CSS color string),
-     * or an object with `light` and `dark` keys and `MantineColor` values.
-     */
-    rowBackgroundColor?: (record: T, index: number) => MantineColor | undefined | {
-        light: MantineColor;
-        dark: MantineColor;
-    };
+  /**
+   * Data table text color.
+   * Can be a `MantineColor` (key of `theme.colors` or any valid CSS color string),
+   * or an object with `light` and `dark` keys and `MantineColor` values.
+   */
+  c?: MantineColor | {
+    light: MantineColor;
+    dark: MantineColor;
+  };
+  /**
+   * Data table background color.
+   * Can be a `MantineColor` (key of `theme.colors` or any valid CSS color string),
+   * or an object with `light` and `dark` keys and `MantineColor` values.
+   */
+  backgroundColor?: MantineColor | {
+    light: MantineColor;
+    dark: MantineColor;
+  };
+  /**
+   * Color of table borders, applied to all borders except row borders.
+   * Can be a `MantineColor` (key of `theme.colors` or any valid CSS color string),
+   * or an object with `light` and `dark` keys and `MantineColor` values.
+   */
+  borderColor?: MantineColor | {
+    light: MantineColor;
+    dark: MantineColor;
+  };
+  /**
+   * Color of row borders.
+   * Can be a `MantineColor` (key of `theme.colors` or any valid CSS color string),
+   * or an object with `light` and `dark` keys and `MantineColor` values.
+   */
+  rowBorderColor?: MantineColor | {
+    light: MantineColor;
+    dark: MantineColor;
+  };
+  /**
+   * Background color of striped rows.
+   * Can be a `MantineColor` (key of `theme.colors` or any valid CSS color string),
+   * or an object with `light` and `dark` keys and `MantineColor` values.
+   */
+  stripedColor?: MantineColor | {
+    light: MantineColor;
+    dark: MantineColor;
+  };
+  /**
+   * Background color of hover-highlighted row.
+   * Can be a `MantineColor` (key of `theme.colors` or any valid CSS color string),
+   * or an object with `light` and `dark` keys and `MantineColor` values.
+   */
+  highlightOnHoverColor?: MantineColor | {
+    light: MantineColor;
+    dark: MantineColor;
+  };
+  /**
+   * Data table row text color.
+   * A function that accepts row data and returns color.
+   * The returned color can be a `MantineColor` (key of `theme.colors` or any valid CSS color string),
+   * or an object with `light` and `dark` keys and `MantineColor` values.
+   */
+  rowColor?: (record: T, index: number) => MantineColor | undefined | {
+    light: MantineColor;
+    dark: MantineColor;
+  };
+  /**
+   * Data table row background color.
+   * A function that accepts row data and returns background color color.
+   * Can be a `MantineColor` (key of `theme.colors` or any valid CSS color string),
+   * or an object with `light` and `dark` keys and `MantineColor` values.
+   */
+  rowBackgroundColor?: (record: T, index: number) => MantineColor | undefined | {
+    light: MantineColor;
+    dark: MantineColor;
+  };
 };
-
+//#endregion
+//#region package/types/DataTableColumnProps.d.ts
 type DataTableColumnProps<T = Record<string, unknown>> = {
-    /**
-     * Grouped columns.
-     */
-    groups: DataTableColumnGroup<T>[];
-    columns?: never;
+  /**
+   * Grouped columns.
+   */
+  groups: DataTableColumnGroup<T>[];
+  columns?: never;
 } | {
-    groups?: never;
-    /**
-     * Visible columns.
-     */
-    columns: DataTableColumn<T>[];
+  groups?: never;
+  /**
+   * Visible columns.
+   */
+  columns: DataTableColumn<T>[];
 };
-
+//#endregion
+//#region package/types/DataTableLoaderProps.d.ts
 type DataTableLoaderProps = {
-    /**
-     * Loader background blur (in pixels).
-     */
-    loaderBackgroundBlur?: number;
+  /**
+   * Loader background blur (in pixels).
+   */
+  loaderBackgroundBlur?: number;
 } & ({
-    loaderSize?: never;
-    loaderType?: never;
-    loaderColor?: never;
-    /**
-     * Custom loader component to use instead of default one.
-     */
-    customLoader?: React.ReactNode;
+  loaderSize?: never;
+  loaderType?: never;
+  loaderColor?: never;
+  /**
+   * Custom loader component to use instead of default one.
+   */
+  customLoader?: React.ReactNode;
 } | {
-    /**
-     * Loader size.
-     * @default `lg`.
-     */
-    loaderSize?: MantineSize | (string & NonNullable<unknown>) | number;
-    /**
-     * Loader type.
-     */
-    loaderType?: MantineLoader;
-    /**
-     * Loader color.
-     */
-    loaderColor?: MantineColor;
-    customLoader?: never;
+  /**
+   * Loader size.
+   * @default `lg`.
+   */
+  loaderSize?: MantineSize | (string & NonNullable<unknown>) | number;
+  /**
+   * Loader type.
+   */
+  loaderType?: MantineLoader;
+  /**
+   * Loader color.
+   */
+  loaderColor?: MantineColor;
+  customLoader?: never;
 });
-
-type DataTableRowClickHandler<T = Record<string, unknown>> = (params: {
-    /**
-     * Click event.
-     */
-    event: React.MouseEvent;
-    /**
-     * Clicked record.
-     */
+//#endregion
+//#region package/types/DataTableRowClickHandler.d.ts
+export type DataTableRowClickHandler<T = Record<string, unknown>> = (params: {
+  /**
+   * Click event.
+   */
+  event: React.MouseEvent;
+  /**
+   * Clicked record.
+   */
+  record: T;
+  /**
+   * Clicked record index.
+   */
+  index: number;
+}) => void;
+//#endregion
+//#region package/types/DataTableRowExpansionCollapseProps.d.ts
+export type DataTableRowExpansionCollapseProps = Pick<CollapseProps, 'animateOpacity' | 'transitionDuration' | 'transitionTimingFunction'>;
+//#endregion
+//#region package/types/DataTableRowExpansionProps.d.ts
+export type DataTableRowExpansionProps<T = Record<string, unknown>> = {
+  /**
+   * Function defining which records can be expanded.
+   * Accepts an object with `record` and `index` properties and returns a boolean specifying
+   * whether the row should be expandable.
+   */
+  expandable?: (params: {
     record: T;
-    /**
-     * Clicked record index.
-     */
     index: number;
-}) => void;
-
-type DataTableRowExpansionCollapseProps = Pick<CollapseProps, 'animateOpacity' | 'transitionDuration' | 'transitionTimingFunction'>;
-
-type DataTableRowExpansionProps<T = Record<string, unknown>> = {
-    /**
-     * Function defining which records can be expanded.
-     * Accepts an object with `record` and `index` properties and returns a boolean specifying
-     * whether the row should be expandable.
-     */
-    expandable?: (params: {
-        record: T;
-        index: number;
-    }) => boolean;
-    /**
-     * Defines when rows should expand.
-     * @default `click`
-     */
-    trigger?: 'click' | 'always' | 'never';
-    /**
-     * If true, multiple rows can be expanded at the same time.
-     */
-    allowMultiple?: boolean;
-    /**
-     * Function defining which records will be initially expanded.
-     * Accepts an object with `record` and `index` properties and returns a boolean specifying
-     * whether the row should be expanded initially.
-     * Does nothing if `trigger === 'always'`.
-     */
-    initiallyExpanded?: (options: {
-        record: T;
-        index: number;
-    }) => boolean;
-    /**
-     * Additional properties passed to the Mantine Collapse component wrapping the custom content.
-     */
-    collapseProps?: DataTableRowExpansionCollapseProps;
-    /**
-     * An object defining the row expansion behavior in controlled mode.
-     */
-    expanded?: {
-        /**
-         * Currently expanded record IDs.
-         */
-        recordIds: unknown[];
-        /**
-         * Callback fired when expanded records change.
-         * Receives an array containing the newly expanded record IDs.
-         */
-        onRecordIdsChange?: React.Dispatch<React.SetStateAction<any[]>> | ((recordIds: unknown[]) => void);
-    };
-    /**
-     * Function returning the custom content to be lazily rendered for an expanded row.
-     * Accepts an object with properties containing the current record, its index,
-     * and a `collapse()` callback that can be used to collapse the expanded row.
-     * Must return a React node.
-     */
-    content: (params: {
-        record: T;
-        index: number;
-        collapse: () => void;
-    }) => React.ReactNode;
+  }) => boolean;
+  /**
+   * Defines when rows should expand.
+   * @default `click`
+   */
+  trigger?: 'click' | 'always' | 'never';
+  /**
+   * If true, multiple rows can be expanded at the same time.
+   */
+  allowMultiple?: boolean;
+  /**
+   * Function defining which records will be initially expanded.
+   * Accepts an object with `record` and `index` properties and returns a boolean specifying
+   * whether the row should be expanded initially.
+   * Does nothing if `trigger === 'always'`.
+   */
+  initiallyExpanded?: (options: {
+    record: T;
+    index: number;
+  }) => boolean;
+  /**
+   * Additional properties passed to the Mantine Collapse component wrapping the custom content.
+   */
+  collapseProps?: DataTableRowExpansionCollapseProps;
+  /**
+   * An object defining the row expansion behavior in controlled mode.
+   */
+  expanded?: {
+    /**
+     * Currently expanded record IDs.
+     */
+    recordIds: unknown[];
+    /**
+     * Callback fired when expanded records change.
+     * Receives an array containing the newly expanded record IDs.
+     */
+    onRecordIdsChange?: React.Dispatch<React.SetStateAction<any[]>> | ((recordIds: unknown[]) => void);
+  };
+  /**
+   * Function returning the custom content to be lazily rendered for an expanded row.
+   * Accepts an object with properties containing the current record, its index,
+   * and a `collapse()` callback that can be used to collapse the expanded row.
+   * Must return a React node.
+   */
+  content: (params: {
+    record: T;
+    index: number;
+    collapse: () => void;
+  }) => React.ReactNode;
 };
-
+//#endregion
+//#region package/types/DataTableScrollProps.d.ts
 type DataTableScrollProps = {
-    /**
-     * Function to call when the DataTable is scrolled.
-     */
-    onScroll?: (position: {
-        x: number;
-        y: number;
-    }) => void;
-    /**
-     * Function to call when the DataTable is scrolled to top.
-     */
-    onScrollToTop?: () => void;
-    /**
-     * Function to call when the DataTable is scrolled to bottom.
-     */
-    onScrollToBottom?: () => void;
-    /**
-     * Function to call when the DataTable is scrolled to left.
-     */
-    onScrollToLeft?: () => void;
-    /**
-     * Function to call when the DataTable is scrolled to right.
-     */
-    onScrollToRight?: () => void;
+  /**
+   * Function to call when the DataTable is scrolled.
+   */
+  onScroll?: (position: {
+    x: number;
+    y: number;
+  }) => void;
+  /**
+   * Function to call when the DataTable is scrolled to top.
+   */
+  onScrollToTop?: () => void;
+  /**
+   * Function to call when the DataTable is scrolled to bottom.
+   */
+  onScrollToBottom?: () => void;
+  /**
+   * Function to call when the DataTable is scrolled to left.
+   */
+  onScrollToLeft?: () => void;
+  /**
+   * Function to call when the DataTable is scrolled to right.
+   */
+  onScrollToRight?: () => void;
 };
-
-type DataTableSelectionTrigger = 'cell' | 'checkbox';
-
-type DataTableSelectionProps<T = Record<string, unknown>> = {
-    selectionTrigger?: never;
-    selectedRecords?: never;
-    onSelectedRecordsChange?: never;
-    isRecordSelectable?: never;
-    selectionCheckboxProps?: never;
-    getRecordSelectionCheckboxProps?: never;
-    allRecordsSelectionCheckboxProps?: never;
-    selectionColumnClassName?: never;
-    selectionColumnStyle?: never;
+//#endregion
+//#region package/types/DataTableSelectionTrigger.d.ts
+export type DataTableSelectionTrigger = 'cell' | 'checkbox';
+//#endregion
+//#region package/types/DataTableSelectionProps.d.ts
+export type DataTableSelectionProps<T = Record<string, unknown>> = {
+  selectionTrigger?: never;
+  selectedRecords?: never;
+  onSelectedRecordsChange?: never;
+  isRecordSelectable?: never;
+  selectionCheckboxProps?: never;
+  getRecordSelectionCheckboxProps?: never;
+  allRecordsSelectionCheckboxProps?: never;
+  selectionColumnClassName?: never;
+  selectionColumnStyle?: never;
 } | {
-    /**
-     * Defines how selection is triggered.
-     * @default 'checkbox'
-     */
-    selectionTrigger?: DataTableSelectionTrigger;
-    /**
-     * Currently-selected records.
-     */
-    selectedRecords?: T[];
-    /**
-     * Callback fired when selected records change.
-     * Receives and array of selected records as argument.
-     */
-    onSelectedRecordsChange?: (selectedRecords: T[]) => void;
-    /**
-     * Optional class name applied to selection column.
-     */
-    selectionColumnClassName?: string;
-    /**
-     * Optional style applied to selection column.
-     */
-    selectionColumnStyle?: MantineStyleProp;
-    /**
-     * A function used to determine whether a certain record is selectable.
-     * if the function returns false, the row selection checkbox is disabled.
-     * Accepts the current recors and index as arguments and returns a boolean.
-     */
-    isRecordSelectable?: (record: T, index: number) => boolean;
-    /**
-     * Props for the selection checkboxes, applied to header and all rows.
-     */
-    selectionCheckboxProps?: CheckboxProps;
-    /**
-     * A function used to determine additional props of the row selection checkboxes.
-     * Accepts the current record and its index as arguments and returns an object.
-     */
-    getRecordSelectionCheckboxProps?: (record: T, index: number) => CheckboxProps;
-    /**
-     * Additional props for the header checkbox that toggles selection of all records.
-     */
-    allRecordsSelectionCheckboxProps?: CheckboxProps;
+  /**
+   * Defines how selection is triggered.
+   * @default 'checkbox'
+   */
+  selectionTrigger?: DataTableSelectionTrigger;
+  /**
+   * Currently-selected records.
+   */
+  selectedRecords?: T[];
+  /**
+   * Callback fired when selected records change.
+   * Receives and array of selected records as argument.
+   */
+  onSelectedRecordsChange?: (selectedRecords: T[]) => void;
+  /**
+   * Optional class name applied to selection column.
+   */
+  selectionColumnClassName?: string;
+  /**
+   * Optional style applied to selection column.
+   */
+  selectionColumnStyle?: MantineStyleProp;
+  /**
+   * A function used to determine whether a certain record is selectable.
+   * if the function returns false, the row selection checkbox is disabled.
+   * Accepts the current recors and index as arguments and returns a boolean.
+   */
+  isRecordSelectable?: (record: T, index: number) => boolean;
+  /**
+   * Props for the selection checkboxes, applied to header and all rows.
+   */
+  selectionCheckboxProps?: CheckboxProps;
+  /**
+   * A function used to determine additional props of the row selection checkboxes.
+   * Accepts the current record and its index as arguments and returns an object.
+   */
+  getRecordSelectionCheckboxProps?: (record: T, index: number) => CheckboxProps;
+  /**
+   * Additional props for the header checkbox that toggles selection of all records.
+   */
+  allRecordsSelectionCheckboxProps?: CheckboxProps;
 };
-
-type DataTableSortStatus<T = Record<string, unknown>> = {
-    /**
-     * Sort column key for nested values.
-     * @type {string}
-     */
-    sortKey?: string;
-    /**
-     * Sort column accessor.
-     * You can use dot-notation for nested objects property drilling
-     * (i.e. `department.name` or `department.company.name`).
-     */
-    columnAccessor: keyof T | (string & NonNullable<unknown>);
-    /**
-     * Sort direction - `asc` for ascending, `desc` for descending.
-     */
-    direction: 'asc' | 'desc';
+//#endregion
+//#region package/types/DataTableSortStatus.d.ts
+export type DataTableSortStatus<T = Record<string, unknown>> = {
+  /**
+   * Sort column key for nested values.
+   * @type {string}
+   */
+  sortKey?: string;
+  /**
+   * Sort column accessor.
+   * You can use dot-notation for nested objects property drilling
+   * (i.e. `department.name` or `department.company.name`).
+   */
+  columnAccessor: keyof T | (string & NonNullable<unknown>);
+  /**
+   * Sort direction - `asc` for ascending, `desc` for descending.
+   */
+  direction: 'asc' | 'desc';
 };
-
-type DataTableSortProps<T = Record<string, unknown>> = ({
-    sortStatus?: never;
-    onSortStatusChange?: never;
+//#endregion
+//#region package/types/DataTableSortProps.d.ts
+export type DataTableSortProps<T = Record<string, unknown>> = ({
+  sortStatus?: never;
+  onSortStatusChange?: never;
 } | {
-    /**
-     * Current sort status (sort column accessor & direction).
-     */
-    sortStatus: DataTableSortStatus<T>;
-    /**
-     * Callback fired after change of sort status.
-     * Receives the new sort status as argument.
-     */
-    onSortStatusChange?: (sortStatus: DataTableSortStatus<T>) => void;
+  /**
+   * Current sort status (sort column accessor & direction).
+   */
+  sortStatus: DataTableSortStatus<T>;
+  /**
+   * Callback fired after change of sort status.
+   * Receives the new sort status as argument.
+   */
+  onSortStatusChange?: (sortStatus: DataTableSortStatus<T>) => void;
 }) & {
+  /**
+   * Custom sort icons.
+   */
+  sortIcons?: {
     /**
-     * Custom sort icons.
-     */
-    sortIcons?: {
-        /**
-         * Icon to display when column is sorted ascending.
-         * Will be rotated 180deg for descending sort
-         */
-        sorted: React.ReactNode;
-        /**
-         * Icon to display when column is not sorted.
-         */
-        unsorted: React.ReactNode;
-    };
-};
-
-type DataTableVerticalAlign = 'top' | 'center' | 'bottom';
-
-type DataTableProps<T = Record<string, unknown>> = {
-    /**
-     * Data table container class name.
+     * Icon to display when column is sorted ascending.
+     * Will be rotated 180deg for descending sort
      */
-    className?: string;
+    sorted: React.ReactNode;
     /**
-     * Data table container style.
-     * Either a style object or a function that accepts current theme and returns a style object.
+     * Icon to display when column is not sorted.
      */
-    style?: MantineStyleProp;
-    /**
-     * Data table elements class names.
-     * An object with `root`, `table`, `header`, `footer` and `pagination` keys and class names
-     * as values.
-     */
-    classNames?: Partial<Record<'root' | 'table' | 'header' | 'footer' | 'pagination', string>>;
-    /**
-     * Data table elements styles.
-     * An object with `root`, `table`, `header`, `footer` and `pagination` keys and
-     * either style objects, or functions that accept current theme and return style objects, as values.
-     */
-    styles?: StylesRecord<'root' | 'table' | 'header' | 'footer' | 'pagination', MantineStyleProp>;
-    /**
-     * Table height.
-     * @default '100%'
-     */
-    height?: string | number;
-    /**
-     * Minimum table height.
-     */
-    minHeight?: string | number;
-    /**
-     * Maximum table height.
-     */
-    maxHeight?: string | number;
-    /**
-     * DataTable component shadow.
-     */
-    shadow?: MantineShadow;
-    /**
-     * If true, the user will not be able to select text.
-     */
-    textSelectionDisabled?: boolean;
-    /**
-     * Vertical alignment for row cells.
-     * @default `center`
-     */
-    verticalAlign?: DataTableVerticalAlign;
-    /**
-     * If true, will show a loader with semi-transparent background, centered over the table.
-     */
-    fetching?: boolean;
-    /**
-     * If true, the first column will be pinned to the left side of the table.
-     */
-    pinFirstColumn?: boolean;
-    /**
-     * If true, the last column will be pinned to the right side of the table.
-     */
-    pinLastColumn?: boolean;
-    /**
-     * Default column props; will be merged with column props provided to each column
-     */
-    defaultColumnProps?: DataTableDefaultColumnProps<T>;
-    /**
-     * If you want to use drag and drop as well as toggle to reorder and toggle columns
-     * provide a unique key which will be used to store the column order in localStorage.
-     */
-    storeColumnsKey?: string | undefined;
-    /**
-     * A default render function for all columns.
-     * Accepts the current record, its index in `records` and the column `accessor` as
-     * arguments and returns a React node (remember that a string is a valid React node too).
-     */
-    defaultColumnRender?: (record: T, index: number, accessor: keyof T | (string & NonNullable<unknown>)) => React.ReactNode;
-    /**
-     * Accessor to use as unique record key.
-     * Can be a string representing a property name or a function receiving the current record
-     * and returning a unique value.
-     * If you're providing a string, you can use dot-notation for nested objects property drilling
-     * (i.e. `department.name` or `department.company.name`).
-     * @default `id`
-     */
-    idAccessor?: (keyof T | (string & NonNullable<unknown>)) | ((record: T) => React.Key);
-    /**
-     * Visible records.
-     * The component will try to infer its row type from here.
-     */
-    records?: T[];
-    /**
-     * Text to show on empty state and pagination footer when no records are available.
-     */
-    noRecordsText?: string;
-    /**
-     * If true, the table will not show the header with column titles.
-     */
-    noHeader?: boolean;
-    /**
-     * Function to call when a row cell is clicked.
-     * Receives an object with the current record, its index in `records`, the current column,
-     * its index in `columns` and the click event as properties.
-     */
-    onCellClick?: DataTableCellClickHandler<T>;
-    /**
-     * Function to call when a row cell is double-clicked.
-     * Receives an object with the current record, its index in `records`, the current column,
-     * its index in `columns` and the click event as properties.
-     */
-    onCellDoubleClick?: DataTableCellClickHandler<T>;
-    /**
-     * Function to call when the user right-clicks on a row cell.
-     * Receives an object with the current record, its index in `records`, the current column,
-     * its index in `columns` and the click event as properties.
-     */
-    onCellContextMenu?: DataTableCellClickHandler<T>;
-    /**
-     * Function to call when a row is clicked.
-     * Receives an object with the current record, its index in `records` and the click event
-     * as properties.
-     */
-    onRowClick?: DataTableRowClickHandler<T>;
-    /**
-     * Function to call when a row is double-clicked.
-     * Receives an object with the current record, its index in `records` and the click event
-     * as properties.
-     */
-    onRowDoubleClick?: DataTableRowClickHandler<T>;
-    /**
-     * Function to call when the user right-clicks on a row.
-     * Receives an object with the current record, its index in `records` and the click event
-     * as properties.
-     */
-    onRowContextMenu?: DataTableRowClickHandler<T>;
-    /**
-     * Defines the row expansion behavior.
-     */
-    rowExpansion?: DataTableRowExpansionProps<T>;
-    /**
-     * Optional class name passed to each row.
-     * Can be a string or a function receiving the current record and its index as arguments and returning a string.
-     */
-    rowClassName?: string | ((record: T, index: number) => string | undefined);
-    /**
-     * Optional style passed to each row.
-     * A function receiving the current record and its index as arguments and returning either
-     * a style object, or a function that accepts theme and returns a style object.
-     */
-    rowStyle?: (record: T, index: number) => MantineStyleProp | undefined;
-    /**
-     * Optional style passed to each row.
-     * a function that receives the current record, its index, default row props and expanded element as arguments
-     * and returns a React node representing the row.
-     */
-    rowFactory?: (props: {
-        record: T;
-        index: number;
-        children: React.ReactNode;
-        rowProps: TableTrProps;
-        expandedElement?: React.ReactNode;
-    }) => React.ReactNode;
-    /**
-     * Optional function returning a React node representing the table wrapper.
-     * If not provided, no wrapper will be used.
-     *
-     * examplle: This function can be used with rowFactory if using drag and drop to pass context
-     */
-    tableWrapper?: ({ children }: {
-        children: React.ReactNode;
-    }) => React.ReactNode;
-    /**
-     * Optional function returning an object of custom attributes to be applied to each row in the table.
-     * Receives the current record and its index as arguments.
-     * Useful for adding data attributes, handling middle-clicks, etc.
-     */
-    customRowAttributes?: (record: T, index: number) => Record<string, unknown>;
-    /**
-     * Ref pointing to the scrollable viewport element.
-     * Useful for imperative scrolling.
-     */
-    scrollViewportRef?: React.RefObject<HTMLDivElement | null>;
-    /**
-     * Additional props passed to the underlying `ScrollArea` element.
-     */
-    scrollAreaProps?: Omit<ScrollAreaProps, 'classNames' | 'styles' | 'onScrollPositionChange'>;
-    /**
-     * Ref pointing to the table element.
-     */
-    tableRef?: ((instance: HTMLTableElement | null) => void) | React.RefObject<HTMLTableElement>;
-    /**
-     * Ref pointing to the table body element.
-     */
-    bodyRef?: ((instance: HTMLTableSectionElement | null) => void) | React.RefObject<HTMLTableSectionElement>;
-} & Omit<TableProps, 'onScroll' | 'className' | 'classNames' | 'style' | 'styles' | 'p' | 'px' | 'py' | 'pt' | 'pb' | 'layout' | 'captionSide' | 'c' | 'color' | 'borderColor' | 'stripedColor' | 'highlightOnHoverColor' | 'stickyHeader' | 'stickyHeaderOffset' | 'onDragEnd'> & DataTableColorProps<T> & DataTableColumnProps<T> & DataTableOuterBorderProps & DataTableLoaderProps & DataTableEmptyStateProps & DataTablePaginationProps & DataTableSortProps<T> & DataTableScrollProps & DataTableSelectionProps<T>;
-
-type WithOptionalProperty<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
-type WithRequiredProperty<Type, Key extends keyof Type> = Type & {
-    [Property in Key]-?: Type[Property];
+    unsorted: React.ReactNode;
+  };
+};
+//#endregion
+//#region package/types/DataTableVerticalAlign.d.ts
+export type DataTableVerticalAlign = 'top' | 'center' | 'bottom';
+//#endregion
+//#region package/types/DataTableVirtualizationProps.d.ts
+export type DataTableVirtualizer = Virtualizer<HTMLElement, HTMLTableRowElement>;
+export type DataTableVirtualizationProps = {
+  /**
+   * If true, table rows will be virtualized with `@tanstack/react-virtual`: only the rows
+   * intersecting the scrollable viewport (plus a configurable overscan) are rendered in the DOM,
+   * which dramatically improves performance for tables with thousands of records.
+   * Make sure the table is vertically scrollable (i.e. has a constrained `height` or `maxHeight`),
+   * otherwise all rows will be considered visible.
+   */
+  virtualized?: boolean;
+  /**
+   * Row height in pixels used by the virtualizer for rows that have not been measured.
+   * By default the first rendered row is measured once and its height is used for all rows,
+   * so this only needs to be set when the table starts empty or rows differ a lot in height.
+   */
+  virtualizedRowHeight?: number;
+  /**
+   * If true, every rendered row is measured and re-measured on resize, so rows may have
+   * different heights. Costs a ResizeObserver per rendered row and can shift the scroll
+   * position while scrolling, so leave it off for uniform rows.
+   * @default true when `rowExpansion` is set, false otherwise
+   */
+  virtualizedMeasureRows?: boolean;
+  /**
+   * Number of extra rows to render above and below the visible area when virtualization
+   * is enabled.
+   * @default 15
+   */
+  virtualizedOverscan?: number;
+  /**
+   * Ref exposing the underlying `@tanstack/react-virtual` virtualizer instance when
+   * virtualization is enabled.
+   * Useful for imperative interactions, such as `scrollToIndex()`.
+   */
+  virtualizerRef?: React.RefObject<DataTableVirtualizer | null>;
 };
-
-declare function DataTable<T>({ withTableBorder, borderRadius, textSelectionDisabled, height, minHeight, maxHeight, shadow, verticalAlign, fetching, columns, storeColumnsKey, groups, pinFirstColumn, pinLastColumn, defaultColumnProps, defaultColumnRender, idAccessor, records, selectionTrigger, selectedRecords, onSelectedRecordsChange, selectionColumnClassName, selectionColumnStyle, isRecordSelectable, selectionCheckboxProps, allRecordsSelectionCheckboxProps, getRecordSelectionCheckboxProps, sortStatus, sortIcons, onSortStatusChange, horizontalSpacing, page, onPageChange, totalRecords, recordsPerPage, onRecordsPerPageChange, recordsPerPageOptions, recordsPerPageLabel, paginationWithEdges, paginationWithControls, paginationActiveTextColor, paginationActiveBackgroundColor, paginationSize, paginationText, paginationWrapBreakpoint, getPaginationControlProps, getPaginationItemProps, renderPagination, loaderBackgroundBlur, customLoader, loaderSize, loaderType, loaderColor, loadingText, emptyState, noRecordsText, noRecordsIcon, highlightOnHover, striped, noHeader, onRowClick, onRowDoubleClick, onRowContextMenu, onCellClick, onCellDoubleClick, onCellContextMenu, onScroll, onScrollToTop, onScrollToBottom, onScrollToLeft, onScrollToRight, c, backgroundColor, borderColor, rowBorderColor, stripedColor, highlightOnHoverColor, rowColor, rowBackgroundColor, rowExpansion, rowClassName, rowStyle, customRowAttributes, scrollViewportRef, scrollAreaProps, tableRef, bodyRef, m, my, mx, mt, mb, ml, mr, className, classNames, style, styles, rowFactory, tableWrapper, ...otherProps }: DataTableProps<T>): react.JSX.Element;
-
-declare function DataTableDraggableRow({ className, children, isDragging, ref: refProp, ...otherProps }: DataTableDraggableRowProps & {
-    ref?: Ref<HTMLTableRowElement>;
-}): react.JSX.Element;
-
+//#endregion
+//#region package/types/DataTableProps.d.ts
+export type DataTableProps<T = Record<string, unknown>> = {
+  /**
+   * Data table container class name.
+   */
+  className?: string;
+  /**
+   * Data table container style.
+   * Either a style object or a function that accepts current theme and returns a style object.
+   */
+  style?: MantineStyleProp;
+  /**
+   * Data table elements class names.
+   * An object with `root`, `table`, `header`, `footer` and `pagination` keys and class names
+   * as values.
+   */
+  classNames?: Partial<Record<'root' | 'table' | 'header' | 'footer' | 'pagination', string>>;
+  /**
+   * Data table elements styles.
+   * An object with `root`, `table`, `header`, `footer` and `pagination` keys and
+   * either style objects, or functions that accept current theme and return style objects, as values.
+   */
+  styles?: StylesRecord<'root' | 'table' | 'header' | 'footer' | 'pagination', MantineStyleProp>;
+  /**
+   * Table height.
+   * @default '100%'
+   */
+  height?: string | number;
+  /**
+   * Minimum table height.
+   */
+  minHeight?: string | number;
+  /**
+   * Maximum table height.
+   */
+  maxHeight?: string | number;
+  /**
+   * DataTable component shadow.
+   */
+  shadow?: MantineShadow;
+  /**
+   * If true, the user will not be able to select text.
+   */
+  textSelectionDisabled?: boolean;
+  /**
+   * Vertical alignment for row cells.
+   * @default `center`
+   */
+  verticalAlign?: DataTableVerticalAlign;
+  /**
+   * If true, will show a loader with semi-transparent background, centered over the table.
+   */
+  fetching?: boolean;
+  /**
+   * If true, the first column will be pinned to the left side of the table.
+   */
+  pinFirstColumn?: boolean;
+  /**
+   * If true, the last column will be pinned to the right side of the table.
+   */
+  pinLastColumn?: boolean;
+  /**
+   * Default column props; will be merged with column props provided to each column
+   */
+  defaultColumnProps?: DataTableDefaultColumnProps<T>;
+  /**
+   * If you want to use drag and drop as well as toggle to reorder and toggle columns
+   * provide a unique key which will be used to store the column order in localStorage.
+   */
+  storeColumnsKey?: string | undefined;
+  /**
+   * A default render function for all columns.
+   * Accepts the current record, its index in `records` and the column `accessor` as
+   * arguments and returns a React node (remember that a string is a valid React node too).
+   */
+  defaultColumnRender?: (record: T, index: number, accessor: keyof T | (string & NonNullable<unknown>)) => React.ReactNode;
+  /**
+   * Accessor to use as unique record key.
+   * Can be a string representing a property name or a function receiving the current record
+   * and returning a unique value.
+   * If you're providing a string, you can use dot-notation for nested objects property drilling
+   * (i.e. `department.name` or `department.company.name`).
+   * @default `id`
+   */
+  idAccessor?: DataTableIdAccessor<T>;
+  /**
+   * Visible records.
+   * The component will try to infer its row type from here.
+   */
+  records?: T[];
+  /**
+   * Text to show on empty state and pagination footer when no records are available.
+   */
+  noRecordsText?: string;
+  /**
+   * If true, the table will not show the header with column titles.
+   */
+  noHeader?: boolean;
+  /**
+   * Function to call when a row cell is clicked.
+   * Receives an object with the current record, its index in `records`, the current column,
+   * its index in `columns` and the click event as properties.
+   */
+  onCellClick?: DataTableCellClickHandler<T>;
+  /**
+   * Function to call when a row cell is double-clicked.
+   * Receives an object with the current record, its index in `records`, the current column,
+   * its index in `columns` and the click event as properties.
+   */
+  onCellDoubleClick?: DataTableCellClickHandler<T>;
+  /**
+   * Function to call when the user right-clicks on a row cell.
+   * Receives an object with the current record, its index in `records`, the current column,
+   * its index in `columns` and the click event as properties.
+   */
+  onCellContextMenu?: DataTableCellClickHandler<T>;
+  /**
+   * Function to call when a row is clicked.
+   * Receives an object with the current record, its index in `records` and the click event
+   * as properties.
+   */
+  onRowClick?: DataTableRowClickHandler<T>;
+  /**
+   * Function to call when a row is double-clicked.
+   * Receives an object with the current record, its index in `records` and the click event
+   * as properties.
+   */
+  onRowDoubleClick?: DataTableRowClickHandler<T>;
+  /**
+   * Function to call when the user right-clicks on a row.
+   * Receives an object with the current record, its index in `records` and the click event
+   * as properties.
+   */
+  onRowContextMenu?: DataTableRowClickHandler<T>;
+  /**
+   * Defines the row expansion behavior.
+   */
+  rowExpansion?: DataTableRowExpansionProps<T>;
+  /**
+   * Optional class name passed to each row.
+   * Can be a string or a function receiving the current record and its index as arguments and returning a string.
+   */
+  rowClassName?: string | ((record: T, index: number) => string | undefined);
+  /**
+   * Optional style passed to each row.
+   * A function receiving the current record and its index as arguments and returning either
+   * a style object, or a function that accepts theme and returns a style object.
+   */
+  rowStyle?: (record: T, index: number) => MantineStyleProp | undefined;
+  /**
+   * Optional style passed to each row.
+   * a function that receives the current record, its index, default row props and expanded element as arguments
+   * and returns a React node representing the row.
+   * Spread `rowProps` onto the rendered `tr`: its `className` and `data-*` attributes drive striping,
+   * pinned column measurement and virtualization, and its `ref` measures the row when `virtualized` is enabled;
+   * combine the latter with any ref of your own, e.g. with `mergeRefs` from `@mantine/hooks`.
+   */
+  rowFactory?: (props: {
+    record: T;
+    index: number;
+    children: React.ReactNode;
+    rowProps: TableTrProps & {
+      ref?: React.Ref<HTMLTableRowElement>;
+    };
+    expandedElement?: React.ReactNode;
+  }) => React.ReactNode;
+  /**
+   * Optional function returning a React node representing the table wrapper.
+   * If not provided, no wrapper will be used.
+   *
+   * examplle: This function can be used with rowFactory if using drag and drop to pass context
+   */
+  tableWrapper?: ({ children }: {
+    children: React.ReactNode;
+  }) => React.ReactNode;
+  /**
+   * Optional function returning an object of custom attributes to be applied to each row in the table.
+   * Receives the current record and its index as arguments.
+   * Useful for adding data attributes, handling middle-clicks, etc.
+   */
+  customRowAttributes?: (record: T, index: number) => Record<string, unknown>;
+  /**
+   * Ref pointing to the scrollable viewport element.
+   * Useful for imperative scrolling.
+   */
+  scrollViewportRef?: React.RefObject<HTMLDivElement | null>;
+  /**
+   * Additional props passed to the underlying `ScrollArea` element.
+   */
+  scrollAreaProps?: Omit<ScrollAreaProps, 'classNames' | 'styles' | 'onScrollPositionChange'>;
+  /**
+   * Ref pointing to the table element.
+   */
+  tableRef?: ((instance: HTMLTableElement | null) => void) | React.RefObject<HTMLTableElement>;
+  /**
+   * Ref pointing to the table body element.
+   */
+  bodyRef?: ((instance: HTMLTableSectionElement | null) => void) | React.RefObject<HTMLTableSectionElement>;
+} & Omit<TableProps, 'onScroll' | 'className' | 'classNames' | 'style' | 'styles' | 'p' | 'px' | 'py' | 'pt' | 'pb' | 'layout' | 'captionSide' | 'c' | 'color' | 'borderColor' | 'stripedColor' | 'highlightOnHoverColor' | 'stickyHeader' | 'stickyHeaderOffset' | 'onDragEnd'> & DataTableColorProps<T> & DataTableColumnProps<T> & DataTableOuterBorderProps & DataTableLoaderProps & DataTableEmptyStateProps & DataTablePaginationProps & DataTableSortProps<T> & DataTableScrollProps & DataTableSelectionProps<T> & DataTableVirtualizationProps;
+//#endregion
+//#region package/types/utils.d.ts
+export type WithOptionalProperty<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+export type WithRequiredProperty<Type, Key extends keyof Type> = Type & { [Property in Key]-?: Type[Property]; };
+//#endregion
+//#region package/DataTable.d.ts
+export declare function DataTable<T>({ withTableBorder, borderRadius, textSelectionDisabled, height, minHeight, maxHeight, shadow, verticalAlign, fetching, columns, storeColumnsKey, groups, pinFirstColumn, pinLastColumn, defaultColumnProps, defaultColumnRender, idAccessor, records, selectionTrigger, selectedRecords, onSelectedRecordsChange, selectionColumnClassName, selectionColumnStyle, isRecordSelectable, selectionCheckboxProps, allRecordsSelectionCheckboxProps, getRecordSelectionCheckboxProps, sortStatus, sortIcons, onSortStatusChange, horizontalSpacing, page, onPageChange, totalRecords, recordsPerPage, onRecordsPerPageChange, recordsPerPageOptions, recordsPerPageLabel, paginationWithEdges, paginationWithControls, paginationActiveTextColor, paginationActiveBackgroundColor, paginationSize, paginationText, paginationWrapBreakpoint, getPaginationControlProps, getPaginationItemProps, renderPagination, loaderBackgroundBlur, customLoader, loaderSize, loaderType, loaderColor, loadingText, emptyState, noRecordsText, noRecordsIcon, highlightOnHover, striped, noHeader, onRowClick, onRowDoubleClick, onRowContextMenu, onCellClick, onCellDoubleClick, onCellContextMenu, onScroll, onScrollToTop, onScrollToBottom, onScrollToLeft, onScrollToRight, c, backgroundColor, borderColor, rowBorderColor, stripedColor, highlightOnHoverColor, rowColor, rowBackgroundColor, rowExpansion, rowClassName, rowStyle, customRowAttributes, scrollViewportRef, scrollAreaProps, tableRef, bodyRef, m, my, mx, mt, mb, ml, mr, className, classNames, style, styles, rowFactory, tableWrapper, virtualized, virtualizedRowHeight, virtualizedMeasureRows, virtualizedOverscan, virtualizerRef, ...otherProps }: DataTableProps<T>): import("react").JSX.Element;
+//#endregion
+//#region package/DataTableDraggableRow.d.ts
+export declare function DataTableDraggableRow({ className, children, isDragging, ref: refProp, ...otherProps }: DataTableDraggableRowProps & {
+  ref?: Ref<HTMLTableRowElement>;
+}): import("react").JSX.Element;
+//#endregion
+//#region package/hooks/useDataTableColumnPinning.d.ts
 type DataTableColumnPinning = {
-    accessor: string;
-    defaultPinned: 'left' | 'right' | undefined;
-    pinnable: boolean;
-    pinned: 'left' | 'right' | undefined;
+  accessor: string;
+  defaultPinned: 'left' | 'right' | undefined;
+  pinnable: boolean;
+  pinned: 'left' | 'right' | undefined;
 };
-
+//#endregion
+//#region package/hooks/useDataTableColumnToggle.d.ts
 type DataTableColumnToggle = {
-    accessor: string;
-    defaultToggle: boolean;
-    toggleable: boolean;
-    toggled: boolean;
+  accessor: string;
+  defaultToggle: boolean;
+  toggleable: boolean;
+  toggled: boolean;
 };
-
+//#endregion
+//#region package/hooks/useDataTableColumns.d.ts
 /**
  * Hook to handle column features such as drag-and-drop reordering, visibility toggling and resizing.
  * @see https://documatrix.github.io/mantine-datatable/examples/column-dragging-and-toggling/
  */
-declare const useDataTableColumns: <T>({ key, columns, getInitialValueInEffect, headerRef, scrollViewportRef, }: {
-    /**
-     * The key to use in localStorage to store the columns order and toggle state.
-     */
-    key: string | undefined;
-    /**
-     * Columns definitions.
-     */
-    columns: DataTableColumn<T>[];
-    /**
-     * If set to true, value will be updated in useEffect after mount.
-     * @default true
-     */
-    getInitialValueInEffect?: boolean;
-    /**
-     * Reference to the table header element for measuring column widths.
-     */
-    headerRef?: RefObject<HTMLTableSectionElement | null>;
-    /**
-     * Reference to the scroll viewport for calculating overflow.
-     */
-    scrollViewportRef?: RefObject<HTMLElement | null>;
+export declare const useDataTableColumns: <T>({ key, columns, getInitialValueInEffect, headerRef, scrollViewportRef }: {
+  /**
+   * The key to use in localStorage to store the columns order and toggle state.
+   */
+  key: string | undefined;
+  /**
+   * Columns definitions.
+   */
+  columns: DataTableColumn<T>[];
+  /**
+   * If set to true, value will be updated in useEffect after mount.
+   * @default true
+   */
+  getInitialValueInEffect?: boolean;
+  /**
+   * Reference to the table header element for measuring column widths.
+   */
+  headerRef?: RefObject<HTMLTableSectionElement | null>;
+  /**
+   * Reference to the scroll viewport for calculating overflow.
+   */
+  scrollViewportRef?: RefObject<HTMLElement | null>;
 }) => {
-    readonly effectiveColumns: DataTableColumn<T>[];
-    readonly setColumnsOrder: (order: string[]) => void;
-    readonly columnsOrder: string[];
-    readonly resetColumnsOrder: () => void;
-    readonly columnsToggle: DataTableColumnToggle[];
-    readonly setColumnsToggle: (toggle: DataTableColumnToggle[]) => void;
-    readonly resetColumnsToggle: () => void;
-    readonly columnsPinning: DataTableColumnPinning[];
-    readonly setColumnsPinning: (pinning: DataTableColumnPinning[] | ((prev: DataTableColumnPinning[]) => DataTableColumnPinning[])) => void;
-    readonly resetColumnsPinning: () => void;
-    readonly columnsWidth: {
-        [x: string]: string | number;
-    }[];
-    readonly setColumnsWidth: (updates: {
-        accessor: string;
-        width: string | number;
-    }[]) => void;
-    readonly setColumnWidth: (accessor: string, width: string | number) => void;
-    readonly setMultipleColumnWidths: (updates: {
-        accessor: string;
-        width: string | number;
-    }[]) => void;
-    readonly resetColumnsWidth: () => void;
-    readonly hasResizableColumns: boolean;
-    readonly allResizableWidthsInitial: boolean;
-    readonly measureAndSetColumnWidths: () => void;
-    readonly isResizing: boolean;
-    readonly isLocked: boolean;
-    readonly tableWidth: number | null;
-    readonly beginResize: () => void;
-    readonly endResize: () => void;
+  readonly effectiveColumns: DataTableColumn<T>[];
+  readonly setColumnsOrder: (order: string[]) => void;
+  readonly columnsOrder: string[];
+  readonly resetColumnsOrder: () => void;
+  readonly columnsToggle: DataTableColumnToggle[];
+  readonly setColumnsToggle: (toggle: DataTableColumnToggle[]) => void;
+  readonly resetColumnsToggle: () => void;
+  readonly columnsPinning: DataTableColumnPinning[];
+  readonly setColumnsPinning: (pinning: DataTableColumnPinning[] | ((prev: DataTableColumnPinning[]) => DataTableColumnPinning[])) => void;
+  readonly resetColumnsPinning: () => void;
+  readonly columnsWidth: {
+    [x: string]: string | number;
+  }[];
+  readonly setColumnsWidth: (updates: {
+    accessor: string;
+    width: string | number;
+  }[]) => void;
+  readonly setColumnWidth: (accessor: string, width: string | number) => void;
+  readonly setMultipleColumnWidths: (updates: {
+    accessor: string;
+    width: string | number;
+  }[]) => void;
+  readonly resetColumnsWidth: () => void;
+  readonly hasResizableColumns: boolean;
+  readonly allResizableWidthsInitial: boolean;
+  readonly measureAndSetColumnWidths: () => void;
+  readonly isResizing: boolean;
+  readonly isLocked: boolean;
+  readonly tableWidth: number | null;
+  readonly beginResize: () => void;
+  readonly endResize: () => void;
 };
-
+//#endregion
+//#region package/utils.d.ts
 /**
  * Utility function that returns a humanized version of a string, e.g. "camelCase" -> "Camel Case"
  */
-declare function humanize(value: string): string;
+export declare function humanize(value: string): string;
 /**
  * Sanitizes a value read from `localStorage` before the column hooks call array
  * methods on it.
@@ -1056,57 +1136,60 @@ declare function humanize(value: string): string;
  * Returns `value` when it is an array whose items all pass the optional
  * `isValidItem` predicate; otherwise returns `fallback`.
  */
-declare function sanitizeStoredArray<T>(value: unknown, fallback: T[], isValidItem?: (item: unknown) => boolean): T[];
+export declare function sanitizeStoredArray<T>(value: unknown, fallback: T[], isValidItem?: (item: unknown) => boolean): T[];
 /**
  * Predicate matching the `{ accessor: string, ... }` shape persisted for column
  * toggle and pinning state.
  */
-declare function hasStringAccessor(item: unknown): boolean;
+export declare function hasStringAccessor(item: unknown): boolean;
 /**
  * Utility function that returns an array of values that are present in the first array but not in the second
  */
-declare function differenceBy<T>(arr1: T[], arr2: T[], iteratee: (value: T) => unknown): T[];
+export declare function differenceBy<T>(arr1: T[], arr2: T[], iteratee: (value: T) => unknown): T[];
 /**
  * Utility function that returns an array of unique values from a given array
  */
-declare function uniqBy<T>(arr: T[], iteratee: (value: T) => unknown): T[];
+export declare function uniqBy<T>(arr: T[], iteratee: (value: T) => unknown): T[];
 /**
  * Utility function that returns the value at a given path in an object
  */
-declare function getValueAtPath<T>(obj: T, path: keyof T | (string & NonNullable<unknown>)): unknown;
+export declare function getValueAtPath<T>(obj: T, path: keyof T | (string & NonNullable<unknown>)): unknown;
 /**
  * Utility function that returns the record id using idAccessor
  */
-declare function getRecordId<T>(record: T, idAccessor: keyof T | (string & NonNullable<unknown>) | ((record: T) => React.Key)): unknown;
+export declare function getRecordId<T>(record: T, idAccessor: DataTableIdAccessor<T>): unknown;
 /**
  * Utility function that reorders an array of records by a given field used for drag'n'drop functionality.
  * @see https://github.com/hello-pangea/dnd
  */
-declare function reorderRecords<T>(dropResult: DropResult, records: T[]): T[];
+export declare function reorderRecords<T>(dropResult: DropResult, records: T[]): T[];
 /**
  * Utility function that swaps elements of an array, by a given result from drag'n'drop functionality.
  * @see https://github.com/hello-pangea/dnd
  */
-declare function swapRecords<T>(dropResult: DropResult, records: T[]): T[];
+export declare function swapRecords<T>(dropResult: DropResult, records: T[]): T[];
 /**
  * Calculates the maximum depth of nested column groups
  */
-declare function getMaxGroupDepth<T>(groups: readonly DataTableColumnGroup<T>[]): number;
+export declare function getMaxGroupDepth<T>(groups: readonly DataTableColumnGroup<T>[]): number;
 /**
  * Flattens nested column groups to extract all columns at the deepest level
  */
-declare function flattenColumns<T>(groups: DataTableColumnGroup<T>[]): DataTableColumn<T>[];
+export declare function flattenColumns<T>(groups: DataTableColumnGroup<T>[]): DataTableColumn<T>[];
 /**
  * Calculates the column span for a group based on visible columns
  */
-declare function calculateColSpan<T>(group: DataTableColumnGroup<T>, visibles?: (boolean | undefined)[]): number;
+export declare function calculateColSpan<T>(group: DataTableColumnGroup<T>, visibles?: (boolean | undefined)[]): number;
 /**
  * Gets all groups at a specific depth level
  */
-declare function getGroupsAtDepth<T>(groups: readonly DataTableColumnGroup<T>[], targetDepth: number, currentDepth?: number): DataTableColumnGroup<T>[];
+export declare function getGroupsAtDepth<T>(groups: readonly DataTableColumnGroup<T>[], targetDepth: number, currentDepth?: number): DataTableColumnGroup<T>[];
 /**
  * Checks if a group needs a right border based on its position and context
  */
-declare function needsRightBorder(isLastGroup: boolean, hasMoreColumnsAfter: boolean, withColumnBorders: boolean): boolean;
-
-export { DataTable, type DataTableCellClickHandler, type DataTableColumn, type DataTableColumnGroup, type DataTableColumnPinning, type DataTableColumnTextAlign, type DataTableColumnToggle, type DataTableDefaultColumnProps, DataTableDraggableRow, type DataTableDraggableRowProps, type DataTableEmptyStateProps, type DataTableOuterBorderProps, type DataTablePaginationProps, type DataTablePaginationRenderContext, type DataTableProps, type DataTableRowClickHandler, type DataTableRowExpansionCollapseProps, type DataTableRowExpansionProps, type DataTableSelectionProps, type DataTableSelectionTrigger, type DataTableSortProps, type DataTableSortStatus, type DataTableVerticalAlign, type WithOptionalProperty, type WithRequiredProperty, calculateColSpan, differenceBy, flattenColumns, getGroupsAtDepth, getMaxGroupDepth, getRecordId, getValueAtPath, hasStringAccessor, humanize, needsRightBorder, reorderRecords, sanitizeStoredArray, swapRecords, uniqBy, useDataTableColumns };
+export declare function needsRightBorder(isLastGroup: boolean, hasMoreColumnsAfter: boolean, withColumnBorders: boolean): boolean;
+export declare function columnWidthVar(accessor: string): string;
+export declare function columnWidthValue(accessor: string, width: string | number | undefined): string | undefined;
+//#endregion
+export type { DataTableColumnPinning, DataTableColumnToggle };
+//# sourceMappingURL=index.d.ts.map