styling updates from code review

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

@@ -44,7 +44,7 @@
       customLoadingOverlay: TableLoadingOverlay,
     },
     loadingOverlayComponent: "customLoadingOverlay",
-    animateRows: true
+    animateRows: true,
   }
 
   $: {
@@ -62,22 +62,13 @@
           width: 100,
           cellRenderer: editRowRenderer,
         },
-        {
-          headerName: "",
-          checkboxSelection: true,
-          sortable: false,
-          resizable: false,
-          suppressMovable: true,
-          suppressMenu: true,
-          minWidth: 50,
-          width: 50,
-        },
       ]
     }
 
-    for (let key in schema) {
+    Object.keys(schema || {}).forEach((key, idx) => {
       result.push({
         headerCheckboxSelection: false,
+        checkboxSelection: idx === 0 && allowEditing,
         headerComponent: TableHeader,
         headerComponentParams: {
           field: schema[key],
@@ -94,7 +85,7 @@
         resizable: true,
         minWidth: 200,
       })
-    }
+    })
 
     columnDefs = result
   }

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

@@ -1,5 +1,5 @@
 <script>
-  import { onMount } from "svelte"
+  import { onMount, onDestroy } from "svelte"
   import { Modal, ModalContent } from "@budibase/bbui"
   import CreateEditColumn from "../modals/CreateEditColumn.svelte"
 
@@ -20,8 +20,7 @@
   let sortDirection = ""
   let modal
   let hovered
-
+  let filterActive
-  $: console.log($$restProps)
 
   function toggleMenu() {
     showColumnMenu(menuButton)
@@ -35,10 +34,22 @@
     modal.show()
   }
 
+  function setSort(column) {
+    sortDirection = column.getSort()
+  }
+
+  function setFilterActive(e) {
+    filterActive = e.column.filterActive
+  }
+
   onMount(() => {
-    column.addEventListener("sortChanged", () => {
+    column.addEventListener("sortChanged", setSort)
-      sortDirection = column.getSort()
+    column.addEventListener("filterActiveChanged", setFilterActive)
-    })
+  })
+
+  onDestroy(() => {
+    column.removeEventListener("sortChanged", setSort)
+    column.removeEventListener("filterActiveChanged", setFilterActive)
   })
 </script>
 
@@ -59,14 +70,14 @@
       <CreateEditColumn onClosed={modal.hide} {field} />
     </ModalContent>
   </Modal>
-  <section class:show={hovered}>
+  <section class:show={hovered || filterActive}>
-    {#if editable}
+    {#if editable && hovered}
       <span on:click|stopPropagation={showModal}>
         <i class="ri-pencil-line" />
       </span>
     {/if}
     <span on:click|stopPropagation={toggleMenu} bind:this={menuButton}>
-      <i class="ri-filter-line" />
+      <i class="ri-filter-line" class:active={filterActive} />
     </span>
   </section>
 </header>
@@ -85,7 +96,7 @@
 
   section {
     opacity: 0;
-    transition: 0.2s all;
+    transition: 0.3s all;
   }
 
   section.show {

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

@@ -16,7 +16,9 @@
 <div>
   <TextButton small text on:click={modal.show}>
     <Icon name="delete" />
-    Delete {selectedRows.length} row(s)
+    Delete
+    {selectedRows.length}
+    row(s)
   </TextButton>
 </div>
 <Modal bind:this={modal}>
@@ -25,6 +27,8 @@
     confirmText="Delete"
     onConfirm={confirmDeletion}
     title="Confirm Row Deletion">
-    Are you sure you want to delete {selectedRows.length} row{selectedRows.length > 1 ? 's' : ''}?
+    Are you sure you want to delete
+    {selectedRows.length}
+    row{selectedRows.length > 1 ? 's' : ''}?
   </ModalContent>
 </Modal>

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

@@ -1,5 +1,5 @@
 <script>
-  import { Input, Button, Select, Toggle } from "@budibase/bbui"
+  import { Input, Button, TextButton, Select, Toggle } from "@budibase/bbui"
   import { cloneDeep } from "lodash/fp"
   import { backendUiStore } from "builderStore"
   import { FIELDS } from "constants/backend"
@@ -156,11 +156,11 @@
       thin
       bind:value={field.fieldName} />
   {/if}
-  <footer>
+  <footer class="create-column-options">
-    <Button secondary on:click={onClosed}>Cancel</Button>
     {#if originalName}
-      <Button red on:click={confirmDelete}>Delete Column</Button>
+      <TextButton text on:click={confirmDelete}>Delete Column</TextButton>
     {/if}
+    <Button secondary on:click={onClosed}>Cancel</Button>
     <Button primary on:click={saveColumn}>Save Column</Button>
   </footer>
 </div>
@@ -185,6 +185,10 @@
     gap: var(--spacing-m);
   }
 
+  :global(.create-column-options button:first-child) {
+    margin-right: auto;
+  }
+
   .hidden {
     display: none;
   }