@neeyo/mantine-datatable 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,1112 @@
+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;
+} & ({
+    /**
+     * 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;
+});
+
+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;
+};
+
+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;
+} & 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;
+} | {
+    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;
+} | {
+    /**
+     * If true, table will have border.
+     */
+    withTableBorder: boolean;
+    /**
+     * Table border radius.
+     */
+    borderRadius?: MantineSize | (string & NonNullable<unknown>) | number;
+};
+
+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;
+};
+
+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;
+    };
+};
+
+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;
+
+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;
+    };
+};
+
+type DataTableColumnProps<T = Record<string, unknown>> = {
+    /**
+     * Grouped columns.
+     */
+    groups: DataTableColumnGroup<T>[];
+    columns?: never;
+} | {
+    groups?: never;
+    /**
+     * Visible columns.
+     */
+    columns: DataTableColumn<T>[];
+};
+
+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;
+});
+
+type DataTableRowClickHandler<T = Record<string, unknown>> = (params: {
+    /**
+     * Click event.
+     */
+    event: React.MouseEvent;
+    /**
+     * Clicked record.
+     */
+    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;
+};
+
+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;
+};
+
+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;
+} | {
+    /**
+     * 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';
+};
+
+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;
+    };
+};
+
+type DataTableVerticalAlign = 'top' | 'center' | 'bottom';
+
+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?: (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];
+};
+
+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;
+
+type DataTableColumnPinning = {
+    accessor: string;
+    defaultPinned: 'left' | 'right' | undefined;
+    pinnable: boolean;
+    pinned: 'left' | 'right' | undefined;
+};
+
+type DataTableColumnToggle = {
+    accessor: string;
+    defaultToggle: boolean;
+    toggleable: boolean;
+    toggled: boolean;
+};
+
+/**
+ * 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>;
+}) => {
+    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;
+};
+
+/**
+ * Utility function that returns a humanized version of a string, e.g. "camelCase" -> "Camel Case"
+ */
+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`.
+ */
+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;
+/**
+ * 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[];
+/**
+ * Utility function that returns an array of unique values from a given array
+ */
+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;
+/**
+ * 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;
+/**
+ * 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[];
+/**
+ * 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[];
+/**
+ * Calculates the maximum depth of nested column groups
+ */
+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>[];
+/**
+ * Calculates the column span for a group based on visible columns
+ */
+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>[];
+/**
+ * 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 };