docs(data-table): extract "Sortable with pagination" example into ifr…

…ame (#1456)

docs/src/pages/components/DataTable.svx

@@ -6,8 +6,6 @@ components: ["DataTable", "Pagination","Toolbar", "ToolbarContent", "ToolbarSear
   import { InlineNotification, DataTable, DataTableSkeleton, Pagination, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte";
   import Launch from "carbon-icons-svelte/lib/Launch.svelte";
   import Preview from "../../components/Preview.svelte";
-
-  const pagination = { pageSize: 5, page: 1}
 </script>
 
 `DataTable` is keyed for performance reasons.
@@ -855,81 +853,9 @@ 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.
+For pagination, bind to the `pageSize` and `page` props of `Pagination` and pass their values to `DataTable`.
 
-<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
-/>
+<FileSource src="/framed/DataTable/DataTablePagination" />
 
 ## Sortable with custom display and sort methods
 

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

@@ -0,0 +1,34 @@
+<script>
+  import { DataTable, Pagination } from "carbon-components-svelte";
+
+  let rows = Array.from({ length: 10 }).map((_, i) => ({
+    id: i,
+    name: "Load Balancer " + (i + 1),
+    protocol: "HTTP",
+    port: 3000 + i * 10,
+    rule: i % 2 ? "Round robin" : "DNS delegation",
+  }));
+  let pageSize = 5;
+  let page = 1;
+</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' },
+  ]}"
+  pageSize="{pageSize}"
+  page="{page}"
+  rows="{rows}"
+/>
+<Pagination
+  bind:pageSize
+  bind:page
+  totalItems="{rows.length}"
+  pageSizeInputDisabled
+/>