mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 03:26:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(data-table): add clear reminder to key headers/rows

Browse source
This commit is contained in:
Eric Y Liu 2021-07-05 12:58:09 -07:00
commit f408b3ef4b
1 changed files with 11 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,14 +3,22 @@ components: ["DataTable", "Toolbar", "ToolbarContent", "ToolbarSearch", "Toolbar
---
<script>
import { DataTable, DataTableSkeleton, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte";
import { InlineNotification, DataTable, DataTableSkeleton, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte";
import Launch16 from "carbon-icons-svelte/lib/Launch16";
import Preview from "../../components/Preview.svelte";
</script>
### Default
`DataTable` is keyed for both rendering and sorting purposes.
The `DataTable` is keyed for both rendering and sorting. You must define a "key" value per object in the `headers` property and an "id" value in `rows`.
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">Every <code>headers</code> object must have a unique "key" property.</div>
</InlineNotification>
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">Every <code>rows</code> object must have a unique "id" property.</div>
</InlineNotification>
### Default
<DataTable
headers="{[