From 5da83ec86942b55ed9bf45811dabeb02dc4c103a Mon Sep 17 00:00:00 2001
From: kwieszalka-maystreet
 <93266638+kwieszalka-maystreet@users.noreply.github.com>
Date: Wed, 19 Jan 2022 16:51:42 +0100
Subject: [PATCH] feat(data-table): support paginated data table (#880)

Closes #702
---
 COMPONENT_INDEX.md                      |  2 +
 docs/src/COMPONENT_API.json             | 22 +++++++
 docs/src/pages/components/DataTable.svx | 84 ++++++++++++++++++++++++-
 src/DataTable/DataTable.svelte          | 14 ++++-
 types/DataTable/DataTable.svelte.d.ts   | 12 ++++
 5 files changed, 131 insertions(+), 3 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 958e0e26..fdace6b3 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -997,6 +997,8 @@ export interface DataTableCell {
 | batchSelection      | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code> | Set to `true` to enable batch selection                                                                             |
 | stickyHeader        | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code> | Set to `true` to enable a sticky header                                                                             |
 | useStaticWidth      | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code> | Set to `true` to use static width                                                                                   |
+| pageSize            | <code>let</code> | No       | <code>number</code>                                                 | <code>0</code>     | Specify the number of items to display in a page                                                                    |
+| page                | <code>let</code> | No       | <code>number</code>                                                 | <code>0</code>     | Set to `number` to set current page                                                                                 |
 
 ### Slots
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 681d353d..d76f65f4 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -2384,6 +2384,28 @@
           "isFunctionDeclaration": false,
           "constant": false,
           "reactive": false
+        },
+        {
+          "name": "pageSize",
+          "kind": "let",
+          "description": "Specify the number of items to display in a page",
+          "type": "number",
+          "value": "0",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "page",
+          "kind": "let",
+          "description": "Set to `number` to set current page",
+          "type": "number",
+          "value": "0",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
         }
       ],
       "slots": [
diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx
index 9e8a754e..45fd46cd 100644
--- a/docs/src/pages/components/DataTable.svx
+++ b/docs/src/pages/components/DataTable.svx
@@ -1,11 +1,13 @@
 ---
-components: ["DataTable", "Toolbar", "ToolbarContent", "ToolbarSearch", "ToolbarMenu", "ToolbarMenuItem", "ToolbarBatchActions"]
+components: ["DataTable", "Pagination","Toolbar", "ToolbarContent", "ToolbarSearch", "ToolbarMenu", "ToolbarMenuItem", "ToolbarBatchActions"]
 ---
 
 <script>
-  import { InlineNotification, DataTable, DataTableSkeleton, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte";
+  import { InlineNotification, DataTable, DataTableSkeleton, Pagination, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte";
   import Launch16 from "carbon-icons-svelte/lib/Launch16";
   import Preview from "../../components/Preview.svelte";
+
+  const pagination = { pageSize: 5, page: 1}
 </script>
 
 `DataTable` is keyed for both rendering and sorting purposes.
@@ -792,6 +794,84 @@ In the example below, the "Protocol" column is not sortable.
   ]}"
 />
 
+### Sortable with pagination
+
+If you want `DataTable` to sort the whole dataset but still display paginated content, you need to pass the whole dataset in the `rows` prop, 
+and then limit displayed content by using `pageSize` and `page` props, which are corresponding to the same props in the `Pagination` component.
+
+<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: "cost", value: "Cost", display: (cost) => cost + " €" },
+    {
+      key: "expireDate",
+      value: "Expire date",
+      display: (date) => new Date(date).toLocaleString(),
+      sort: (a, b) => new Date(a) - new Date(b),
+    },
+  ]}"
+  pageSize={pagination.pageSize}
+  page={pagination.page}
+  rows="{[
+    {
+      id: "a",
+      name: "Load Balancer 3",
+      protocol: "HTTP",
+      port: 3000,
+      cost: 100,
+      expireDate: "2020-10-21",
+    },
+    {
+      id: "b",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
+      port: 443,
+      cost: 200,
+      expireDate: "2020-09-10",
+    },
+    {
+      id: "c",
+      name: "Load Balancer 2",
+      protocol: "HTTP",
+      port: 80,
+      cost: 150,
+      expireDate: "2020-11-24",
+    },
+    {
+      id: "d",
+      name: "Load Balancer 6",
+      protocol: "HTTP",
+      port: 3000,
+      cost: 250,
+      expireDate: "2020-12-01",
+    },
+    {
+      id: "e",
+      name: "Load Balancer 4",
+      protocol: "HTTP",
+      port: 443,
+      cost: 550,
+      expireDate: "2021-03-21",
+    },
+    {
+      id: "f",
+      name: "Load Balancer 5",
+      protocol: "HTTP",
+      port: 80,
+      cost: 400,
+      expireDate: "2020-11-14",
+    },
+  ]}"
+/>
+<Pagination 
+  bind:pageSize={pagination.pageSize}
+  bind:page={pagination.page}
+  totalItems={6}
+  pageSizeInputDisabled
+/>
+
 ### Sortable with custom display and sort methods
 
 <DataTable sortable title="Load balancers" description="Your organization's active load balancers."
diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index 6cb2d4cc..a10a4dc3 100644
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@@ -100,6 +100,12 @@
   /** Set to `true` to use static width */
   export let useStaticWidth = false;
 
+  /** Specify the number of items to display in a page */
+  export let pageSize = 0;
+
+  /** Set to `number` to set current page */
+  export let page = 0;
+
   import { createEventDispatcher, setContext } from "svelte";
   import { writable, derived } from "svelte/store";
   import ChevronRight16 from "../icons/ChevronRight16.svelte";
@@ -216,6 +222,12 @@
       });
     }
   }
+  const getDisplayedRows = (rows, page, pageSize) =>
+    page && pageSize
+      ? rows.slice((page - 1) * pageSize, page * pageSize)
+      : rows;
+  $: displayedRows = getDisplayedRows(rows, page, pageSize);
+  $: displayedSortedRows = getDisplayedRows(sortedRows, page, pageSize);
 </script>
 
 <TableContainer useStaticWidth="{useStaticWidth}" {...$$restProps}>
@@ -326,7 +338,7 @@
       </TableRow>
     </TableHead>
     <TableBody>
-      {#each sorting ? sortedRows : rows as row, i (row.id)}
+      {#each sorting ? displayedSortedRows : displayedRows as row, i (row.id)}
         <TableRow
           id="row-{row.id}"
           class="{selectedRowIds.includes(row.id)
diff --git a/types/DataTable/DataTable.svelte.d.ts b/types/DataTable/DataTable.svelte.d.ts
index 1229e3ae..9c37a3a6 100644
--- a/types/DataTable/DataTable.svelte.d.ts
+++ b/types/DataTable/DataTable.svelte.d.ts
@@ -141,6 +141,18 @@ export interface DataTableProps
    * @default false
    */
   useStaticWidth?: boolean;
+
+  /**
+   * Specify the number of items to display in a page
+   * @default 0
+   */
+  pageSize?: number;
+
+  /**
+   * Set to `number` to set current page
+   * @default 0
+   */
+  page?: number;
 }
 
 export default class DataTable extends SvelteComponentTyped<