diff --git a/apps/mantine-react-table-docs/components/prop-tables/columnOptions.ts b/apps/mantine-react-table-docs/components/prop-tables/columnOptions.ts index 73485a438..ca0e35e41 100644 --- a/apps/mantine-react-table-docs/components/prop-tables/columnOptions.ts +++ b/apps/mantine-react-table-docs/components/prop-tables/columnOptions.ts @@ -134,7 +134,7 @@ export const columnOptions: ColumnOption[] = [ linkText: 'MRT Editing Docs', source: 'MRT', required: false, - type: "'select' | 'text'", + type: "'select' | 'text' | 'multi-select'", }, { columnOption: 'enableClickToCopy', diff --git a/packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx b/packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx index e665383f1..01e779324 100644 --- a/packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx +++ b/packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx @@ -1,6 +1,14 @@ import { type FocusEvent, type KeyboardEvent, useState } from 'react'; -import { Select, TextInput, type TextInputProps } from '@mantine/core'; +import { + MultiSelect, + Select, + TextInput, + type TextInputProps, + type SelectProps, + type MultiSelectProps +} from '@mantine/core'; import { + type HTMLPropsRef, type MRT_Cell, type MRT_CellValue, type MRT_RowData, @@ -8,17 +16,34 @@ import { } from '../../types'; import { parseFromValuesOrFunc } from '../../utils/utils'; -interface Props + +interface PropsTextInput extends TextInputProps { cell: MRT_Cell; table: MRT_TableInstance; } +interface PropsSelect + extends SelectProps { + cell: MRT_Cell; + table: MRT_TableInstance; +} + +interface PropsMultiSelect + extends MultiSelectProps { + cell: MRT_Cell; + table: MRT_TableInstance; +} + +type MRT_TextInputProps = TextInputProps & HTMLPropsRef +type MRT_SelectProps = SelectProps & HTMLPropsRef +type MRT_MultiSelectProps = MultiSelectProps & HTMLPropsRef + export const MRT_EditCellTextInput = ({ cell, table, ...rest -}: Props) => { +}: PropsTextInput | PropsSelect | PropsMultiSelect) => { const { getState, options: { @@ -39,6 +64,7 @@ export const MRT_EditCellTextInput = ({ const isCreating = creatingRow?.id === row.id; const isEditing = editingRow?.id === row.id; const isSelectEdit = columnDef.editVariant === 'select'; + const isMultiSelectEdit = columnDef.editVariant === 'multi-select'; const [value, setValue] = useState(() => cell.getValue()); @@ -47,7 +73,7 @@ export const MRT_EditCellTextInput = ({ ...parseFromValuesOrFunc(mantineEditTextInputProps, arg), ...parseFromValuesOrFunc(columnDef.mantineEditTextInputProps, arg), ...rest, - }; + } as MRT_TextInputProps; const selectProps = { ...parseFromValuesOrFunc(mantineEditSelectProps, arg), @@ -105,15 +131,42 @@ export const MRT_EditCellTextInput = ({ if (isSelectEdit) { return ( - // @ts-ignore