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

docs(data-table): add pagination to default filterable examples

Browse source
This commit is contained in:
Eric Liu 2022-08-17 19:30:33 -07:00
commit f100ed7d54
3 changed files with 40 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -505,13 +505,15 @@ By default, `ToolbarSearch` will not filter `DataTable` rows.
Set `shouldFilterRows` to `true` to enable client-side filtering. The default filtering performs a basic string comparison on cell values that are of a string or a number type. Set `shouldFilterRows` to `true` to enable client-side filtering. The default filtering performs a basic string comparison on cell values that are of a string or a number type.
To use filtering with pagination, bind to the `filteredRowIds` prop and pass its length to `totalItems` in `Pagination`.
Note that in-memory filtering is not optimal for large data sets, where you might consider using server-side search. Note that in-memory filtering is not optimal for large data sets, where you might consider using server-side search.
<FileSource src="/framed/DataTable/DataTableFilterable" /> <FileSource src="/framed/DataTable/DataTableFilterable" />
## Filterable (custom) ## Filterable (custom)
`shouldFilterRows` also accepts a function and passes it the current row and value. It expects the function to return a boolean. `shouldFilterRows` also accepts a function and passes it the current row and search value. It expects the function to return a boolean.
<FileSource src="/framed/DataTable/DataTableFilterCustom" /> <FileSource src="/framed/DataTable/DataTableFilterCustom" />

30
docs/src/pages/framed/DataTable/DataTableFilterCustom.svelte
View file

@ -4,9 +4,7 @@
Toolbar, Toolbar,
ToolbarContent, ToolbarContent,
ToolbarSearch, ToolbarSearch,
ToolbarMenu, Pagination,
ToolbarMenuItem,
Button,
} from "carbon-components-svelte"; } from "carbon-components-svelte";
let rows = Array.from({ length: 10 }).map((_, i) => ({ let rows = Array.from({ length: 10 }).map((_, i) => ({
@ -16,12 +14,14 @@
port: 3000 + i * 10, port: 3000 + i * 10,
rule: i % 2 ? "Round robin" : "DNS delegation", rule: i % 2 ? "Round robin" : "DNS delegation",
})); }));
let pageSize = 5;
let page = 1;
let filteredRowIds = [];
$: console.log("filteredRowIds", filteredRowIds);
</script> </script>
<DataTable <DataTable
sortable
title="Load balancers"
description="Your organization's active load balancers."
headers="{[ headers="{[
{ key: 'name', value: 'Name' }, { key: 'name', value: 'Name' },
{ key: 'protocol', value: 'Protocol' }, { key: 'protocol', value: 'Protocol' },
@ -29,6 +29,8 @@
{ key: 'rule', value: 'Rule' }, { key: 'rule', value: 'Rule' },
]}" ]}"
rows="{rows}" rows="{rows}"
pageSize="{pageSize}"
page="{page}"
> >
<Toolbar> <Toolbar>
<ToolbarContent> <ToolbarContent>
@ -41,15 +43,15 @@
row.rule.toLowerCase().includes(value.toLowerCase()) row.rule.toLowerCase().includes(value.toLowerCase())
); );
}}" }}"
bind:filteredRowIds
/> />
<ToolbarMenu>
<ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
<ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">
API documentation
</ToolbarMenuItem>
<ToolbarMenuItem hasDivider danger>Stop all</ToolbarMenuItem>
</ToolbarMenu>
<Button>Create balancer</Button>
</ToolbarContent> </ToolbarContent>
</Toolbar> </Toolbar>
</DataTable> </DataTable>
<Pagination
bind:pageSize
bind:page
totalItems="{filteredRowIds.length}"
pageSizeInputDisabled
/>

36
docs/src/pages/framed/DataTable/DataTableFilterable.svelte
View file

@ -4,9 +4,7 @@
Toolbar, Toolbar,
ToolbarContent, ToolbarContent,
ToolbarSearch, ToolbarSearch,
ToolbarMenu, Pagination,
ToolbarMenuItem,
Button,
} from "carbon-components-svelte"; } from "carbon-components-svelte";
let rows = Array.from({ length: 10 }).map((_, i) => ({ let rows = Array.from({ length: 10 }).map((_, i) => ({
@ -16,12 +14,14 @@
port: 3000 + i * 10, port: 3000 + i * 10,
rule: i % 2 ? "Round robin" : "DNS delegation", rule: i % 2 ? "Round robin" : "DNS delegation",
})); }));
let pageSize = 5;
let page = 1;
let filteredRowIds = [];
$: console.log("filteredRowIds", filteredRowIds);
</script> </script>
<DataTable <DataTable
sortable
title="Load balancers"
description="Your organization's active load balancers."
headers="{[ headers="{[
{ key: 'name', value: 'Name' }, { key: 'name', value: 'Name' },
{ key: 'protocol', value: 'Protocol' }, { key: 'protocol', value: 'Protocol' },
@ -29,18 +29,24 @@
{ key: 'rule', value: 'Rule' }, { key: 'rule', value: 'Rule' },
]}" ]}"
rows="{rows}" rows="{rows}"
pageSize="{pageSize}"
page="{page}"
> >
<Toolbar> <Toolbar>
<ToolbarContent> <ToolbarContent>
<ToolbarSearch persistent value="round" shouldFilterRows /> <ToolbarSearch
<ToolbarMenu> persistent
<ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem> value="round"
<ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service"> shouldFilterRows
API documentation bind:filteredRowIds
</ToolbarMenuItem> />
<ToolbarMenuItem hasDivider danger>Stop all</ToolbarMenuItem>
</ToolbarMenu>
<Button>Create balancer</Button>
</ToolbarContent> </ToolbarContent>
</Toolbar> </Toolbar>
</DataTable> </DataTable>
<Pagination
bind:pageSize
bind:page
totalItems="{filteredRowIds.length}"
pageSizeInputDisabled
/>