Merge branch 'table-cell-config' of github.com:Budibase/budibase into feature/table-row-selection

2022-02-23 12:10:03 +00:00 · 2022-02-23 12:10:03 +00:00 · 653a024d48
parent 0a155c30f6 54ce2d7370
commit 653a024d48
21 changed files with 1542 additions and 360 deletions
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@ -38,6 +38,7 @@
  ],
  "dependencies": {
    "@adobe/spectrum-css-workflow-icons": "^1.2.1",
+    "@budibase/string-templates": "^1.0.72-alpha.0",
    "@spectrum-css/actionbutton": "^1.0.1",
    "@spectrum-css/actiongroup": "^1.0.1",
    "@spectrum-css/avatar": "^3.0.2",
--- a/packages/bbui/src/ColorPicker/ColorPicker.svelte
+++ b/packages/bbui/src/ColorPicker/ColorPicker.svelte
@ -10,6 +10,7 @@
  export let value
  export let size = "M"
  export let spectrumTheme
+  export let alignRight = false

  let open = false

@ -133,6 +134,7 @@
      use:clickOutside={() => (open = false)}
      transition:fly={{ y: -20, duration: 200 }}
      class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
+      class:spectrum-Popover--align-right={alignRight}
    >
      {#each categories as category}
        <div class="category">
@ -250,6 +252,9 @@
    align-items: stretch;
    gap: var(--spacing-xl);
  }
+  .spectrum-Popover--align-right {
+    right: 0;
+  }
  .colors {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@ -1,5 +1,4 @@
 <script>
-  import { slide } from "svelte/transition"
  import Portal from "svelte-portal"
  import Button from "../Button/Button.svelte"
  import Body from "../Typography/Body.svelte"
@ -7,7 +6,9 @@

  export let title
  export let fillWidth
+
  let visible = false
+
  export function show() {
    if (visible) {
      return
@ -21,11 +22,27 @@
    }
    visible = false
  }
+
+  const easeInOutQuad = x => {
+    return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2
+  }
+
+  // Use a custom svelte transition here because the built-in slide
+  // transition has a horrible overshoot
+  const slide = () => {
+    return {
+      duration: 360,
+      css: t => {
+        const translation = 100 - Math.round(easeInOutQuad(t) * 100)
+        return `transform: translateY(${translation}%);`
+      },
+    }
+  }
 </script>

 {#if visible}
  <Portal>
-    <section class:fillWidth class="drawer" transition:slide>
+    <section class:fillWidth class="drawer" transition:slide|local>
      <header>
        <div class="text">
          <Heading size="XS">{title}</Heading>
--- a/packages/bbui/src/Table/AttachmentRenderer.svelte
+++ b/packages/bbui/src/Table/AttachmentRenderer.svelte
@ -17,14 +17,16 @@
 {#each attachments as attachment}
  {#if isImage(attachment.extension)}
    <Link quiet target="_blank" href={attachment.url}>
-      <img src={attachment.url} alt={attachment.extension} />
+      <div class="center">
+        <img src={attachment.url} alt={attachment.extension} />
+      </div>
    </Link>
  {:else}
    <Tooltip text={attachment.name} direction="right">
      <div class="file">
-        <Link quiet target="_blank" href={attachment.url}
-          >{attachment.extension}</Link
-        >
+        <Link quiet target="_blank" href={attachment.url}>
+          {attachment.extension}
+        </Link>
      </div>
    </Tooltip>
  {/if}
@ -38,12 +40,15 @@
    height: 32px;
    max-width: 64px;
  }
+  .center,
  .file {
-    height: 32px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
+  }
+  .file {
+    height: 32px;
    padding: 0 8px;
    color: var(--spectrum-global-color-gray-800);
    border: 1px solid var(--spectrum-global-color-gray-300);
--- a/packages/bbui/src/Table/BoldRenderer.svelte
+++ b/packages/bbui/src/Table/BoldRenderer.svelte
@ -7,5 +7,9 @@
 <style>
  .bold {
    font-weight: bold;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: var(--max-cell-width);
  }
 </style>
--- a/packages/bbui/src/Table/CellRenderer.svelte
+++ b/packages/bbui/src/Table/CellRenderer.svelte
@ -6,6 +6,7 @@
  import AttachmentRenderer from "./AttachmentRenderer.svelte"
  import ArrayRenderer from "./ArrayRenderer.svelte"
  import InternalRenderer from "./InternalRenderer.svelte"
+  import { processStringSync } from "@budibase/string-templates"

  export let row
  export let schema
@ -28,10 +29,33 @@
  $: type = schema?.type ?? "string"
  $: customRenderer = customRenderers?.find(x => x.column === schema?.name)
  $: renderer = customRenderer?.component ?? typeMap[type] ?? StringRenderer
+  $: width = schema?.width || "150px"
+  $: cellValue = getCellValue(value, schema.template)
+
+  const getCellValue = (value, template) => {
+    if (!template) {
+      return value
+    }
+    return processStringSync(template, { value })
+  }
 </script>

-{#if renderer && (customRenderer || (value != null && value !== ""))}
-  <svelte:component this={renderer} {row} {schema} {value} on:clickrelationship>
-    <slot />
-  </svelte:component>
+{#if renderer && (customRenderer || (cellValue != null && cellValue !== ""))}
+  <div style="--max-cell-width: {schema.width ? 'none' : '200px'};">
+    <svelte:component
+      this={renderer}
+      {row}
+      {schema}
+      value={cellValue}
+      on:clickrelationship
+    >
+      <slot />
+    </svelte:component>
+  </div>
 {/if}
+
+<style>
+  div {
+    display: contents;
+  }
+</style>
--- a/packages/bbui/src/Table/CodeRenderer.svelte
+++ b/packages/bbui/src/Table/CodeRenderer.svelte
@ -3,3 +3,12 @@
 </script>

 <code>{value}</code>
+
+<style>
+  code {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: var(--max-cell-width);
+  }
+</style>
--- a/packages/bbui/src/Table/DateTimeRenderer.svelte
+++ b/packages/bbui/src/Table/DateTimeRenderer.svelte
@ -17,6 +17,8 @@

 <style>
  div {
-    width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
  }
 </style>
--- a/packages/bbui/src/Table/InternalRenderer.svelte
+++ b/packages/bbui/src/Table/InternalRenderer.svelte
@ -43,11 +43,3 @@
 <div on:click|stopPropagation={onClick}>
  <Icon size="S" name="Copy" />
 </div>
-
-<style>
-  div {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 150px;
-  }
-</style>
--- a/packages/bbui/src/Table/StringRenderer.svelte
+++ b/packages/bbui/src/Table/StringRenderer.svelte
@ -8,6 +8,7 @@
  div {
    overflow: hidden;
    text-overflow: ellipsis;
-    width: 150px;
+    white-space: nowrap;
+    max-width: var(--max-cell-width);
  }
 </style>
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@ -3,8 +3,9 @@
  import "@spectrum-css/table/dist/index-vars.css"
  import CellRenderer from "./CellRenderer.svelte"
  import SelectEditRenderer from "./SelectEditRenderer.svelte"
-  import Checkbox from "../Form/Checkbox.svelte"
  import { cloneDeep, deepGet } from "../helpers"
+  import ProgressCircle from "../ProgressCircle/ProgressCircle.svelte"
+  import Checkbox from "../Form/Checkbox.svelte"

  /**
   * The expected schema is our normal couch schemas for our tables.
@ -15,6 +16,11 @@
   * sortable: Set to false to disable sorting data by a certain column
   * editable: Set to false to disable editing a certain column if the
   *  allowEditColumns prop is true
+   * width: the width of the column
+   * align: the alignment of the column
+   * template: a HBS or JS binding to use as the value
+   * background: the background color
+   * color: the text color
   */
  export let data = []
  export let schema = {}
@ -26,16 +32,16 @@
  export let allowEditRows = true
  export let allowEditColumns = true
  export let selectedRows = []
-  export let editColumnTitle = "Edit"
  export let customRenderers = []
  export let disableSorting = false
-  export let allowSelectAllRows = false
+  export let autoSortColumns = true
+  export let compact = false

  const dispatch = createEventDispatcher()
+
  // Config
-  const rowHeight = 55
  const headerHeight = 36
-  const rowPreload = 5
+  $: rowHeight = compact ? 46 : 55

  // Sorting state
  let sortColumn
@ -48,14 +54,22 @@

  $: schema = fixSchema(schema)
  $: if (!loading) loaded = true
-  $: rows = data ?? []
-  $: visibleRowCount = getVisibleRowCount(loaded, height, rows.length, rowCount)
-  $: contentStyle = getContentStyle(visibleRowCount, rowCount)
+  $: fields = getFields(schema, showAutoColumns, autoSortColumns)
+  $: rows = fields?.length ? data || [] : []
+  $: visibleRowCount = getVisibleRowCount(
+    loaded,
+    height,
+    rows.length,
+    rowCount,
+    rowHeight
+  )
+  $: contentStyle = getContentStyle(visibleRowCount, rowCount, rowHeight)
  $: sortedRows = sortRows(rows, sortColumn, sortOrder)
-  $: fields = getFields(schema, showAutoColumns)
+  $: gridStyle = getGridStyle(fields, schema, showEditColumn)
  $: showEditColumn = allowEditRows || allowSelectRows
+  $: cellStyles = computeCellStyles(schema)

-  // Deselect the "select all" checkbox whern the user navigates to a new page
+  // Deselect the "select all" checkbox when the user navigates to a new page
  $: {
    let checkRowCount = rows.filter(o1 =>
      selectedRows.some(o2 => o1._id === o2._id)
@ -65,26 +79,6 @@
    }
  }

-  // Scrolling state
-  let timeout
-  let nextScrollTop = 0
-  let scrollTop = 0
-  $: firstVisibleRow = calculateFirstVisibleRow(scrollTop)
-  $: lastVisibleRow = calculateLastVisibleRow(
-    firstVisibleRow,
-    visibleRowCount,
-    rows.length
-  )
-
-  // Reset state when data changes
-  $: rows.length, reset()
-  const reset = () => {
-    nextScrollTop = 0
-    scrollTop = 0
-    clearTimeout(timeout)
-    timeout = null
-  }
-
  const fixSchema = schema => {
    let fixedSchema = {}
    Object.entries(schema || {}).forEach(([fieldName, fieldSchema]) => {
@ -103,7 +97,7 @@
    return fixedSchema
  }

-  const getVisibleRowCount = (loaded, height, allRows, rowCount) => {
+  const getVisibleRowCount = (loaded, height, allRows, rowCount, rowHeight) => {
    if (!loaded) {
      return rowCount || 0
    }
@ -113,11 +107,28 @@
    return Math.min(allRows, Math.ceil(height / rowHeight))
  }

-  const getContentStyle = (visibleRows, rowCount) => {
+  const getContentStyle = (visibleRows, rowCount, rowHeight) => {
    if (!rowCount || !visibleRows) {
      return ""
    }
-    return `height: ${headerHeight + visibleRows * (rowHeight + 1)}px;`
+    return `height: ${headerHeight + visibleRows * rowHeight}px;`
+  }
+
+  const getGridStyle = (fields, schema, showEditColumn) => {
+    let style = "grid-template-columns:"
+    if (showEditColumn) {
+      style += " auto"
+    }
+    fields?.forEach(field => {
+      const fieldSchema = schema[field]
+      if (fieldSchema.width) {
+        style += ` ${fieldSchema.width}`
+      } else {
+        style += " minmax(auto, 1fr)"
+      }
+    })
+    style += ";"
+    return style
  }

  const sortRows = (rows, sortColumn, sortOrder) => {
@ -156,14 +167,14 @@
    return name || ""
  }

-  const getFields = (schema, showAutoColumns) => {
+  const getFields = (schema, showAutoColumns, autoSortColumns) => {
    let columns = []
    let autoColumns = []
    Object.entries(schema || {}).forEach(([field, fieldSchema]) => {
      if (!field || !fieldSchema) {
        return
      }
-      if (!fieldSchema?.autocolumn) {
+      if (!autoSortColumns || !fieldSchema?.autocolumn) {
        columns.push(fieldSchema)
      } else if (showAutoColumns) {
        autoColumns.push(fieldSchema)
@ -184,28 +195,6 @@
      .map(column => column.name)
  }

-  const onScroll = event => {
-    nextScrollTop = event.target.scrollTop
-    if (timeout) {
-      return
-    }
-    timeout = setTimeout(() => {
-      scrollTop = nextScrollTop
-      timeout = null
-    }, 50)
-  }
-
-  const calculateFirstVisibleRow = scrollTop => {
-    return Math.max(Math.floor(scrollTop / (rowHeight + 1)) - rowPreload, 0)
-  }
-
-  const calculateLastVisibleRow = (firstRow, visibleRowCount, allRowCount) => {
-    if (visibleRowCount === 0) {
-      return -1
-    }
-    return Math.min(firstRow + visibleRowCount + 2 * rowPreload, allRowCount)
-  }
-
  const editColumn = (e, field) => {
    e.stopPropagation()
    dispatch("editcolumn", field)
@ -216,22 +205,6 @@
    dispatch("editrow", cloneDeep(row))
  }

-  const toggleSelectAll = e => {
-    if (!allowSelectAllRows) {
-      return
-    }
-
-    if (e.detail) {
-      selectedRows = [...selectedRows, ...rows]
-    } else {
-      //remove every object from selectedRows that is not in rows
-      let filtered = selectedRows.filter(el =>
-        rows.every(f => f._id !== el._id)
-      )
-      selectedRows = filtered
-    }
-  }
-
  const toggleSelectRow = row => {
    if (!allowSelectRows) {
      return
@ -244,180 +217,254 @@
      selectedRows = [...selectedRows, row]
    }
  }
+
+  const toggleSelectAll = e => {
+    if (e.detail) {
+      selectedRows = [...selectedRows, ...rows]
+    } else {
+      //remove every object from selectedRows that is not in rows
+      let filtered = selectedRows.filter(el =>
+        rows.every(f => f._id !== el._id)
+      )
+      selectedRows = filtered
+    }
+  }
+
+  const computeCellStyles = schema => {
+    let styles = {}
+    Object.keys(schema || {}).forEach(field => {
+      styles[field] = ""
+      if (schema[field].color) {
+        styles[field] += `color: ${schema[field].color};`
+      }
+      if (schema[field].background) {
+        styles[field] += `background-color: ${schema[field].background};`
+      }
+      if (schema[field].align === "Center") {
+        styles[field] += "justify-content: center; text-align: center;"
+      }
+      if (schema[field].align === "Right") {
+        styles[field] += "justify-content: flex-end; text-align: right;"
+      }
+    })
+    return styles
+  }
 </script>

-<div class="wrapper" bind:offsetHeight={height}>
+<div
+  class="wrapper"
+  class:wrapper--quiet={quiet}
+  class:wrapper--compact={compact}
+  bind:offsetHeight={height}
+  style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
+>
  {#if !loaded}
-    <div class="loading" style={contentStyle} />
+    <div class="loading" style={contentStyle}>
+      <ProgressCircle />
+    </div>
  {:else}
-    <div
-      on:scroll={onScroll}
-      class:quiet
-      style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
-      class="container"
-    >
-      <div style={contentStyle}>
-        <table class="spectrum-Table" class:spectrum-Table--quiet={quiet}>
-          {#if fields.length}
-            <thead class="spectrum-Table-head">
-              <tr>
-                {#if showEditColumn}
-                  <th class="spectrum-Table-headCell">
-                    <div class="spectrum-Table-headCell-content">
-                      {#if allowSelectAllRows}
-                        <Checkbox
-                          bind:value={checkboxStatus}
-                          on:change={toggleSelectAll}
-                        />
-                      {:else}
-                        {editColumnTitle || ""}
-                      {/if}
-                    </div>
-                  </th>
-                {/if}
-                {#each fields as field}
-                  <th
-                    class="spectrum-Table-headCell"
-                    class:is-sortable={schema[field].sortable !== false}
-                    class:is-sorted-desc={sortColumn === field &&
-                      sortOrder === "Descending"}
-                    class:is-sorted-asc={sortColumn === field &&
-                      sortOrder === "Ascending"}
-                    on:click={() => sortBy(schema[field])}
-                  >
-                    <div class="spectrum-Table-headCell-content">
-                      <div class="title">{getDisplayName(schema[field])}</div>
-                      {#if schema[field]?.autocolumn}
-                        <svg
-                          class="spectrum-Icon spectrum-Table-autoIcon"
-                          focusable="false"
-                        >
-                          <use xlink:href="#spectrum-icon-18-MagicWand" />
-                        </svg>
-                      {/if}
-                      {#if sortColumn === field}
-                        <svg
-                          class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
-                          focusable="false"
-                          aria-hidden="true"
-                        >
-                          <use xlink:href="#spectrum-css-icon-Arrow100" />
-                        </svg>
-                      {/if}
-                      {#if allowEditColumns && schema[field]?.editable !== false}
-                        <svg
-                          class="spectrum-Icon spectrum-Table-editIcon"
-                          focusable="false"
-                          on:click={e => editColumn(e, field)}
-                        >
-                          <use xlink:href="#spectrum-icon-18-Edit" />
-                        </svg>
-                      {/if}
-                    </div>
-                  </th>
-                {/each}
-              </tr>
-            </thead>
+    <div class="spectrum-Table" style={`${contentStyle}${gridStyle}`}>
+      {#if fields.length}
+        <div class="spectrum-Table-head">
+          {#if showEditColumn}
+            <div
+              class="spectrum-Table-headCell spectrum-Table-headCell--divider spectrum-Table-headCell--edit"
+            >
+              {#if allowSelectRows}
+                <Checkbox
+                  bind:value={checkboxStatus}
+                  on:change={toggleSelectAll}
+                />
+              {:else}
+                Edit
+              {/if}
+            </div>
          {/if}
-          <tbody class="spectrum-Table-body">
-            {#if sortedRows?.length && fields.length}
-              {#each sortedRows as row, idx}
-                <tr
-                  on:click={() => dispatch("click", row)}
-                  on:click={() => toggleSelectRow(row)}
-                  class="spectrum-Table-row"
-                  class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}
+          {#each fields as field}
+            <div
+              class="spectrum-Table-headCell"
+              class:spectrum-Table-headCell--alignCenter={schema[field]
+                .align === "Center"}
+              class:spectrum-Table-headCell--alignRight={schema[field].align ===
+                "Right"}
+              class:is-sortable={schema[field].sortable !== false}
+              class:is-sorted-desc={sortColumn === field &&
+                sortOrder === "Descending"}
+              class:is-sorted-asc={sortColumn === field &&
+                sortOrder === "Ascending"}
+              on:click={() => sortBy(schema[field])}
+            >
+              <div class="title">{getDisplayName(schema[field])}</div>
+              {#if schema[field]?.autocolumn}
+                <svg
+                  class="spectrum-Icon spectrum-Table-autoIcon"
+                  focusable="false"
                >
-                  {#if idx >= firstVisibleRow && idx <= lastVisibleRow}
-                    {#if showEditColumn}
-                      <td
-                        class="spectrum-Table-cell spectrum-Table-cell--divider"
-                      >
-                        <div class="spectrum-Table-cell-content">
-                          <SelectEditRenderer
-                            data={row}
-                            selected={selectedRows.findIndex(
-                              selectedRow => selectedRow._id === row._id
-                            ) !== -1}
-                            onToggleSelection={() => toggleSelectRow(row)}
-                            onEdit={e => editRow(e, row)}
-                            {allowSelectRows}
-                            {allowEditRows}
-                          />
-                        </div>
-                      </td>
-                    {/if}
-                    {#each fields as field}
-                      <td
-                        class="spectrum-Table-cell"
-                        class:spectrum-Table-cell--divider={!!schema[field]
-                          .divider}
-                      >
-                        <div class="spectrum-Table-cell-content">
-                          <CellRenderer
-                            {customRenderers}
-                            {row}
-                            schema={schema[field]}
-                            value={deepGet(row, field)}
-                            on:clickrelationship
-                          >
-                            <slot />
-                          </CellRenderer>
-                        </div>
-                      </td>
-                    {/each}
-                  {/if}
-                </tr>
-              {/each}
-            {:else}
-              <tr class="placeholder-row">
-                {#if showEditColumn}
-                  <td class="placeholder-offset" />
-                {/if}
-                {#each fields as field}
-                  <td />
-                {/each}
-                <div class="placeholder" class:has-fields={fields.length > 0}>
-                  <div class="placeholder-content">
-                    <svg
-                      class="spectrum-Icon spectrum-Icon--sizeXXL"
-                      focusable="false"
-                    >
-                      <use xlink:href="#spectrum-icon-18-Table" />
-                    </svg>
-                    <div>No rows found</div>
-                  </div>
-                </div>
-              </tr>
+                  <use xlink:href="#spectrum-icon-18-MagicWand" />
+                </svg>
+              {/if}
+              {#if sortColumn === field}
+                <svg
+                  class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
+                  focusable="false"
+                  aria-hidden="true"
+                >
+                  <use xlink:href="#spectrum-css-icon-Arrow100" />
+                </svg>
+              {/if}
+              {#if allowEditColumns && schema[field]?.editable !== false}
+                <svg
+                  class="spectrum-Icon spectrum-Table-editIcon"
+                  focusable="false"
+                  on:click={e => editColumn(e, field)}
+                >
+                  <use xlink:href="#spectrum-icon-18-Edit" />
+                </svg>
+              {/if}
+            </div>
+          {/each}
+        </div>
+      {/if}
+      {#if sortedRows?.length}
+        {#each sortedRows as row, idx}
+          <div
+            class="spectrum-Table-row"
+            on:click={() => dispatch("click", row)}
+            on:click={() => toggleSelectRow(row)}
+          >
+            {#if showEditColumn}
+              <div
+                class="spectrum-Table-cell spectrum-Table-cell--divider spectrum-Table-cell--edit"
+              >
+                <SelectEditRenderer
+                  data={row}
+                  selected={selectedRows.findIndex(
+                    selectedRow => selectedRow._id === row._id
+                  ) !== -1}
+                  onToggleSelection={() => toggleSelectRow(row)}
+                  onEdit={e => editRow(e, row)}
+                  {allowSelectRows}
+                  {allowEditRows}
+                />
+              </div>
            {/if}
-          </tbody>
-        </table>
-      </div>
+            {#each fields as field}
+              <div
+                class="spectrum-Table-cell"
+                class:spectrum-Table-cell--divider={!!schema[field].divider}
+                style={cellStyles[field]}
+              >
+                <CellRenderer
+                  {customRenderers}
+                  {row}
+                  schema={schema[field]}
+                  value={deepGet(row, field)}
+                  on:clickrelationship
+                >
+                  <slot />
+                </CellRenderer>
+              </div>
+            {/each}
+          </div>
+        {/each}
+      {:else}
+        <div class="placeholder" class:placeholder--no-fields={!fields?.length}>
+          <div class="placeholder-content">
+            <svg class="spectrum-Icon spectrum-Icon--sizeXXL" focusable="false">
+              <use xlink:href="#spectrum-icon-18-Table" />
+            </svg>
+            <div>No rows found</div>
+          </div>
+        </div>
+      {/if}
    </div>
  {/if}
 </div>

 <style>
+  /* Wrapper */
  .wrapper {
-    background-color: var(--spectrum-alias-background-color-secondary);
-    overflow: hidden;
    position: relative;
    z-index: 0;
-    cursor: pointer;
+    --table-bg: var(--spectrum-global-color-gray-50);
+    --table-border: 1px solid var(--spectrum-alias-border-color-mid);
+    --cell-padding: var(--spectrum-global-dimension-size-250);
+  }
+  .wrapper--quiet {
+    --table-bg: var(--spectrum-alias-background-color-transparent);
+  }
+  .wrapper--compact {
+    --cell-padding: var(--spectrum-global-dimension-size-150);
  }

-  .container {
-    height: 100%;
-    position: relative;
+  /* Loading */
+  .loading {
+    display: grid;
+    place-items: center;
+    min-height: 100px;
+  }
+
+  /* Table */
+  .spectrum-Table {
+    width: 100%;
+    border-radius: 0;
+    display: grid;
    overflow: auto;
  }
-  .container.quiet {
-    border: none;
-  }
-  table {
-    width: 100%;
-  }

+  /* Header */
+  .spectrum-Table-head {
+    display: contents;
+  }
+  .spectrum-Table-head > :first-child {
+    border-left: 1px solid transparent;
+    padding-left: var(--cell-padding);
+  }
+  .spectrum-Table-head > :last-child {
+    border-right: 1px solid transparent;
+    padding-right: var(--cell-padding);
+  }
+  .spectrum-Table-headCell {
+    height: var(--header-height);
+    position: sticky;
+    top: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    background-color: var(--spectrum-alias-background-color-secondary);
+    z-index: 2;
+    border-bottom: var(--table-border);
+    padding: 0 calc(var(--cell-padding) / 1.33);
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    user-select: none;
+  }
+  .spectrum-Table-headCell--alignCenter {
+    justify-content: center;
+  }
+  .spectrum-Table-headCell--alignRight {
+    justify-content: flex-end;
+  }
+  .spectrum-Table-headCell--divider {
+    padding-right: var(--cell-padding);
+  }
+  .spectrum-Table-headCell--divider + .spectrum-Table-headCell {
+    padding-left: var(--cell-padding);
+  }
+  .spectrum-Table-headCell--edit {
+    position: sticky;
+    left: 0;
+    z-index: 3;
+  }
+  .spectrum-Table-headCell .title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .spectrum-Table-headCell:hover .spectrum-Table-editIcon {
+    opacity: 1;
+    transition: opacity 0.2s ease;
+  }
  .spectrum-Table-headCell .spectrum-Icon {
    pointer-events: all;
    margin-left: var(
@ -433,63 +480,93 @@
  .spectrum-Table-editIcon {
    opacity: 0;
  }
-  .spectrum-Table-headCell:hover .spectrum-Table-editIcon {
-    opacity: 1;
-    transition: opacity 0.2s ease;
+
+  /* Table rows */
+  .spectrum-Table-row {
+    display: contents;
+  }
+  .spectrum-Table-row:hover .spectrum-Table-cell {
+    /*background-color: var(--hover-bg) !important;*/
+  }
+  .spectrum-Table-row:hover .spectrum-Table-cell:after {
+    background-color: var(--spectrum-alias-highlight-hover);
+  }
+  .wrapper--quiet .spectrum-Table-row {
+    border-left: none;
+    border-right: none;
+  }
+  .spectrum-Table-row > :first-child {
+    border-left: var(--table-border);
+    padding-left: var(--cell-padding);
+  }
+  .spectrum-Table-row > :last-child {
+    border-right: var(--table-border);
+    padding-right: var(--cell-padding);
  }

-  th {
-    vertical-align: middle;
-    height: var(--header-height);
-    position: sticky;
-    top: 0;
-    z-index: 2;
-    background-color: var(--spectrum-alias-background-color-secondary);
-    border-bottom: 1px solid
-      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
-  }
-  .spectrum-Table-headCell-content {
+  /* Table cells */
+  .spectrum-Table-cell {
+    flex: 1 1 auto;
+    padding: 0 calc(var(--cell-padding) / 1.33);
+    border-top: none;
+    border-bottom: none;
+    border-radius: 0;
+    text-overflow: ellipsis;
    white-space: nowrap;
+    height: var(--row-height);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
-    user-select: none;
+    gap: 4px;
+    border-bottom: 1px solid var(--spectrum-alias-border-color-mid);
+    background-color: var(--table-bg);
+    z-index: 1;
  }
-  .spectrum-Table-headCell-content .title {
-    overflow: hidden;
-    text-overflow: ellipsis;
+  .spectrum-Table-cell--divider {
+    padding-right: var(--cell-padding);
+  }
+  .spectrum-Table-cell--divider + .spectrum-Table-cell {
+    padding-left: var(--cell-padding);
+  }
+  .spectrum-Table-cell--edit {
+    position: sticky;
+    left: 0;
+    z-index: 2;
+  }
+  .spectrum-Table-cell:after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    transition: background-color
+      var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out;
  }

-  .placeholder-row {
-    position: relative;
-    height: 150px;
-  }
-  .placeholder-row td {
-    border-top: none !important;
-    border-bottom: none !important;
-  }
-  .placeholder-offset {
-    width: 1px;
-  }
+  /* Placeholder  */
  .placeholder {
-    top: 0;
-    height: 100%;
-    left: 0;
-    width: 100%;
-    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
+    border: var(--table-border);
+    border-top: none;
+    grid-column: 1 / -1;
+    background-color: var(--table-bg);
  }
-  .placeholder.has-fields {
-    top: var(--header-height);
-    height: calc(100% - var(--header-height));
+  .placeholder--no-fields {
+    border-top: var(--table-border);
+  }
+  .wrapper--quiet .placeholder {
+    border-left: none;
+    border-right: none;
  }
-
  .placeholder-content {
-    padding: 20px;
+    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
@ -507,41 +584,4 @@
    );
    text-align: center;
  }
-
-  tbody {
-    z-index: 1;
-  }
-  tbody tr {
-    height: var(--row-height);
-  }
-  tbody tr.hidden {
-    height: calc(var(--row-height) + 1px);
-  }
-  td {
-    padding-top: 0;
-    padding-bottom: 0;
-    border-bottom: none;
-    border-top: 1px solid
-      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
-    border-radius: 0;
-  }
-  tr:first-child td {
-    border-top: none;
-  }
-  tr:last-child td {
-    border-bottom: 1px solid
-      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
-  }
-  td.spectrum-Table-cell--divider {
-    width: 1px;
-  }
-  .spectrum-Table-cell-content {
-    height: var(--row-height);
-    white-space: nowrap;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 4px;
-  }
 </style>
--- a/packages/bbui/yarn.lock
+++ b/packages/bbui/yarn.lock
--- a/packages/builder/src/components/backend/DataTable/DataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte
@ -98,7 +98,7 @@
    tableId={id}
    data={$fetch.rows}
    bind:hideAutocolumns
-    loading={$fetch.loading}
+    loading={!$fetch.loaded}
    on:sort={onSort}
    allowEditing
    disableSorting
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@ -136,7 +136,7 @@
    </div>
  </div>
  {#key tableId}
-    <div class="table-wrapper" in:fade={{ delay: 200, duration: 100 }}>
+    <div class="table-wrapper">
      <Table
        {data}
        {schema}
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/CellDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/CellDrawer.svelte
@ -0,0 +1,66 @@
+<script>
+  import {
+    Input,
+    Select,
+    ColorPicker,
+    DrawerContent,
+    Layout,
+    Label,
+  } from "@budibase/bbui"
+  import { store } from "builderStore"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+
+  export let column
+</script>
+
+<DrawerContent>
+  <div class="container">
+    <Layout noPadding gap="S">
+      <Input bind:value={column.width} label="Width" placeholder="Auto" />
+      <Select
+        label="Alignment"
+        bind:value={column.align}
+        options={["Left", "Center", "Right"]}
+        placeholder="Default"
+      />
+      <DrawerBindableInput
+        label="Value"
+        value={column.template}
+        on:change={e => (column.template = e.detail)}
+        placeholder={`{{ Value }}`}
+        bindings={[
+          {
+            readableBinding: "Value",
+            runtimeBinding: "[value]",
+          },
+        ]}
+      />
+      <Layout noPadding gap="XS">
+        <Label>Background color</Label>
+        <ColorPicker
+          value={column.background}
+          on:change={e => (column.background = e.detail)}
+          alignRight
+          spectrumTheme={$store.theme}
+        />
+      </Layout>
+      <Layout noPadding gap="XS">
+        <Label>Text color</Label>
+        <ColorPicker
+          value={column.color}
+          on:change={e => (column.color = e.detail)}
+          alignRight
+          spectrumTheme={$store.theme}
+        />
+      </Layout>
+    </Layout>
+  </div>
+</DrawerContent>
+
+<style>
+  .container {
+    width: 100%;
+    max-width: 240px;
+    margin: 0 auto;
+  }
+</style>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/CellEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/CellEditor.svelte
@ -0,0 +1,34 @@
+<script>
+  import { Drawer, Button, Icon } from "@budibase/bbui"
+  import CellDrawer from "./CellDrawer.svelte"
+
+  export let column
+
+  let boundValue
+  let drawer
+
+  $: updateBoundValue(column)
+
+  const updateBoundValue = value => {
+    boundValue = { ...value }
+  }
+
+  const open = () => {
+    updateBoundValue(column)
+    drawer.show()
+  }
+
+  const save = () => {
+    column = boundValue
+    drawer.hide()
+  }
+</script>
+
+<Icon name="Settings" hoverable size="S" on:click={open} />
+<Drawer bind:this={drawer} title="Table Columns">
+  <svelte:fragment slot="description">
+    "{column.name}" column settings
+  </svelte:fragment>
+  <Button cta slot="buttons" on:click={save}>Save</Button>
+  <CellDrawer slot="body" bind:column={boundValue} />
+</Drawer>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte
@ -4,17 +4,19 @@
    Icon,
    DrawerContent,
    Layout,
-    Input,
    Select,
    Label,
    Body,
+    Input,
  } from "@budibase/bbui"
  import { flip } from "svelte/animate"
  import { dndzone } from "svelte-dnd-action"
  import { generate } from "shortid"
+  import CellEditor from "./CellEditor.svelte"

  export let columns = []
  export let options = []
+  export let schema = {}

  const flipDurationMs = 150
  let dragDisabled = true
@ -61,11 +63,23 @@
    dragDisabled = true
  }

+  const addAllColumns = () => {
+    let newColumns = columns || []
+    options.forEach(field => {
+      const fieldSchema = schema[field]
+      const hasCol = columns && columns.findIndex(x => x.name === field) !== -1
+      if (!fieldSchema?.autocolumn && !hasCol) {
+        newColumns.push({
+          name: field,
+          displayName: field,
+        })
+      }
+    })
+    columns = newColumns
+  }
+
  const reset = () => {
-    columns = options.map(col => ({
-      name: col,
-      displayName: col,
-    }))
+    columns = []
  }
 </script>

@ -79,6 +93,7 @@
            <Label size="L">Column</Label>
            <Label size="L">Label</Label>
            <div />
+            <div />
          </div>
          <div
            class="columns"
@ -108,6 +123,7 @@
                  on:change={e => (column.displayName = e.detail)}
                />
                <Input bind:value={column.displayName} placeholder="Label" />
+                <CellEditor bind:column />
                <Icon
                  name="Close"
                  hoverable
@ -121,19 +137,25 @@
        </Layout>
      {:else}
        <div class="column">
-          <div />
-          <Body size="S">Add the first column to your table.</Body>
+          <div class="wide">
+            <Body size="S">
+              By default, all table columns will automatically be shown.
+              <br />
+              You can manually control which columns are included in your table,
+              and their appearance, by adding them below.
+            </Body>
+          </div>
        </div>
      {/if}
-      <div class="columns">
-        <div class="column">
-          <div />
-          <div class="buttons">
-            <Button secondary icon="Add" on:click={addColumn}>
-              Add column
-            </Button>
+      <div class="column">
+        <div class="buttons wide">
+          <Button secondary icon="Add" on:click={addColumn}>Add column</Button>
+          <Button secondary quiet on:click={addAllColumns}>
+            Add all columns
+          </Button>
+          {#if columns?.length}
            <Button secondary quiet on:click={reset}>Reset columns</Button>
-          </div>
+          {/if}
        </div>
      </div>
    </Layout>
@ -156,7 +178,7 @@
  .column {
    gap: var(--spacing-l);
    display: grid;
-    grid-template-columns: 20px 1fr 1fr 20px;
+    grid-template-columns: 20px 1fr 1fr auto auto;
    align-items: center;
    border-radius: var(--border-radius-s);
    transition: background-color ease-in-out 130ms;
@ -168,6 +190,9 @@
    display: grid;
    place-items: center;
  }
+  .wide {
+    grid-column: 2 / -1;
+  }
  .buttons {
    display: flex;
    flex-direction: row;
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnEditor.svelte
@ -18,22 +18,30 @@
  let boundValue

  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
-  $: schema = getSchemaForDatasource($currentAsset, datasource).schema
+  $: schema = getSchema($currentAsset, datasource)
  $: options = Object.keys(schema || {})
  $: sanitisedValue = getValidColumns(value, options)
  $: updateBoundValue(sanitisedValue)

+  const getSchema = (asset, datasource) => {
+    const schema = getSchemaForDatasource(asset, datasource).schema
+
+    // Don't show ID and rev in tables
+    if (schema) {
+      delete schema._id
+      delete schema._rev
+    }
+
+    return schema
+  }
+
  const updateBoundValue = value => {
    boundValue = cloneDeep(value)
  }

  const getValidColumns = (columns, options) => {
-    // If no columns then default to all columns
    if (!Array.isArray(columns) || !columns.length) {
-      return options.map(col => ({
-        name: col,
-        displayName: col,
-      }))
+      return []
    }
    // We need to account for legacy configs which would just be an array
    // of strings
@ -48,17 +56,22 @@
    })
  }

+  const open = () => {
+    updateBoundValue(sanitisedValue)
+    drawer.show()
+  }
+
  const save = () => {
    dispatch("change", getValidColumns(boundValue, options))
    drawer.hide()
  }
 </script>

-<ActionButton on:click={drawer.show}>Configure columns</ActionButton>
+<ActionButton on:click={open}>Configure columns</ActionButton>
 <Drawer bind:this={drawer} title="Table Columns">
  <svelte:fragment slot="description">
    Configure the columns in your table.
  </svelte:fragment>
  <Button cta slot="buttons" on:click={save}>Save</Button>
-  <ColumnDrawer slot="body" bind:columns={boundValue} {options} />
+  <ColumnDrawer slot="body" bind:columns={boundValue} {options} {schema} />
 </Drawer>
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@ -2680,7 +2680,8 @@
        "type": "columns",
        "label": "Columns",
        "key": "columns",
-        "dependsOn": "dataProvider"
+        "dependsOn": "dataProvider",
+        "nested": true
      },
      {
        "type": "select",
@ -2703,6 +2704,11 @@
        "label": "Quiet",
        "key": "quiet"
      },
+      {
+        "type": "boolean",
+        "label": "Compact",
+        "key": "compact"
+      },
      {
        "type": "boolean",
        "label": "Show auto columns",
@ -2965,6 +2971,11 @@
            "label": "Quiet table variant",
            "key": "quiet"
          },
+          {
+            "type": "boolean",
+            "label": "Compact",
+            "key": "compact"
+          },
          {
            "type": "boolean",
            "label": "Show auto columns",
--- a/packages/client/src/components/app/blocks/TableBlock.svelte
+++ b/packages/client/src/components/app/blocks/TableBlock.svelte
@ -16,6 +16,7 @@
  export let showAutoColumns
  export let rowCount
  export let quiet
+  export let compact
  export let size
  export let linkRows
  export let linkURL
@ -162,6 +163,7 @@
              showAutoColumns,
              rowCount,
              quiet,
+              compact,
              size,
              linkRows,
              linkURL,
--- a/packages/client/src/components/app/table/Table.svelte
+++ b/packages/client/src/components/app/table/Table.svelte
@ -15,6 +15,7 @@
  export let linkColumn
  export let linkPeek
  export let allowSelectRows
+  export let compact

  const component = getContext("component")
  const { styleable, getAction, ActionTypes, routeStore, rowSelectionStore } =
@ -80,6 +81,7 @@
        order: 0,
        sortable: false,
        divider: true,
+        width: "auto",
      }
    }

@ -92,8 +94,13 @@
      if (UnsortableTypes.includes(schema[columnName].type)) {
        newSchema[columnName].sortable = false
      }
-      if (field?.displayName) {
-        newSchema[columnName].displayName = field?.displayName
+
+      // Add additional settings like width etc
+      if (typeof field === "object") {
+        newSchema[columnName] = {
+          ...newSchema[columnName],
+          ...field,
+        }
      }
    })
    return newSchema
@ -127,14 +134,15 @@
    {loading}
    {rowCount}
    {quiet}
+    {compact}
    {customRenderers}
    {allowSelectRows}
    bind:selectedRows
-    allowSelectAllRows={true}
    allowEditRows={false}
    allowEditColumns={false}
    showAutoColumns={true}
    disableSorting
+    autoSortColumns={!columns?.length}
    on:sort={onSort}
    on:click={onClick}
  >