From 06bf9cfbfeb3478465e370c4bf24312885d476fa Mon Sep 17 00:00:00 2001
From: Eunjae Lee <hey@eunjae.dev>
Date: Wed, 12 Feb 2025 14:33:10 +0100
Subject: [PATCH] fix: indicate hidden columns on filter dropdown (#19259)

---
 .../data-table/components/filters/AddFilterButton.tsx       | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/features/data-table/components/filters/AddFilterButton.tsx b/packages/features/data-table/components/filters/AddFilterButton.tsx
index 393a78ff99..8d5e78b344 100644
--- a/packages/features/data-table/components/filters/AddFilterButton.tsx
+++ b/packages/features/data-table/components/filters/AddFilterButton.tsx
@@ -58,14 +58,16 @@ function AddFilterButtonComponent<TData>(
             <CommandList>
               <CommandEmpty>{t("no_columns_found")}</CommandEmpty>
               {filterableColumns.map((column) => {
+                const isVisible = table.getColumn(column.id)?.getIsVisible();
                 if (activeFilters?.some((filter) => filter.f === column.id)) return null;
                 return (
                   <CommandItem
                     key={column.id}
                     onSelect={() => handleAddFilter(column.id)}
-                    className="px-4 py-2"
+                    className="flex items-center justify-between px-4 py-2"
                     data-testid={`add-filter-item-${column.id}`}>
-                    {startCase(column.title)}
+                    <span>{startCase(column.title)}</span>
+                    {!isVisible && <Icon name="eye-off" className="h-4 w-4 opacity-50" />}
                   </CommandItem>
                 );
               })}