Update auto column, export and filter buttons to new designs and to support disabled state

packages/builder/src/components/backend/DataTable/DataTable.svelte

@@ -150,14 +150,20 @@
           />
         {/if}
         <HideAutocolumnButton bind:hideAutocolumns />
-        <!-- always have the export last -->
-        <ExportButton view={$tables.selected?._id} />
         <ImportButton
           tableId={$tables.selected?._id}
           on:updaterows={onUpdateRows}
         />
+        <ExportButton
+          disabled={!hasRows || !hasCols}
+          view={$tables.selected?._id}
+        />
         {#key id}
-          <TableFilterButton {schema} on:change={onFilter} />
+          <TableFilterButton
+            {schema}
+            on:change={onFilter}
+            disabled={!hasCols || !hasRows}
+          />
         {/key}
       </div>
     </div>

packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte

@@ -3,11 +3,18 @@
   import ExportModal from "../modals/ExportModal.svelte"
 
   export let view
+  export let disabled = false
 
   let modal
 </script>
 
-<ActionButton icon="DataDownload" size="S" quiet on:click={modal.show}>
+<ActionButton
+  {disabled}
+  icon="DataDownload"
+  size="S"
+  quiet
+  on:click={modal.show}
+>
   Export
 </ActionButton>
 <Modal bind:this={modal}>

packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte

@@ -8,6 +8,12 @@
   }
 </script>
 
-<ActionButton icon="MagicWand" primary size="S" quiet on:click={hideOrUnhide}>
-  {#if hideAutocolumns}Show auto columns{:else}Hide auto columns{/if}
+<ActionButton
+  icon={hideAutocolumns ? "VisibilityOff" : "Visibility"}
+  primary
+  size="S"
+  quiet
+  on:click={hideOrUnhide}
+>
+  Auto columns
 </ActionButton>

packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte

@@ -5,6 +5,7 @@
 
   export let schema
   export let filters
+  export let disabled = false
 
   const dispatch = createEventDispatcher()
   let modal
@@ -17,6 +18,7 @@
   icon="Filter"
   size="S"
   quiet
+  {disabled}
   on:click={modal.show}
   active={tempValue?.length > 0}
 >