Type definitions
Mantine DataTable is written in TypeScript and the component properties are well documented with additional JSDoc annotations, so you can harness the full power of your IDE to build type safe applications with confidence.
Here are the Mantine DataTable type files:
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, PopoverProps } 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);
/**
* Filter popover props; override if necessary.
*/
filterPopoverProps?: PopoverProps;
/**
* 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];
};