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>

src/components/Table/Table.tsx

@@ -26,7 +26,7 @@ interface Props {
 
 interface Filter {
   type: HeaderType;
-  value: string;
+  value: string | string[];
 }
 
 export default function Table({ data, headers }: Props): JSX.Element {
@@ -40,6 +40,11 @@ export default function Table({ data, headers }: Props): JSX.Element {
         return data === filter.value;
       case HeaderType.Select:
         return data === filter.value;
+      case HeaderType.Multiple:
+        if (typeof filter.value === 'string') {
+          return data.includes(filter.value);
+        }
+        return filter.value.every((filter: string) => data.includes(filter));
     }
 
     return true;
@@ -62,6 +67,7 @@ export default function Table({ data, headers }: Props): JSX.Element {
     type: HeaderType,
     value: any,
   ): void => {
+    console.log(value);
     setFilters((prev) => {
       if (value === null) {
         // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
@@ -134,6 +140,17 @@ export default function Table({ data, headers }: Props): JSX.Element {
             }}
           />
         );
+      case HeaderType.Multiple:
+        return (
+          <Select
+            isMultiple
+            data={data}
+            keyData={header.key}
+            onChange={(value) => {
+              handleUpdateFilters(header.key, header.type, value);
+            }}
+          />
+        );
 
       default:
         break;