Interface MRT_ColumnDef<TData, TValue>

interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> {
    accessorFn?: (originalRow: TData) => TValue;
    accessorKey?:
        | string & {}
        | (
            unknown extends TData
                ? string
                : TData extends readonly any[] & IsTuple<TData>
                    ?
                        | AllowedIndexes<TData<TData>, never>
                        | DeepKeysPrefix<
                            TData<TData>,
                            AllowedIndexes<TData<TData>, never>,
                            [],
                        >
                    : TData extends any[]
                        ? unknown extends TData<TData>[number]
                            ? string
                            : TData<TData>[number] extends readonly any[] & IsTuple<
                                TData<TData>[number],
                            >
                                ?
                                    | AllowedIndexes<any[any], never>
                                    | DeepKeysPrefix<any[any], AllowedIndexes<any[any], never>, [any]>
                                : TData<TData>[number] extends any[]
                                    ? unknown extends TData<(...)>[number][number]
                                        ? string
                                        : (...)[(...)][number] extends readonly (...)[] & IsTuple<(...)>
                                            ?
                                                | AllowedIndexes<(...), (...)>
                                                | DeepKeysPrefix<(...), (...), (...)>
                                            : (...)[(...)] extends (...)[]
                                                ? (...) extends (...) ? (...) : (...)
                                                : (...) extends (...) ? (...) : (...)
                                    : TData<TData>[number] extends Date
                                        ? never
                                        : TData<(...)>[number] extends object
                                            ? (...) & (...) | DeepKeysPrefix<(...), (...), (...)>
                                            : never
                        : TData extends Date
                            ? never
                            : TData extends object
                                ? | keyof TData<TData> & string
                                | DeepKeysPrefix<TData<TData>, keyof TData<TData>, []>
                                : never
        );
    AggregatedCell?: (
        props: {
            cell: MRT_Cell<TData, TValue>;
            column: MRT_Column<TData, TValue>;
            row: MRT_Row<TData>;
            staticColumnIndex?: number;
            staticRowIndex?: number;
            table: MRT_TableInstance<TData>;
        },
    ) => ReactNode;
    aggregationFn?: MRT_AggregationFn<TData>
    | MRT_AggregationFn<TData>[];
    Cell?: (
        props: {
            cell: MRT_Cell<TData, TValue>;
            column: MRT_Column<TData, TValue>;
            renderedCellValue: ReactNode;
            row: MRT_Row<TData>;
            rowRef?: RefObject<HTMLTableRowElement | null>;
            staticColumnIndex?: number;
            staticRowIndex?: number;
            table: MRT_TableInstance<TData>;
        },
    ) => ReactNode;
    columnDefType?: "group"
    | "data"
    | "display";
    columnFilterModeOptions?:
        | LiteralUnion<string & MRT_FilterOption, string>[]
        | null;
    columns?: MRT_ColumnDef<TData, TValue>[];
    Edit?: (
        props: {
            cell: MRT_Cell<TData, TValue>;
            column: MRT_Column<TData, TValue>;
            row: MRT_Row<TData>;
            table: MRT_TableInstance<TData>;
        },
    ) => ReactNode;
    editSelectOptions?: | (
        (
            props: {
                cell: MRT_Cell<TData, TValue>;
                column: MRT_Column<TData>;
                row: MRT_Row<TData>;
                table: MRT_TableInstance<TData>;
            },
        ) => DropdownOption[]
    )
    | DropdownOption[];
    editVariant?: "select"
    | "text";
    enableClickToCopy?:
        | boolean
        | "context-menu"
        | ((cell: MRT_Cell<TData>) => boolean | "context-menu");
    enableColumnActions?: boolean;
    enableColumnDragging?: boolean;
    enableColumnFilter?: boolean;
    enableColumnFilterModes?: boolean;
    enableColumnOrdering?: boolean;
    enableEditing?: boolean | ((row: MRT_Row<TData>) => boolean);
    enableFilterMatchHighlighting?: boolean;
    enableGlobalFilter?: boolean;
    enableGrouping?: boolean;
    enableHiding?: boolean;
    enableMultiSort?: boolean;
    enablePinning?: boolean;
    enableResizing?: boolean;
    enableSorting?: boolean;
    Filter?: (
        props: {
            column: MRT_Column<TData, TValue>;
            header: MRT_Header<TData>;
            rangeFilterIndex?: number;
            table: MRT_TableInstance<TData>;
        },
    ) => ReactNode;
    filterFn?: MRT_FilterFn<TData>;
    filterSelectOptions?: DropdownOption[];
    filterVariant?:
        | "date"
        | "time"
        | "select"
        | "text"
        | "checkbox"
        | "range"
        | "autocomplete"
        | "datetime"
        | "date-range"
        | "datetime-range"
        | "multi-select"
        | "range-slider"
        | "time-range";
    footer?: string;
    Footer?: | ReactNode
    | (
        (
            props: {
                column: MRT_Column<TData, TValue>;
                footer: MRT_Header<TData>;
                table: MRT_TableInstance<TData>;
            },
        ) => ReactNode
    );
    getGroupingValue?: (row: TData) => any;
    getUniqueValues?: AccessorFn<TData, unknown[]>;
    GroupedCell?: (
        props: {
            cell: MRT_Cell<TData, TValue>;
            column: MRT_Column<TData, TValue>;
            row: MRT_Row<TData>;
            staticColumnIndex?: number;
            staticRowIndex?: number;
            table: MRT_TableInstance<TData>;
        },
    ) => ReactNode;
    grow?: number
    | boolean;
    header: string;
    Header?:
        | ReactNode
        | (
            (
                props: {
                    column: MRT_Column<TData, TValue>;
                    header: MRT_Header<TData>;
                    table: MRT_TableInstance<TData>;
                },
            ) => ReactNode
        );
    id?: LiteralUnion<string & keyof TData, string>;
    invertSorting?: boolean;
    maxSize?: number;
    meta?: ColumnMeta<TData, TValue>;
    minSize?: number;
    muiColumnActionsButtonProps?:
        | IconButtonProps
        | (
            (
                props: { column: MRT_Column<TData>; table: MRT_TableInstance<TData> },
            ) => IconButtonProps
        );
    muiColumnDragHandleProps?:
        | IconButtonProps
        | (
            (
                props: { column: MRT_Column<TData>; table: MRT_TableInstance<TData> },
            ) => IconButtonProps
        );
    muiCopyButtonProps?:
        | ButtonProps
        | (
            (
                props: {
                    cell: MRT_Cell<TData, TValue>;
                    column: MRT_Column<TData>;
                    row: MRT_Row<TData>;
                    table: MRT_TableInstance<TData>;
                },
            ) => ButtonProps
        );
    muiEditTextFieldProps?: | TextFieldProps
    | (
        (
            props: {
                cell: MRT_Cell<TData, TValue>;
                column: MRT_Column<TData>;
                row: MRT_Row<TData>;
                table: MRT_TableInstance<TData>;
            },
        ) => TextFieldProps
    );
    muiFilterAutocompleteProps?: | AutocompleteProps<any, any, any, any, "div">
    | (
        (
            props: { column: MRT_Column<TData>; table: MRT_TableInstance<TData> },
        ) => AutocompleteProps<any, any, any, any>
    );
    muiFilterCheckboxProps?:
        | CheckboxProps
        | (
            (
                props: { column: MRT_Column<TData>; table: MRT_TableInstance<TData> },
            ) => CheckboxProps
        );
    muiFilterDatePickerProps?:
        | DatePickerProps<never, false>
        | (
            (
                props: {
                    column: MRT_Column<TData>;
                    rangeFilterIndex?: number;
                    table: MRT_TableInstance<TData>;
                },
            ) => DatePickerProps<never>
        );
    muiFilterDateTimePickerProps?:
        | DateTimePickerProps<never, false>
        | (
            (
                props: {
                    column: MRT_Column<TData>;
                    rangeFilterIndex?: number;
                    table: MRT_TableInstance<TData>;
                },
            ) => DateTimePickerProps<never>
        );
    muiFilterSliderProps?:
        | SliderProps
        | (
            (
                props: { column: MRT_Column<TData>; table: MRT_TableInstance<TData> },
            ) => SliderProps
        );
    muiFilterTextFieldProps?:
        | TextFieldProps
        | (
            (
                props: {
                    column: MRT_Column<TData>;
                    rangeFilterIndex?: number;
                    table: MRT_TableInstance<TData>;
                },
            ) => TextFieldProps
        );
    muiFilterTimePickerProps?: | TimePickerProps<never, false>
    | (
        (
            props: {
                column: MRT_Column<TData>;
                rangeFilterIndex?: number;
                table: MRT_TableInstance<TData>;
            },
        ) => TimePickerProps<never>
    );
    muiTableBodyCellProps?:
        | TableCellProps
        | (
            (
                props: {
                    cell: MRT_Cell<TData, TValue>;
                    column: MRT_Column<TData>;
                    row: MRT_Row<TData>;
                    table: MRT_TableInstance<TData>;
                },
            ) => TableCellProps
        );
    muiTableFooterCellProps?: | TableCellProps
    | (
        (
            props: { column: MRT_Column<TData>; table: MRT_TableInstance<TData> },
        ) => TableCellProps
    );
    muiTableHeadCellProps?:
        | TableCellProps
        | (
            (
                props: { column: MRT_Column<TData>; table: MRT_TableInstance<TData> },
            ) => TableCellProps
        );
    PlaceholderCell?: (
        props: {
            cell: MRT_Cell<TData, TValue>;
            column: MRT_Column<TData, TValue>;
            row: MRT_Row<TData>;
            table: MRT_TableInstance<TData>;
        },
    ) => ReactNode;
    renderCellActionMenuItems?: (
        props: {
            cell: MRT_Cell<TData>;
            closeMenu: () => void;
            column: MRT_Column<TData>;
            internalMenuItems: ReactNode[];
            row: MRT_Row<TData>;
            staticColumnIndex?: number;
            staticRowIndex?: number;
            table: MRT_TableInstance<TData>;
        },
    ) => ReactNode[];
    renderColumnActionsMenuItems?: (
        props: {
            closeMenu: () => void;
            column: MRT_Column<TData>;
            internalColumnMenuItems: ReactNode[];
            table: MRT_TableInstance<TData>;
        },
    ) => ReactNode[];
    renderColumnFilterModeMenuItems?: (
        props: {
            column: MRT_Column<TData>;
            internalFilterOptions: MRT_InternalFilterOption[];
            onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
            table: MRT_TableInstance<TData>;
        },
    ) => ReactNode[];
    size?: number;
    sortDescFirst?: boolean;
    sortingFn?: MRT_SortingFn<TData>;
    sortUndefined?: false | 1 | -1 | "first" | "last";
    visibleInShowHideMenu?: boolean;
}

