From 6e74ca79f923a43b8acdc45c92799c7fd42207be Mon Sep 17 00:00:00 2001
From: Maximilian Kaske <56969857+mxkaske@users.noreply.github.com>
Date: Sun, 26 Apr 2026 15:10:59 +0200
Subject: [PATCH] chore: data-table-faceted-filter (#2121)

---
 .../data-table-toolbar.tsx                    | 19 ++++----
 .../monitors/data-table-toolbar.tsx           |  3 +-
 .../response-logs/data-table-toolbar.tsx      |  5 +-
 .../subscribers/data-table-toolbar.tsx        | 46 +++++++++++++------
 .../data-table/data-table-faceted-filter.tsx  | 15 ++++--
 .../data-table/data-table-faceted-filter.tsx  | 23 +++++++---
 ...able-toobar.tsx => data-table-toolbar.tsx} |  0
 .../components/ui/data-table/data-table.tsx   |  2 +-
 8 files changed, 79 insertions(+), 34 deletions(-)
 rename apps/status-page/src/components/ui/data-table/{data-table-toobar.tsx => data-table-toolbar.tsx} (100%)

diff --git a/apps/dashboard/src/components/data-table/audit-logs-workspace/data-table-toolbar.tsx b/apps/dashboard/src/components/data-table/audit-logs-workspace/data-table-toolbar.tsx
index ee52344a..98755df7 100644
--- a/apps/dashboard/src/components/data-table/audit-logs-workspace/data-table-toolbar.tsx
+++ b/apps/dashboard/src/components/data-table/audit-logs-workspace/data-table-toolbar.tsx
@@ -4,7 +4,7 @@ import { DataTableFacetedFilter } from "@/components/ui/data-table/data-table-fa
 import type { RouterOutputs } from "@openstatus/api";
 import { Button } from "@openstatus/ui/components/ui/button";
 import type { Table } from "@tanstack/react-table";
-import { X } from "lucide-react";
+import { Database, User, X, Zap } from "lucide-react";
 
 type AuditLog = RouterOutputs["auditLog"]["list"]["items"][number];
 
