Merge pull request #357 from yann-combarnous/feature/column-edit-mult…

…iselect feat: add multi-select option to column editVariant parameter
KevinVandy · Jul 11, 2024 · f40f42f · f40f42f
2 parents ff92df3 + aea1f89
commit f40f42f
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 9 deletions.
diff --git 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
@@ -1,24 +1,49 @@
 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,
   type MRT_TableInstance,
 } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData, TValue = MRT_CellValue>
+
+interface PropsTextInput<TData extends MRT_RowData, TValue = MRT_CellValue>
   extends TextInputProps {
   cell: MRT_Cell<TData, TValue>;
   table: MRT_TableInstance<TData>;
 }
 
+interface PropsSelect<TData extends MRT_RowData, TValue = MRT_CellValue>
+  extends SelectProps {
+  cell: MRT_Cell<TData, TValue>;
+  table: MRT_TableInstance<TData>;
+}
+
+interface PropsMultiSelect<TData extends MRT_RowData, TValue = MRT_CellValue>
+  extends MultiSelectProps {
+  cell: MRT_Cell<TData, TValue>;
+  table: MRT_TableInstance<TData>;
+}
+
+type MRT_TextInputProps = TextInputProps & HTMLPropsRef<HTMLInputElement>
+type MRT_SelectProps = SelectProps & HTMLPropsRef<HTMLInputElement>
+type MRT_MultiSelectProps = MultiSelectProps & HTMLPropsRef<HTMLInputElement>
+
 export const MRT_EditCellTextInput = <TData extends MRT_RowData>({
   cell,
   table,
   ...rest
-}: Props<TData>) => {
+}: PropsTextInput<TData> | PropsSelect<TData> | PropsMultiSelect<TData>) => {
   const {
     getState,
     options: {
@@ -39,6 +64,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>());
 
@@ -47,7 +73,7 @@ export const MRT_EditCellTextInput = <TData extends MRT_RowData>({
     ...parseFromValuesOrFunc(mantineEditTextInputProps, arg),
     ...parseFromValuesOrFunc(columnDef.mantineEditTextInputProps, arg),
     ...rest,
-  };
+  } as MRT_TextInputProps;
 
   const selectProps = {
     ...parseFromValuesOrFunc(mantineEditSelectProps, arg),
@@ -105,15 +131,42 @@ export const MRT_EditCellTextInput = <TData extends MRT_RowData>({
 
   if (isSelectEdit) {
     return (
-      // @ts-ignore
       <Select
+        {...commonProps}
+        searchable
+        value={value as any}
+        {...(selectProps as MRT_SelectProps)}
+        onBlur={handleBlur}
+        onChange={(value) => {
+          (selectProps as MRT_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;
+            }
+          }
+        }}
+      />
+    );
+  }
+
+  if (isMultiSelectEdit) {
+    return (
+      <MultiSelect
         {...commonProps}
         searchable
         value={value}
-        {...selectProps}
+        {...(selectProps as MRT_MultiSelectProps)}
         onBlur={handleBlur}
         onChange={(value) => {
-          selectProps.onChange?.(value as any);
+          (selectProps as MRT_MultiSelectProps).onChange?.(value as any);
           setValue(value);
         }}
         onClick={(e) => {

diff --git a/packages/mantine-react-table/src/types.ts b/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;

diff --git a/packages/mantine-react-table/stories/features/Editing.stories.tsx b/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);