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:
metonym 2022-04-17 09:03:05 -07:00 committed by GitHub
commit e19ace4135
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 0 deletions

View file

@ -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 ### With toolbar
<DataTable title="Load balancers" description="Your organization's active load balancers." <DataTable title="Load balancers" description="Your organization's active load balancers."

View file

@ -66,6 +66,8 @@ Note that `inline` must be `false` when rendering a link with an icon.
### Disabled ### Disabled
A `disabled` link will render a `p` tag instead of an anchor element.
<Link disabled href="https://www.carbondesignsystem.com/"> <Link disabled href="https://www.carbondesignsystem.com/">
Carbon Design System Carbon Design System
</Link> </Link>