Add reset filter button (#355)

src/components/table/DataTable.tsx

@@ -2,6 +2,7 @@
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import DataTableGlobalSearch from "@components/table/DataTableGlobalSearch";
 import { DataTablePagination } from "@components/table/DataTablePagination";
+import DataTableResetFilterButton from "@components/table/DataTableResetFilterButton";
 import {
   Table,
   TableBody,
@@ -223,6 +224,15 @@ export function DataTableContent<TData, TValue>({
   const TableDataUnstyledComponent = as === "table" ? "td" : "div";
   const TableRowUnstyledComponent = as === "table" ? "tr" : "div";
 
+  /**
+   * Reset all filters, search & set pagination to first page
+   */
+  const resetFilters = () => {
+    table.setPageIndex(0);
+    setColumnFilters([]);
+    setGlobalSearch("");
+  };
+
   return (
     <div className={cn("relative table-fixed-scroll", className)}>
       {!minimal && (
@@ -238,6 +248,7 @@ export function DataTableContent<TData, TValue>({
             placeholder={searchPlaceholder}
           />
           {children && children(table)}
+          <DataTableResetFilterButton onClick={resetFilters} table={table} />
           <div className={"flex gap-4 flex-wrap grow"}>
             <div className={"flex gap-4 flex-wrap"}></div>
             {rightSide && rightSide(table)}

src/components/table/DataTableResetFilterButton.tsx

@@ -0,0 +1,55 @@
+import Button from "@components/Button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@components/Tooltip";
+import { Table } from "@tanstack/react-table";
+import { FilterX } from "lucide-react";
+import * as React from "react";
+import { useState } from "react";
+
+interface Props<TData> {
+  table: Table<TData>;
+  onClick: () => void;
+}
+
+export default function DataTableResetFilterButton<TData>({
+  table,
+  onClick,
+}: Props<TData>) {
+  const [hovered, setHovered] = useState(false);
+  const isDisabled =
+    table.getState().columnFilters.length <= 0 &&
+    table.getState().globalFilter === "";
+
+  return !isDisabled ? (
+    <Tooltip delayDuration={1}>
+      <TooltipTrigger
+        asChild={true}
+        onMouseOver={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        onClick={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <Button
+          className={"h-[42px]"}
+          variant={"secondary"}
+          disabled={isDisabled}
+          onClick={onClick}
+        >
+          <FilterX size={16} />
+        </Button>
+      </TooltipTrigger>
+
+      <TooltipContent
+        sideOffset={10}
+        className={"px-3 py-2"}
+        onPointerDownOutside={(event) => {
+          if (hovered) event.preventDefault();
+        }}
+      >
+        <span className={"text-xs text-neutral-300"}>
+          Reset Filters & Search
+        </span>
+      </TooltipContent>
+    </Tooltip>
+  ) : null;
+}