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

@@ -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                                                                                                                                                                                                                                                                                                   |

docs/src/COMPONENT_API.json

@@ -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",

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

docs/src/pages/framed/DataTable/DataTableFilterCustom.svelte

@@ -4,9 +4,7 @@
     Toolbar,
     ToolbarContent,
     ToolbarSearch,
-    ToolbarMenu,
+    Pagination,
-    ToolbarMenuItem,
-    Button,
   } 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);
 </script>
 
 <DataTable
-  sortable
-  title="Load balancers"
-  description="Your organization's active load balancers."
   headers="{[
     { key: 'name', value: 'Name' },
     { key: 'protocol', value: 'Protocol' },
@@ -29,6 +29,8 @@
     { key: 'rule', value: 'Rule' },
   ]}"
   rows="{rows}"
+  pageSize="{pageSize}"
+  page="{page}"
 >
   <Toolbar>
     <ToolbarContent>
@@ -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
+/>

docs/src/pages/framed/DataTable/DataTableFilterable.svelte

@@ -4,9 +4,7 @@
     Toolbar,
     ToolbarContent,
     ToolbarSearch,
-    ToolbarMenu,
+    Pagination,
-    ToolbarMenuItem,
-    Button,
   } 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);
 </script>
 
 <DataTable
-  sortable
-  title="Load balancers"
-  description="Your organization's active load balancers."
   headers="{[
     { key: 'name', value: 'Name' },
     { key: 'protocol', value: 'Protocol' },
@@ -29,18 +29,24 @@
     { key: 'rule', value: 'Rule' },
   ]}"
   rows="{rows}"
+  pageSize="{pageSize}"
+  page="{page}"
 >
   <Toolbar>
     <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>
   </Toolbar>
 </DataTable>
+
+<Pagination
+  bind:pageSize
+  bind:page
+  totalItems="{filteredRowIds.length}"
+  pageSizeInputDisabled
+/>

src/DataTable/ToolbarSearch.svelte

@@ -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";
 
@@ -65,6 +71,7 @@
     }
 
     tableRows.set(rows);
+    filteredRowIds = rows.map((row) => row.id);
   }
 
   async function expandSearch() {

tests/DataTable.test.svelte

@@ -68,6 +68,8 @@
     if (new Date(a) > new Date(b)) return 1;
     return 0;
   }
+
+  let filteredRowIds = [];
 </script>
 
 <DataTable
@@ -117,6 +119,7 @@
   <Toolbar>
     <ToolbarContent>
       <ToolbarSearch
+        bind:filteredRowIds
         shouldFilterRows="{(row, value) => {
           return row.name.includes(value);
         }}"

types/DataTable/ToolbarSearch.svelte.d.ts

@@ -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"