@@ -48,18 +48,20 @@ export function AuditLogsDataTableToolbar({
   return (
     <div className="flex items-center justify-between">
       <div className="flex flex-1 flex-wrap items-center gap-2">
-        {table.getColumn("action") && actionOptions.length > 0 && (
-          <DataTableFacetedFilter
-            column={table.getColumn("action")}
-            title="Action"
-            options={actionOptions}
-          />
-        )}
         {table.getColumn("actorType") && actorTypeOptions.length > 0 && (
           <DataTableFacetedFilter
             column={table.getColumn("actorType")}
             title="Actor type"
             options={actorTypeOptions}
+            icon={User}
+          />
+        )}
+        {table.getColumn("action") && actionOptions.length > 0 && (
+          <DataTableFacetedFilter
+            column={table.getColumn("action")}
+            title="Action"
+            options={actionOptions}
+            icon={Zap}
           />
         )}
         {table.getColumn("entityType") && entityTypeOptions.length > 0 && (
@@ -67,6 +69,7 @@ export function AuditLogsDataTableToolbar({
             column={table.getColumn("entityType")}
             title="Entity type"
             options={entityTypeOptions}
+            icon={Database}
           />
         )}
         {isFiltered && (
diff --git a/apps/dashboard/src/components/data-table/monitors/data-table-toolbar.tsx b/apps/dashboard/src/components/data-table/monitors/data-table-toolbar.tsx
index 4f68b119..6e3f6541 100644
--- a/apps/dashboard/src/components/data-table/monitors/data-table-toolbar.tsx
+++ b/apps/dashboard/src/components/data-table/monitors/data-table-toolbar.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import type { Table } from "@tanstack/react-table";
-import { X } from "lucide-react";
+import { Tag, X } from "lucide-react";
 
 import { Button } from "@openstatus/ui/components/ui/button";
 import { Input } from "@openstatus/ui/components/ui/input";
@@ -40,6 +40,7 @@ export function MonitorDataTableToolbar({
               label: tag.name,
               value: tag.id,
             }))}
+            icon={Tag}
           />
         )}
         {isFiltered && (
diff --git a/apps/dashboard/src/components/data-table/response-logs/data-table-toolbar.tsx b/apps/dashboard/src/components/data-table/response-logs/data-table-toolbar.tsx
index 3eaab591..4aea3508 100644
--- a/apps/dashboard/src/components/data-table/response-logs/data-table-toolbar.tsx
+++ b/apps/dashboard/src/components/data-table/response-logs/data-table-toolbar.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import type { Table } from "@tanstack/react-table";
-import { X } from "lucide-react";
+import { Activity, MapPin, TriangleAlert, X } from "lucide-react";
 
 import { Button } from "@openstatus/ui/components/ui/button";
 
@@ -32,6 +32,7 @@ export function ResponseLogsDataTableToolbar({
               label: code.code.toString(),
               value: code.code.toString(),
             }))}
+            icon={Activity}
           />
         )}
         {table.getColumn("region") && (
@@ -42,6 +43,7 @@ export function ResponseLogsDataTableToolbar({
               label: region.location,
               value: region.code,
             }))}
+            icon={MapPin}
           />
         )}
         {table.getColumn("error") && (
@@ -52,6 +54,7 @@ export function ResponseLogsDataTableToolbar({
               { label: "Yes", value: "true" },
               { label: "No", value: "false" },
             ]}
+            icon={TriangleAlert}
           />
         )}
         {isFiltered && (
diff --git a/apps/dashboard/src/components/data-table/subscribers/data-table-toolbar.tsx b/apps/dashboard/src/components/data-table/subscribers/data-table-toolbar.tsx
index d46fcae2..b64c793c 100644
--- a/apps/dashboard/src/components/data-table/subscribers/data-table-toolbar.tsx
+++ b/apps/dashboard/src/components/data-table/subscribers/data-table-toolbar.tsx
@@ -4,10 +4,30 @@ import { DataTableFacetedFilter } from "@/components/ui/data-table/data-table-fa
 import type { RouterOutputs } from "@openstatus/api";
 import { Button } from "@openstatus/ui/components/ui/button";
 import type { Table } from "@tanstack/react-table";
-import { X } from "lucide-react";
+import { CircleCheck, Globe, X } from "lucide-react";
 
 type Subscriber = RouterOutputs["pageSubscriber"]["list"][number];
 
+const STATUS_OPTIONS = [
+  { label: "Active", value: "active" },
+  { label: "Pending", value: "pending" },
+  { label: "Unsubscribed", value: "unsubscribed" },
+];
+
+const SOURCE_OPTIONS = [
+  { label: "Self-signup", value: "self_signup" },
+  { label: "Vendor", value: "vendor" },
+  { label: "Import", value: "import" },
+];
+
+function filterAvailable<T extends { value: string }>(
+  options: T[],
+  facets: Map<string, number> | undefined,
+) {
+  if (!facets) return [];
+  return options.filter((option) => facets.has(option.value));
+}
+
 export function SubscribersDataTableToolbar({
   table,
 }: {
@@ -15,29 +35,29 @@ export function SubscribersDataTableToolbar({
 }) {
   const isFiltered = table.getState().columnFilters.length > 0;
 
+  const statusFacets = table.getColumn("status")?.getFacetedUniqueValues();
+  const sourceFacets = table.getColumn("source")?.getFacetedUniqueValues();
+
+  const statusOptions = filterAvailable(STATUS_OPTIONS, statusFacets);
+  const sourceOptions = filterAvailable(SOURCE_OPTIONS, sourceFacets);
+
   return (
     <div className="flex items-center justify-between">
       <div className="flex flex-1 flex-wrap items-center gap-2">
-        {table.getColumn("status") && (
+        {table.getColumn("status") && statusOptions.length > 0 && (
           <DataTableFacetedFilter
             column={table.getColumn("status")}
             title="Status"
-            options={[
-              { label: "Active", value: "active" },
-              { label: "Pending", value: "pending" },
-              { label: "Unsubscribed", value: "unsubscribed" },
-            ]}
+            options={statusOptions}
+            icon={CircleCheck}
           />
         )}
-        {table.getColumn("source") && (
+        {table.getColumn("source") && sourceOptions.length > 0 && (
           <DataTableFacetedFilter
             column={table.getColumn("source")}
             title="Source"
-            options={[
-              { label: "Self-signup", value: "self_signup" },
-              { label: "Vendor", value: "vendor" },
-              { label: "Import", value: "import" },
-            ]}
+            options={sourceOptions}
+            icon={Globe}
           />
         )}
         {isFiltered && (
diff --git a/apps/dashboard/src/components/ui/data-table/data-table-faceted-filter.tsx b/apps/dashboard/src/components/ui/data-table/data-table-faceted-filter.tsx
index d40c0eec..c4ca1073 100644
--- a/apps/dashboard/src/components/ui/data-table/data-table-faceted-filter.tsx
+++ b/apps/dashboard/src/components/ui/data-table/data-table-faceted-filter.tsx
@@ -18,12 +18,12 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@openstatus/ui/components/ui/popover";
-import { Separator } from "@openstatus/ui/components/ui/separator";
 import { cn } from "@openstatus/ui/lib/utils";
 
 interface DataTableFacetedFilterProps<TData, TValue> {
   column?: Column<TData, TValue>;
   title?: string;
+  icon?: React.ComponentType<{ className?: string }>;
   options: {
     label: string;
     value: string | number;
@@ -34,6 +34,7 @@ interface DataTableFacetedFilterProps<TData, TValue> {
 export function DataTableFacetedFilter<TData, TValue>({
   column,
   title,
+  icon: Icon,
   options,
 }: DataTableFacetedFilterProps<TData, TValue>) {
   const facets = column?.getFacetedUniqueValues();
@@ -44,12 +45,18 @@ export function DataTableFacetedFilter<TData, TValue>({
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <Button variant="outline" size="sm" className="h-8 border-dashed">
-          <PlusCircle />
+        <Button
+          variant="outline"
+          size="sm"
+          className={cn(
+            "h-8 border-dashed",
+            selectedValues?.size > 0 && "border-solid",
+          )}
+        >
+          {Icon ? <Icon /> : <PlusCircle />}
           {title}
           {selectedValues?.size > 0 && (
             <>
-              <Separator orientation="vertical" className="mx-2 h-4" />
               <Badge
                 variant="secondary"
                 className="rounded-sm px-1 font-normal lg:hidden"
diff --git a/apps/status-page/src/components/ui/data-table/data-table-faceted-filter.tsx b/apps/status-page/src/components/ui/data-table/data-table-faceted-filter.tsx
index 37fd832c..c4ca1073 100644
--- a/apps/status-page/src/components/ui/data-table/data-table-faceted-filter.tsx
+++ b/apps/status-page/src/components/ui/data-table/data-table-faceted-filter.tsx
@@ -18,12 +18,12 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@openstatus/ui/components/ui/popover";
-import { Separator } from "@openstatus/ui/components/ui/separator";
 import { cn } from "@openstatus/ui/lib/utils";
 
 interface DataTableFacetedFilterProps<TData, TValue> {
   column?: Column<TData, TValue>;
   title?: string;
+  icon?: React.ComponentType<{ className?: string }>;
   options: {
     label: string;
     value: string | number;
@@ -34,6 +34,7 @@ interface DataTableFacetedFilterProps<TData, TValue> {
 export function DataTableFacetedFilter<TData, TValue>({
   column,
   title,
+  icon: Icon,
   options,
 }: DataTableFacetedFilterProps<TData, TValue>) {
   const facets = column?.getFacetedUniqueValues();
@@ -44,12 +45,18 @@ export function DataTableFacetedFilter<TData, TValue>({
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <Button variant="outline" size="sm" className="h-8 border-dashed">
-          <PlusCircle />
+        <Button
+          variant="outline"
+          size="sm"
+          className={cn(
+            "h-8 border-dashed",
+            selectedValues?.size > 0 && "border-solid",
+          )}
+        >
+          {Icon ? <Icon /> : <PlusCircle />}
           {title}
           {selectedValues?.size > 0 && (
             <>
-              <Separator orientation="vertical" className="mx-2 h-4" />
               <Badge
                 variant="secondary"
                 className="rounded-sm px-1 font-normal lg:hidden"
@@ -113,12 +120,16 @@ export function DataTableFacetedFilter<TData, TValue>({
                           : "opacity-50 [&_svg]:invisible",
                       )}
                     >
-                      <Check />
+                      <Check
+                        className={cn(
+                          isSelected ? "text-primary-foreground" : undefined,
+                        )}
+                      />
                     </div>
                     {option.icon && (
                       <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
                     )}
-                    <span>{option.label}</span>
+                    <span className="truncate">{option.label}</span>
                     {facets?.get(option.value) && (
                       <span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
                         {facets.get(option.value)}
diff --git a/apps/status-page/src/components/ui/data-table/data-table-toobar.tsx b/apps/status-page/src/components/ui/data-table/data-table-toolbar.tsx
similarity index 100%
rename from apps/status-page/src/components/ui/data-table/data-table-toobar.tsx
rename to apps/status-page/src/components/ui/data-table/data-table-toolbar.tsx
diff --git a/apps/status-page/src/components/ui/data-table/data-table.tsx b/apps/status-page/src/components/ui/data-table/data-table.tsx
index fcbae714..1f3dfb62 100644
--- a/apps/status-page/src/components/ui/data-table/data-table.tsx
+++ b/apps/status-page/src/components/ui/data-table/data-table.tsx
@@ -30,7 +30,7 @@ import {
 import { Fragment } from "react";
 import type { DataTableActionBarProps } from "./data-table-action-bar";
 import type { DataTablePaginationProps } from "./data-table-pagination";
-import type { DataTableToolbarProps } from "./data-table-toobar";
+import type { DataTableToolbarProps } from "./data-table-toolbar";
 
 export interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
-- 
2.51.2