Type Parameters

TData extends MRT_RowData
TValue = unknown

Hierarchy

Omit<
    ColumnDef<TData, TValue>,

        | "accessorKey"
        | "aggregatedCell"
        | "aggregationFn"
        | "cell"
        | "columns"
        | "filterFn"
        | "footer"
        | "header"
        | "id"
        | "sortingFn",
>
- MRT_ColumnDef

Index

Properties

accessorFn? accessorKey? AggregatedCell? aggregationFn? Cell? columnDefType? columnFilterModeOptions? columns? Edit? editSelectOptions? editVariant? enableClickToCopy? enableColumnActions? enableColumnDragging? enableColumnFilter? enableColumnFilterModes? enableColumnOrdering? enableEditing? enableFilterMatchHighlighting? enableGlobalFilter? enableGrouping? enableHiding? enableMultiSort? enablePinning? enableResizing? enableSorting? Filter? filterFn? filterSelectOptions? filterVariant? footer? Footer? getGroupingValue? getUniqueValues? GroupedCell? grow? header Header? id? invertSorting? maxSize? meta? minSize? muiColumnActionsButtonProps? muiColumnDragHandleProps? muiCopyButtonProps? muiEditTextFieldProps? muiFilterAutocompleteProps? muiFilterCheckboxProps? muiFilterDatePickerProps? muiFilterDateTimePickerProps? muiFilterSliderProps? muiFilterTextFieldProps? muiFilterTimePickerProps? muiTableBodyCellProps? muiTableFooterCellProps? muiTableHeadCellProps? PlaceholderCell? renderCellActionMenuItems? renderColumnActionsMenuItems? renderColumnFilterModeMenuItems? size? sortDescFirst? sortingFn? sortUndefined? visibleInShowHideMenu?

