Don't show header in spectrum table unless rows exist

This commit is contained in:
Andrew Kingston 2021-04-12 15:15:35 +01:00
parent f76fb21562
commit 9e2803cb8d
1 changed files with 48 additions and 46 deletions

View File

@ -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}