Add a clear button that reset the filters values.

src/components/Table/Table.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import usePagination, { Offset } from 'src/hooks/usePagination';
 import {
   SelectFilter,
@@ -29,8 +29,11 @@ interface Props {
   headers: Header[];
 }
 
+type Value = string | string[] | number | number[] | null;
+
 export default function Table({ data, headers }: Props): JSX.Element {
   const [filters, setFilters] = useState<Record<string, Filter>>({});
+  const filtersKey = useRef(crypto.randomUUID());
 
   const filteredItems = useMemo(() => {
     return data.filter((item) => {
@@ -86,49 +89,31 @@ export default function Table({ data, headers }: Props): JSX.Element {
   }
 
   function formatFilter(header: Header): JSX.Element {
+    const baseProps = {
+      key: header.key + filtersKey.current,
+      keyData: header.key,
+      value: filters[header.key]?.value,
+      onChange: (value: Value) => {
+        handleUpdateFilters(header.key, header.type, value);
+      },
+    };
+
     switch (header.type) {
       case HeaderType.String:
         return (
           <input
             onChange={(e) => {
-              handleUpdateFilters(
-                header.key,
-                header.type,
-                e.target.value ?? null,
-              );
+              baseProps.onChange(e.target.value);
             }}
+            key={baseProps.key}
           />
         );
       case HeaderType.Number:
-        return (
-          <NumberInput
-            keyData={header.key}
-            onChange={(value) => {
-              handleUpdateFilters(header.key, header.type, value);
-            }}
-          />
-        );
+        return <NumberInput {...baseProps} />;
       case HeaderType.Select:
-        return (
-          <SelectFilter
-            data={data}
-            keyData={header.key}
-            onChange={(value) => {
-              handleUpdateFilters(header.key, header.type, value);
-            }}
-          />
-        );
+        return <SelectFilter data={data} {...baseProps} />;
       case HeaderType.Multiple:
-        return (
-          <SelectFilter
-            isMultiple
-            data={data}
-            keyData={header.key}
-            onChange={(value) => {
-              handleUpdateFilters(header.key, header.type, value);
-            }}
-          />
-        );
+        return <SelectFilter {...baseProps} isMultiple data={data} />;
 
       default:
         break;
@@ -139,32 +124,47 @@ export default function Table({ data, headers }: Props): JSX.Element {
 
   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>
+      <section className="hstack">
+        <button
+          className="ml-auto"
+          onClick={() => {
+            // FIXME: this clear the filters but not the value of the inputs
+            setFilters({});
+            filtersKey.current = crypto.randomUUID();
+          }}
+        >
+          Clear Filters
+        </button>
+      </section>
 
-        <tbody>
-          {items.map((item, idx) => (
-            <tr key={idx}>
-              {headers.map((header, hidx) => (
-                <td key={hidx}>{formatCell(item, header)}</td>
+      <section className="mt-1 overflow-scroll">
+        <table>
+          <thead>
+            <tr>
+              {headers.map((item, idx) => (
+                <th key={idx}>
+                  <div className="vstack">
+                    {item.header}
+                    {formatFilter(item)}
+                  </div>
+                </th>
               ))}
             </tr>
-          ))}
-        </tbody>
-      </table>
+          </thead>
 
-      <section>
+          <tbody>
+            {items.map((item, idx) => (
+              <tr key={idx}>
+                {headers.map((header, hidx) => (
+                  <td key={hidx}>{formatCell(item, header)}</td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </section>
+
+      <section className="mt-1">
         <button
           onClick={() => {
             changeOffset(Offset.First);