Properties

`Optional`accessorFn

accessorFn?: (originalRow: TData) => TValue

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.

Example

accessorFn: (row) => row.username

`Optional`accessorKey

accessorKey?:
    | string & {}
    | (
        unknown extends TData
            ? string
            : TData extends readonly any[] & IsTuple<TData>
                ?
                    | AllowedIndexes<TData<TData>, never>
                    | DeepKeysPrefix<TData<TData>, AllowedIndexes<TData<TData>, never>, []>
                : TData extends any[]
                    ? unknown extends TData<TData>[number]
                        ? string
                        : TData<TData>[number] extends readonly any[] & IsTuple<
                            TData<TData>[number],
                        >
                            ?
                                | AllowedIndexes<any[any], never>
                                | DeepKeysPrefix<any[any], AllowedIndexes<any[any], never>, [any]>
                            : TData<TData>[number] extends any[]
                                ? unknown extends TData<(...)>[number][number]
                                    ? string
                                    : (...)[(...)][number] extends readonly (...)[] & IsTuple<(...)>
                                        ?
                                            | AllowedIndexes<(...), (...)>
                                            | DeepKeysPrefix<(...), (...), (...)>
                                        : (...)[(...)] extends (...)[]
                                            ? (...) extends (...) ? (...) : (...)
                                            : (...) extends (...) ? (...) : (...)
                                : TData<TData>[number] extends Date
                                    ? never
                                    : TData<(...)>[number] extends object
                                        ? (...) & (...) | DeepKeysPrefix<(...), (...), (...)>
                                        : never
                    : TData extends Date
                        ? never
                        : TData extends object
                            ? | keyof TData<TData> & string
                            | DeepKeysPrefix<TData<TData>, keyof TData<TData>, []>
                            : never
    )

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.

