fix: [data-view] hide select filters that have no options

apps/www/src/content/docs/dataview/props.ts

@@ -92,7 +92,7 @@ export interface DataViewField {
   /** Filter input type. */
   filterType?: 'string' | 'number' | 'date' | 'select' | 'multiselect';
 
-  /** Options when filterType is select/multiselect. */
+  /** Options when filterType is select/multiselect. The add-filter menu leaves out the field while this is empty, and the trigger is disabled if no other field is available. */
   filterOptions?: Array<{ label: string; value: string }>;
 
   /** Allow sorting. */

packages/react/components/data-view/__tests__/data-view.test.tsx

@@ -372,6 +372,72 @@ describe('DataView', () => {
       ).toBeInTheDocument();
     });
 
+    it('does not offer select or multiselect fields without filterOptions', async () => {
+      const user = userEvent.setup();
+      const fields: DataViewField<TestData>[] = [
+        { accessorKey: 'name', label: 'Name', filterable: true },
+        {
+          accessorKey: 'status',
+          label: 'Status',
+          filterable: true,
+          filterType: 'select',
+          filterOptions: [{ label: 'Active', value: 'string' }]
+        },
+        {
+          accessorKey: 'email',
+          label: 'Email',
+          filterable: true,
+          filterType: 'select',
+          filterOptions: []
+        },
+        {
+          accessorKey: 'id',
+          label: 'Id',
+          filterable: true,
+          filterType: 'multiselect'
+        }
+      ];
+      render(
+        <DataView data={mockData} fields={fields} defaultSort={defaultSort}>
+          <DataView.Filters
+            trigger={({ availableFilters }) => (
+              <button type='button'>
+                {availableFilters.map(f => f.label).join(',')}
+              </button>
+            )}
+          />
+        </DataView>
+      );
+      const trigger = screen.getByRole('button');
+      expect(trigger).toHaveTextContent(/^Name,Status$/);
+      await user.click(trigger);
+      await screen.findByRole('menuitem', { name: 'Status' });
+      expect(screen.getAllByRole('menuitem').map(i => i.textContent)).toEqual([
+        'Name',
+        'Status'
+      ]);
+    });
+
+    it('disables the filter trigger while select options are loading', () => {
+      render(
+        <DataView
+          data={mockData}
+          fields={[
+            {
+              accessorKey: 'name',
+              label: 'Name',
+              filterable: true,
+              filterType: 'select'
+            }
+          ]}
+          defaultSort={defaultSort}
+        >
+          <DataView.Filters />
+        </DataView>
+      );
+      expect(screen.getByRole('button', { name: /filter/i })).toBeDisabled();
+    });
+
     it('search input updates the query', async () => {
       const user = userEvent.setup();
       render(

packages/react/components/data-view/components/filters.tsx

@@ -41,9 +41,15 @@ function AddFilter<TData>({
   className,
   ...positionerProps
 }: AddFilterProps<TData>) {
-  const availableFilters = fieldList?.filter(
+  const unappliedFields = fieldList.filter(
     f => !appliedFiltersSet.has(f.accessorKey)
   );
+  const availableFilters = unappliedFields.filter(
+    f =>
+      f.filterOptions?.length ||
+      (f.filterType !== FilterType.select &&
+        f.filterType !== FilterType.multiselect)
+  );
 
   const trigger = useMemo(() => {
     if (typeof children === 'function')
@@ -75,9 +81,10 @@ function AddFilter<TData>({
     );
   }, [children, appliedFiltersSet, availableFilters, className]);
 
-  return availableFilters.length > 0 ? (
+  return unappliedFields.length > 0 ? (
     <Menu>
       <Menu.Trigger
+        disabled={availableFilters.length === 0}
         render={isValidElement(trigger) ? trigger : <button>{trigger}</button>}
       />
       <Menu.Content {...positionerProps}>