Skip to Content
APIMantine React TableColDefMantine

ColDefMantine type

Tip

This API reference is automatically generated from the source code  of the @jsoc/react-grid-mantine  package.

View Declaration

export type ColDefMantine = MRT_ColumnDef<GridRow>;

Fields

NameTypeDefault
getUniqueValuesAccessorFn<UJSONObject, unknown[]>
metaColumnMeta<UJSONObject, unknown>
enableHidingboolean
enablePinningboolean

Enables/disables column pinning for this column. Defaults to true.

enableColumnFilterboolean

Enables/disables the column filter for this column.

enableGlobalFilterboolean

Enables/disables the global filter for this column.

enableMultiSortboolean

Enables/Disables multi-sorting for this column.

enableSortingboolean

Enables/Disables sorting for this column.

invertSortingboolean

Inverts the order of the sorting for this column. This is useful for values that have an inverted best/worst scale where lower numbers are better, eg. a ranking (1st, 2nd, 3rd) or golf-like scoring

sortDescFirstboolean

Set to true for sorting toggles on this column to start in the descending direction.

sortUndefinedfalse | 1 | -1

false

  • Undefined values will be considered tied and need to be sorted by the next column filter or original index (whichever applies)
  • -1
    • Undefined values will be sorted with higher priority (ascending) (if ascending, undefined will appear on the beginning of the list)
  • 1
    • Undefined values will be sorted with lower priority (descending) (if ascending, undefined will appear on the end of the list)
enableGroupingboolean

Enables/disables grouping for this column.

getGroupingValue(row: UJSONObject) => any

Specify a value to be used for grouping rows on this column. If this option is not specified, the value derived from accessorKey / accessorFn will be used instead.

enableResizingboolean

Enables or disables column resizing for the column.

maxSizenumber

The maximum allowed size for the column

minSizenumber

The minimum allowed size for the column

sizenumber

The desired size for the column

AggregatedCell(props: { cell: MRT_Cell<UJSONObject>; column: MRT_Column<UJSONObject>; row: MRT_Row<UJSONObject>; table: MRT_TableInstance<UJSONObject>; }) => ReactNode
Cell(props: { cell: MRT_Cell<UJSONObject>; renderedCellValue: ReactNode; column: MRT_Column<UJSONObject>; row: MRT_Row<UJSONObject>; rowRef?: RefObject<...>; table: MRT_TableInstance<...>; }) => ReactNode
Edit(props: { cell: MRT_Cell<UJSONObject>; column: MRT_Column<UJSONObject>; row: MRT_Row<UJSONObject>; table: MRT_TableInstance<UJSONObject>; }) => ReactNode
Filter(props: { column: MRT_Column<UJSONObject>; header: MRT_Header<UJSONObject>; rangeFilterIndex?: number; table: MRT_TableInstance<UJSONObject>; }) => ReactNode
GroupedCell(props: { cell: MRT_Cell<UJSONObject>; column: MRT_Column<UJSONObject>; row: MRT_Row<UJSONObject>; table: MRT_TableInstance<UJSONObject>; }) => ReactNode
PlaceholderCell(props: { cell: MRT_Cell<UJSONObject>; column: MRT_Column<UJSONObject>; row: MRT_Row<UJSONObject>; table: MRT_TableInstance<UJSONObject>; }) => ReactNode
accessorFn(originalRow: UJSONObject) => any

Either an accessorKey or a combination of an accessorFn and id are required for a data column definition. Specify a function here to point to the correct property in the data object.

accessorKeystring | (string & {})

Either an accessorKey or a combination of an accessorFn and id are required for a data column definition. Specify which key in the row this column should use to access the correct data. Also supports Deep Key Dot Notation.

aggregationFnMRT_AggregationFn<UJSONObject> | MRT_AggregationFn<UJSONObject>[]
columnDefType"data" | "display" | "group"

Specify what type of column this is. Either data, display, or group. Defaults to data. Leave this blank if you are just creating a normal data column.

'data'
columnFilterModeOptionsLiteralUnion<string & MRT_FilterOption, string>[] | null
columnsMRT_ColumnDef<UJSONObject>[]
editVariant"text" | "select"
enableClickToCopyboolean
enableColumnActionsboolean
enableColumnDraggingboolean
enableColumnFilterModesboolean
enableColumnOrderingboolean
enableEditingboolean | ((row: MRT_Row<UJSONObject>) => boolean)
enableFilterMatchHighlightingboolean
filterFnMRT_FilterFn<UJSONObject>
filterVariant"text" | "select" | "autocomplete" | "checkbox" | "date" | "date-range" | "multi-select" | "range" | "range-slider"
headerstring

header must be a string. If you want custom JSX to render the header, you can also specify a Header option. (Capital H)

idLiteralUnion<string, string>

Either an accessorKey or a combination of an accessorFn and id are required for a data column definition.

If you have also specified an accessorFn, MRT still needs to have a valid id to be able to identify the column uniquely.

id defaults to the accessorKey or header if not specified.

