CHANGELOG.md

@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 <!-- ## Unreleased -->
 
+## [0.70.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.0) - 2022-08-18
+
+**Features**
+
+- add `filteredRowIds` prop to `ToolbarSearch` to support pagination
+
+## [0.69.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.69.0) - 2022-08-17
+
+**Features**
+
+- dispatch `on:click:header--select` event in `DataTable`
+- dispatch `on:click:row--select` event in `DataTable`
+
 ## [0.68.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.68.0) - 2022-08-15
 
 **Features**
@@ -881,7 +894,7 @@ Svelte version >=3.48.0 is required.
 
 **Features**
 
-- add `nonExpandableRowsIds` prop to `DataTable` to specify rows that should not be expandable
+- add `nonExpandableRowIds` prop to `DataTable` to specify rows that should not be expandable
 
 ## [0.46.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.46.0) - 2021-10-17
 

COMPONENT_INDEX.md

@@ -1,6 +1,6 @@
 # Component Index
 
-> 165 components exported from carbon-components-svelte@0.68.0.
+> 165 components exported from carbon-components-svelte@0.70.0.
 
 ## Components
 
@@ -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

@@ -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.
@@ -505,13 +503,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" />
 
@@ -853,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/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,19 +14,23 @@
     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' },
     { key: 'port', value: 'Port' },
     { 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,
-    ToolbarMenuItem,
-    Button,
+    Pagination,
   } from "carbon-components-svelte";
 
   let rows = Array.from({ length: 10 }).map((_, i) => ({
@@ -16,31 +14,39 @@
     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' },
     { key: 'port', value: 'Port' },
     { 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
+/>

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
+/>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-components-svelte",
-  "version": "0.68.0",
+  "version": "0.70.0",
   "license": "Apache-2.0",
   "description": "Svelte implementation of the Carbon Design System",
   "svelte": "./src/index.js",

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"