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

docs(data-table): improve docs

Browse source
This commit is contained in:
Eric Liu 2025-04-20 15:30:40 -07:00
commit 90b067ded3
2 changed files with 108 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

65
docs/src/pages/framed/DataTable/DataTableProgrammaticSorting.svelte
View file

@ -8,37 +8,40 @@
$: console.log("sortDirection", sortDirection);
</script>
<Button
kind="tertiary"
disabled={sortKey === "port" && sortDirection === "ascending"}
on:click={() => {
sortKey = "port";
sortDirection = "ascending";
}}
>
Sort "port" in ascending order
</Button>
<Button
kind="tertiary"
disabled={sortKey === "name" && sortDirection === "descending"}
on:click={() => {
sortKey = "name";
sortDirection = "descending";
}}
>
Sort "name" in descending order
</Button>
<Button
kind="ghost"
on:click={() => {
sortKey = null;
sortDirection = "none";
}}
>
Clear sorting
</Button>
<div style="margin-bottom: 1rem">
<Button
size="sm"
kind="tertiary"
disabled={sortKey === "port" && sortDirection === "ascending"}
on:click={() => {
sortKey = "port";
sortDirection = "ascending";
}}
>
Sort "port" in ascending order
</Button>
<Button
size="sm"
kind="tertiary"
disabled={sortKey === "name" && sortDirection === "descending"}
on:click={() => {
sortKey = "name";
sortDirection = "descending";
}}
>
Sort "name" in descending order
</Button>
<Button
size="sm"
kind="ghost"
on:click={() => {
sortKey = null;
sortDirection = "none";
}}
>
Clear sorting
</Button>
</div>
<DataTable
sortable