Example

accessorKey: 'username' //simple

Example

accessorKey: 'name.firstName' //deep key dot notation

`Optional`AggregatedCell

AggregatedCell?: (
    props: {
        cell: MRT_Cell<TData, TValue>;
        column: MRT_Column<TData, TValue>;
        row: MRT_Row<TData>;
        staticColumnIndex?: number;
        staticRowIndex?: number;
        table: MRT_TableInstance<TData>;
    },
) => ReactNode

`Optional`aggregationFn

aggregationFn?: MRT_AggregationFn<TData> | MRT_AggregationFn<TData>[]

`Optional`Cell

Cell?: (
    props: {
        cell: MRT_Cell<TData, TValue>;
        column: MRT_Column<TData, TValue>;
        renderedCellValue: ReactNode;
        row: MRT_Row<TData>;
        rowRef?: RefObject<HTMLTableRowElement | null>;
        staticColumnIndex?: number;
        staticRowIndex?: number;
        table: MRT_TableInstance<TData>;
    },
) => ReactNode

`Optional`columnDefType

columnDefType?: "group" | "data" | "display"

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.

Default

'data'

Example

columnDefType: 'display'

`Optional`columnFilterModeOptions

columnFilterModeOptions?:
| LiteralUnion<string & MRT_FilterOption, string>[]
| null

`Optional`columns

columns?: MRT_ColumnDef<TData, TValue>[]

`Optional`Edit

Edit?: (
    props: {
        cell: MRT_Cell<TData, TValue>;
        column: MRT_Column<TData, TValue>;
        row: MRT_Row<TData>;
        table: MRT_TableInstance<TData>;
    },
) => ReactNode

`Optional`editSelectOptions

editSelectOptions?:
    | (
        (
            props: {
                cell: MRT_Cell<TData, TValue>;
                column: MRT_Column<TData>;
                row: MRT_Row<TData>;
                table: MRT_TableInstance<TData>;
            },
        ) => DropdownOption[]
    )
    | DropdownOption[]

`Optional`editVariant

editVariant?: "select" | "text"

`Optional`enableClickToCopy

