docs(data-table): add filterable examples

docs/src/pages/components/DataTable.svx

@@ -460,6 +460,22 @@ title="Load balancers" description="Your organization's active load balancers."
   </Toolbar>
 </DataTable>
 
+### Filterable
+
+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.
+
+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.
+
+<FileSource src="/framed/DataTable/DataTableFilterCustom" />
+
 ### Zebra stripes
 
 <DataTable zebra

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

@@ -0,0 +1,55 @@
+<script>
+  import {
+    DataTable,
+    Toolbar,
+    ToolbarContent,
+    ToolbarSearch,
+    ToolbarMenu,
+    ToolbarMenuItem,
+    Button,
+  } 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",
+  }));
+</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}"
+>
+  <Toolbar>
+    <ToolbarContent>
+      <ToolbarSearch
+        persistent
+        value="round"
+        shouldFilterRows="{(row, value) => {
+          return (
+            /(6|8)$/.test(row.name) &&
+            row.rule.toLowerCase().includes(value.toLowerCase())
+          );
+        }}"
+      />
+      <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>

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

@@ -0,0 +1,46 @@
+<script>
+  import {
+    DataTable,
+    Toolbar,
+    ToolbarContent,
+    ToolbarSearch,
+    ToolbarMenu,
+    ToolbarMenuItem,
+    Button,
+  } 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",
+  }));
+</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}"
+>
+  <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>
+    </ToolbarContent>
+  </Toolbar>
+</DataTable>