From 611d72bcf34ac44c1c35537e7ae806df1193ec54 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 24 Oct 2020 11:10:31 -0700
Subject: [PATCH] feat(data-table): add toolbar, toolbar search

---
 COMPONENT_INDEX.md                      |  73 +++-
 docs/src/PUBLIC_API.json                | 452 ++++++++++++++++--------
 docs/src/pages/components/DataTable.svx | 126 ++++++-
 src/DataTable/DataTable.svelte          |   1 +
 src/DataTable/Toolbar.svelte            |  19 +
 src/DataTable/ToolbarSearch.svelte      |  67 ++++
 src/DataTable/index.js                  |   2 +
 src/Search/Search.svelte                |   5 +-
 src/index.js                            |   2 +
 types/index.d.ts                        |  47 +++
 10 files changed, 640 insertions(+), 154 deletions(-)
 create mode 100644 src/DataTable/Toolbar.svelte
 create mode 100644 src/DataTable/ToolbarSearch.svelte

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index a48dd4f3..64809d71 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1,6 +1,6 @@
 # Component Index
 
-> 148 components exported from carbon-components-svelte 0.19.0
+> 150 components exported from carbon-components-svelte 0.19.0
 
 - Accordion
   - [Accordion](#accordion)
@@ -41,6 +41,8 @@
   - [TableHead](#tablehead)
   - [TableHeader](#tableheader)
   - [TableRow](#tablerow)
+  - [Toolbar](#toolbar)
+  - [ToolbarSearch](#toolbarsearch)
 - [DataTableSkeleton](#datatableskeleton)
 - DatePicker
   - [DatePicker](#datepicker)
@@ -996,9 +998,7 @@ import { DataTable } from "carbon-components-svelte";
 
 ### Slots
 
-- `<slot name="cell-header">...</slot>`
-- `<slot name="cell">...</slot>`
-- `<slot name="expanded-row">...</slot>`
+- `<slot>...</slot>`
 
 ### Forwarded events
 
@@ -3533,6 +3533,8 @@ No slots.
 - `on:mouseleave`
 - `on:change`
 - `on:input`
+- `on:focus`
+- `on:blur`
 
 ### Dispatched events
 
@@ -5220,6 +5222,69 @@ No dispatched events.
 
 ---
 
+## Toolbar
+
+### Import path
+
+```js
+import { Toolbar } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type                               | Default value | Description               |
+| :-------- | :--------------------------------- | :------------ | :------------------------ |
+| size      | <code>"sm" &#124; "default"</code> | `"default"`   | Specify the toolbar size. |
+
+### Slots
+
+- `<slot>...</slot>`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## ToolbarSearch
+
+### Import path
+
+```js
+import { ToolbarSearch } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name  | Type                                      | Default value | Description                                    |
+| :--------- | :---------------------------------------- | :------------ | :--------------------------------------------- |
+| value      | <code>string</code>                       | `""`          | Specify the value of the search input.         |
+| expanded   | <code>boolean</code>                      | `false`       | Set to `true` to expand the search bar.        |
+| persistent | <code>boolean</code>                      | `false`       | Set to `true` to keep the search bar expanded. |
+| tabindex   | <code>string</code>                       | `"0"`         | Specify the tabindex.                          |
+| ref        | <code>null &#124; HTMLInputElement</code> | `null`        | Obtain a reference to the input HTML element.  |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:change`
+- `on:input`
+- `on:focus`
+- `on:blur`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
 ## Tooltip
 
 ### Import path
diff --git a/docs/src/PUBLIC_API.json b/docs/src/PUBLIC_API.json
index 39897457..e900a3bc 100644
--- a/docs/src/PUBLIC_API.json
+++ b/docs/src/PUBLIC_API.json
@@ -2607,19 +2607,28 @@
         ]
       ],
       "slots": [
+        [
+          "default",
+          {
+            "attributes": [],
+            "children": [],
+            "default": true,
+            "default_value": ""
+          }
+        ],
         [
           "cell-header",
           {
             "attributes": [
               {
-                "start": 5608,
-                "end": 5626,
+                "start": 5619,
+                "end": 5637,
                 "type": "Attribute",
                 "name": "name",
                 "value": [
                   {
-                    "start": 5614,
-                    "end": 5625,
+                    "start": 5625,
+                    "end": 5636,
                     "type": "Text",
                     "raw": "cell-header",
                     "data": "cell-header"
@@ -2627,26 +2636,26 @@
                 ]
               },
               {
-                "start": 5627,
-                "end": 5644,
+                "start": 5638,
+                "end": 5655,
                 "type": "Attribute",
                 "name": "header",
                 "value": [
                   {
-                    "start": 5635,
-                    "end": 5643,
+                    "start": 5646,
+                    "end": 5654,
                     "type": "MustacheTag",
                     "expression": {
                       "type": "Identifier",
-                      "start": 5636,
-                      "end": 5642,
+                      "start": 5647,
+                      "end": 5653,
                       "loc": {
                         "start": {
-                          "line": 198,
+                          "line": 199,
                           "column": 46
                         },
                         "end": {
-                          "line": 198,
+                          "line": 199,
                           "column": 52
                         }
                       },
@@ -2658,34 +2667,34 @@
             ],
             "children": [
               {
-                "start": 5645,
-                "end": 5659,
+                "start": 5656,
+                "end": 5670,
                 "type": "MustacheTag",
                 "expression": {
                   "type": "MemberExpression",
-                  "start": 5646,
-                  "end": 5658,
+                  "start": 5657,
+                  "end": 5669,
                   "loc": {
                     "start": {
-                      "line": 198,
+                      "line": 199,
                       "column": 56
                     },
                     "end": {
-                      "line": 198,
+                      "line": 199,
                       "column": 68
                     }
                   },
                   "object": {
                     "type": "Identifier",
-                    "start": 5646,
-                    "end": 5652,
+                    "start": 5657,
+                    "end": 5663,
                     "loc": {
                       "start": {
-                        "line": 198,
+                        "line": 199,
                         "column": 56
                       },
                       "end": {
-                        "line": 198,
+                        "line": 199,
                         "column": 62
                       }
                     },
@@ -2693,15 +2702,15 @@
                   },
                   "property": {
                     "type": "Identifier",
-                    "start": 5653,
-                    "end": 5658,
+                    "start": 5664,
+                    "end": 5669,
                     "loc": {
                       "start": {
-                        "line": 198,
+                        "line": 199,
                         "column": 63
                       },
                       "end": {
-                        "line": 198,
+                        "line": 199,
                         "column": 68
                       }
                     },
@@ -2721,14 +2730,14 @@
           {
             "attributes": [
               {
-                "start": 7363,
-                "end": 7374,
+                "start": 7374,
+                "end": 7385,
                 "type": "Attribute",
                 "name": "name",
                 "value": [
                   {
-                    "start": 7369,
-                    "end": 7373,
+                    "start": 7380,
+                    "end": 7384,
                     "type": "Text",
                     "raw": "cell",
                     "data": "cell"
@@ -2736,26 +2745,26 @@
                 ]
               },
               {
-                "start": 7375,
-                "end": 7386,
+                "start": 7386,
+                "end": 7397,
                 "type": "Attribute",
                 "name": "row",
                 "value": [
                   {
-                    "start": 7380,
-                    "end": 7385,
+                    "start": 7391,
+                    "end": 7396,
                     "type": "MustacheTag",
                     "expression": {
                       "type": "Identifier",
-                      "start": 7381,
-                      "end": 7384,
+                      "start": 7392,
+                      "end": 7395,
                       "loc": {
                         "start": {
-                          "line": 244,
+                          "line": 245,
                           "column": 38
                         },
                         "end": {
-                          "line": 244,
+                          "line": 245,
                           "column": 41
                         }
                       },
@@ -2765,26 +2774,26 @@
                 ]
               },
               {
-                "start": 7387,
-                "end": 7400,
+                "start": 7398,
+                "end": 7411,
                 "type": "Attribute",
                 "name": "cell",
                 "value": [
                   {
-                    "start": 7393,
-                    "end": 7399,
+                    "start": 7404,
+                    "end": 7410,
                     "type": "MustacheTag",
                     "expression": {
                       "type": "Identifier",
-                      "start": 7394,
-                      "end": 7398,
+                      "start": 7405,
+                      "end": 7409,
                       "loc": {
                         "start": {
-                          "line": 244,
+                          "line": 245,
                           "column": 51
                         },
                         "end": {
-                          "line": 244,
+                          "line": 245,
                           "column": 55
                         }
                       },
@@ -2796,69 +2805,69 @@
             ],
             "children": [
               {
-                "start": 7401,
-                "end": 7418,
+                "start": 7412,
+                "end": 7429,
                 "type": "Text",
                 "raw": "\n                ",
                 "data": "\n                "
               },
               {
-                "start": 7418,
-                "end": 7484,
+                "start": 7429,
+                "end": 7495,
                 "type": "MustacheTag",
                 "expression": {
                   "type": "ConditionalExpression",
-                  "start": 7419,
-                  "end": 7483,
+                  "start": 7430,
+                  "end": 7494,
                   "loc": {
                     "start": {
-                      "line": 245,
+                      "line": 246,
                       "column": 17
                     },
                     "end": {
-                      "line": 245,
+                      "line": 246,
                       "column": 81
                     }
                   },
                   "test": {
                     "type": "MemberExpression",
-                    "start": 7419,
-                    "end": 7437,
+                    "start": 7430,
+                    "end": 7448,
                     "loc": {
                       "start": {
-                        "line": 245,
+                        "line": 246,
                         "column": 17
                       },
                       "end": {
-                        "line": 245,
+                        "line": 246,
                         "column": 35
                       }
                     },
                     "object": {
                       "type": "MemberExpression",
-                      "start": 7419,
-                      "end": 7429,
+                      "start": 7430,
+                      "end": 7440,
                       "loc": {
                         "start": {
-                          "line": 245,
+                          "line": 246,
                           "column": 17
                         },
                         "end": {
-                          "line": 245,
+                          "line": 246,
                           "column": 27
                         }
                       },
                       "object": {
                         "type": "Identifier",
-                        "start": 7419,
-                        "end": 7426,
+                        "start": 7430,
+                        "end": 7437,
                         "loc": {
                           "start": {
-                            "line": 245,
+                            "line": 246,
                             "column": 17
                           },
                           "end": {
-                            "line": 245,
+                            "line": 246,
                             "column": 24
                           }
                         },
@@ -2866,15 +2875,15 @@
                       },
                       "property": {
                         "type": "Identifier",
-                        "start": 7427,
-                        "end": 7428,
+                        "start": 7438,
+                        "end": 7439,
                         "loc": {
                           "start": {
-                            "line": 245,
+                            "line": 246,
                             "column": 25
                           },
                           "end": {
-                            "line": 245,
+                            "line": 246,
                             "column": 26
                           }
                         },
@@ -2885,15 +2894,15 @@
                     },
                     "property": {
                       "type": "Identifier",
-                      "start": 7430,
-                      "end": 7437,
+                      "start": 7441,
+                      "end": 7448,
                       "loc": {
                         "start": {
-                          "line": 245,
+                          "line": 246,
                           "column": 28
                         },
                         "end": {
-                          "line": 245,
+                          "line": 246,
                           "column": 35
                         }
                       },
@@ -2904,57 +2913,57 @@
                   },
                   "consequent": {
                     "type": "CallExpression",
-                    "start": 7440,
-                    "end": 7470,
+                    "start": 7451,
+                    "end": 7481,
                     "loc": {
                       "start": {
-                        "line": 245,
+                        "line": 246,
                         "column": 38
                       },
                       "end": {
-                        "line": 245,
+                        "line": 246,
                         "column": 68
                       }
                     },
                     "callee": {
                       "type": "MemberExpression",
-                      "start": 7440,
-                      "end": 7458,
+                      "start": 7451,
+                      "end": 7469,
                       "loc": {
                         "start": {
-                          "line": 245,
+                          "line": 246,
                           "column": 38
                         },
                         "end": {
-                          "line": 245,
+                          "line": 246,
                           "column": 56
                         }
                       },
                       "object": {
                         "type": "MemberExpression",
-                        "start": 7440,
-                        "end": 7450,
+                        "start": 7451,
+                        "end": 7461,
                         "loc": {
                           "start": {
-                            "line": 245,
+                            "line": 246,
                             "column": 38
                           },
                           "end": {
-                            "line": 245,
+                            "line": 246,
                             "column": 48
                           }
                         },
                         "object": {
                           "type": "Identifier",
-                          "start": 7440,
-                          "end": 7447,
+                          "start": 7451,
+                          "end": 7458,
                           "loc": {
                             "start": {
-                              "line": 245,
+                              "line": 246,
                               "column": 38
                             },
                             "end": {
-                              "line": 245,
+                              "line": 246,
                               "column": 45
                             }
                           },
@@ -2962,15 +2971,15 @@
                         },
                         "property": {
                           "type": "Identifier",
-                          "start": 7448,
-                          "end": 7449,
+                          "start": 7459,
+                          "end": 7460,
                           "loc": {
                             "start": {
-                              "line": 245,
+                              "line": 246,
                               "column": 46
                             },
                             "end": {
-                              "line": 245,
+                              "line": 246,
                               "column": 47
                             }
                           },
@@ -2981,15 +2990,15 @@
                       },
                       "property": {
                         "type": "Identifier",
-                        "start": 7451,
-                        "end": 7458,
+                        "start": 7462,
+                        "end": 7469,
                         "loc": {
                           "start": {
-                            "line": 245,
+                            "line": 246,
                             "column": 49
                           },
                           "end": {
-                            "line": 245,
+                            "line": 246,
                             "column": 56
                           }
                         },
@@ -3001,29 +3010,29 @@
                     "arguments": [
                       {
                         "type": "MemberExpression",
-                        "start": 7459,
-                        "end": 7469,
+                        "start": 7470,
+                        "end": 7480,
                         "loc": {
                           "start": {
-                            "line": 245,
+                            "line": 246,
                             "column": 57
                           },
                           "end": {
-                            "line": 245,
+                            "line": 246,
                             "column": 67
                           }
                         },
                         "object": {
                           "type": "Identifier",
-                          "start": 7459,
-                          "end": 7463,
+                          "start": 7470,
+                          "end": 7474,
                           "loc": {
                             "start": {
-                              "line": 245,
+                              "line": 246,
                               "column": 57
                             },
                             "end": {
-                              "line": 245,
+                              "line": 246,
                               "column": 61
                             }
                           },
@@ -3031,15 +3040,15 @@
                         },
                         "property": {
                           "type": "Identifier",
-                          "start": 7464,
-                          "end": 7469,
+                          "start": 7475,
+                          "end": 7480,
                           "loc": {
                             "start": {
-                              "line": 245,
+                              "line": 246,
                               "column": 62
                             },
                             "end": {
-                              "line": 245,
+                              "line": 246,
                               "column": 67
                             }
                           },
@@ -3053,29 +3062,29 @@
                   },
                   "alternate": {
                     "type": "MemberExpression",
-                    "start": 7473,
-                    "end": 7483,
+                    "start": 7484,
+                    "end": 7494,
                     "loc": {
                       "start": {
-                        "line": 245,
+                        "line": 246,
                         "column": 71
                       },
                       "end": {
-                        "line": 245,
+                        "line": 246,
                         "column": 81
                       }
                     },
                     "object": {
                       "type": "Identifier",
-                      "start": 7473,
-                      "end": 7477,
+                      "start": 7484,
+                      "end": 7488,
                       "loc": {
                         "start": {
-                          "line": 245,
+                          "line": 246,
                           "column": 71
                         },
                         "end": {
-                          "line": 245,
+                          "line": 246,
                           "column": 75
                         }
                       },
@@ -3083,15 +3092,15 @@
                     },
                     "property": {
                       "type": "Identifier",
-                      "start": 7478,
-                      "end": 7483,
+                      "start": 7489,
+                      "end": 7494,
                       "loc": {
                         "start": {
-                          "line": 245,
+                          "line": 246,
                           "column": 76
                         },
                         "end": {
-                          "line": 245,
+                          "line": 246,
                           "column": 81
                         }
                       },
@@ -3103,8 +3112,8 @@
                 }
               },
               {
-                "start": 7484,
-                "end": 7499,
+                "start": 7495,
+                "end": 7510,
                 "type": "Text",
                 "raw": "\n              ",
                 "data": "\n              "
@@ -3119,14 +3128,14 @@
           {
             "attributes": [
               {
-                "start": 8035,
-                "end": 8054,
+                "start": 8046,
+                "end": 8065,
                 "type": "Attribute",
                 "name": "name",
                 "value": [
                   {
-                    "start": 8041,
-                    "end": 8053,
+                    "start": 8052,
+                    "end": 8064,
                     "type": "Text",
                     "raw": "expanded-row",
                     "data": "expanded-row"
@@ -3134,26 +3143,26 @@
                 ]
               },
               {
-                "start": 8055,
-                "end": 8066,
+                "start": 8066,
+                "end": 8077,
                 "type": "Attribute",
                 "name": "row",
                 "value": [
                   {
-                    "start": 8060,
-                    "end": 8065,
+                    "start": 8071,
+                    "end": 8076,
                     "type": "MustacheTag",
                     "expression": {
                       "type": "Identifier",
-                      "start": 8061,
-                      "end": 8064,
+                      "start": 8072,
+                      "end": 8075,
                       "loc": {
                         "start": {
-                          "line": 264,
+                          "line": 265,
                           "column": 48
                         },
                         "end": {
-                          "line": 264,
+                          "line": 265,
                           "column": 51
                         }
                       },
@@ -10853,8 +10862,8 @@
         [
           "click",
           {
-            "start": 3375,
-            "end": 3383,
+            "start": 3445,
+            "end": 3453,
             "type": "EventHandler",
             "name": "click",
             "modifiers": [],
@@ -10864,8 +10873,8 @@
         [
           "mouseover",
           {
-            "start": 2281,
-            "end": 2293,
+            "start": 2277,
+            "end": 2289,
             "type": "EventHandler",
             "name": "mouseover",
             "modifiers": [],
@@ -10875,8 +10884,8 @@
         [
           "mouseenter",
           {
-            "start": 2298,
-            "end": 2311,
+            "start": 2294,
+            "end": 2307,
             "type": "EventHandler",
             "name": "mouseenter",
             "modifiers": [],
@@ -10886,8 +10895,8 @@
         [
           "mouseleave",
           {
-            "start": 2316,
-            "end": 2329,
+            "start": 2312,
+            "end": 2325,
             "type": "EventHandler",
             "name": "mouseleave",
             "modifiers": [],
@@ -10897,8 +10906,8 @@
         [
           "change",
           {
-            "start": 3068,
-            "end": 3077,
+            "start": 3109,
+            "end": 3118,
             "type": "EventHandler",
             "name": "change",
             "modifiers": [],
@@ -10908,13 +10917,35 @@
         [
           "input",
           {
-            "start": 3084,
-            "end": 3092,
+            "start": 3125,
+            "end": 3133,
             "type": "EventHandler",
             "name": "input",
             "modifiers": [],
             "expression": null
           }
+        ],
+        [
+          "focus",
+          {
+            "start": 3215,
+            "end": 3223,
+            "type": "EventHandler",
+            "name": "focus",
+            "modifiers": [],
+            "expression": null
+          }
+        ],
+        [
+          "blur",
+          {
+            "start": 3230,
+            "end": 3237,
+            "type": "EventHandler",
+            "name": "blur",
+            "modifiers": [],
+            "expression": null
+          }
         ]
       ],
       "dispatched_events": []
@@ -15446,6 +15477,131 @@
       ],
       "dispatched_events": []
     },
+    "Toolbar": {
+      "moduleName": "Toolbar",
+      "props": [
+        [
+          "size",
+          {
+            "kind": "let",
+            "value": "\"default\"",
+            "type": "\"sm\" | \"default\"",
+            "description": "Specify the toolbar size"
+          }
+        ]
+      ],
+      "slots": [
+        [
+          "default",
+          {
+            "attributes": [],
+            "children": [],
+            "default": true,
+            "default_value": ""
+          }
+        ]
+      ],
+      "forwarded_events": [],
+      "dispatched_events": []
+    },
+    "ToolbarSearch": {
+      "moduleName": "ToolbarSearch",
+      "props": [
+        [
+          "value",
+          {
+            "kind": "let",
+            "value": "\"\"",
+            "type": "string",
+            "description": "Specify the value of the search input"
+          }
+        ],
+        [
+          "expanded",
+          {
+            "kind": "let",
+            "value": "false",
+            "type": "boolean",
+            "description": "Set to `true` to expand the search bar"
+          }
+        ],
+        [
+          "persistent",
+          {
+            "kind": "let",
+            "value": "false",
+            "type": "boolean",
+            "description": "Set to `true` to keep the search bar expanded"
+          }
+        ],
+        [
+          "tabindex",
+          {
+            "kind": "let",
+            "value": "\"0\"",
+            "type": "string",
+            "description": "Specify the tabindex"
+          }
+        ],
+        [
+          "ref",
+          {
+            "kind": "let",
+            "value": "null",
+            "type": "null | HTMLInputElement",
+            "description": "Obtain a reference to the input HTML element"
+          }
+        ]
+      ],
+      "slots": [],
+      "forwarded_events": [
+        [
+          "change",
+          {
+            "start": 1316,
+            "end": 1325,
+            "type": "EventHandler",
+            "name": "change",
+            "modifiers": [],
+            "expression": null
+          }
+        ],
+        [
+          "input",
+          {
+            "start": 1330,
+            "end": 1338,
+            "type": "EventHandler",
+            "name": "input",
+            "modifiers": [],
+            "expression": null
+          }
+        ],
+        [
+          "focus",
+          {
+            "start": 1343,
+            "end": 1351,
+            "type": "EventHandler",
+            "name": "focus",
+            "modifiers": [],
+            "expression": null
+          }
+        ],
+        [
+          "blur",
+          {
+            "start": 1356,
+            "end": 1363,
+            "type": "EventHandler",
+            "name": "blur",
+            "modifiers": [],
+            "expression": null
+          }
+        ]
+      ],
+      "dispatched_events": []
+    },
     "Tooltip": {
       "moduleName": "Tooltip",
       "props": [
diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx
index 2ad5f107..15022722 100644
--- a/docs/src/pages/components/DataTable.svx
+++ b/docs/src/pages/components/DataTable.svx
@@ -1,5 +1,9 @@
+---
+components: ["DataTable", "Toolbar", "ToolbarSearch"]
+---
+
 <script>
-  import { DataTable, DataTableSkeleton, Link } from "carbon-components-svelte";
+  import { DataTable, DataTableSkeleton, Toolbar, ToolbarSearch, Button, Link } from "carbon-components-svelte";
   import Launch16 from "carbon-icons-svelte/lib/Launch16";
   import Preview from "../../components/Preview.svelte";
 </script>
@@ -188,6 +192,126 @@ The slot name for the table header cells is `"cell-header"`.
   ]}"
 />
 
+### With toolbar
+
+<DataTable 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="{[
+    {
+      id: "a",
+      name: "Load Balancer 3",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin"
+    },
+    {
+      id: "b",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin"
+    },
+    {
+      id: "c",
+      name: "Load Balancer 2",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation"
+    },
+    {
+      id: "d",
+      name: "Load Balancer 6",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin"
+    },
+    {
+      id: "e",
+      name: "Load Balancer 4",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin"
+    },
+    {
+      id: "f",
+      name: "Load Balancer 5",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation"
+    },
+  ]}"
+>
+  <Toolbar>
+    <ToolbarSearch />
+    <Button>Create</Button>
+  </Toolbar>
+</DataTable>
+
+### With toolbar (small size)
+
+<DataTable size="short" 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="{[
+    {
+      id: "a",
+      name: "Load Balancer 3",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin"
+    },
+    {
+      id: "b",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin"
+    },
+    {
+      id: "c",
+      name: "Load Balancer 2",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation"
+    },
+    {
+      id: "d",
+      name: "Load Balancer 6",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin"
+    },
+    {
+      id: "e",
+      name: "Load Balancer 4",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin"
+    },
+    {
+      id: "f",
+      name: "Load Balancer 5",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation"
+    },
+  ]}"
+>
+  <Toolbar size="sm">
+    <ToolbarSearch />
+    <Button size="small">Create</Button>
+  </Toolbar>
+</DataTable>
+
 ### Zebra stripes
 
 <DataTable zebra
diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index 02815b9a..d33b06fc 100644
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@@ -149,6 +149,7 @@
 </script>
 
 <TableContainer title="{title}" description="{description}" {...$$restProps}>
+  <slot />
   <Table
     zebra="{zebra}"
     size="{size}"
diff --git a/src/DataTable/Toolbar.svelte b/src/DataTable/Toolbar.svelte
new file mode 100644
index 00000000..59144786
--- /dev/null
+++ b/src/DataTable/Toolbar.svelte
@@ -0,0 +1,19 @@
+<script>
+  /**
+   * Specify the toolbar size
+   * @type {"sm" | "default"} [size="default"]
+   */
+  export let size = "default";
+</script>
+
+<section
+  aria-label="data table toolbar"
+  class:bx--table-toolbar="{true}"
+  class:bx--table-toolbar--small="{size === 'sm'}"
+  class:bx--table-toolbar--normal="{size === 'default'}"
+  {...$$restProps}
+>
+  <div class:bx--toolbar-content="{true}">
+    <slot />
+  </div>
+</section>
diff --git a/src/DataTable/ToolbarSearch.svelte b/src/DataTable/ToolbarSearch.svelte
new file mode 100644
index 00000000..1f5f094c
--- /dev/null
+++ b/src/DataTable/ToolbarSearch.svelte
@@ -0,0 +1,67 @@
+<script>
+  /**
+   * Specify the value of the search input
+   * @type {string} [value=""]
+   */
+  export let value = "";
+
+  /**
+   * Set to `true` to expand the search bar
+   * @type {boolean} [expanded=false]
+   */
+  export let expanded = false;
+
+  /**
+   * Set to `true` to keep the search bar expanded
+   * @type {boolean} [persistent=false]
+   */
+  export let persistent = false;
+
+  /**
+   * Specify the tabindex
+   * @type {string} [tabindex="0"]
+   */
+  export let tabindex = "0";
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @type {null | HTMLInputElement} [ref=null]
+   */
+  export let ref = null;
+
+  import { tick } from "svelte";
+  import { Search } from "../Search";
+
+  async function expandSearch() {
+    if (persistent || expanded) return;
+    expanded = true;
+    await tick();
+    ref.focus();
+  }
+</script>
+
+<div
+  tabindex="{expanded ? '-1' : tabindex}"
+  class:bx--toolbar-action="{true}"
+  class:bx--toolbar-search-container-active="{expanded}"
+  class:bx--toolbar-search-container-expandable="{!persistent}"
+  class:bx--toolbar-search-container-persistent="{persistent}"
+  on:click="{expandSearch}"
+  on:focus="{expandSearch}"
+>
+  <Search
+    size="sm"
+    tabindex="{expanded ? tabindex : '-1'}"
+    aria-hidden="{!expanded}"
+    {...$$restProps}
+    bind:ref
+    bind:value
+    on:change
+    on:input
+    on:focus
+    on:blur
+    on:blur="{() => {
+      expanded = !persistent && !!value.length;
+    }}"
+  />
+</div>
diff --git a/src/DataTable/index.js b/src/DataTable/index.js
index 30ac61d7..c67ee262 100644
--- a/src/DataTable/index.js
+++ b/src/DataTable/index.js
@@ -6,3 +6,5 @@ export { default as TableContainer } from "./TableContainer.svelte";
 export { default as TableHead } from "./TableHead.svelte";
 export { default as TableHeader } from "./TableHeader.svelte";
 export { default as TableRow } from "./TableRow.svelte";
+export { default as Toolbar } from "./Toolbar.svelte";
+export { default as ToolbarSearch } from "./ToolbarSearch.svelte";
diff --git a/src/Search/Search.svelte b/src/Search/Search.svelte
index 54c110b6..b235927f 100644
--- a/src/Search/Search.svelte
+++ b/src/Search/Search.svelte
@@ -32,7 +32,7 @@
 
   /**
    * Specify the value of the search input
-   * @type {string} [value="text"]
+   * @type {string} [value=""]
    */
   export let value = "";
 
@@ -124,11 +124,14 @@
       placeholder="{placeholder}"
       type="{type}"
       value="{value}"
+      aria-hidden="{$$props['aria-hidden']}"
       on:change
       on:input
       on:input="{({ target }) => {
         value = target.value;
       }}"
+      on:focus
+      on:blur
     />
     <button
       type="button"
diff --git a/src/index.js b/src/index.js
index fc6665ac..0acb1fa1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -23,6 +23,8 @@ export {
   TableHead,
   TableHeader,
   TableRow,
+  Toolbar,
+  ToolbarSearch,
 } from "./DataTable";
 export { DataTableSkeleton } from "./DataTableSkeleton";
 export { DatePicker, DatePickerInput, DatePickerSkeleton } from "./DatePicker";
diff --git a/types/index.d.ts b/types/index.d.ts
index 0f901cbe..7c1d6cff 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -857,6 +857,7 @@ export class DataTable extends CarbonSvelteComponent {
   };
 
   $$slot_def: {
+    default: {};
     "cell-header": { header: any };
     cell: { row: any; cell: any };
     "expanded-row": { row: any };
@@ -5078,6 +5079,52 @@ export class ToggleSmallSkeleton extends CarbonSvelteComponent {
   };
 }
 
+export class Toolbar extends CarbonSvelteComponent {
+  $$prop_def: {
+    /**
+     * Specify the toolbar size
+     * @default "default"
+     */
+    size?: "sm" | "default";
+  };
+
+  $$slot_def: { default: {} };
+}
+
+export class ToolbarSearch extends CarbonSvelteComponent {
+  $$prop_def: {
+    /**
+     * Specify the value of the search input
+     * @default ""
+     */
+    value?: string;
+
+    /**
+     * Set to `true` to expand the search bar
+     * @default false
+     */
+    expanded?: boolean;
+
+    /**
+     * Set to `true` to keep the search bar expanded
+     * @default false
+     */
+    persistent?: boolean;
+
+    /**
+     * Specify the tabindex
+     * @default "0"
+     */
+    tabindex?: string;
+
+    /**
+     * Obtain a reference to the input HTML element
+     * @default null
+     */
+    ref?: null | HTMLInputElement;
+  };
+}
+
 export class Tooltip extends CarbonSvelteComponent {
   $$prop_def: {
     /**