enableClickToCopy?:
    | boolean
    | "context-menu"
    | ((cell: MRT_Cell<TData>) => boolean | "context-menu")

`Optional`enableColumnActions

enableColumnActions?: boolean

`Optional`enableColumnDragging

enableColumnDragging?: boolean

`Optional`enableColumnFilter

enableColumnFilter?: boolean

Enables/disables the column filter for this column.

Link

API Docs

Link

Guide

`Optional`enableColumnFilterModes

enableColumnFilterModes?: boolean

Filter?: (
    props: {
        column: MRT_Column<TData, TValue>;
        header: MRT_Header<TData>;
        rangeFilterIndex?: number;
        table: MRT_TableInstance<TData>;
    },
) => ReactNode

`Optional`filterFn

filterFn?: MRT_FilterFn<TData>

`Optional`filterSelectOptions

filterSelectOptions?: DropdownOption[]

`Optional`filterVariant

`Optional`footer

footer?: string

footer must be a string. If you want custom JSX to render the footer, you can also specify a Footer option. (Capital F)

`Optional`Footer

Footer?:
    | ReactNode
    | (
        (
            props: {
                column: MRT_Column<TData, TValue>;
                footer: MRT_Header<TData>;
                table: MRT_TableInstance<TData>;
            },
        ) => ReactNode
    )

`Optional`getGroupingValue

getGroupingValue?: (row: TData) => 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.

Link

API Docs

Link

Guide

`Optional`getUniqueValues

getUniqueValues?: AccessorFn<TData, unknown[]>

`Optional`GroupedCell

GroupedCell?: (
    props: {
        cell: MRT_Cell<TData, TValue>;
        column: MRT_Column<TData, TValue>;
        row: MRT_Row<TData>;
        staticColumnIndex?: number;
        staticRowIndex?: number;
        table: MRT_TableInstance<TData>;
    },
) => ReactNode

`Optional`grow

grow?: number | boolean

If layoutMode is 'grid' or 'grid-no-grow', you can specify the flex grow value for individual columns to still grow and take up remaining space, or set to false/0 to not grow.

header: string

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

`Optional`Header

Header?:
    | ReactNode
    | (
        (
            props: {
                column: MRT_Column<TData, TValue>;
                header: MRT_Header<TData>;
                table: MRT_TableInstance<TData>;
            },
        ) => ReactNode
    )

`Optional`id

id?: LiteralUnion<string & keyof TData, 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.

Default

gets set to the same value as accessorKey by default

`Optional`invertSorting

invertSorting?: boolean

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

Link

API Docs

Link

Guide

`Optional`maxSize

maxSize?: number

The maximum allowed size for the column

Link

API Docs

Link

Guide

`Optional`meta

meta?: ColumnMeta<TData, TValue>

`Optional`minSize

minSize?: number

The minimum allowed size for the column

Link

API Docs

Link

Guide

`Optional`muiColumnActionsButtonProps

muiColumnActionsButtonProps?:
    | IconButtonProps
    | (
        (
            props: { column: MRT_Column<TData>; table: MRT_TableInstance<TData> },
        ) => IconButtonProps
    )

`Optional`muiColumnDragHandleProps

muiColumnDragHandleProps?:
    | IconButtonProps
    | (
        (
            props: { column: MRT_Column<TData>; table: MRT_TableInstance<TData> },
        ) => IconButtonProps
    )

`Optional`muiCopyButtonProps

muiCopyButtonProps?:
    | ButtonProps
    | (
        (
            props: {
                cell: MRT_Cell<TData, TValue>;
                column: MRT_Column<TData>;
                row: MRT_Row<TData>;
                table: MRT_TableInstance<TData>;
            },
        ) => ButtonProps
    )

`Optional`muiEditTextFieldProps

muiEditTextFieldProps?:
    | TextFieldProps
    | (
        (
            props: {
                cell: MRT_Cell<TData, TValue>;
                column: MRT_Column<TData>;
                row: MRT_Row<TData>;
                table: MRT_TableInstance<TData>;
            },
        ) => TextFieldProps
    )

`Optional`muiFilterAutocompleteProps

