mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-16 10:51:06 +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);
}}

16
src/components/DataTable/DataTable.stories.js
View file

@ -17,3 +17,19 @@ export const Default = () => ({
stickyHeader: boolean('Sticky header (experimental)', false)
}
});
export const Sortable = () => ({
Component,
props: {
story: 'sortable',
title: text('Optional DataTable title (title)', ''),
description: text('Optional DataTable description (description)', ''),
zebra: boolean('Zebra row styles (zebra)', false),
size: select(
'Row height (size)',
{ compact: 'compact', short: 'short', tall: 'tall', none: null },
null
),
stickyHeader: boolean('Sticky header (experimental)', false)
}
});

76
src/components/DataTable/DataTable.svelte
View file

@ -1,8 +1,6 @@
<script>
let className = undefined;
export { className as class };
// refined props
export let title = '';
export let description = '';
export let zebra = false;
@ -10,9 +8,11 @@
export let headers = [];
export let stickyHeader = false;
export let size = undefined;
export let sortable = false;
export let style = undefined;
import { createEventDispatcher } from 'svelte';
import { createEventDispatcher, setContext } from 'svelte';
import { writable, derived } from 'svelte/store';
import Table from './Table.svelte';
import TableBody from './TableBody.svelte';
import TableCell from './TableCell.svelte';
@ -22,24 +22,72 @@
import TableRow from './TableRow.svelte';
const dispatch = createEventDispatcher();
const sortDirectionMap = { none: 'ascending', ascending: 'descending', descending: 'none' };
let tableSortable = writable(sortable);
let sortHeader = writable({ id: null, key: null, sortDirection: 'none' });
let headerItems = writable([]);
let thKeys = derived(headerItems, () =>
headers
.map(({ key }, i) => ({ key, id: $headerItems[i] }))
.reduce((a, c) => ({ ...a, [c.key]: c.id }), {})
);
setContext('DataTable', {
sortHeader,
tableSortable,
add: id => {
headerItems.update(_ => [..._, id]);
}
});
$: tableSortable.set(sortable);
$: headerKeys = headers.map(({ key }) => key);
$: rows = rows.map(row => ({
...row,
cells: headerKeys.map(key => ({ key, value: row[key] }))
}));
$: props = {};
$: rows = rows.map(row => ({ ...row, cells: headerKeys.map(key => ({ key, value: row[key] })) }));
$: sortedRows = rows;
$: ascending = $sortHeader.sortDirection === 'ascending';
$: sortKey = $sortHeader.key;
$: sorting = sortable && sortKey != null;
$: if (sorting) {
if ($sortHeader.sortDirection === 'none') {
sortedRows = rows;
} else {
sortedRows = [...rows].sort((a, b) => {
const itemA = ascending ? a[sortKey] : b[sortKey];
const itemB = ascending ? b[sortKey] : a[sortKey];
if (typeof itemA === 'number' && typeof itemB === 'number') {
return itemA - itemB;
}
return itemA.toString().localeCompare(itemB.toString(), 'en', { numeric: true });
});
}
}
$: props = {
headers,
rows
};
</script>
<slot {props}>
<TableContainer class={className} {title} {description} {style}>
<Table {zebra} {size} {stickyHeader}>
<Table {zebra} {size} {stickyHeader} {sortable}>
<TableHead>
<TableRow>
{#each headers as header, i (header.key)}
<TableHeader
on:click={() => {
dispatch('click:header', { header });
dispatch('click', { header });
dispatch('click:header', header);
let active = header.key === $sortHeader.key;
let currentSortDirection = active ? $sortHeader.sortDirection : 'none';
let sortDirection = sortDirectionMap[currentSortDirection];
sortHeader.set({
id: sortDirection === 'none' ? null : $thKeys[header.key],
key: header.key,
sortDirection
});
}}>
{header.value}
</TableHeader>
@ -47,15 +95,17 @@
</TableRow>
</TableHead>
<TableBody>
{#each rows as row, i (row.id)}
{#each sorting ? sortedRows : rows as row, i (row.id)}
<TableRow
on:click={() => {
dispatch('click:row', { row });
dispatch('click', { row });
dispatch('click:row', row);
}}>
{#each row.cells as cell, j (cell.key)}
<TableCell
on:click={() => {
dispatch('click:cell', { row, cell });
dispatch('click', { row, cell });
dispatch('click:cell', cell);
}}>
{cell.value}
</TableCell>

6
src/components/DataTable/Table.svelte
View file

@ -5,7 +5,7 @@
export let size = undefined;
export let useStaticWidth = false;
export let shouldShowBorder = false;
export let isSortable = false;
export let sortable = false;
export let stickyHeader = false;
export let style = undefined;
@ -15,13 +15,13 @@
{#if stickyHeader}
<section class={cx('--data-table_inner-container', className)} {style}>
<table
class={cx('--data-table', size === 'compact' && '--data-table--compact', size === 'short' && '--data-table--short', size === 'tall' && '--data-table--tall', isSortable && '--data-table--sort', zebra && '--data-table--zebra', useStaticWidth && '--data-table--static', !shouldShowBorder && '--data-table--no-border', stickyHeader && '--data-table--sticky-header')}>
class={cx('--data-table', size === 'compact' && '--data-table--compact', size === 'short' && '--data-table--short', size === 'tall' && '--data-table--tall', sortable && '--data-table--sort', zebra && '--data-table--zebra', useStaticWidth && '--data-table--static', !shouldShowBorder && '--data-table--no-border', stickyHeader && '--data-table--sticky-header')}>
<slot />
</table>
</section>
{:else}
<table
class={cx('--data-table', size === 'compact' && '--data-table--compact', size === 'short' && '--data-table--short', size === 'tall' && '--data-table--tall', isSortable && '--data-table--sort', zebra && '--data-table--zebra', useStaticWidth && '--data-table--static', !shouldShowBorder && '--data-table--no-border', stickyHeader && '--data-table--sticky-header', className)}
class={cx('--data-table', size === 'compact' && '--data-table--compact', size === 'short' && '--data-table--short', size === 'tall' && '--data-table--tall', sortable && '--data-table--sort', zebra && '--data-table--zebra', useStaticWidth && '--data-table--static', !shouldShowBorder && '--data-table--no-border', stickyHeader && '--data-table--sticky-header', className)}
{style}>
<slot />
</table>

40
src/components/DataTable/TableHeader.svelte
View file

@ -1,44 +1,36 @@
<script>
let className = undefined;
export { className as class };
export let isSortHeader = false;
export let isSortable = false;
export let scope = 'col';
export let sortDirection = undefined;
export let translateWithId = () => '';
export let style = undefined;
import { getContext } from 'svelte';
import ArrowUp20 from 'carbon-icons-svelte/lib/ArrowUp20';
import ArrowsVertical20 from 'carbon-icons-svelte/lib/ArrowsVertical20';
import { cx } from '../../lib';
const sortDirections = {
NONE: 'none',
ASC: 'ascending',
DESC: 'descending'
};
const id = Math.random();
const { sortHeader, tableSortable, add } = getContext('DataTable');
$: ariaSort = isSortHeader ? sortDirections[sortDirection] : 'none';
add(id);
$: active = $sortHeader.id === id;
// TODO: translate with id
$: ariaLabel = translateWithId();
</script>
{#if !isSortable}
<th on:click on:mouseover on:mouseenter on:mouseleave class={className} {style} {scope}>
<span class={cx('--table-header-label')}>
<slot />
</span>
</th>
{:else}
{#if $tableSortable}
<th
{scope}
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--table-sort', isSortHeader && sortDirection !== 'NONE' && '--table-sort--active', isSortHeader && sortDirection === 'DESC' && '--table-sort--ascending', className)}
aria-sort={ariaSort}>
<button on:click>
class={className}
aria-sort={active ? $sortHeader.sortDirection : 'none'}
{scope}>
<button
class={cx('--table-sort', active && '--table-sort--active', active && $sortHeader.sortDirection === 'descending' && '--table-sort--ascending')}
on:click>
<span class={cx('--table-header-label')}>
<slot />
</span>
@ -46,4 +38,10 @@
<ArrowsVertical20 class={cx('--table-sort__icon-unsorted')} aria-label={ariaLabel} />
</button>
</th>
{:else}
<th on:click on:mouseover on:mouseenter on:mouseleave class={className} {style} {scope}>
<span class={cx('--table-header-label')}>
<slot />
</span>
</th>
{/if}

3
src/components/DataTable/index.js
View file

@ -0,0 +1,3 @@
import DataTable from './DataTable.svelte';
export default DataTable;