gets set to the same value as `accessorKey` by default
mantineColumnActionsButtonProps(Omit<HTMLProps<HTMLButtonElement>, "size" | "data" | "color" | "type" | "ref" | "label"> & { ref?: MutableRefObject<HTMLButtonElement | null> | null; } & Partial<...>) | ((props: { ...; }) => Omit<...> & ... 1 more ... & Partial<...>)
mantineColumnDragHandleProps(Omit<HTMLProps<HTMLButtonElement>, "size" | "data" | "color" | "type" | "ref" | "label"> & { ref?: MutableRefObject<HTMLButtonElement | null> | null; } & Partial<...>) | ((props: { ...; }) => Omit<...> & ... 1 more ... & Partial<...>)
mantineCopyButtonProps(Omit<HTMLProps<HTMLButtonElement>, "size" | "data" | "color" | "type" | "ref" | "label"> & { ref?: MutableRefObject<HTMLButtonElement | null> | null; } & Partial<...>) | ((props: { ...; }) => Omit<...> & ... 1 more ... & Partial<...>)
mantineEditSelectProps(Omit<HTMLProps<HTMLInputElement>, "size" | "data" | "color" | "type" | "ref" | "label"> & { ref?: MutableRefObject<HTMLInputElement | null> | null; } & Partial<...>) | ((props: { ...; }) => Omit<...> & ... 1 more ... & Partial<...>)
mantineEditTextInputProps(Omit<HTMLProps<HTMLInputElement>, "size" | "data" | "color" | "type" | "ref" | "label"> & { ref?: MutableRefObject<HTMLInputElement | null> | null; } & Partial<...>) | ((props: { ...; }) => Omit<...> & ... 1 more ... & Partial<...>)
mantineFilterAutocompleteProps(Omit<HTMLProps<HTMLInputElement>, "size" | "data" | "color" | "type" | "ref" | "label"> & { ref?: MutableRefObject<HTMLInputElement | null> | null; } & Partial<...>) | ((props: { ...; }) => Omit<...> & ... 1 more ... & Partial<...>)
mantineFilterCheckboxProps(Omit<HTMLProps<HTMLInputElement>, "size" | "data" | "color" | "type" | "ref" | "label"> & { ref?: MutableRefObject<HTMLInputElement | null> | null; } & Partial<...>) | ((props: { ...; }) => Omit<...> & ... 1 more ... & Partial<...>)
mantineFilterDateInputProps(Omit<HTMLProps<HTMLInputElement>, "size" | "data" | "color" | "type" | "ref" | "label"> & { ref?: MutableRefObject<HTMLInputElement | null> | null; } & Partial<...>) | ((props: { ...; }) => Omit<...> & ... 1 more ... & Partial<...>)
mantineFilterMultiSelectProps(Omit<HTMLProps<HTMLInputElement>, "size" | "data" | "color" | "type" | "ref" | "label"> & { ref?: MutableRefObject<HTMLInputElement | null> | null; } & Partial<...>) | ((props: { ...; }) => Omit<...> & ... 1 more ... & Partial<...>)
mantineFilterRangeSliderProps(Omit<HTMLProps<HTMLInputElement>, "size" | "data" | "color" | "type" | "ref" | "label"> & { ref?: MutableRefObject<HTMLInputElement | null> | null; } & Partial<...>) | ((props: { ...; }) => Omit<...> & ... 1 more ... & Partial<...>)
mantineFilterSelectProps(Omit<HTMLProps<HTMLInputElement>, "size" | "data" | "color" | "type" | "ref" | "label"> & { ref?: MutableRefObject<HTMLInputElement | null> | null; } & Partial<...>) | ((props: { ...; }) => Omit<...> & ... 1 more ... & Partial<...>)
mantineFilterTextInputProps(Omit<HTMLProps<HTMLInputElement>, "size" | "data" | "color" | "type" | "ref" | "label"> & { ref?: MutableRefObject<HTMLInputElement | null> | null; } & Partial<...>) | ((props: { ...; }) => Omit<...> & ... 1 more ... & Partial<...>)
mantineTableBodyCellProps(Omit<HTMLProps<HTMLTableCellElement>, "size" | "data" | "color" | "type" | "ref" | "label"> & { ref?: MutableRefObject<HTMLTableCellElement | null> | null; } & BoxProps & ColumnAlignment) | ((props: { ...; }) => Omit<...> & ... 2 more ... & ColumnAlignment)
mantineTableFooterCellProps(Omit<HTMLProps<HTMLTableCellElement>, "size" | "data" | "color" | "type" | "ref" | "label"> & { ref?: MutableRefObject<HTMLTableCellElement | null> | null; } & BoxProps & ColumnAlignment) | ((props: { ...; }) => Omit<...> & ... 2 more ... & ColumnAlignment)
mantineTableHeadCellProps(Omit<HTMLProps<HTMLTableCellElement>, "size" | "data" | "color" | "type" | "ref" | "label"> & { ref?: MutableRefObject<HTMLTableCellElement | null> | null; } & BoxProps & ColumnAlignment) | ((props: { ...; }) => Omit<...> & ... 2 more ... & ColumnAlignment)
renderColumnActionsMenuItems(props: { column: MRT_Column<UJSONObject>; table: MRT_TableInstance<UJSONObject>; internalColumnMenuItems: ReactNode; }) => ReactNode
renderColumnFilterModeMenuItems(props: { column: MRT_Column<UJSONObject>; internalFilterOptions: MRT_InternalFilterOption[]; onSelectFilterMode: (filterMode: MRT_FilterOption) => void; table: MRT_TableInstance<...>; }) => ReactNode
sortingFnMRT_SortingFn<UJSONObject>
useGridStorePluginConfigMantine