mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 18:31:06 +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

10
src/DataTableSkeleton/DataTable.stories.js
View file

@ -1,4 +1,4 @@
import { withKnobs, array, boolean } from "@storybook/addon-knobs"; import { withKnobs, array, boolean, number } from "@storybook/addon-knobs";
import Component from "./DataTableSkeleton.Story.svelte"; import Component from "./DataTableSkeleton.Story.svelte";
export default { title: "DataTableSkeleton", decorators: [withKnobs] }; export default { title: "DataTableSkeleton", decorators: [withKnobs] };
@ -6,12 +6,16 @@ export default { title: "DataTableSkeleton", decorators: [withKnobs] };
export const Default = () => ({ export const Default = () => ({
Component, Component,
props: { props: {
columns: number("Number of columns", 5),
rows: number("Number of rows", 5),
zebra: boolean("Use zebra stripe (zebra)", false),
compact: boolean("Compact variant (compact)", false),
showHeader: boolean("Show header", true),
headers: array( headers: array(
"Optional table headers (headers)", "Optional table headers (headers)",
["Name", "Protocol", "Port", "Rule", "Attached Groups"], ["Name", "Protocol", "Port", "Rule", "Attached Groups"],
"," ","
), ),
zebra: boolean("Use zebra stripe (zebra)", false), showToolbar: boolean("Show toolbar", true),
compact: boolean("Compact variant (compact)", false),
}, },
}); });

88
src/DataTableSkeleton/DataTableSkeleton.svelte
View file

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