feat(DataTable): ability to use quick filters

SIKKA-6918[closed]
sikka-software · Jun 2, 2024 · 72c54d3 · 72c54d3
1 parent 6f7ed83
commit 72c54d3
Show file tree

Hide file tree

Showing 9 changed files with 678 additions and 5 deletions.
diff --git a/apps/docs/CHANGELOG.md b/apps/docs/CHANGELOG.md
@@ -1,5 +1,12 @@
 # hawa-docs
 
+## 0.0.86
+
+### Patch Changes
+
+- Updated dependencies
+  - @sikka/hawa@0.42.0
+
 ## 0.0.85
 
 ### Patch Changes

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hawa-docs",
-  "version": "0.0.85",
+  "version": "0.0.86",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3001",

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @sikka/hawa
 
+## 0.42.0
+
+### Minor Changes
+
+- `DataTable`: add ability to set quick filters and apply them.
+
 ## 0.41.0
 
 ### Minor Changes

diff --git a/packages/components/elements/dataTable/DataTable.tsx b/packages/components/elements/dataTable/DataTable.tsx
@@ -48,6 +48,8 @@ type DataTableProps<DataProps = {}> = {
   enableHideColumns?: boolean;
   enableGoTo?: boolean;
   enableSelection?: boolean;
+  enableFiltering?: boolean;
+  filters?: { accessorKey: string; value: string; label: string }[];
   hideHeader?: boolean;
   data: DataProps[];
   itemsPerPage?: any[];
@@ -92,6 +94,7 @@ export const DataTable = <DataProps extends {}>({
   translateFn,
   enableHideColumns,
   enableSelection,
+  enableFiltering,
   enableSearch,
   enableGoTo,
   ...props
@@ -112,6 +115,7 @@ export const DataTable = <DataProps extends {}>({
     });
 
   const [rowSelection, setRowSelection] = React.useState({});
+  const [selectedFilters, setSelectedFilters] = React.useState<string[]>([]);
 
   let mainColumns: ColumnDef<DataProps>[] = enableSelection
     ? [
@@ -200,6 +204,17 @@ export const DataTable = <DataProps extends {}>({
     });
   }, [columns]);
 
+  React.useEffect(() => {
+    props.filters?.forEach((filter) => {
+      const activeFilter = selectedFilters.find(
+        (selectedFilter) =>
+          filter.accessorKey ===
+          props.filters?.find((f) => f.value === selectedFilter)?.accessorKey,
+      );
+      table.getColumn(filter.accessorKey)?.setFilterValue(activeFilter || "");
+    });
+  }, [selectedFilters, props.filters]);
+
   return (
     <div className="hawa-flex hawa-w-full hawa-flex-col hawa-gap-4">
       {(enableSearch || enableHideColumns) && (
@@ -296,6 +311,43 @@ export const DataTable = <DataProps extends {}>({
           )}
         </div>
       )}
+
+      {enableFiltering && (
+        <div className="hawa-flex-row hawa-gap-2 hawa-flex">
+          {props.filters?.map((filter) => {
+            return (
+              <Button
+                variant="outline"
+                className={
+                  selectedFilters.includes(filter.value)
+                    ? "!hawa-bg-primary !hawa-text-primary-foreground"
+                    : ""
+                }
+                size="xs"
+                onClick={() => {
+                  let newSelectedFilters = selectedFilters.filter(
+                    (item) =>
+                      props.filters?.find((f) => f.value === item)
+                        ?.accessorKey !== filter.accessorKey,
+                  );
+
+                  if (!selectedFilters.includes(filter.value)) {
+                    newSelectedFilters.push(filter.value);
+                    table
+                      .getColumn(filter.accessorKey)
+                      ?.setFilterValue(filter.value);
+                  } else {
+                    table.getColumn(filter.accessorKey)?.setFilterValue("");
+                  }
+                  setSelectedFilters(newSelectedFilters);
+                }}
+              >
+                {filter.label}
+              </Button>
+            );
+          })}
+        </div>
+      )}
       {props.isLoading ? (
         <Skeleton className="hawa-h-[130px] hawa-w-full" />
       ) : (