Don't show header in spectrum table unless rows exist
This commit is contained in:
parent
f76fb21562
commit
9e2803cb8d
|
@ -153,53 +153,55 @@
|
||||||
class="container">
|
class="container">
|
||||||
<div style={contentStyle}>
|
<div style={contentStyle}>
|
||||||
<table class="spectrum-Table" class:spectrum-Table--quiet={quiet}>
|
<table class="spectrum-Table" class:spectrum-Table--quiet={quiet}>
|
||||||
<thead class="spectrum-Table-head">
|
{#if sortedRows?.length}
|
||||||
<tr>
|
<thead class="spectrum-Table-head">
|
||||||
{#if showEditColumn}
|
<tr>
|
||||||
<th class="spectrum-Table-headCell">
|
{#if showEditColumn}
|
||||||
<div class="spectrum-Table-headCell-content">
|
<th class="spectrum-Table-headCell">
|
||||||
{editColumnTitle || ''}
|
<div class="spectrum-Table-headCell-content">
|
||||||
</div>
|
{editColumnTitle || ''}
|
||||||
</th>
|
|
||||||
{/if}
|
|
||||||
{#each fields as field}
|
|
||||||
<th
|
|
||||||
class="spectrum-Table-headCell is-sortable"
|
|
||||||
class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'}
|
|
||||||
class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
|
|
||||||
on:click={() => sortBy(field)}>
|
|
||||||
<div class="spectrum-Table-headCell-content">
|
|
||||||
<div class="title">
|
|
||||||
{schema[field]?.displayName || schema[field]?.name}
|
|
||||||
</div>
|
</div>
|
||||||
{#if schema[field]?.autocolumn}
|
</th>
|
||||||
<svg
|
{/if}
|
||||||
class="spectrum-Icon spectrum-Table-autoIcon"
|
{#each fields as field}
|
||||||
focusable="false">
|
<th
|
||||||
<use xlink:href="#spectrum-icon-18-MagicWand" />
|
class="spectrum-Table-headCell is-sortable"
|
||||||
</svg>
|
class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'}
|
||||||
{/if}
|
class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
|
||||||
{#if sortColumn === field}
|
on:click={() => sortBy(field)}>
|
||||||
<svg
|
<div class="spectrum-Table-headCell-content">
|
||||||
class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
|
<div class="title">
|
||||||
focusable="false"
|
{schema[field]?.displayName || schema[field]?.name}
|
||||||
aria-hidden="true">
|
</div>
|
||||||
<use xlink:href="#spectrum-css-icon-Arrow100" />
|
{#if schema[field]?.autocolumn}
|
||||||
</svg>
|
<svg
|
||||||
{/if}
|
class="spectrum-Icon spectrum-Table-autoIcon"
|
||||||
{#if allowEditColumns && schema[field]?.editable !== false}
|
focusable="false">
|
||||||
<svg
|
<use xlink:href="#spectrum-icon-18-MagicWand" />
|
||||||
class="spectrum-Icon spectrum-Table-editIcon"
|
</svg>
|
||||||
focusable="false"
|
{/if}
|
||||||
on:click={e => editColumn(e, field)}>
|
{#if sortColumn === field}
|
||||||
<use xlink:href="#spectrum-icon-18-Edit" />
|
<svg
|
||||||
</svg>
|
class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
|
||||||
{/if}
|
focusable="false"
|
||||||
</div>
|
aria-hidden="true">
|
||||||
</th>
|
<use xlink:href="#spectrum-css-icon-Arrow100" />
|
||||||
{/each}
|
</svg>
|
||||||
</tr>
|
{/if}
|
||||||
</thead>
|
{#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">
|
<tbody class="spectrum-Table-body">
|
||||||
{#if sortedRows?.length}
|
{#if sortedRows?.length}
|
||||||
{#each sortedRows as row, idx}
|
{#each sortedRows as row, idx}
|
||||||
|
|
Loading…
Reference in New Issue