diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json index b4914cb284..36a4cbd1d5 100644 --- a/packages/standard-components/manifest.json +++ b/packages/standard-components/manifest.json @@ -1579,6 +1579,11 @@ "value": "spectrum--large" } ] + }, + { + "type": "boolean", + "label": "Quiet", + "key": "quiet" } ], "dataContext": { diff --git a/packages/standard-components/src/table/Table.svelte b/packages/standard-components/src/table/Table.svelte index 51acf3c44d..b1f2a3ef2e 100644 --- a/packages/standard-components/src/table/Table.svelte +++ b/packages/standard-components/src/table/Table.svelte @@ -9,6 +9,7 @@ export let columns export let showAutoColumns export let rowCount + export let quiet const component = getContext("component") const { styleable, Provider } = getContext("sdk") @@ -28,7 +29,7 @@ return "" } const actualCount = Math.min(rowCount, dataCount) - return `height: ${36 + actualCount * 56}px;` + return `height: ${35 + actualCount * 56}px;` } const sortRows = (rows, sortColumn, sortOrder) => { @@ -72,63 +73,65 @@ } -
-
- - - - {#if $component.children} - - {/if} - {#each fields as field} - - {/each} - - - - {#each sortedRows as row} - +
+
+
+
-
-
sortBy(field)}> -
- {schema[field]?.name} - -
-
+ + {#if $component.children} - + {/if} {#each fields as field} - {/each} - {/each} - -
-
- - - -
-
+
+
-
- +
sortBy(field)}> +
+ {schema[field]?.name} +
- +
+ + + {#each sortedRows as row} + + {#if $component.children} + +
+ + + +
+ + {/if} + {#each fields as field} + +
+ +
+ + {/each} + + {/each} + + +
@@ -136,6 +139,11 @@ .spectrum { position: relative; overflow: auto; + border: 1px solid + var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important; + } + .spectrum.quiet { + border: none !important; } table { width: 100%; @@ -149,8 +157,6 @@ position: sticky; top: 0; background-color: var(--spectrum-global-color-gray-100); - border-bottom: 1px solid - var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)); z-index: 2; } .spectrum-Table-headCell-content { @@ -161,13 +167,23 @@ align-items: center; user-select: none; } - .spectrum-Table-cell { + td { padding-top: 0; padding-bottom: 0; - border-bottom: 1px solid - var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)); + border-bottom: none !important; + border-left: none !important; + border-right: none !important; + border-top: 1px solid + var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important; + } + tr:first-child td { border-top: none !important; } + .spectrum:not(.quiet) td.spectrum-Table-cell--divider { + width: 1px; + border-right: 1px solid + var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important; + } .spectrum-Table-cell-content { height: 55px; white-space: nowrap; @@ -184,4 +200,9 @@ .spectrum-Table-sortedIcon.visible { opacity: 1; } + .spectrum, + th { + border-bottom: 1px solid + var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important; + }