muiFilterAutocompleteProps?:
    | AutocompleteProps<any, any, any, any, "div">
    | (
        (
            props: { column: MRT_Column<TData>; table: MRT_TableInstance<TData> },
        ) => AutocompleteProps<any, any, any, any>
    )

`Optional`muiFilterCheckboxProps

muiFilterCheckboxProps?:
    | CheckboxProps
    | (
        (
            props: { column: MRT_Column<TData>; table: MRT_TableInstance<TData> },
        ) => CheckboxProps
    )

`Optional`muiFilterDatePickerProps

muiFilterDatePickerProps?:
    | DatePickerProps<never, false>
    | (
        (
            props: {
                column: MRT_Column<TData>;
                rangeFilterIndex?: number;
                table: MRT_TableInstance<TData>;
            },
        ) => DatePickerProps<never>
    )

`Optional`muiFilterDateTimePickerProps

muiFilterDateTimePickerProps?:
    | DateTimePickerProps<never, false>
    | (
        (
            props: {
                column: MRT_Column<TData>;
                rangeFilterIndex?: number;
                table: MRT_TableInstance<TData>;
            },
        ) => DateTimePickerProps<never>
    )

`Optional`muiFilterSliderProps

muiFilterSliderProps?:
    | SliderProps
    | (
        (
            props: { column: MRT_Column<TData>; table: MRT_TableInstance<TData> },
        ) => SliderProps
    )

`Optional`muiFilterTextFieldProps

muiFilterTextFieldProps?:
    | TextFieldProps
    | (
        (
            props: {
                column: MRT_Column<TData>;
                rangeFilterIndex?: number;
                table: MRT_TableInstance<TData>;
            },
        ) => TextFieldProps
    )

`Optional`muiFilterTimePickerProps

muiFilterTimePickerProps?:
    | TimePickerProps<never, false>
    | (
        (
            props: {
                column: MRT_Column<TData>;
                rangeFilterIndex?: number;
                table: MRT_TableInstance<TData>;
            },
        ) => TimePickerProps<never>
    )

`Optional`muiTableBodyCellProps

muiTableBodyCellProps?:
    | TableCellProps
    | (
        (
            props: {
                cell: MRT_Cell<TData, TValue>;
                column: MRT_Column<TData>;
                row: MRT_Row<TData>;
                table: MRT_TableInstance<TData>;
            },
        ) => TableCellProps
    )

`Optional`muiTableFooterCellProps

muiTableFooterCellProps?:
    | TableCellProps
    | (
        (
            props: { column: MRT_Column<TData>; table: MRT_TableInstance<TData> },
        ) => TableCellProps
    )

`Optional`muiTableHeadCellProps

muiTableHeadCellProps?:
    | TableCellProps
    | (
        (
            props: { column: MRT_Column<TData>; table: MRT_TableInstance<TData> },
        ) => TableCellProps
    )

`Optional`PlaceholderCell

PlaceholderCell?: (
    props: {
        cell: MRT_Cell<TData, TValue>;
        column: MRT_Column<TData, TValue>;
        row: MRT_Row<TData>;
        table: MRT_TableInstance<TData>;
    },
) => ReactNode

`Optional`renderCellActionMenuItems

renderCellActionMenuItems?: (
    props: {
        cell: MRT_Cell<TData>;
        closeMenu: () => void;
        column: MRT_Column<TData>;
        internalMenuItems: ReactNode[];
        row: MRT_Row<TData>;
        staticColumnIndex?: number;
        staticRowIndex?: number;
        table: MRT_TableInstance<TData>;
    },
) => ReactNode[]

`Optional`renderColumnActionsMenuItems

renderColumnActionsMenuItems?: (
    props: {
        closeMenu: () => void;
        column: MRT_Column<TData>;
        internalColumnMenuItems: ReactNode[];
        table: MRT_TableInstance<TData>;
    },
) => ReactNode[]

`Optional`renderColumnFilterModeMenuItems

renderColumnFilterModeMenuItems?: (
    props: {
        column: MRT_Column<TData>;
        internalFilterOptions: MRT_InternalFilterOption[];
        onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
        table: MRT_TableInstance<TData>;
    },
) => ReactNode[]

`Optional`size

size?: number

The desired size for the column

Link

