Completely rewrite BBUI table with divs and with support for custom column widths

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: 200px;
   }
 </style>

packages/bbui/src/Table/CellRenderer.svelte

@@ -28,6 +28,7 @@
   $: type = schema?.type ?? "string"
   $: customRenderer = customRenderers?.find(x => x.column === schema?.name)
   $: renderer = customRenderer?.component ?? typeMap[type] ?? StringRenderer
+  $: width = schema?.width || "150px"
 </script>
 
 {#if renderer && (customRenderer || (value != null && value !== ""))}

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: 200px;
+  }
+</style>

packages/bbui/src/Table/DateTimeRenderer.svelte

@@ -17,6 +17,8 @@
 
 <style>
   div {
-    width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 </style>

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>

packages/bbui/src/Table/StringRenderer.svelte

@@ -8,6 +8,7 @@
   div {
     overflow: hidden;
     text-overflow: ellipsis;
-    width: 150px;
+    white-space: nowrap;
+    max-width: 200px;
   }
 </style>

packages/bbui/src/Table/Table.svelte

@@ -30,6 +30,7 @@
   export let disableSorting = false
 
   const dispatch = createEventDispatcher()
+  rowCount = 8
 
   // Config
   const rowHeight = 55
@@ -45,11 +46,12 @@
   let loaded = false
   $: schema = fixSchema(schema)
   $: if (!loading) loaded = true
-  $: rows = data ?? []
+  $: fields = getFields(schema, showAutoColumns)
+  $: rows = fields?.length ? data || [] : []
   $: visibleRowCount = getVisibleRowCount(loaded, height, rows.length, rowCount)
   $: contentStyle = getContentStyle(visibleRowCount, rowCount)
   $: sortedRows = sortRows(rows, sortColumn, sortOrder)
-  $: fields = getFields(schema, showAutoColumns)
+  $: gridStyle = getGridStyle(fields, schema, showEditColumn)
   $: showEditColumn = allowEditRows || allowSelectRows
 
   // Scrolling state
@@ -107,6 +109,23 @@
     return `height: ${headerHeight + visibleRows * (rowHeight + 1)}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) => {
     if (!sortColumn || !sortOrder || disableSorting) {
       return rows
@@ -215,168 +234,187 @@
   }
 </script>
 
-<div class="wrapper" bind:offsetHeight={height}>
+<div
+  class="wrapper"
+  class:wrapper--quiet={quiet}
+  bind:offsetHeight={height}
+  style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
+>
   {#if !loaded}
     <div class="loading" style={contentStyle} />
   {:else}
     <div
       on:scroll={onScroll}
-      class:quiet
+      class="spectrum-Table"
-      style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
+      style={`${contentStyle}${gridStyle}`}
-      class="container"
     >
-      <div style={contentStyle}>
+      {#if fields.length}
-        <table class="spectrum-Table" class:spectrum-Table--quiet={quiet}>
+        {#if showEditColumn}
-          {#if fields.length}
+          <div class="spectrum-Table-headCell">
-            <thead class="spectrum-Table-head">
+            {editColumnTitle || ""}
-              <tr>
+          </div>
-                {#if showEditColumn}
+        {/if}
-                  <th class="spectrum-Table-headCell">
+        {#each fields as field}
-                    <div class="spectrum-Table-headCell-content">
+          <div
-                      {editColumnTitle || ""}
+            class="spectrum-Table-headCell"
-                    </div>
+            class:is-sortable={schema[field].sortable !== false}
-                  </th>
+            class:is-sorted-desc={sortColumn === field &&
-                {/if}
+              sortOrder === "Descending"}
-                {#each fields as field}
+            class:is-sorted-asc={sortColumn === field &&
-                  <th
+              sortOrder === "Ascending"}
-                    class="spectrum-Table-headCell"
+            on:click={() => sortBy(schema[field])}
-                    class:is-sortable={schema[field].sortable !== false}
+          >
-                    class:is-sorted-desc={sortColumn === field &&
+            <div class="spectrum-Table-headCell-content">
-                      sortOrder === "Descending"}
+              <div class="title">{getDisplayName(schema[field])}</div>
-                    class:is-sorted-asc={sortColumn === field &&
+              {#if schema[field]?.autocolumn}
-                      sortOrder === "Ascending"}
+                <svg
-                    on:click={() => sortBy(schema[field])}
+                  class="spectrum-Icon spectrum-Table-autoIcon"
-                  >
+                  focusable="false"
-                    <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>
-          {/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}
                 >
-                  {#if idx >= firstVisibleRow && idx <= lastVisibleRow}
+                  <use xlink:href="#spectrum-icon-18-MagicWand" />
-                    {#if showEditColumn}
+                </svg>
-                      <td
+              {/if}
-                        class="spectrum-Table-cell spectrum-Table-cell--divider"
+              {#if sortColumn === field}
-                      >
+                <svg
-                        <div class="spectrum-Table-cell-content">
+                  class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
-                          <SelectEditRenderer
+                  focusable="false"
-                            data={row}
+                  aria-hidden="true"
-                            selected={selectedRows.includes(row)}
+                >
-                            onToggleSelection={() => toggleSelectRow(row)}
+                  <use xlink:href="#spectrum-css-icon-Arrow100" />
-                            onEdit={e => editRow(e, row)}
+                </svg>
-                            {allowSelectRows}
+              {/if}
-                            {allowEditRows}
+              {#if allowEditColumns && schema[field]?.editable !== false}
-                          />
+                <svg
-                        </div>
+                  class="spectrum-Icon spectrum-Table-editIcon"
-                      </td>
+                  focusable="false"
-                    {/if}
+                  on:click={e => editColumn(e, field)}
-                    {#each fields as field}
+                >
-                      <td
+                  <use xlink:href="#spectrum-icon-18-Edit" />
-                        class="spectrum-Table-cell"
+                </svg>
-                        class:spectrum-Table-cell--divider={!!schema[field]
+              {/if}
-                          .divider}
+            </div>
-                      >
+          </div>
-                        <div class="spectrum-Table-cell-content">
+        {/each}
-                          <CellRenderer
+      {/if}
-                            {customRenderers}
+      {#if sortedRows?.length}
-                            {row}
+        {#each sortedRows as row, idx}
-                            schema={schema[field]}
+          <div
-                            value={deepGet(row, field)}
+            class="spectrum-Table-row"
-                            on:clickrelationship
+            on:click={() => dispatch("click", row)}
-                          >
+            on:click={() => toggleSelectRow(row)}
-                            <slot />
+          >
-                          </CellRenderer>
+            {#if idx >= firstVisibleRow && idx <= lastVisibleRow}
-                        </div>
+              {#if showEditColumn}
-                      </td>
+                <div
-                    {/each}
+                  class="spectrum-Table-cell spectrum-Table-cell--divider spectrum-Table-cell--edit"
-                  {/if}
+                >
-                </tr>
+                  <SelectEditRenderer
+                    data={row}
+                    selected={selectedRows.includes(row)}
+                    onToggleSelection={() => toggleSelectRow(row)}
+                    onEdit={e => editRow(e, row)}
+                    {allowSelectRows}
+                    {allowEditRows}
+                  />
+                </div>
+              {/if}
+              {#each fields as field}
+                <div
+                  class="spectrum-Table-cell"
+                  class:spectrum-Table-cell--divider={!!schema[field].divider}
+                >
+                  <CellRenderer
+                    {customRenderers}
+                    {row}
+                    schema={schema[field]}
+                    value={deepGet(row, field)}
+                    on:clickrelationship
+                  >
+                    <slot />
+                  </CellRenderer>
+                </div>
               {/each}
             {:else}
-              <tr class="placeholder-row">
+              <div class="spectrum-Table-cell spectrum-Table-cell--empty" />
-                {#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>
             {/if}
-          </tbody>
+          </div>
-        </table>
+        {/each}
-      </div>
+      {: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;
+    --table-bg: var(--spectrum-global-color-gray-50);
+    --table-border: 1px solid var(--spectrum-alias-border-color-mid);
+  }
+  .wrapper--quiet {
+    --table-bg: var(--spectrum-alias-background-color-transparent);
   }
 
-  .container {
+  /* Table */
-    height: 100%;
+  .spectrum-Table {
-    position: relative;
-    overflow: auto;
-  }
-  .container.quiet {
-    border: none;
-  }
-  table {
     width: 100%;
+    overflow: auto;
+    border-radius: 0;
+    background-color: var(--table-bg);
+    display: grid;
   }
 
+  /* Header */
+  .spectrum-Table-head {
+    display: flex;
+    position: sticky;
+    top: 0;
+    width: fit-content;
+    border-bottom: var(--table-border);
+    border-right: 2px solid transparent;
+    min-width: calc(100% - 2px);
+  }
+  .spectrum-Table-headCell {
+    vertical-align: middle;
+    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);
+  }
+  .spectrum-Table-headCell-content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    user-select: none;
+  }
+  .spectrum-Table-headCell-content .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(
@@ -392,63 +430,68 @@
   .spectrum-Table-editIcon {
     opacity: 0;
   }
-  .spectrum-Table-headCell:hover .spectrum-Table-editIcon {
+
-    opacity: 1;
+  /* Table rows */
-    transition: opacity 0.2s ease;
+  .spectrum-Table-row {
+    display: contents;
+  }
+  .spectrum-Table-row:hover .spectrum-Table-cell {
+    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);
+  }
+  .spectrum-Table-row > :last-child {
+    border-right: var(--table-border);
   }
 
-  th {
+  /* Table cells */
-    vertical-align: middle;
+  .spectrum-Table-cell {
-    height: var(--header-height);
+    flex: 1 1 auto;
-    position: sticky;
+    padding-top: 0;
-    top: 0;
+    padding-bottom: 0;
-    z-index: 2;
+    border-top: none;
-    background-color: var(--spectrum-alias-background-color-secondary);
+    border-bottom: none;
-    border-bottom: 1px solid
+    border-radius: 0;
-      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
+    text-overflow: ellipsis;
-  }
-  .spectrum-Table-headCell-content {
     white-space: nowrap;
+    height: var(--row-height);
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    user-select: none;
+    gap: 4px;
+    transition: background-color
+      var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out;
+    border-bottom: 1px solid var(--spectrum-alias-border-color-mid);
   }
-  .spectrum-Table-headCell-content .title {
+  .spectrum-Table-cell--empty {
-    overflow: hidden;
+    grid-column: 1 / -1;
-    text-overflow: ellipsis;
   }
 
-  .placeholder-row {
+  /* Placeholder  */
-    position: relative;
-    height: 150px;
-  }
-  .placeholder-row td {
-    border-top: none !important;
-    border-bottom: none !important;
-  }
-  .placeholder-offset {
-    width: 1px;
-  }
   .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;
   }
-  .placeholder.has-fields {
+  .placeholder--no-fields {
-    top: var(--header-height);
+    border-top: var(--table-border);
-    height: calc(100% - var(--header-height));
+  }
+  .wrapper--quiet .placeholder {
+    border-left: none;
+    border-right: none;
   }
-
   .placeholder-content {
-    padding: 20px;
+    padding: 40px;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -466,41 +509,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>