mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(datatable-skeleton): add showHeader, showToolbar props

Browse source 
fixes #264
This commit is contained in:
Eric Liu 2020-09-19 05:58:50 -07:00
commit e2c39def42
2 changed files with 66 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

88
src/DataTableSkeleton/DataTableSkeleton.svelte
View file

@ -23,6 +23,12 @@
*/
export let zebra = false;
/**
* Set to `false` to hide the header
* @type {boolean} [showHeader=true]
*/
export let showHeader = true;
/**
* Set the column headers
* If `headers` has one more items, `count` is ignored
@ -30,41 +36,65 @@
*/
export let headers = [];
/**
* Set to `false` to hide the toolbar
* @type {boolean} [showToolbar=true]
*/
export let showToolbar = true;
$: cols = Array.from(
{ length: headers.length > 0 ? headers.length : columns },
(_, i) => i
);
</script>
<table
class:bx--skeleton="{true}"
class:bx--data-table="{true}"
class:bx--data-table--zebra="{zebra}"
class:bx--data-table--compact="{compact}"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave>
<thead>
<tr>
{#each cols as col, i (col)}
<th>{headers[col] || ''}</th>
{/each}
</tr>
</thead>
<tbody>
<tr>
{#each cols as col, i (col)}
<td><span></span></td>
{/each}
</tr>
{#each Array.from({ length: rows - 1 }, (_, i) => i) as row, i (row)}
<div class:bx--skeleton="{true}" class:bx--data-table-container="{true}">
{#if showHeader}
<div class:bx--data-table-header="{true}">
<div class:bx--data-table-header__title="{true}"></div>
<div class:bx--data-table-header__description="{true}"></div>
</div>
{/if}
{#if showToolbar}
<section aria-label="data table toolbar" class:bx--table-toolbar="{true}">
<div class:bx--toolbar-content="{true}">
<span
class:bx--skeleton="{true}"
class:bx--btn="{true}"
class:bx--btn--sm="{true}"></span>
</div>
</section>
{/if}
<table
class:bx--skeleton="{true}"
class:bx--data-table="{true}"
class:bx--data-table--zebra="{zebra}"
class:bx--data-table--compact="{compact}"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave>
<thead>
<tr>
{#each cols as col, j (col)}
<td></td>
{#each cols as col, i (col)}
<th>{headers[col] || ''}</th>
{/each}
</tr>
{/each}
</tbody>
</table>
</thead>
<tbody>
<tr>
{#each cols as col, i (col)}
<td><span></span></td>
{/each}
</tr>
{#each Array.from({ length: rows - 1 }, (_, i) => i) as row, i (row)}
<tr>
{#each cols as col, j (col)}
<td></td>
{/each}
</tr>
{/each}
</tbody>
</table>
</div>