diff --git a/src/components/table/DataTable.tsx b/src/components/table/DataTable.tsx index dbc03f6..d5131e8 100644 --- a/src/components/table/DataTable.tsx +++ b/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({ 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 (
{!minimal && ( @@ -238,6 +248,7 @@ export function DataTableContent({ placeholder={searchPlaceholder} /> {children && children(table)} +
{rightSide && rightSide(table)} diff --git a/src/components/table/DataTableResetFilterButton.tsx b/src/components/table/DataTableResetFilterButton.tsx new file mode 100644 index 0000000..195299b --- /dev/null +++ b/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 { + table: Table; + onClick: () => void; +} + +export default function DataTableResetFilterButton({ + table, + onClick, +}: Props) { + const [hovered, setHovered] = useState(false); + const isDisabled = + table.getState().columnFilters.length <= 0 && + table.getState().globalFilter === ""; + + return !isDisabled ? ( + + setHovered(true)} + onMouseLeave={() => setHovered(false)} + onClick={(e) => { + e.preventDefault(); + }} + > + + + + { + if (hovered) event.preventDefault(); + }} + > + + Reset Filters & Search + + + + ) : null; +}