API Docs

Link

Guide

`Optional`sortDescFirst

sortDescFirst?: boolean

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

`Optional`sortUndefined

sortUndefined?: false | 1 | -1 | "first" | "last"

The priority of undefined values when sorting this column.

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)

Link

API Docs

Link

Guide

`Optional`visibleInShowHideMenu

visibleInShowHideMenu?: boolean

Interface MRT_ColumnDef<TData, TValue>

Type Parameters

Hierarchy

Index

Properties

Properties

OptionalaccessorFn

Example

OptionalaccessorKey

Example

Example

OptionalAggregatedCell

OptionalaggregationFn

OptionalCell

OptionalcolumnDefType

Default

Example

OptionalcolumnFilterModeOptions

Optionalcolumns

OptionalEdit

OptionaleditSelectOptions

OptionaleditVariant

OptionalenableClickToCopy

OptionalenableColumnActions

OptionalenableColumnDragging

OptionalenableColumnFilter

Link

Link

OptionalenableColumnFilterModes

OptionalenableColumnOrdering

OptionalenableEditing

OptionalenableFilterMatchHighlighting

OptionalenableGlobalFilter

Link

Link

OptionalenableGrouping

Link

Link

OptionalenableHiding

OptionalenableMultiSort

Link

Link

OptionalenablePinning

Link

Link

OptionalenableResizing

Link

Link

OptionalenableSorting

Link

Link

OptionalFilter

OptionalfilterFn

OptionalfilterSelectOptions

OptionalfilterVariant

Optionalfooter

OptionalFooter

OptionalgetGroupingValue

Link

Link

OptionalgetUniqueValues

OptionalGroupedCell

Optionalgrow

header

OptionalHeader

Optionalid

Default

OptionalinvertSorting

Link

Link

OptionalmaxSize

Link

Link

Optionalmeta

OptionalminSize

Link

Link

OptionalmuiColumnActionsButtonProps

OptionalmuiColumnDragHandleProps

OptionalmuiCopyButtonProps

`Optional`accessorFn

`Optional`accessorKey

`Optional`AggregatedCell

`Optional`aggregationFn

`Optional`Cell

`Optional`columnDefType

`Optional`columnFilterModeOptions

`Optional`columns

`Optional`Edit

`Optional`editSelectOptions

`Optional`editVariant

`Optional`enableClickToCopy

`Optional`enableColumnActions

`Optional`enableColumnDragging

`Optional`enableColumnFilter

`Optional`enableColumnFilterModes

`Optional`enableColumnOrdering

`Optional`enableEditing

`Optional`enableFilterMatchHighlighting

`Optional`enableGlobalFilter

`Optional`enableGrouping

`Optional`enableHiding

`Optional`enableMultiSort

`Optional`enablePinning

`Optional`enableResizing

`Optional`enableSorting

`Optional`Filter

`Optional`filterFn

`Optional`filterSelectOptions

`Optional`filterVariant

`Optional`footer

`Optional`Footer

`Optional`getGroupingValue

`Optional`getUniqueValues

`Optional`GroupedCell

`Optional`grow

`Optional`Header

`Optional`id

`Optional`invertSorting

`Optional`maxSize

`Optional`meta

`Optional`minSize

`Optional`muiColumnActionsButtonProps

`Optional`muiColumnDragHandleProps

`Optional`muiCopyButtonProps

`Optional`muiEditTextFieldProps

`Optional`muiFilterAutocompleteProps

`Optional`muiFilterCheckboxProps

`Optional`muiFilterDatePickerProps

`Optional`muiFilterDateTimePickerProps

`Optional`muiFilterSliderProps

`Optional`muiFilterTextFieldProps

`Optional`muiFilterTimePickerProps

`Optional`muiTableBodyCellProps

`Optional`muiTableFooterCellProps

`Optional`muiTableHeadCellProps

`Optional`PlaceholderCell

`Optional`renderCellActionMenuItems

`Optional`renderColumnActionsMenuItems

`Optional`renderColumnFilterModeMenuItems

`Optional`size

`Optional`sortDescFirst

`Optional`sortingFn

`Optional`sortUndefined

`Optional`visibleInShowHideMenu