mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
docs(data-table): add "Sticky header" example (#1241)
* docs(data-table): add "Sticky header" example * docs(link): add note on disabled link
This commit is contained in:
parent
2d26ce115d
commit
e19ace4135
2 changed files with 25 additions and 0 deletions
|
@ -328,6 +328,29 @@ title="Load balancers" description="Your organization's active load balancers."
|
|||
]}"
|
||||
/>
|
||||
|
||||
### Sticky header
|
||||
|
||||
Set `stickyHeader` to `true` for the header to be fixed in place.
|
||||
|
||||
A maximum height will applied to the datatable to force a scrollbar.
|
||||
|
||||
<DataTable
|
||||
stickyHeader
|
||||
headers={[
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "protocol", value: "Protocol" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" },
|
||||
]}
|
||||
rows={Array.from({ length: 20 }).map((_, i) => ({
|
||||
id: i,
|
||||
name: "Load Balancer " + (i + 1),
|
||||
protocol: "HTTP",
|
||||
port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
|
||||
rule: i % 3 ? "Round robin" : "DNS delegation",
|
||||
}))}
|
||||
/>
|
||||
|
||||
### With toolbar
|
||||
|
||||
<DataTable title="Load balancers" description="Your organization's active load balancers."
|
||||
|
|
|
@ -66,6 +66,8 @@ Note that `inline` must be `false` when rendering a link with an icon.
|
|||
|
||||
### Disabled
|
||||
|
||||
A `disabled` link will render a `p` tag instead of an anchor element.
|
||||
|
||||
<Link disabled href="https://www.carbondesignsystem.com/">
|
||||
Carbon Design System
|
||||
</Link>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue