add multiple type to table

src/components/Table/Inputs/Select.tsx

@@ -3,18 +3,26 @@ import React, { useMemo, type ChangeEventHandler } from 'react';
 export type DataItem = Record<string, any>;
 
 interface Props {
-  onChange: (value: string | null) => void;
+  onChange: (value: string | string[] | null) => void;
   data: DataItem[];
   keyData: string;
+  isMultiple?: boolean;
 }
 
 export default function Select({
   data,
   keyData,
+  isMultiple = false,
   onChange,
 }: Props): JSX.Element {
   const options = useMemo(() => {
-    let options = data.map((item) => item[keyData]);
+    let options = [];
+
+    if (isMultiple) {
+      options = data.flatMap((item) => item[keyData]);
+    } else {
+      options = data.map((item) => item[keyData]);
+    }
 
     options = [...new Set(options)];
 
@@ -33,13 +41,33 @@ export default function Select({
     return options;
   }, [data, keyData]);
 
+  const onSelectChange: ChangeEventHandler<HTMLSelectElement> = ({
+    target,
+  }): void => {
+    if (!isMultiple) {
+      const value = target.value !== '' ? target.value : null;
+      onChange(value);
+    }
+
+    const values = [];
+
+    // FIXME: This looks awfull, when updating the input use something better.
+    for (let index = 0; index < target.options.length; index++) {
+      const option = target.options[index];
+      if (!option.selected) continue;
+
+      values.push(option.value);
+    }
+
+    onChange(values);
+  };
+
   return (
     <select
       name="fooe"
       id="foo"
-      onChange={({ target }) =>
-        { onChange(target.value !== '' ? target.value : null); }
-      }
+      multiple={isMultiple}
+      onChange={onSelectChange}
     >
       {options}
     </select>