From f100ed7d54366736031b7681a6c6541e5331e327 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Wed, 17 Aug 2022 19:30:33 -0700
Subject: [PATCH] docs(data-table): add pagination to default filterable
 examples

---
 docs/src/pages/components/DataTable.svx       |  4 ++-
 .../DataTable/DataTableFilterCustom.svelte    | 30 ++++++++--------
 .../DataTable/DataTableFilterable.svelte      | 36 +++++++++++--------
 3 files changed, 40 insertions(+), 30 deletions(-)

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.
 
 <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" />
 
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);
 </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
+/>
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);
 </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 />
-      <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
+/>