MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add support for alignment, text color and background color in tables and improve padding compatibility with table sizes

This commit is contained in:
Andrew Kingston 2022-02-18 20:14:56 +00:00
parent a3ff47c48f
commit db9c1b2b05
1 changed files with 95 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
packages/bbui/src/Table/Table.svelte
View File

@ -36,8 +36,8 @@
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
// Config // Config
$: rowHeight = compact ? 46 : 55
const headerHeight = 36 const headerHeight = 36
$: rowHeight = compact ? 46 : 55
// Sorting state // Sorting state
let sortColumn let sortColumn
@ -50,11 +50,18 @@
$: if (!loading) loaded = true $: if (!loading) loaded = true
$: fields = getFields(schema, showAutoColumns, autoSortColumns) $: fields = getFields(schema, showAutoColumns, autoSortColumns)
$: rows = fields?.length ? data || [] : [] $: rows = fields?.length ? data || [] : []
$: visibleRowCount = getVisibleRowCount(loaded, height, rows.length, rowCount) $: visibleRowCount = getVisibleRowCount(
$: contentStyle = getContentStyle(visibleRowCount, rowCount) loaded,
height,
rows.length,
rowCount,
rowHeight
)
$: contentStyle = getContentStyle(visibleRowCount, rowCount, rowHeight)
$: sortedRows = sortRows(rows, sortColumn, sortOrder) $: sortedRows = sortRows(rows, sortColumn, sortOrder)
$: gridStyle = getGridStyle(fields, schema, showEditColumn) $: gridStyle = getGridStyle(fields, schema, showEditColumn)
$: showEditColumn = allowEditRows || allowSelectRows $: showEditColumn = allowEditRows || allowSelectRows
$: cellStyles = computeCellStyles(schema)
const fixSchema = schema => { const fixSchema = schema => {
let fixedSchema = {} let fixedSchema = {}
@ -74,7 +81,7 @@
return fixedSchema return fixedSchema
} }
const getVisibleRowCount = (loaded, height, allRows, rowCount) => { const getVisibleRowCount = (loaded, height, allRows, rowCount, rowHeight) => {
if (!loaded) { if (!loaded) {
return rowCount || 0 return rowCount || 0
} }
@ -84,7 +91,7 @@
return Math.min(allRows, Math.ceil(height / rowHeight)) return Math.min(allRows, Math.ceil(height / rowHeight))
} }
const getContentStyle = (visibleRows, rowCount) => { const getContentStyle = (visibleRows, rowCount, rowHeight) => {
if (!rowCount || !visibleRows) { if (!rowCount || !visibleRows) {
return "" return ""
} }
@ -192,6 +199,26 @@
selectedRows = [...selectedRows, row] selectedRows = [...selectedRows, row]
} }
} }
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> </script>
<div <div
@ -208,24 +235,28 @@
{:else} {:else}
<div class="spectrum-Table" style={`${contentStyle}${gridStyle}`}> <div class="spectrum-Table" style={`${contentStyle}${gridStyle}`}>
{#if fields.length} {#if fields.length}
{#if showEditColumn} <div class="spectrum-Table-head">
<div {#if showEditColumn}
class="spectrum-Table-headCell spectrum-Table-headCell--divider spectrum-Table-headCell--edit" <div
> class="spectrum-Table-headCell spectrum-Table-headCell--divider spectrum-Table-headCell--edit"
{editColumnTitle || ""} >
</div> {editColumnTitle || ""}
{/if} </div>
{#each fields as field} {/if}
<div {#each fields as field}
class="spectrum-Table-headCell" <div
class:is-sortable={schema[field].sortable !== false} class="spectrum-Table-headCell"
class:is-sorted-desc={sortColumn === field && class:spectrum-Table-headCell--alignCenter={schema[field]
sortOrder === "Descending"} .align === "Center"}
class:is-sorted-asc={sortColumn === field && class:spectrum-Table-headCell--alignRight={schema[field].align ===
sortOrder === "Ascending"} "Right"}
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"}
class:is-sorted-asc={sortColumn === field &&
sortOrder === "Ascending"}
on:click={() => sortBy(schema[field])}
>
<div class="title">{getDisplayName(schema[field])}</div> <div class="title">{getDisplayName(schema[field])}</div>
{#if schema[field]?.autocolumn} {#if schema[field]?.autocolumn}
<svg <svg
@ -254,8 +285,8 @@
</svg> </svg>
{/if} {/if}
</div> </div>
</div> {/each}
{/each} </div>
{/if} {/if}
{#if sortedRows?.length} {#if sortedRows?.length}
{#each sortedRows as row, idx} {#each sortedRows as row, idx}
@ -282,6 +313,7 @@
<div <div
class="spectrum-Table-cell" class="spectrum-Table-cell"
class:spectrum-Table-cell--divider={!!schema[field].divider} class:spectrum-Table-cell--divider={!!schema[field].divider}
style={cellStyles[field]}
> >
<CellRenderer <CellRenderer
{customRenderers} {customRenderers}
@ -317,17 +349,15 @@
z-index: 0; z-index: 0;
--table-bg: var(--spectrum-global-color-gray-50); --table-bg: var(--spectrum-global-color-gray-50);
--table-border: 1px solid var(--spectrum-alias-border-color-mid); --table-border: 1px solid var(--spectrum-alias-border-color-mid);
--cell-padding: 20px;
--hover-bg: var(--spectrum-global-color-gray-100); --hover-bg: var(--spectrum-global-color-gray-100);
--cell-padding: var(--spectrum-global-dimension-size-250);
} }
.wrapper--quiet { .wrapper--quiet {
--table-bg: var(--spectrum-alias-background-color-transparent); --table-bg: var(--spectrum-alias-background-color-transparent);
--hover-bg: var(--spectrum-global-color-gray-200); --hover-bg: var(--spectrum-global-color-gray-200);
} }
.wrapper--compact { .wrapper--compact {
/*--spectrum-table-header-padding-x: 5px;*/ --cell-padding: var(--spectrum-global-dimension-size-150);
/*--spectrum-table-cell-padding-x: 5px;*/
--cell-padding: 12px;
} }
/* Loading */ /* Loading */
@ -346,6 +376,17 @@
} }
/* Header */ /* 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 { .spectrum-Table-headCell {
height: var(--header-height); height: var(--header-height);
position: sticky; position: sticky;
@ -355,28 +396,31 @@
background-color: var(--spectrum-alias-background-color-secondary); background-color: var(--spectrum-alias-background-color-secondary);
z-index: 2; z-index: 2;
border-bottom: var(--table-border); border-bottom: var(--table-border);
padding-left: var(--cell-padding); padding: 0 calc(var(--cell-padding) / 1.33);
padding-right: 0;
}
.spectrum-Table-headCell--divider {
padding-right: var(--cell-padding);
}
.spectrum-Table-headCell--edit {
position: sticky;
left: 0;
z-index: 3;
}
.spectrum-Table-headCell-content {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
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; user-select: none;
} }
.spectrum-Table-headCell-content .title { .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; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@ -405,7 +449,7 @@
display: contents; display: contents;
} }
.spectrum-Table-row:hover .spectrum-Table-cell { .spectrum-Table-row:hover .spectrum-Table-cell {
background-color: var(--hover-bg); background-color: var(--hover-bg) !important;
} }
.wrapper--quiet .spectrum-Table-row { .wrapper--quiet .spectrum-Table-row {
border-left: none; border-left: none;
@ -413,6 +457,7 @@
} }
.spectrum-Table-row > :first-child { .spectrum-Table-row > :first-child {
border-left: var(--table-border); border-left: var(--table-border);
padding-left: var(--cell-padding);
} }
.spectrum-Table-row > :last-child { .spectrum-Table-row > :last-child {
border-right: var(--table-border); border-right: var(--table-border);
@ -422,8 +467,7 @@
/* Table cells */ /* Table cells */
.spectrum-Table-cell { .spectrum-Table-cell {
flex: 1 1 auto; flex: 1 1 auto;
padding-top: 0; padding: 0 calc(var(--cell-padding) / 1.33);
padding-bottom: 0;
border-top: none; border-top: none;
border-bottom: none; border-bottom: none;
border-radius: 0; border-radius: 0;
@ -438,14 +482,15 @@
transition: background-color transition: background-color
var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out; var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out;
border-bottom: 1px solid var(--spectrum-alias-border-color-mid); border-bottom: 1px solid var(--spectrum-alias-border-color-mid);
padding-left: var(--cell-padding);
padding-right: 0;
background-color: var(--table-bg); background-color: var(--table-bg);
z-index: 1; z-index: 1;
} }
.spectrum-Table-cell--divider { .spectrum-Table-cell--divider {
padding-right: var(--cell-padding); padding-right: var(--cell-padding);
} }
.spectrum-Table-cell--divider + .spectrum-Table-cell {
padding-left: var(--cell-padding);
}
.spectrum-Table-cell--edit { .spectrum-Table-cell--edit {
position: sticky; position: sticky;
left: 0; left: 0;