1
0
Fork 0
mirror of synced 2024-09-11 23:16:00 +12:00

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

This commit is contained in:
Andrew Kingston 2022-02-18 11:58:18 +00:00
parent 6361565dc7
commit dceebb0fc9
7 changed files with 240 additions and 225 deletions

View file

@ -7,5 +7,9 @@
<style> <style>
.bold { .bold {
font-weight: bold; font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 200px;
} }
</style> </style>

View file

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

View file

@ -3,3 +3,12 @@
</script> </script>
<code>{value}</code> <code>{value}</code>
<style>
code {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 200px;
}
</style>

View file

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

View file

@ -43,11 +43,3 @@
<div on:click|stopPropagation={onClick}> <div on:click|stopPropagation={onClick}>
<Icon size="S" name="Copy" /> <Icon size="S" name="Copy" />
</div> </div>
<style>
div {
overflow: hidden;
text-overflow: ellipsis;
width: 150px;
}
</style>

View file

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

View file

@ -30,6 +30,7 @@
export let disableSorting = false export let disableSorting = false
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
rowCount = 8
// Config // Config
const rowHeight = 55 const rowHeight = 55
@ -45,11 +46,12 @@
let loaded = false let loaded = false
$: schema = fixSchema(schema) $: schema = fixSchema(schema)
$: if (!loading) loaded = true $: if (!loading) loaded = true
$: rows = data ?? [] $: fields = getFields(schema, showAutoColumns)
$: rows = fields?.length ? data || [] : []
$: visibleRowCount = getVisibleRowCount(loaded, height, rows.length, rowCount) $: visibleRowCount = getVisibleRowCount(loaded, height, rows.length, rowCount)
$: contentStyle = getContentStyle(visibleRowCount, rowCount) $: contentStyle = getContentStyle(visibleRowCount, rowCount)
$: sortedRows = sortRows(rows, sortColumn, sortOrder) $: sortedRows = sortRows(rows, sortColumn, sortOrder)
$: fields = getFields(schema, showAutoColumns) $: gridStyle = getGridStyle(fields, schema, showEditColumn)
$: showEditColumn = allowEditRows || allowSelectRows $: showEditColumn = allowEditRows || allowSelectRows
// Scrolling state // Scrolling state
@ -107,6 +109,23 @@
return `height: ${headerHeight + visibleRows * (rowHeight + 1)}px;` 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) => { const sortRows = (rows, sortColumn, sortOrder) => {
if (!sortColumn || !sortOrder || disableSorting) { if (!sortColumn || !sortOrder || disableSorting) {
return rows return rows
@ -215,168 +234,187 @@
} }
</script> </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} {#if !loaded}
<div class="loading" style={contentStyle} /> <div class="loading" style={contentStyle} />
{:else} {:else}
<div <div
on:scroll={onScroll} 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} {/each}
{:else} {: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} {/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> </div>
{/if} {/if}
</div> </div>
<style> <style>
/* Wrapper */
.wrapper { .wrapper {
background-color: var(--spectrum-alias-background-color-secondary); background-color: var(--spectrum-alias-background-color-secondary);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
z-index: 0; 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%; 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 { .spectrum-Table-headCell .spectrum-Icon {
pointer-events: all; pointer-events: all;
margin-left: var( margin-left: var(
@ -392,63 +430,68 @@
.spectrum-Table-editIcon { .spectrum-Table-editIcon {
opacity: 0; 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; white-space: nowrap;
height: var(--row-height);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: center; 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 { .placeholder {
top: 0;
height: 100%;
left: 0;
width: 100%;
position: absolute;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: 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 { .placeholder-content {
padding: 20px; padding: 40px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -466,41 +509,4 @@
); );
text-align: center; 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> </style>