Skip to content

Commit

Permalink
feat(toolbar-search): add filteredRowIds prop to support pagination (…
Browse files Browse the repository at this point in the history 
…#1454)

Closes #1393

* feat(toolbar-search): add `filteredRowIds` prop

* Run "yarn build:docs"

* test(data-table): assert `filteredRowIds` prop

* docs(data-table): add pagination to default filterable examples
  • Loading branch information
@metonym
metonym committed Aug 18, 2022
1 parent 2d99fe4 commit dbe33d5
Show file tree
Hide file tree
Showing 8 changed files with 69 additions and 30 deletions.
1 change: 1 addition & 0 deletions COMPONENT_INDEX.md
View file
Expand Up @@ -4501,6 +4501,7 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :--------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| filteredRowIds | No | <code>let</code> | Yes | <code>ReadonlyArray<import("./DataTable.svelte").DataTableRowId></code> | <code>[]</code> | The filtered row ids |
| expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand the search bar |
| value | No | <code>let</code> | Yes | <code>number &#124; string</code> | <code>""</code> | Specify the value of the search input |
| persistent | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to keep the search bar expanded |
Expand Down
12 changes: 12 additions & 0 deletions docs/src/COMPONENT_API.json
View file
Expand Up @@ -13829,6 +13829,18 @@
"constant": false,
"reactive": false
},
{
"name": "filteredRowIds",
"kind": "let",
"description": "The filtered row ids",
"type": "ReadonlyArray<import(\"./DataTable.svelte\").DataTableRowId>",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": true
},
{
"name": "tabindex",
"kind": "let",
Expand Down
4 changes: 3 additions & 1 deletion docs/src/pages/components/DataTable.svx
View file
Expand Up @@ -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.

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.

<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.
`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" />

Expand Down
30 changes: 16 additions & 14 deletions docs/src/pages/framed/DataTable/DataTableFilterCustom.svelte
View file
Expand Up @@ -4,9 +4,7 @@
Toolbar,
ToolbarContent,
ToolbarSearch,
ToolbarMenu,
ToolbarMenuItem,
Button,
Pagination,
} from "carbon-components-svelte";
let rows = Array.from({ length: 10 }).map((_, i) => ({
Expand All @@ -16,19 +14,23 @@
port: 3000 + i * 10,
rule: i % 2 ? "Round robin" : "DNS delegation",
}));
let pageSize = 5;
let page = 1;
let filteredRowIds = [];
$: console.log("filteredRowIds", filteredRowIds);
</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}"
pageSize="{pageSize}"
page="{page}"
>
<Toolbar>
<ToolbarContent>
Expand All @@ -41,15 +43,15 @@
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>
</Toolbar>
</DataTable>

<Pagination
bind:pageSize
bind:page
totalItems="{filteredRowIds.length}"
pageSizeInputDisabled
/>
36 changes: 21 additions & 15 deletions docs/src/pages/framed/DataTable/DataTableFilterable.svelte
View file
Expand Up @@ -4,9 +4,7 @@
Toolbar,
ToolbarContent,
ToolbarSearch,
ToolbarMenu,
ToolbarMenuItem,
Button,
Pagination,
} from "carbon-components-svelte";
let rows = Array.from({ length: 10 }).map((_, i) => ({
Expand All @@ -16,31 +14,39 @@
port: 3000 + i * 10,
rule: i % 2 ? "Round robin" : "DNS delegation",
}));
let pageSize = 5;
let page = 1;
let filteredRowIds = [];
$: console.log("filteredRowIds", filteredRowIds);
</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}"
pageSize="{pageSize}"
page="{page}"
>
<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>
<ToolbarSearch
persistent
value="round"
shouldFilterRows
bind:filteredRowIds
/>
</ToolbarContent>
</Toolbar>
</DataTable>

<Pagination
bind:pageSize
bind:page
totalItems="{filteredRowIds.length}"
pageSizeInputDisabled
/>
7 changes: 7 additions & 0 deletions src/DataTable/ToolbarSearch.svelte
View file
Expand Up @@ -28,6 +28,12 @@
*/
export let shouldFilterRows = false;
/**
* The filtered row ids
* @type {ReadonlyArray<import("./DataTable.svelte").DataTableRowId>}
*/
export let filteredRowIds = [];
/** Specify the tabindex */
export let tabindex = "0";
Expand Down Expand Up @@ -65,6 +71,7 @@
}
tableRows.set(rows);
filteredRowIds = rows.map((row) => row.id);
}
async function expandSearch() {
Expand Down
3 changes: 3 additions & 0 deletions tests/DataTable.test.svelte
View file
Expand Up @@ -68,6 +68,8 @@
if (new Date(a) > new Date(b)) return 1;
return 0;
}
let filteredRowIds = [];
</script>

<DataTable
Expand Down Expand Up @@ -117,6 +119,7 @@
<Toolbar>
<ToolbarContent>
<ToolbarSearch
bind:filteredRowIds
shouldFilterRows="{(row, value) => {
return row.name.includes(value);
}}"
Expand Down
6 changes: 6 additions & 0 deletions types/DataTable/ToolbarSearch.svelte.d.ts
View file
Expand Up @@ -44,6 +44,12 @@ export interface ToolbarSearchProps
value: number | string
) => boolean);

/**
* The filtered row ids
* @default []
*/
filteredRowIds?: ReadonlyArray<import("./DataTable.svelte").DataTableRowId>;

/**
* Specify the tabindex
* @default "0"
Expand Down

0 comments on commit dbe33d5

Please sign in to comment.