Mantine DataTable

import type { DataTableColumn } from './DataTableColumn';

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;

import { MantineColor } from '@mantine/core';

export 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 };
};

import type { MantineStyleProp, MantineTheme } from '@mantine/core';
import type { DataTableColumnTextAlign } from './DataTableColumnTextAlign';

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 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);

  /**
   * 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;
    }
);

import type { MantineStyleProp } from '@mantine/core';
import type { DataTableColumn } from './DataTableColumn';
import type { DataTableColumnTextAlign } from './DataTableColumnTextAlign';

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.
   */
  columns: DataTableColumn<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;
};

import type { DataTableColumn } from './DataTableColumn';
import type { DataTableColumnGroup } from './DataTableColumnGroup';

export type DataTableColumnProps<T = Record<string, unknown>> =
  | {
      /**
       * Grouped columns.
       */
      groups: DataTableColumnGroup<T>[];

      columns?: never;
    }
  | {
      groups?: never;

      /**
       * Visible columns.
       */
      columns: DataTableColumn<T>[];
    };

export type DataTableColumnTextAlign = 'left' | 'center' | 'right';

import type { DataTableColumn } from './DataTableColumn';

export type DataTableDefaultColumnProps<T = Record<string, unknown>> = Omit<
  DataTableColumn<T>,
  'accessor' | 'hidden' | 'visibleMediaQuery' | 'render'
>;

import type { TableTrProps } from '@mantine/core';

export type DataTableDraggableRowProps = {
  /**
   * Current dragging status.
   */
  isDragging?: boolean;
} & TableTrProps;

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;
    };

import type { MantineColor, MantineLoader, MantineSize } from '@mantine/core';

export 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;
    }
);

import type { MantineSize } from '@mantine/core';

export type DataTableOuterBorderProps =
  | {
      withTableBorder?: never;
      borderRadius?: never;
    }
  | {
      /**
       * If true, table will have border.
       */
      withTableBorder: boolean;

      /**
       * Table border radius.
       */
      borderRadius?: MantineSize | (string & NonNullable<unknown>) | number;
    };

export 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;
    };

import type { MantineColor, MantineSize } from '@mantine/core';
import type { DataTablePageSizeSelectorProps } from './DataTablePageSizeSelectorProps';

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;
    }
  | {
      /**
       * 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>;
    }
) &
  DataTablePageSizeSelectorProps;

import type {
  MantineShadow,
  MantineStyleProp,
  ScrollAreaProps,
  StylesRecord,
  TableProps,
  TableTrProps,
} from '@mantine/core';
import type { DataTableCellClickHandler } from './DataTableCellClickHandler';
import { DataTableColorProps } from './DataTableColorProps';
import type { DataTableColumnProps } from './DataTableColumnProps';
import type { DataTableDefaultColumnProps } from './DataTableDefaultColumnProps';
import type { DataTableEmptyStateProps } from './DataTableEmptyStateProps';
import type { DataTableLoaderProps } from './DataTableLoaderProps';
import type { DataTableOuterBorderProps } from './DataTableOuterBorderProps';
import type { DataTablePaginationProps } from './DataTablePaginationProps';
import type { DataTableRowClickHandler } from './DataTableRowClickHandler';
import type { DataTableRowExpansionProps } from './DataTableRowExpansionProps';
import type { DataTableScrollProps } from './DataTableScrollProps';
import type { DataTableSelectionProps } from './DataTableSelectionProps';
import type { DataTableSortProps } from './DataTableSortProps';
import type { DataTableVerticalAlign } from './DataTableVerticalAlign';

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?: (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>;

  /**
   * 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>;

export type DataTableRowClickHandler<T = Record<string, unknown>> = (params: {
  /**
   * Click event.
   */
  event: React.MouseEvent;

  /**
   * Clicked record.
   */
  record: T;

  /**
   * Clicked record index.
   */
  index: number;
}) => void;

import type { CollapseProps } from '@mantine/core';

export type DataTableRowExpansionCollapseProps = Pick<
  CollapseProps,
  'animateOpacity' | 'transitionDuration' | 'transitionTimingFunction'
>;

import type { DataTableRowExpansionCollapseProps } from './DataTableRowExpansionCollapseProps';

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.
     */
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    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;
};

export 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;
};

import type { CheckboxProps, MantineStyleProp } from '@mantine/core';
import type { DataTableSelectionTrigger } from './DataTableSelectionTrigger';

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;
    };

export type DataTableSelectionTrigger = 'cell' | 'checkbox';

import type { DataTableSortStatus } from './DataTableSortStatus';

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;
  };
};

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';
};

export type DataTableVerticalAlign = 'top' | 'center' | 'bottom';

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];
};