feat: add multi-select option to column editVariant parameter

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',

packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx

@@ -1,5 +1,5 @@
 import { type FocusEvent, type KeyboardEvent, useState } from 'react';
-import { Select, TextInput, type TextInputProps } from '@mantine/core';
+import { MultiSelect, Select, TextInput, type TextInputProps } from '@mantine/core';
 import {
   type MRT_Cell,
   type MRT_CellValue,
@@ -39,6 +39,7 @@ export const MRT_EditCellTextInput = <TData extends MRT_RowData>({
   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<any>());
 
@@ -132,6 +133,35 @@ export const MRT_EditCellTextInput = <TData extends MRT_RowData>({
     );
   }
 
+  if (isMultiSelectEdit) {
+    return (
+      // @ts-ignore
+      <MultiSelect
+        {...commonProps}
+        searchable
+        value={value}
+        {...selectProps}
+        onBlur={handleBlur}
+        onChange={(value) => {
+          selectProps.onChange?.(value as any);
+          setValue(value);
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+          selectProps?.onClick?.(e);
+        }}
+        ref={(node) => {
+          if (node) {
+            editInputRefs.current[cell.id] = node;
+            if (selectProps.ref) {
+              selectProps.ref.current = node;
+            }
+          }
+        }}
+      />
+    );
+  }
+
   return (
     <TextInput
       {...commonProps}

packages/mantine-react-table/src/types.ts

@@ -491,7 +491,7 @@ export type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<
     LiteralUnion<string & MRT_FilterOption>
   > | null;
   columns?: MRT_ColumnDef<TData>[];
-  editVariant?: 'select' | 'text';
+  editVariant?: 'select' | 'text' | 'multi-select';
   enableClickToCopy?: ((cell: MRT_Cell<TData>) => boolean) | boolean;
   enableColumnActions?: boolean;
   enableColumnDragging?: boolean;

packages/mantine-react-table/stories/features/Editing.stories.tsx

@@ -79,6 +79,7 @@ type Person = {
   lastName: string;
   phoneNumber: string;
   state: string;
+  visitedStates: string[];
 };
 
 const data: Person[] = [...Array(100)].map(() => ({
@@ -87,6 +88,7 @@ const data: Person[] = [...Array(100)].map(() => ({
   lastName: faker.person.lastName(),
   phoneNumber: faker.phone.number(),
   state: faker.location.state(),
+  visitedStates: faker.helpers.multiple(faker.location.state),
 }));
 
 export const EditingEnabledEditModeModalDefault = () => {
@@ -365,6 +367,56 @@ export const CustomEditModal = () => {
   );
 };
 
+export const EditMultiSelectVariant = () => {
+  const [tableData, setTableData] = useState(data);
+
+  const handleSaveRow: MRT_TableOptions<Person>['onEditingRowSave'] = ({
+    exitEditingMode,
+    row,
+    values,
+  }) => {
+    tableData[+row.index] = values;
+    setTableData([...tableData]);
+    exitEditingMode();
+  };
+
+  return (
+    <MantineReactTable
+      columns={[
+        {
+          accessorKey: 'firstName',
+          header: 'First Name',
+        },
+        {
+          accessorKey: 'lastName',
+          header: 'Last Name',
+        },
+        {
+          accessorKey: 'address',
+          header: 'Address',
+        },
+        {
+          accessorKey: 'visitedStates',
+          editVariant: 'multi-select',
+          header: 'Visited States',
+          mantineEditSelectProps: {
+            data: usStates as any,
+          },
+        },
+        {
+          accessorKey: 'phoneNumber',
+          header: 'Phone Number',
+        },
+      ]}
+      data={tableData}
+      editDisplayMode="row"
+      enableEditing
+      enableRowActions
+      onEditingRowSave={handleSaveRow}
+    />
+  );
+};
+
 export const EditSelectVariant = () => {
   const [tableData, setTableData] = useState(data);