mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(toolbar-search): support auto-filterable rows (#1179)

Browse source 
Closes #591
This commit is contained in:
metonym 2022-03-19 12:01:03 -07:00 • committed by GitHub
commit 2df7b92269
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 218 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -464,6 +464,22 @@ title="Load balancers" description="Your organization's active load balancers."
</Toolbar>
</DataTable>
### Filterable
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.
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" />
### Filterable (custom)
`shouldFilterRows` also accepts a function and passes it the current row and value. It expects the function to return a boolean.
<FileSource src="/framed/DataTable/DataTableFilterCustom" />
### Zebra stripes
<DataTable zebra

55
docs/src/pages/framed/DataTable/DataTableFilterCustom.svelte Normal file
View file

@ -0,0 +1,55 @@
<script>
import {
DataTable,
Toolbar,
ToolbarContent,
ToolbarSearch,
ToolbarMenu,
ToolbarMenuItem,
Button,
} from "carbon-components-svelte";
let rows = Array.from({ length: 10 }).map((_, i) => ({
id: i,
name: "Load Balancer " + (i + 1),
protocol: "HTTP",
port: 3000 + i * 10,
rule: i % 2 ? "Round robin" : "DNS delegation",
}));
</script>
<DataTable
sortable
title="Load balancers"
description="Your organization's active load balancers."
headers="{[
{ key: 'name', value: 'Name' },
{ key: 'protocol', value: 'Protocol' },
{ key: 'port', value: 'Port' },
{ key: 'rule', value: 'Rule' },
]}"
rows="{rows}"
>
<Toolbar>
<ToolbarContent>
<ToolbarSearch
persistent
value="round"
shouldFilterRows="{(row, value) => {
return (
/(6|8)$/.test(row.name) &&
row.rule.toLowerCase().includes(value.toLowerCase())
);
}}"
/>
<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>
</Toolbar>
</DataTable>

46
docs/src/pages/framed/DataTable/DataTableFilterable.svelte Normal file
View file

@ -0,0 +1,46 @@
<script>
import {
DataTable,
Toolbar,
ToolbarContent,
ToolbarSearch,
ToolbarMenu,
ToolbarMenuItem,
Button,
} from "carbon-components-svelte";
let rows = Array.from({ length: 10 }).map((_, i) => ({
id: i,
name: "Load Balancer " + (i + 1),
protocol: "HTTP",
port: 3000 + i * 10,
rule: i % 2 ? "Round robin" : "DNS delegation",
}));
</script>
<DataTable
sortable
title="Load balancers"
description="Your organization's active load balancers."
headers="{[
{ key: 'name', value: 'Name' },
{ key: 'protocol', value: 'Protocol' },
{ key: 'port', value: 'Port' },
{ key: 'rule', value: 'Rule' },
]}"
rows="{rows}"
>
<Toolbar>
<ToolbarContent>
<ToolbarSearch persistent value="round" shouldFilterRows />
<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>
</Toolbar>
</DataTable>