feat: enhance FilterItems and Tabs to support item count display

kzamanbd · kzamanbd · commit 9f977bdc3138 · 2026-03-28T12:31:05.000+06:00
diff --git a/src/components/wordpress/DataViews.stories.tsx b/src/components/wordpress/DataViews.stories.tsx
@@ -596,6 +596,138 @@ export const Loading: StoryFn = () => {
 };
 Loading.storyName = "Loading State";
 
+/** DataViews with only filters and search — no tabs. Click "Add Filter" to add filters. */
+export const FiltersOnly: StoryFn = () => {
+  const [view, setView] = useState<DataViewState>(createDefaultView(["name", "email", "status", "role", "joinedAt"]));
+  const [nameFilter, setNameFilter] = useState("");
+  const [statusFilter, setStatusFilter] = useState("");
+  const [roleFilter, setRoleFilter] = useState("");
+
+  let filteredUsers = [...allUsers];
+
+  // Apply search
+  const searchTerm = view.search ?? "";
+  if (searchTerm) {
+    filteredUsers = filteredUsers.filter(user =>
+      user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      user.email.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+  }
+
+  if (nameFilter) {
+    filteredUsers = filteredUsers.filter(user =>
+      user.name.toLowerCase().includes(nameFilter.toLowerCase())
+    );
+  }
+
+  if (statusFilter) {
+    filteredUsers = filteredUsers.filter(user => user.status === statusFilter);
+  }
+
+  if (roleFilter) {
+    filteredUsers = filteredUsers.filter(user => user.role === roleFilter);
+  }
+
+  const paginatedData = paginateData(filteredUsers, view);
+
+  const filterFields: DataViewFilterField[] = [
+    {
+      id: "name",
+      label: "Name",
+      field: (
+        <Input
+          placeholder="Filter by name..."
+          value={nameFilter}
+          onChange={(e) => {
+            setNameFilter(e.target.value);
+            setView(prev => ({ ...prev, page: 1 }));
+          }}
+          className="w-48"
+        />
+      ),
+    },
+    {
+      id: "status",
+      label: "Status",
+      field: (
+        <Select
+          value={statusFilter}
+          onValueChange={(value) => {
+            setStatusFilter(value ?? "");
+            setView(prev => ({ ...prev, page: 1 }));
+          }}
+        >
+          <SelectTrigger className="w-40">
+            <SelectValue placeholder="Select status" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="active">Active</SelectItem>
+            <SelectItem value="inactive">Inactive</SelectItem>
+            <SelectItem value="pending">Pending</SelectItem>
+          </SelectContent>
+        </Select>
+      ),
+    },
+    {
+      id: "role",
+      label: "Role",
+      field: (
+        <Select
+          value={roleFilter}
+          onValueChange={(value) => {
+            setRoleFilter(value ?? "");
+            setView(prev => ({ ...prev, page: 1 }));
+          }}
+        >
+          <SelectTrigger className="w-40">
+            <SelectValue placeholder="Select role" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="Admin">Admin</SelectItem>
+            <SelectItem value="Editor">Editor</SelectItem>
+            <SelectItem value="Viewer">Viewer</SelectItem>
+            <SelectItem value="Manager">Manager</SelectItem>
+          </SelectContent>
+        </Select>
+      ),
+    },
+  ];
+
+  return (
+    <div className="p-4">
+      <DataViews<User>
+        namespace="dataviews-demo"
+        data={paginatedData}
+        fields={fields}
+        view={view}
+        onChangeView={setView}
+        actions={actions}
+        paginationInfo={{
+          totalItems: filteredUsers.length,
+          totalPages: getTotalPages(filteredUsers.length, view.perPage),
+        }}
+        getItemId={(item) => item.id}
+        filter={{
+          fields: filterFields,
+          onReset: () => {
+            setNameFilter("");
+            setStatusFilter("");
+            setRoleFilter("");
+            setView(prev => ({ ...prev, page: 1 }));
+          },
+          onFilterRemove: (filterId) => {
+            if (filterId === "name") setNameFilter("");
+            if (filterId === "status") setStatusFilter("");
+            if (filterId === "role") setRoleFilter("");
+            setView(prev => ({ ...prev, page: 1 }));
+          },
+        }}
+      />
+    </div>
+  );
+};
+FiltersOnly.storyName = "Filters Only";
+
 /** Complete example with all features: tabs, filters, search, selection, and pagination. */
 export const FullFeatured: StoryFn = () => {
   const [view, setView] = useState<DataViewState>(createDefaultView(["name", "email", "status", "role", "joinedAt"]));
@@ -827,7 +959,7 @@ export const LayoutCustomComponent: StoryFn = () => {
     type: "table",
     search: "",
     page: 1,
-    perPage: 6,
+    perPage: 10,
     fields: ["name", "email", "status", "role"],
   });
 
diff --git a/src/components/wordpress/dataviews.tsx b/src/components/wordpress/dataviews.tsx
@@ -213,7 +213,7 @@ const FilterItems = ({
                             return null;
                         }
                         return (
-                            <div className="relative inline-flex items-center" key={id}>
+                            <div className="relative flex items-center gap-2" key={id}>
                                 <div className="[&>input]:pr-8 [&>select]:pr-8">{field.field}</div>
                                 <span
                                     role="button"
@@ -270,6 +270,7 @@ interface Tab {
     value: string;
     className?: string;
     icon?: React.ComponentType<{ className?: string }>;
+    count?: number;
     disabled?: boolean;
 }
 
@@ -446,41 +447,42 @@ export function DataViews<Item>(props: DataViewsProps<Item>) {
         }
     }, [activeFilterCount]);
 
-    const tabsWithFilterButton =
-        filter?.fields && tabs && filter.fields.length > 0
-            ? (() => {
-                  const existing = tabs?.headerContent || tabs?.headerSlot || [];
-                  const newButton = (
-                      <button
-                          type="button"
-                          ref={setButtonRef}
-                          title="Filter"
-                          className={cn(
-                              'relative inline-flex items-center gap-2 rounded-md bg-transparent! hover:bg-transparent! px-3 py-1.5 text-sm hover:text-primary',
-                              showFilters ? 'text-primary' : 'text-muted-foreground'
-                          )}
-                          onClick={() => {
-                              if (activeFilterCount > 0) {
-                                  setShowFilters((prev) => !prev);
-                              } else {
-                                  setOpenSelectorSignal((s) => s + 1);
-                              }
-                          }}>
-                          <Funnel size={20} />
-                          {activeFilterCount > 0 && (
-                              <span className="absolute -top-1.5 -right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground">
-                                  {activeFilterCount}
-                              </span>
-                          )}
-                      </button>
-                  );
-
-                  return {
-                      ...tabs,
-                      headerContent: [...existing, newButton]
-                  };
-              })()
-            : tabs;
+    const hasFilters = (filter?.fields?.length ?? 0) > 0;
+
+    const tabsWithFilterButton = hasFilters
+        ? (() => {
+              const existing = tabs?.headerContent || tabs?.headerSlot || [];
+              const newButton = (
+                  <button
+                      type="button"
+                      ref={setButtonRef}
+                      title="Filter"
+                      className={cn(
+                          'relative inline-flex items-center gap-2 rounded-md bg-transparent! hover:bg-transparent! px-3 py-1.5 text-sm hover:text-primary',
+                          showFilters ? 'text-primary' : 'text-muted-foreground'
+                      )}
+                      onClick={() => {
+                          if (activeFilterCount > 0) {
+                              setShowFilters((prev) => !prev);
+                          } else {
+                              setOpenSelectorSignal((s) => s + 1);
+                          }
+                      }}>
+                      <Funnel size={20} />
+                      {activeFilterCount > 0 && (
+                          <span className="absolute -top-1.5 -right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground">
+                              {activeFilterCount}
+                          </span>
+                      )}
+                  </button>
+              );
+
+              return {
+                  ...tabs,
+                  headerContent: [...existing, newButton]
+              };
+          })()
+        : tabs;
 
     const resolvedTabsConfig = tabsWithFilterButton || tabs;
 
@@ -502,6 +504,7 @@ export function DataViews<Item>(props: DataViewsProps<Item>) {
             ? Math.ceil(paginationDetails.totalItems / perPage)
             : 0;
     const shouldShowPagination = (typeof explicitTotalPages === 'number' ? explicitTotalPages : computedTotalPages) > 1;
+    const showFullWidthHeader = !tabItems.length && (search || hasFilters);
 
     const tableNameSpace = kebabCase(namespace);
 
@@ -521,7 +524,7 @@ export function DataViews<Item>(props: DataViewsProps<Item>) {
                 <Search size={18} className="text-muted-foreground" />
             </InputGroupAddon>
             <InputGroupInput
-                className="border! border-border!"
+                className="border-none!"
                 placeholder={searchPlaceholder}
                 value={searchTerm}
                 onChange={(event) =>
@@ -583,7 +586,10 @@ export function DataViews<Item>(props: DataViewsProps<Item>) {
                                                         tab.className
                                                     )}>
                                                     {tab.icon && <tab.icon className="size-4" />}
-                                                    {tab.label}
+                                                    {tab.label}{' '}
+                                                    {tab.count !== undefined && (
+                                                        <span className="text-muted-foreground">({tab.count})</span>
+                                                    )}
                                                 </TabsTrigger>
                                             ))}
                                         </TabsList>
@@ -592,7 +598,7 @@ export function DataViews<Item>(props: DataViewsProps<Item>) {
                                 <div
                                     className={cn(
                                         'flex items-center gap-2',
-                                        !tabItems.length && search && 'justify-end w-full py-2'
+                                        showFullWidthHeader && 'justify-end w-full py-2'
                                     )}>
                                     {searchInput}
                                     {headerContent.map((node, index) => (
@@ -601,7 +607,7 @@ export function DataViews<Item>(props: DataViewsProps<Item>) {
                                 </div>
                             </div>
 
-                            {filter && filter.fields && filter.fields.length > 0 && (
+                            {hasFilters && (
                                 <div
                                     className={`transition-all flex w-full justify-between px-4 my-4 bg-background ${
                                         showFilters ? '' : 'hidden!'
