add select type to table

src/components/Table/Table.tsx

@@ -0,0 +1,204 @@
+import React, { useMemo, useState } from 'react';
+import usePagination, { Offset } from 'src/hooks/usePagination';
+import Select from './Inputs/Select';
+
+export type DataItem = Record<string, any>;
+
+export enum HeaderType {
+  Index,
+  String,
+  Number,
+  Select,
+  Multiple,
+}
+
+export interface Header {
+  key: string;
+  header: string;
+  formatter?: (data: DataItem) => string;
+  type: HeaderType;
+}
+
+interface Props {
+  data: DataItem[];
+  headers: Header[];
+}
+
+interface Filter {
+  type: HeaderType;
+  value: string;
+}
+
+export default function Table({ data, headers }: Props): JSX.Element {
+  const [filters, setFilters] = useState<Record<string, Filter>>({});
+
+  const resolveFilterByType = (filter: Filter, data: any): boolean => {
+    switch (filter.type) {
+      case HeaderType.String:
+        return data.search(filter.value) !== -1;
+      case HeaderType.Number:
+        return data === filter.value;
+      case HeaderType.Select:
+        return data === filter.value;
+    }
+
+    return true;
+  };
+
+  const filteredItems = useMemo(() => {
+    return data.filter((item) => {
+      return Object.entries(filters).every(([key, filter]) =>
+        resolveFilterByType(filter, item[key]),
+      );
+    });
+  }, [data, filters]);
+
+  const { items, changeOffset } = usePagination<DataItem>({
+    items: filteredItems,
+  });
+
+  const handleUpdateFilters = (
+    name: string,
+    type: HeaderType,
+    value: any,
+  ): void => {
+    setFilters((prev) => {
+      if (value === null) {
+        // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+        delete prev[name];
+        return { ...prev };
+      }
+
+      return { ...prev, [name]: { value, type } };
+    });
+  };
+
+  function formatCell(data: DataItem, header: Header): JSX.Element {
+    // This formatting is only used because the source is trusted (private markdown files manage only by me)
+    // and because Astro don't allow me to pass JSX from an Astro file to a TSX file,
+    // so I have to pass the formatted row as a string.
+    // DON'T use this method on a public API
+    if (header.formatter != null) {
+      return (
+        <div dangerouslySetInnerHTML={{ __html: header.formatter(data) }} />
+      );
+    }
+
+    if (header.type === HeaderType.Multiple) {
+      return (
+        <ul className="text-start">
+          {data[header.key].map((item: JSX.Element, idx: number) => (
+            <li key={idx}>{item}</li>
+          ))}
+        </ul>
+      );
+    }
+
+    return data[header.key];
+  }
+
+  function formatFilter(header: Header): JSX.Element {
+    switch (header.type) {
+      case HeaderType.String:
+        return (
+          <input
+            onChange={(e) => {
+              handleUpdateFilters(
+                header.key,
+                header.type,
+                e.target.value ?? null,
+              );
+            }}
+          />
+        );
+      case HeaderType.Number:
+        return (
+          <input
+            type="number"
+            onChange={(e) => {
+              handleUpdateFilters(
+                header.key,
+                header.type,
+                e.target.value !== '' ? parseInt(e.target.value) : null,
+              );
+            }}
+          />
+        );
+      case HeaderType.Select:
+        return (
+          <Select
+            data={data}
+            keyData={header.key}
+            onChange={(value) => {
+              handleUpdateFilters(header.key, header.type, value);
+            }}
+          />
+        );
+
+      default:
+        break;
+    }
+
+    return <></>;
+  }
+
+  return (
+    <>
+      <table style={{ width: '100%' }}>
+        <thead>
+          <tr>
+            {headers.map((item, idx) => (
+              <th key={idx}>
+                <div className="vstack">
+                  {item.header}
+                  {formatFilter(item)}
+                </div>
+              </th>
+            ))}
+          </tr>
+        </thead>
+
+        <tbody>
+          {items.map((item, idx) => (
+            <tr key={idx}>
+              {headers.map((header, hidx) => (
+                <td key={hidx}>{formatCell(item, header)}</td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      <section>
+        <button
+          onClick={() => {
+            changeOffset(Offset.First);
+          }}
+        >
+          First
+        </button>
+        <button
+          onClick={() => {
+            changeOffset(Offset.Prev);
+          }}
+        >
+          Prev
+        </button>
+        <button
+          onClick={() => {
+            changeOffset(Offset.Next);
+          }}
+        >
+          Next
+        </button>
+        <button
+          onClick={() => {
+            changeOffset(Offset.Last);
+          }}
+        >
+          Last
+        </button>
+      </section>
+    </>
+  );
+}