improvement(tables): order the bar filter, sort, columns and drop the hidden count

Author: TheodoreSpeaks

apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options/resource-options.tsx

@@ -91,6 +91,12 @@ interface ResourceOptionsProps {
    * widgets; primary actions belong in the header's `actions`.
    */
   aside?: ReactNode
+  /**
+   * Mirror of {@link aside} on the other side: rendered immediately to the RIGHT
+   * of the filter/sort cluster and still grouped with it — e.g. the table editor's
+   * Columns menu, which reads as the last item in the Filter/Sort/Columns row.
+   */
+  asideEnd?: ReactNode
   /**
    * Control pinned to the far RIGHT of the bar, opposite the filter/sort cluster —
    * e.g. the table editor's Save-view button. Unlike `aside` it is a real action,
@@ -105,6 +111,7 @@ export const ResourceOptions = memo(function ResourceOptions({
   filter,
   filterTags,
   aside,
+  asideEnd,
   trailing,
 }: ResourceOptionsProps) {
   /**
@@ -119,7 +126,13 @@ export const ResourceOptions = memo(function ResourceOptions({
   const popoverFilter = filter && filter.mode !== 'toggle' ? filter : null
 
   const hasContent =
-    search || sort || filter || aside || trailing || (filterTags && filterTags.length > 0)
+    search ||
+    sort ||
+    filter ||
+    aside ||
+    asideEnd ||
+    trailing ||
+    (filterTags && filterTags.length > 0)
   if (!hasContent) return null
 
   return (
@@ -187,6 +200,7 @@ export const ResourceOptions = memo(function ResourceOptions({
             ) : null}
             {sort && (isToggleFilter || !popoverFilter) && <SortDropdown config={sort} />}
           </div>
+          {asideEnd}
         </div>
         {trailing && <div className='ml-auto flex shrink-0 items-center gap-1.5'>{trailing}</div>}
       </div>

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/columns-menu/columns-menu.tsx

@@ -80,8 +80,10 @@ export const ColumnsMenu = memo(function ColumnsMenu({
   return (
     <Popover size='md' open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
+        {/* `active` alone signals that something is hidden — the label stays fixed
+            so the bar doesn't reflow as columns are toggled. */}
         <Chip active={hiddenCount > 0} leftIcon={Columns3}>
-          {hiddenCount > 0 ? `Columns (${hiddenCount} hidden)` : 'Columns'}
+          Columns
         </Chip>
       </PopoverTrigger>
       <PopoverContent

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/table.tsx

@@ -979,22 +979,14 @@ export function Table({
         aside={
           <>
             {viewsEnabled && (
-              <>
-                <ViewsMenu
-                  views={views}
-                  activeViewId={activeView?.id ?? null}
-                  onSelect={handleSelectView}
-                  onRename={handleRenameView}
-                  onDelete={handleDeleteView}
-                  canEdit={userPermissions.canEdit}
-                />
-                <ColumnsMenu
-                  columns={columns}
-                  workflowGroups={tableWorkflowGroups}
-                  hiddenColumns={hiddenColumns}
-                  onChange={setHiddenColumns}
-                />
-              </>
+              <ViewsMenu
+                views={views}
+                activeViewId={activeView?.id ?? null}
+                onSelect={handleSelectView}
+                onRename={handleRenameView}
+                onDelete={handleDeleteView}
+                canEdit={userPermissions.canEdit}
+              />
             )}
             {embedded && (selection.totalRunning > 0 || selection.hasActiveDispatch) ? (
               <RunStatusControl
@@ -1006,6 +998,16 @@ export function Table({
             ) : null}
           </>
         }
+        asideEnd={
+          viewsEnabled ? (
+            <ColumnsMenu
+              columns={columns}
+              workflowGroups={tableWorkflowGroups}
+              hiddenColumns={hiddenColumns}
+              onChange={setHiddenColumns}
+            />
+          ) : undefined
+        }
         trailing={
           viewsEnabled && isViewDirty && userPermissions.canEdit ? (
             <Chip onClick={handleSaveView} disabled={updateViewMutation.isPending}>