Completely rewrite BBUI table with divs and with support for custom column widths
This commit is contained in:
parent
6361565dc7
commit
dceebb0fc9
7 changed files with 240 additions and 225 deletions
|
@ -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>
|
||||||
|
|
|
@ -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 !== ""))}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -17,6 +17,8 @@
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
div {
|
div {
|
||||||
width: 200px;
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -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>
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue