@neeyo/mantine-datatable 0.1.0 → 0.2.0

package/dist/index.d.mts

@@ -0,0 +1,1195 @@
+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;
+} | {
+  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;
+});
+//#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;
+//#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;
+};
+//#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;
+//#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;
+};
+//#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;
+};
+//#endregion
+//#region package/types/DataTablePageSizeSelectorProps.d.ts
+type DataTablePageSizeSelectorProps = {
+  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;
+};
+//#endregion
+//#region package/types/DataTablePaginationRenderContext.d.ts
+export 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;
+  };
+};
+//#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;
+  };
+};
+//#endregion
+//#region package/types/DataTableColumnProps.d.ts
+type DataTableColumnProps<T = Record<string, unknown>> = {
+  /**
+   * Grouped columns.
+   */
+  groups: DataTableColumnGroup<T>[];
+  columns?: never;
+} | {
+  groups?: never;
+  /**
+   * Visible columns.
+   */
+  columns: DataTableColumn<T>[];
+};
+//#endregion
+//#region package/types/DataTableLoaderProps.d.ts
+type DataTableLoaderProps = {
+  /**
+   * 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;
+} | {
+  /**
+   * Loader size.
+   * @default `lg`.
+   */
+  loaderSize?: MantineSize | (string & NonNullable<unknown>) | number;
+  /**
+   * Loader type.
+   */
+  loaderType?: MantineLoader;
+  /**
+   * Loader color.
+   */
+  loaderColor?: MantineColor;
+  customLoader?: never;
+});
+//#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;
+    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;
+};
+//#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;
+};
+//#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;
+};
+//#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';
+};
+//#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;
+}) & {
+  /**
+   * 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;
+  };
+};
+//#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>;
+};
+//#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;
+};
+//#endregion
+//#region package/hooks/useDataTableColumnToggle.d.ts
+type DataTableColumnToggle = {
+  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/
+ */
+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;
+};
+//#endregion
+//#region package/utils.d.ts
+/**
+ * Utility function that returns a humanized version of a string, e.g. "camelCase" -> "Camel Case"
+ */
+export declare function humanize(value: string): string;
+/**
+ * Sanitizes a value read from `localStorage` before the column hooks call array
+ * methods on it.
+ *
+ * Persisted column state is synchronized across browser tabs through the native
+ * `storage` event (e.g. when a tab is duplicated). A malformed or unexpected
+ * value — written by another tab, by a different DataTable instance sharing the
+ * same `storeColumnsKey`, or by manual tampering — is delivered verbatim to
+ * every listening table. Without this guard such a value flows straight into
+ * `.map()` / `.forEach()` and crashes the app with
+ * `TypeError: <x>.map is not a function`.
+ *
+ * Returns `value` when it is an array whose items all pass the optional
+ * `isValidItem` predicate; otherwise returns `fallback`.
+ */
+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.
+ */
+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
+ */
+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
+ */
+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
+ */
+export declare function getValueAtPath<T>(obj: T, path: keyof T | (string & NonNullable<unknown>)): unknown;
+/**
+ * Utility function that returns the record id using idAccessor
+ */
+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
+ */
+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
+ */
+export declare function swapRecords<T>(dropResult: DropResult, records: T[]): T[];
+/**
+ * Calculates the maximum depth of nested column groups
+ */
+export declare function getMaxGroupDepth<T>(groups: readonly DataTableColumnGroup<T>[]): number;
+/**
+ * Flattens nested column groups to extract all columns at the deepest level
+ */
+export declare function flattenColumns<T>(groups: DataTableColumnGroup<T>[]): DataTableColumn<T>[];
+/**
+ * Calculates the column span for a group based on visible columns
+ */
+export declare function calculateColSpan<T>(group: DataTableColumnGroup<T>, visibles?: (boolean | undefined)[]): number;
+/**
+ * Gets all groups at a specific depth level
+ */
+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
+ */
+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.mts.map