From dbe33d5cbb81f2d442d5e5bcf535cdf6a1f0a41e Mon Sep 17 00:00:00 2001 From: metonym Date: Thu, 18 Aug 2022 06:59:14 -0700 Subject: [PATCH] feat(toolbar-search): add `filteredRowIds` prop to support pagination (#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 --- COMPONENT_INDEX.md | 1 + docs/src/COMPONENT_API.json | 12 +++++++ docs/src/pages/components/DataTable.svx | 4 ++- .../DataTable/DataTableFilterCustom.svelte | 30 ++++++++-------- .../DataTable/DataTableFilterable.svelte | 36 +++++++++++-------- src/DataTable/ToolbarSearch.svelte | 7 ++++ tests/DataTable.test.svelte | 3 ++ types/DataTable/ToolbarSearch.svelte.d.ts | 6 ++++ 8 files changed, 69 insertions(+), 30 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 0f135b38..51375cf7 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -4501,6 +4501,7 @@ None. | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :--------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| filteredRowIds | No | let | Yes | ReadonlyArray | [] | The filtered row ids | | expanded | No | let | Yes | boolean | false | Set to `true` to expand the search bar | | value | No | let | Yes | number | string | "" | Specify the value of the search input | | persistent | No | let | No | boolean | false | Set to `true` to keep the search bar expanded | diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 0a032b3c..68d92c00 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -13829,6 +13829,18 @@ "constant": false, "reactive": false }, + { + "name": "filteredRowIds", + "kind": "let", + "description": "The filtered row ids", + "type": "ReadonlyArray", + "value": "[]", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": true + }, { "name": "tabindex", "kind": "let", diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx index 40448a22..026770c9 100644 --- a/docs/src/pages/components/DataTable.svx +++ b/docs/src/pages/components/DataTable.svx @@ -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. ## 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. diff --git a/docs/src/pages/framed/DataTable/DataTableFilterCustom.svelte b/docs/src/pages/framed/DataTable/DataTableFilterCustom.svelte index 30f57f31..91e0a186 100644 --- a/docs/src/pages/framed/DataTable/DataTableFilterCustom.svelte +++ b/docs/src/pages/framed/DataTable/DataTableFilterCustom.svelte @@ -4,9 +4,7 @@ Toolbar, ToolbarContent, ToolbarSearch, - ToolbarMenu, - ToolbarMenuItem, - Button, + Pagination, } from "carbon-components-svelte"; let rows = Array.from({ length: 10 }).map((_, i) => ({ @@ -16,12 +14,14 @@ port: 3000 + i * 10, rule: i % 2 ? "Round robin" : "DNS delegation", })); + let pageSize = 5; + let page = 1; + let filteredRowIds = []; + + $: console.log("filteredRowIds", filteredRowIds); @@ -41,15 +43,15 @@ row.rule.toLowerCase().includes(value.toLowerCase()) ); }}" + bind:filteredRowIds /> - - Restart all - - API documentation - - Stop all - - + + diff --git a/docs/src/pages/framed/DataTable/DataTableFilterable.svelte b/docs/src/pages/framed/DataTable/DataTableFilterable.svelte index 3d80b057..b83f9a46 100644 --- a/docs/src/pages/framed/DataTable/DataTableFilterable.svelte +++ b/docs/src/pages/framed/DataTable/DataTableFilterable.svelte @@ -4,9 +4,7 @@ Toolbar, ToolbarContent, ToolbarSearch, - ToolbarMenu, - ToolbarMenuItem, - Button, + Pagination, } from "carbon-components-svelte"; let rows = Array.from({ length: 10 }).map((_, i) => ({ @@ -16,12 +14,14 @@ port: 3000 + i * 10, rule: i % 2 ? "Round robin" : "DNS delegation", })); + let pageSize = 5; + let page = 1; + let filteredRowIds = []; + + $: console.log("filteredRowIds", filteredRowIds); - - - Restart all - - API documentation - - Stop all - - + + + diff --git a/src/DataTable/ToolbarSearch.svelte b/src/DataTable/ToolbarSearch.svelte index 30e53a44..f0064883 100644 --- a/src/DataTable/ToolbarSearch.svelte +++ b/src/DataTable/ToolbarSearch.svelte @@ -28,6 +28,12 @@ */ export let shouldFilterRows = false; + /** + * The filtered row ids + * @type {ReadonlyArray} + */ + export let filteredRowIds = []; + /** Specify the tabindex */ export let tabindex = "0"; @@ -65,6 +71,7 @@ } tableRows.set(rows); + filteredRowIds = rows.map((row) => row.id); } async function expandSearch() { diff --git a/tests/DataTable.test.svelte b/tests/DataTable.test.svelte index 0ac2a22b..45f6a07c 100644 --- a/tests/DataTable.test.svelte +++ b/tests/DataTable.test.svelte @@ -68,6 +68,8 @@ if (new Date(a) > new Date(b)) return 1; return 0; } + + let filteredRowIds = []; boolean); + /** + * The filtered row ids + * @default [] + */ + filteredRowIds?: ReadonlyArray; + /** * Specify the tabindex * @default "0"