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

feat(components): add default, sortable DataTable

Browse source 
Supports #14
This commit is contained in:
Eric Liu 2020-01-07 18:33:54 -08:00
commit 5caad3eba0
19 changed files with 153 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/components/DataTable/DataTable.Story.svelte
View file

@ -75,6 +75,7 @@
{ key: 'attached_groups', value: 'Attached Groups' },
{ key: 'status', value: 'Status' }
];
let sortable = true;
</script>
<Layout>
@ -104,6 +105,28 @@
</Table>
</TableContainer>
</DataTable>
{:else if story === 'sortable'}
<DataTable
bind:sortable
title={$$props.title}
description={$$props.description}
zebra={$$props.zebra}
size={$$props.size}
stickyHeader={$$props.stickyHeader}
on:click={({ detail }) => {
console.log('on:click', detail);
}}
on:click:header={({ detail }) => {
console.log('on:click:header', detail);
}}
on:click:row={({ detail }) => {
console.log('on:click:row', detail);
}}
on:click:cell={({ detail }) => {
console.log('on:click:cell', detail);
}}
{rows}
{headers} />
{:else}
<DataTable
title={$$props.title}
@ -111,6 +134,9 @@
zebra={$$props.zebra}
size={$$props.size}
stickyHeader={$$props.stickyHeader}
on:click={({ detail }) => {
console.log('on:click', detail);
}}
on:click:header={({ detail }) => {
console.log('on:click:header', detail);
}}