feat: separate visibility of filters and view actions

nainglinnkhant · Jul 10, 2024 · 9bbe894 · 9bbe894
1 parent 5f450ca
commit 9bbe894
Showing 1 changed file with 45 additions and 43 deletions.
diff --git a/src/components/data-table/advanced/data-table-advanced-toolbar.tsx b/src/components/data-table/advanced/data-table-advanced-toolbar.tsx
@@ -234,50 +234,52 @@ export function DataTableAdvancedToolbar<TData>({
           <DataTableColumnsVisibility />
         </div>
       </div>
-      <div
-        className={cn(
-          "flex h-8 items-center gap-2",
-          !openFilterBuilder && "hidden"
+      <div className="flex items-center justify-between">
+        {openFilterBuilder && (
+          <div className="flex h-8 items-center gap-2">
+            {selectedOptions
+              .filter((option) => !option.isMulti)
+              .map((selectedOption) => (
+                <DataTableFilterItem
+                  key={String(selectedOption.value)}
+                  selectedOption={selectedOption}
+                  setSelectedOptions={setSelectedOptions}
+                  defaultOpen={openCombobox}
+                />
+              ))}
+            {selectedOptions.some((option) => option.isMulti) ? (
+              <DataTableMultiFilter
+                allOptions={options}
+                options={multiFilterOptions}
+                selectedOptions={selectedOptions}
+                setSelectedOptions={setSelectedOptions}
+                defaultOpen={openCombobox}
+              />
+            ) : null}
+            {selectableOptions.length > 0 ? (
+              <DataTableFilterCombobox
+                selectableOptions={selectableOptions}
+                selectedOptions={selectedOptions}
+                setSelectedOptions={setSelectedOptions}
+                onSelect={onFilterComboboxItemSelect}
+              >
+                <Button
+                  variant="outline"
+                  size="sm"
+                  role="combobox"
+                  className="h-7 rounded-full"
+                  onClick={() => setOpenCombobox(true)}
+                >
+                  <PlusIcon
+                    className="mr-2 size-4 opacity-50"
+                    aria-hidden="true"
+                  />
+                  Add filter
+                </Button>
+              </DataTableFilterCombobox>
+            ) : null}
+          </div>
         )}
-      >
-        {selectedOptions
-          .filter((option) => !option.isMulti)
-          .map((selectedOption) => (
-            <DataTableFilterItem
-              key={String(selectedOption.value)}
-              selectedOption={selectedOption}
-              setSelectedOptions={setSelectedOptions}
-              defaultOpen={openCombobox}
-            />
-          ))}
-        {selectedOptions.some((option) => option.isMulti) ? (
-          <DataTableMultiFilter
-            allOptions={options}
-            options={multiFilterOptions}
-            selectedOptions={selectedOptions}
-            setSelectedOptions={setSelectedOptions}
-            defaultOpen={openCombobox}
-          />
-        ) : null}
-        {selectableOptions.length > 0 ? (
-          <DataTableFilterCombobox
-            selectableOptions={selectableOptions}
-            selectedOptions={selectedOptions}
-            setSelectedOptions={setSelectedOptions}
-            onSelect={onFilterComboboxItemSelect}
-          >
-            <Button
-              variant="outline"
-              size="sm"
-              role="combobox"
-              className="h-7 rounded-full"
-              onClick={() => setOpenCombobox(true)}
-            >
-              <PlusIcon className="mr-2 size-4 opacity-50" aria-hidden="true" />
-              Add filter
-            </Button>
-          </DataTableFilterCombobox>
-        ) : null}
 
         <div className="ml-auto flex items-center gap-2">
           {isUpdated && currentView && (