Improve table props and update table to work with views

packages/bbui/src/Table/Table.svelte

@@ -14,8 +14,7 @@
   export let allowEditRows = true
   export let allowEditColumns = true
   export let selectedRows = []
-  export let customColumnRenderer = SelectEditRenderer
+  export let editColumnTitle = "Edit"
-  export let customColumnTitle = null
   export let customRenderers = []
 
   const dispatch = createEventDispatcher()
@@ -41,6 +40,7 @@
   $: contentStyle = getContentStyle(visibleRowCount, scroll || !loaded)
   $: sortedRows = sortRows(rows, sortColumn, sortOrder)
   $: fields = getFields(schema, showAutoColumns)
+  $: showEditColumn = allowEditRows || allowSelectRows
 
   // Scrolling state
   let timeout
@@ -155,10 +155,10 @@
       <table class="spectrum-Table" class:spectrum-Table--quiet={quiet}>
         <thead class="spectrum-Table-head">
           <tr>
-            {#if customColumnRenderer}
+            {#if showEditColumn}
               <th class="spectrum-Table-headCell">
                 <div class="spectrum-Table-headCell-content">
-                  {customColumnTitle || ''}
+                  {editColumnTitle || ''}
                 </div>
               </th>
             {/if}
@@ -208,12 +208,11 @@
                 class="spectrum-Table-row"
                 class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}>
                 {#if idx >= firstVisibleRow && idx <= lastVisibleRow}
-                  {#if customColumnRenderer}
+                  {#if showEditColumn}
                     <td
                       class="spectrum-Table-cell spectrum-Table-cell--divider">
                       <div class="spectrum-Table-cell-content">
-                        <svelte:component
+                        <SelectEditRenderer
-                          this={customColumnRenderer}
                           data={row}
                           selected={selectedRows.includes(row)}
                           onToggleSelection={() => toggleSelectRow(row)}

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

@@ -23,7 +23,6 @@
   export let theme = "alpine"
   export let hideAutocolumns
 
-  let columnDefs = []
   let selectedRows = []
   let editableColumn
   let editableRow
@@ -32,6 +31,7 @@
   let customRenderers = []
 
   $: isUsersTable = tableId === TableNames.USERS
+  $: data && resetSelectedRows()
   $: editRowComponent = isUsersTable ? CreateEditUser : CreateEditRow
   $: {
     if (isUsersTable) {
@@ -54,7 +54,11 @@
     }
   }
 
-  function selectRelationship(row, fieldName) {
+  const resetSelectedRows = () => {
+    selectedRows = []
+  }
+
+  const selectRelationship = (row, fieldName) => {
     if (!row?.[fieldName]?.length) {
       return
     }
@@ -110,8 +114,10 @@
     {schema}
     {loading}
     {customRenderers}
-    customColumnTitle="Edit"
     bind:selectedRows
+    allowSelectRows={allowEditing}
+    allowEditRows={allowEditing}
+    allowEditColumns={allowEditing}
     showAutoColumns={!hideAutocolumns}
     on:editcolumn={e => editColumn(e.detail)}
     on:editrow={e => editRow(e.detail)} />

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

@@ -57,6 +57,7 @@
   tableId={view.tableId}
   {data}
   {loading}
+  allowEditing={!view?.calculation}
   bind:hideAutocolumns>
   <FilterButton {view} />
   <CalculateButton {view} />