mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
test: add DataTable
generics test
This commit is contained in:
parent
38df04e69e
commit
25274520c6
1 changed files with 63 additions and 0 deletions
|
@ -285,3 +285,66 @@
|
|||
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="short" />
|
||||
|
||||
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="compact" />
|
||||
|
||||
<DataTable
|
||||
rows="{[
|
||||
{
|
||||
name: 'Load Balancer 3',
|
||||
protocol: 'HTTP',
|
||||
port: 3000,
|
||||
rule: 'Round robin',
|
||||
id: '-',
|
||||
},
|
||||
]}"
|
||||
headers="{[
|
||||
{
|
||||
key: 'name',
|
||||
value: 'Name',
|
||||
},
|
||||
{
|
||||
key: 'protocol',
|
||||
value: 'Protocol',
|
||||
display: (value) => {
|
||||
return value + ' Protocol';
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'port',
|
||||
value: 'Port',
|
||||
display: (value, row) => {
|
||||
return value + ' €';
|
||||
},
|
||||
sort: (a, b) => {
|
||||
if (a > b) return 1;
|
||||
return 0;
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'rule',
|
||||
value: 'Rule',
|
||||
},
|
||||
]}"
|
||||
sortKey="name"
|
||||
on:click:row="{(e) => {
|
||||
const detail = e.detail;
|
||||
detail.name;
|
||||
detail.port;
|
||||
}}"
|
||||
on:click:cell="{(e) => {
|
||||
const detail = e.detail;
|
||||
switch (detail.key) {
|
||||
case 'name':
|
||||
detail.value;
|
||||
break;
|
||||
}
|
||||
}}"
|
||||
on:click="{(e) => {
|
||||
e.detail.cell;
|
||||
e.detail.row.name;
|
||||
}}"
|
||||
on:click:row--expand="{(e) => {
|
||||
const detail = e.detail;
|
||||
detail.row.id;
|
||||
detail.row.name;
|
||||
}}"
|
||||
/>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue