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

Add support for nested object fields in DataTable (#602)

Browse source 
* feature: Add support for nested object fields in Data Table

feature: Add support for nested object fields in Data Table

* fix can't open dropdown with keyboard (#610)

* fix(Dropdown): update selectedId when selectedIndex changes. (#611)

* chore(deps-dev): patch carbon-components@10.32.1 (#613)

* v0.32.2

* feature: Add support for nested object fields in Data Table

feature: Add support for nested object fields in Data Table

* chore: Added example for nested object values into the documentation

Co-authored-by: Lyu, Wei-Da <36730922+jasonlyu123@users.noreply.github.com>
Co-authored-by: David Espinosa <david.emanuel.espinosa@gmail.com>
Co-authored-by: Eric Liu <ericyl.us@gmail.com>
This commit is contained in:
Khiman Louer 2021-04-24 18:20:06 +02:00 • committed by GitHub
commit 2676d8d045
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 94 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

79
docs/src/pages/components/DataTable.svx
View file

@ -676,6 +676,85 @@ In the example below, the "Protocol" column is not sortable.
]}"
/>
### Sortable with nested object values
<DataTable sortable title="Load balancers" description="Your organization's active load balancers."
headers="{[
{ key: "name", value: "Name" },
{ key: "network.protocol", value: "Protocol" },
{ key: "network.port", value: "Port" },
{ key: "cost", value: "Cost", display: (cost) => cost + " €" },
{
key: "expireDate",
value: "Expire date",
display: (date) => new Date(date).toLocaleString(),
sort: (a, b) => new Date(a) - new Date(b),
},
]}"
rows="{[
{
id: "a",
name: "Load Balancer 3",
network: {
protocol: "HTTP",
port: 3000,
},
cost: 100,
expireDate: "2020-10-21",
},
{
id: "b",
name: "Load Balancer 1",
network: {
protocol: "HTTP",
port: 443,
},
cost: 200,
expireDate: "2020-09-10",
},
{
id: "c",
name: "Load Balancer 2",
network: {
protocol: "HTTP",
port: 80,
},
cost: 150,
expireDate: "2020-11-24",
},
{
id: "d",
name: "Load Balancer 6",
network: {
protocol: "HTTP",
port: 3000,
},
cost: 250,
expireDate: "2020-12-01",
},
{
id: "e",
name: "Load Balancer 4",
network: {
protocol: "HTTP",
port: 443,
},
cost: 550,
expireDate: "2021-03-21",
},
{
id: "f",
name: "Load Balancer 5",
network: {
protocol: "HTTP",
port: 80,
},
cost: 400,
expireDate: "2020-11-14",
},
]}"
/>
### Empty column with overflow menu
Some use cases require an empty column in the table body without a corresponding table header.