Update filter button to look consistent and add double click to resize columns to default width

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

@@ -21,7 +21,7 @@
   quiet
   {disabled}
   on:click={modal.show}
-  active={tempValue?.length > 0}
+  selected={tempValue?.length > 0}
 >
   Filter
 </ActionButton>

packages/frontend-core/src/components/sheet/ResizeOverlay.svelte

@@ -27,6 +27,7 @@
       class="resize-slider sticky"
       class:visible={column === $stickyColumn.name}
       on:mousedown={e => resize.actions.startResizing($stickyColumn, e)}
+      on:dblclick={() => resize.actions.resetSize($stickyColumn)}
       style="left:{40 + $stickyColumn.width}px;"
     >
       <div class="resize-indicator" />
@@ -37,6 +38,7 @@
       class="resize-slider"
       class:visible={column === column.name}
       on:mousedown={e => resize.actions.startResizing(column, e)}
+      on:dblclick={() => resize.actions.resetSize(column)}
       style={getStyle(column, offset, scrollLeft)}
     >
       <div class="resize-indicator" />

packages/frontend-core/src/components/sheet/stores/columns.js

@@ -1,8 +1,9 @@
 import { derived, get, writable } from "svelte/store"
 
+export const DefaultColumnWidth = 200
+
 export const createColumnsStores = context => {
   const { schema } = context
-  const defaultWidth = 200
   const columns = writable([])
   const stickyColumn = writable(null)
 
@@ -49,7 +50,7 @@ export const createColumnsStores = context => {
         const existing = currentColumns.find(x => x.name === field)
         return {
           name: field,
-          width: existing?.width || defaultWidth,
+          width: existing?.width || DefaultColumnWidth,
           schema: $schema[field],
           visible: existing?.visible ?? true,
         }
@@ -69,7 +70,7 @@ export const createColumnsStores = context => {
     const same = primaryDisplay[0] === get(stickyColumn)?.name
     stickyColumn.set({
       name: primaryDisplay[0],
-      width: same ? existingWidth : defaultWidth,
+      width: same ? existingWidth : DefaultColumnWidth,
       left: 40,
       schema: primaryDisplay[1],
       idx: "sticky",

packages/frontend-core/src/components/sheet/stores/resize.js

@@ -1,4 +1,7 @@
 import { writable, get, derived } from "svelte/store"
+import { DefaultColumnWidth } from "./columns"
+
+export const MinColumnWidth = 100
 
 export const createResizeStores = context => {
   const { columns, stickyColumn } = context
@@ -12,7 +15,6 @@ export const createResizeStores = context => {
   }
   const resize = writable(initialState)
   const isResizing = derived(resize, $resize => $resize.column != null)
-  const MinColumnWidth = 100
 
   // Starts resizing a certain column
   const startResizing = (column, e) => {
@@ -78,11 +80,28 @@ export const createResizeStores = context => {
     document.removeEventListener("mouseup", stopResizing)
   }
 
+  // Resets a column size back to default
+  const resetSize = column => {
+    let columnIdx = get(columns).findIndex(col => col.name === column.name)
+    if (columnIdx === -1) {
+      stickyColumn.update(state => ({
+        ...state,
+        width: DefaultColumnWidth,
+      }))
+    } else {
+      columns.update(state => {
+        state[columnIdx].width = DefaultColumnWidth
+        return [...state]
+      })
+    }
+  }
+
   return {
     resize: {
       ...resize,
       actions: {
         startResizing,
+        resetSize,
       },
     },
     isResizing,

packages/frontend-core/src/components/sheet/stores/rows.js

@@ -168,8 +168,7 @@ export const createRowsStore = context => {
 
   // Refreshes all data
   const refreshData = () => {
-    filter.set([])
-    sort.set(initialSortState)
+    get(fetch)?.getInitialData()
   }
 
   // Updates a value of a row