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

1
README.md
View file

@ -33,6 +33,7 @@ Currently, the following components are supported:
- Switch
- Copy
- CopyButton
- DataTable
- DataTableSkeleton
- DatePicker
- DatePickerInput

2
docs/iframe.html
View file

@ -70,4 +70,4 @@
}</script><style>#root[hidden],
#docs-root[hidden] {
display: none !important;
}</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.977ebf979d865a2cb35d.bundle.js"></script><script src="vendors~main.977ebf979d865a2cb35d.bundle.js"></script><script src="main.977ebf979d865a2cb35d.bundle.js"></script></body></html>
}</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.28a3b49ddfb7322290f8.bundle.js"></script><script src="vendors~main.28a3b49ddfb7322290f8.bundle.js"></script><script src="main.28a3b49ddfb7322290f8.bundle.js"></script></body></html>

2
docs/main.28a3b49ddfb7322290f8.bundle.js Normal file
View file

File diff suppressed because one or more lines are too long

1
docs/main.28a3b49ddfb7322290f8.bundle.js.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"file":"main.28a3b49ddfb7322290f8.bundle.js","sources":["webpack:///main.28a3b49ddfb7322290f8.bundle.js"],"mappings":"AAAA","sourceRoot":""}

2
docs/main.977ebf979d865a2cb35d.bundle.js
View file

File diff suppressed because one or more lines are too long

1
docs/main.977ebf979d865a2cb35d.bundle.js.map
View file

@ -1 +0,0 @@
{"version":3,"file":"main.977ebf979d865a2cb35d.bundle.js","sources":["webpack:///main.977ebf979d865a2cb35d.bundle.js"],"mappings":"AAAA","sourceRoot":""}

2
docs/runtime~main.977ebf979d865a2cb35d.bundle.js → docs/runtime~main.28a3b49ddfb7322290f8.bundle.js
View file

@ -1,2 +1,2 @@
!function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i<chunkIds.length;i++)chunkId=chunkIds[i],Object.prototype.hasOwnProperty.call(installedChunks,chunkId)&&installedChunks[chunkId]&&resolves.push(installedChunks[chunkId][0]),installedChunks[chunkId]=0;for(moduleId in moreModules)Object.prototype.hasOwnProperty.call(moreModules,moduleId)&&(modules[moduleId]=moreModules[moduleId]);for(parentJsonpFunction&&parentJsonpFunction(data);resolves.length;)resolves.shift()();return deferredModules.push.apply(deferredModules,executeModules||[]),checkDeferredModules()}function checkDeferredModules(){for(var result,i=0;i<deferredModules.length;i++){for(var deferredModule=deferredModules[i],fulfilled=!0,j=1;j<deferredModule.length;j++){var depId=deferredModule[j];0!==installedChunks[depId]&&(fulfilled=!1)}fulfilled&&(deferredModules.splice(i--,1),result=__webpack_require__(__webpack_require__.s=deferredModule[0]))}return result}var installedModules={},installedChunks={1:0},deferredModules=[];function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==typeof value&&value&&value.__esModule)return value;var ns=Object.create(null);if(__webpack_require__.r(ns),Object.defineProperty(ns,"default",{enumerable:!0,value:value}),2&mode&&"string"!=typeof value)for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module.default}:function getModuleExports(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="";var jsonpArray=window.webpackJsonp=window.webpackJsonp||[],oldJsonpFunction=jsonpArray.push.bind(jsonpArray);jsonpArray.push=webpackJsonpCallback,jsonpArray=jsonpArray.slice();for(var i=0;i<jsonpArray.length;i++)webpackJsonpCallback(jsonpArray[i]);var parentJsonpFunction=oldJsonpFunction;checkDeferredModules()}([]);
//# sourceMappingURL=runtime~main.977ebf979d865a2cb35d.bundle.js.map
//# sourceMappingURL=runtime~main.28a3b49ddfb7322290f8.bundle.js.map

1
docs/runtime~main.28a3b49ddfb7322290f8.bundle.js.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"file":"runtime~main.28a3b49ddfb7322290f8.bundle.js","sources":["webpack:///runtime~main.28a3b49ddfb7322290f8.bundle.js"],"mappings":"AAAA","sourceRoot":""}

1
docs/runtime~main.977ebf979d865a2cb35d.bundle.js.map
View file

@ -1 +0,0 @@
{"version":3,"file":"runtime~main.977ebf979d865a2cb35d.bundle.js","sources":["webpack:///runtime~main.977ebf979d865a2cb35d.bundle.js"],"mappings":"AAAA","sourceRoot":""}

26
docs/vendors~main.977ebf979d865a2cb35d.bundle.js → docs/vendors~main.28a3b49ddfb7322290f8.bundle.js
View file

File diff suppressed because one or more lines are too long

1
docs/vendors~main.28a3b49ddfb7322290f8.bundle.js.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"file":"vendors~main.28a3b49ddfb7322290f8.bundle.js","sources":["webpack:///vendors~main.28a3b49ddfb7322290f8.bundle.js"],"mappings":"AAAA;;;;;;;;;;;;;;AAu4PA;;;;;AAq/XA;;AA48BA;;;;;;;;;;;;;;AAmBA;;;;;AA0iQA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAqdA;;;;;;;AAfA","sourceRoot":""}

1
docs/vendors~main.977ebf979d865a2cb35d.bundle.js.map
View file

@ -1 +0,0 @@
{"version":3,"file":"vendors~main.977ebf979d865a2cb35d.bundle.js","sources":["webpack:///vendors~main.977ebf979d865a2cb35d.bundle.js"],"mappings":"AAAA;;;;;;;;;;;;;;AAk4PA;;;;;AAq/XA;;AAu8BA;;;;;;;;;;;;;;AAmBA;;;;;AA6gPA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAodA;;;;;;;AAfA","sourceRoot":""}

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;

2
src/index.js
View file

@ -8,6 +8,7 @@ import CopyButton from './components/CopyButton';
import ComboBox from './components/ComboBox';
import ComposedModal, { ModalHeader, ModalBody, ModalFooter } from './components/ComposedModal';
import CodeSnippet, { CodeSnippetSkeleton } from './components/CodeSnippet';
import DataTable from './components/DataTable';
import DataTableSkeleton from './components/DataTableSkeleton';
import DatePicker, { DatePickerInput } from './components/DatePicker';
import FileUploader, {
@ -100,6 +101,7 @@ export {
ContentSwitcher,
Copy,
CopyButton,
DataTable,
DataTableSkeleton,
DatePicker,
DatePickerInput,