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

feat(data-table): make title, description slottable #720 (#722)

Browse source 
Closes #720
This commit is contained in:
Eric Liu 2021-07-05 08:44:07 -07:00 • committed by GitHub
commit 5fee13b2eb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 91 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

12
docs/src/COMPONENT_API.json
View file

@ -2091,10 +2091,22 @@
"fallback": "{header.value}",
"slot_props": "{ header: DataTableNonEmptyHeader; }"
},
{
"name": "description",
"default": false,
"fallback": "{description}",
"slot_props": "{}"
},
{
"name": "expanded-row",
"default": false,
"slot_props": "{ row: DataTableRow; }"
},
{
"name": "title",
"default": false,
"fallback": "{title}",
"slot_props": "{}"
}
],
"events": [

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

@ -194,6 +194,68 @@ The slot name for the table header cells is `"cell-header"`.
]}"
/>
### Slottable title, description
The `title` and `description` props are slottable.
<DataTable
headers="{[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" }
]}"
rows="{[
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "b",
name: "Load Balancer 1",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "c",
name: "Load Balancer 2",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
{
id: "d",
name: "Load Balancer 6",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "e",
name: "Load Balancer 4",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "f",
name: "Load Balancer 5",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
]}"
>
<strong slot="title">Load balancers</strong>
<span slot="description" style="font-size: 1rem">
Your organization's active load balancers.
</span>
</DataTable>
### With toolbar
<DataTable title="Load balancers" description="Your organization's active load balancers."