mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
Merge pull request #104 from metonym/data-table
feat(components): support basic DataTable
This commit is contained in:
Eric Liu
GitHub
commit
1a6fb4a506
24 changed files with 475 additions and 20 deletions
|
|
@ -33,6 +33,7 @@ Currently, the following components are supported:
|
||||||
- Switch
|
- Switch
|
||||||
- Copy
|
- Copy
|
||||||
- CopyButton
|
- CopyButton
|
||||||
|
- DataTable
|
||||||
- DataTableSkeleton
|
- DataTableSkeleton
|
||||||
- DatePicker
|
- DatePicker
|
||||||
- DatePickerInput
|
- DatePickerInput
|
||||||
|
|
|
||||||
|
|
@ -70,4 +70,4 @@
|
||||||
}</script><style>#root[hidden],
|
}</script><style>#root[hidden],
|
||||||
#docs-root[hidden] {
|
#docs-root[hidden] {
|
||||||
display: none !important;
|
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
2
docs/main.28a3b49ddfb7322290f8.bundle.js
Normal file
File diff suppressed because one or more lines are too long
1
docs/main.28a3b49ddfb7322290f8.bundle.js.map
Normal file
1
docs/main.28a3b49ddfb7322290f8.bundle.js.map
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"file":"main.28a3b49ddfb7322290f8.bundle.js","sources":["webpack:///main.28a3b49ddfb7322290f8.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
||||||
{"version":3,"file":"main.977ebf979d865a2cb35d.bundle.js","sources":["webpack:///main.977ebf979d865a2cb35d.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
|
||||||
|
|
@ -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()}([]);
|
!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
1
docs/runtime~main.28a3b49ddfb7322290f8.bundle.js.map
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"file":"runtime~main.28a3b49ddfb7322290f8.bundle.js","sources":["webpack:///runtime~main.28a3b49ddfb7322290f8.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
{"version":3,"file":"runtime~main.977ebf979d865a2cb35d.bundle.js","sources":["webpack:///runtime~main.977ebf979d865a2cb35d.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
|
||||||
File diff suppressed because one or more lines are too long
1
docs/vendors~main.28a3b49ddfb7322290f8.bundle.js.map
Normal file
1
docs/vendors~main.28a3b49ddfb7322290f8.bundle.js.map
Normal 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 +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":""}
|
|
||||||
152
src/components/DataTable/DataTable.Story.svelte
Normal file
152
src/components/DataTable/DataTable.Story.svelte
Normal file
|
|
@ -0,0 +1,152 @@
|
||||||
|
<script>
|
||||||
|
export let story = undefined;
|
||||||
|
|
||||||
|
import Layout from '../../internal/ui/Layout.svelte';
|
||||||
|
import DataTable from './DataTable.svelte';
|
||||||
|
import Table from './Table.svelte';
|
||||||
|
import TableBody from './TableBody.svelte';
|
||||||
|
import TableCell from './TableCell.svelte';
|
||||||
|
import TableContainer from './TableContainer.svelte';
|
||||||
|
import TableHead from './TableHead.svelte';
|
||||||
|
import TableHeader from './TableHeader.svelte';
|
||||||
|
import TableRow from './TableRow.svelte';
|
||||||
|
|
||||||
|
let rows = [
|
||||||
|
{
|
||||||
|
id: 'a',
|
||||||
|
name: 'Load Balancer 3',
|
||||||
|
protocol: 'HTTP',
|
||||||
|
port: 3000,
|
||||||
|
rule: 'Round robin',
|
||||||
|
attached_groups: 'Kevins VM Groups',
|
||||||
|
status: 'Disabled'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'b',
|
||||||
|
name: 'Load Balancer 1',
|
||||||
|
protocol: 'HTTP',
|
||||||
|
port: 443,
|
||||||
|
rule: 'Round robin',
|
||||||
|
attached_groups: 'Maureens VM Groups',
|
||||||
|
status: 'Starting'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'c',
|
||||||
|
name: 'Load Balancer 2',
|
||||||
|
protocol: 'HTTP',
|
||||||
|
port: 80,
|
||||||
|
rule: 'DNS delegation',
|
||||||
|
attached_groups: 'Andrews VM Groups',
|
||||||
|
status: 'Active'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'd',
|
||||||
|
name: 'Load Balancer 6',
|
||||||
|
protocol: 'HTTP',
|
||||||
|
port: 3000,
|
||||||
|
rule: 'Round robin',
|
||||||
|
attached_groups: 'Marcs VM Groups',
|
||||||
|
status: 'Disabled'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'e',
|
||||||
|
name: 'Load Balancer 4',
|
||||||
|
protocol: 'HTTP',
|
||||||
|
port: 443,
|
||||||
|
rule: 'Round robin',
|
||||||
|
attached_groups: 'Mels VM Groups',
|
||||||
|
status: 'Starting'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'f',
|
||||||
|
name: 'Load Balancer 5',
|
||||||
|
protocol: 'HTTP',
|
||||||
|
port: 80,
|
||||||
|
rule: 'DNS delegation',
|
||||||
|
attached_groups: 'Ronjas VM Groups',
|
||||||
|
status: 'Active'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
let headers = [
|
||||||
|
{ key: 'name', value: 'Name' },
|
||||||
|
{ key: 'protocol', value: 'Protocol' },
|
||||||
|
{ key: 'port', value: 'Port' },
|
||||||
|
{ key: 'rule', value: 'Rule' },
|
||||||
|
{ key: 'attached_groups', value: 'Attached Groups' },
|
||||||
|
{ key: 'status', value: 'Status' }
|
||||||
|
];
|
||||||
|
let sortable = true;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Layout>
|
||||||
|
{#if story === 'composed'}
|
||||||
|
<DataTable {...$$props} {rows} {headers} let:props>
|
||||||
|
<TableContainer
|
||||||
|
title="DataTable"
|
||||||
|
description="With default options"
|
||||||
|
{...props.getTableContainerProps()}>
|
||||||
|
<Table {...props.getTableProps()}>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
{#each props.headers as header, i (header.key)}
|
||||||
|
<TableHeader {...props.getHeaderProps({ header })}>{header.header}</TableHeader>
|
||||||
|
{/each}
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{#each props.rows as row, i}
|
||||||
|
<TableRow {...props.getRowProps({ row })}>
|
||||||
|
{#each row.cells as cell, j}
|
||||||
|
<TableCell>{cell.value}</TableCell>
|
||||||
|
{/each}
|
||||||
|
</TableRow>
|
||||||
|
{/each}
|
||||||
|
</TableBody>
|
||||||
|
</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}
|
||||||
|
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} />
|
||||||
|
{/if}
|
||||||
|
</Layout>
|
||||||
35
src/components/DataTable/DataTable.stories.js
Normal file
35
src/components/DataTable/DataTable.stories.js
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
|
||||||
|
import Component from './DataTable.Story.svelte';
|
||||||
|
|
||||||
|
export default { title: 'DataTable', decorators: [withKnobs] };
|
||||||
|
|
||||||
|
export const Default = () => ({
|
||||||
|
Component,
|
||||||
|
props: {
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
});
|
||||||
118
src/components/DataTable/DataTable.svelte
Normal file
118
src/components/DataTable/DataTable.svelte
Normal file
|
|
@ -0,0 +1,118 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let title = '';
|
||||||
|
export let description = '';
|
||||||
|
export let zebra = false;
|
||||||
|
export let rows = [];
|
||||||
|
export let headers = [];
|
||||||
|
export let stickyHeader = false;
|
||||||
|
export let size = undefined;
|
||||||
|
export let sortable = false;
|
||||||
|
export let style = undefined;
|
||||||
|
|
||||||
|
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';
|
||||||
|
import TableContainer from './TableContainer.svelte';
|
||||||
|
import TableHead from './TableHead.svelte';
|
||||||
|
import TableHeader from './TableHeader.svelte';
|
||||||
|
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] })) }));
|
||||||
|
$: 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} {sortable}>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
{#each headers as header, i (header.key)}
|
||||||
|
<TableHeader
|
||||||
|
on:click={() => {
|
||||||
|
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>
|
||||||
|
{/each}
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{#each sorting ? sortedRows : rows as row, i (row.id)}
|
||||||
|
<TableRow
|
||||||
|
on:click={() => {
|
||||||
|
dispatch('click', { row });
|
||||||
|
dispatch('click:row', row);
|
||||||
|
}}>
|
||||||
|
{#each row.cells as cell, j (cell.key)}
|
||||||
|
<TableCell
|
||||||
|
on:click={() => {
|
||||||
|
dispatch('click', { row, cell });
|
||||||
|
dispatch('click:cell', cell);
|
||||||
|
}}>
|
||||||
|
{cell.value}
|
||||||
|
</TableCell>
|
||||||
|
{/each}
|
||||||
|
</TableRow>
|
||||||
|
{/each}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
</slot>
|
||||||
28
src/components/DataTable/Table.svelte
Normal file
28
src/components/DataTable/Table.svelte
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let zebra = false;
|
||||||
|
export let size = undefined;
|
||||||
|
export let useStaticWidth = false;
|
||||||
|
export let shouldShowBorder = false;
|
||||||
|
export let sortable = false;
|
||||||
|
export let stickyHeader = false;
|
||||||
|
export let style = undefined;
|
||||||
|
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#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', 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', 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>
|
||||||
|
{/if}
|
||||||
9
src/components/DataTable/TableBody.svelte
Normal file
9
src/components/DataTable/TableBody.svelte
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let style = undefined;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<tbody aria-live={$$props['aria-live'] || 'polite'} class={className} {style}>
|
||||||
|
<slot />
|
||||||
|
</tbody>
|
||||||
9
src/components/DataTable/TableCell.svelte
Normal file
9
src/components/DataTable/TableCell.svelte
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let style = undefined;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<td on:click on:mouseover on:mouseenter on:mouseleave class={className} {style}>
|
||||||
|
<slot />
|
||||||
|
</td>
|
||||||
22
src/components/DataTable/TableContainer.svelte
Normal file
22
src/components/DataTable/TableContainer.svelte
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let stickyHeader = false;
|
||||||
|
export let title = '';
|
||||||
|
export let description = '';
|
||||||
|
export let style = undefined;
|
||||||
|
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class={cx('--data-table-container', stickyHeader && '--data-table--max-width', className)}
|
||||||
|
{style}>
|
||||||
|
{#if title}
|
||||||
|
<div class={cx('--data-table-header')}>
|
||||||
|
<h4 class={cx('--data-table-header__title')}>{title}</h4>
|
||||||
|
<p class={cx('--data-table-header__description')}>{description}</p>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
9
src/components/DataTable/TableHead.svelte
Normal file
9
src/components/DataTable/TableHead.svelte
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let style = undefined;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<thead on:click on:mouseover on:mouseenter on:mouseleave class={className} {style}>
|
||||||
|
<slot />
|
||||||
|
</thead>
|
||||||
47
src/components/DataTable/TableHeader.svelte
Normal file
47
src/components/DataTable/TableHeader.svelte
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let scope = 'col';
|
||||||
|
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 id = Math.random();
|
||||||
|
const { sortHeader, tableSortable, add } = getContext('DataTable');
|
||||||
|
|
||||||
|
add(id);
|
||||||
|
|
||||||
|
$: active = $sortHeader.id === id;
|
||||||
|
// TODO: translate with id
|
||||||
|
$: ariaLabel = translateWithId();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if $tableSortable}
|
||||||
|
<th
|
||||||
|
on:mouseover
|
||||||
|
on:mouseenter
|
||||||
|
on:mouseleave
|
||||||
|
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>
|
||||||
|
<ArrowUp20 class={cx('--table-sort__icon')} aria-label={ariaLabel} />
|
||||||
|
<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}
|
||||||
20
src/components/DataTable/TableRow.svelte
Normal file
20
src/components/DataTable/TableRow.svelte
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let isSelected = false;
|
||||||
|
export let style = undefined;
|
||||||
|
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
// TODO: include ariaLabel, onExpand, isExpanded, isSelected
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<tr
|
||||||
|
on:click
|
||||||
|
on:mouseover
|
||||||
|
on:mouseenter
|
||||||
|
on:mouseleave
|
||||||
|
class={cx(isSelected && '--data-table--selected', className)}
|
||||||
|
{style}>
|
||||||
|
<slot />
|
||||||
|
</tr>
|
||||||
3
src/components/DataTable/index.js
Normal file
3
src/components/DataTable/index.js
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import DataTable from './DataTable.svelte';
|
||||||
|
|
||||||
|
export default DataTable;
|
||||||
|
|
@ -8,6 +8,7 @@ import CopyButton from './components/CopyButton';
|
||||||
import ComboBox from './components/ComboBox';
|
import ComboBox from './components/ComboBox';
|
||||||
import ComposedModal, { ModalHeader, ModalBody, ModalFooter } from './components/ComposedModal';
|
import ComposedModal, { ModalHeader, ModalBody, ModalFooter } from './components/ComposedModal';
|
||||||
import CodeSnippet, { CodeSnippetSkeleton } from './components/CodeSnippet';
|
import CodeSnippet, { CodeSnippetSkeleton } from './components/CodeSnippet';
|
||||||
|
import DataTable from './components/DataTable';
|
||||||
import DataTableSkeleton from './components/DataTableSkeleton';
|
import DataTableSkeleton from './components/DataTableSkeleton';
|
||||||
import DatePicker, { DatePickerInput } from './components/DatePicker';
|
import DatePicker, { DatePickerInput } from './components/DatePicker';
|
||||||
import FileUploader, {
|
import FileUploader, {
|
||||||
|
|
@ -100,6 +101,7 @@ export {
|
||||||
ContentSwitcher,
|
ContentSwitcher,
|
||||||
Copy,
|
Copy,
|
||||||
CopyButton,
|
CopyButton,
|
||||||
|
DataTable,
|
||||||
DataTableSkeleton,
|
DataTableSkeleton,
|
||||||
DatePicker,
|
DatePicker,
|
||||||
DatePickerInput,
|
DatePickerInput,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue