Merge pull request #361 from IBM/datatable

DataTable: add toolbar, toolbar search
2025-09-15 18:31:06 +00:00 · 2020-10-24 14:10:26 -07:00 · 2020-10-24 14:10:26 -07:00 · 92e463c816
commit 92e463c816
parent 8a65e463a1 a9a09b2086
21 changed files with 1305 additions and 310 deletions
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@ -1,6 +1,6 @@
 # Component Index

-> 148 components exported from carbon-components-svelte 0.19.0
+> 152 components exported from carbon-components-svelte 0.19.0

 - Accordion
  - [Accordion](#accordion)
@ -41,6 +41,10 @@
  - [TableHead](#tablehead)
  - [TableHeader](#tableheader)
  - [TableRow](#tablerow)
+  - [Toolbar](#toolbar)
+  - [ToolbarBatchActions](#toolbarbatchactions)
+  - [ToolbarContent](#toolbarcontent)
+  - [ToolbarSearch](#toolbarsearch)
 - [DataTableSkeleton](#datatableskeleton)
 - DatePicker
  - [DatePicker](#datepicker)
@ -205,7 +209,7 @@ import { Accordion } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -239,7 +243,8 @@ import { AccordionItem } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`
+- **"title"**: `<div name="title" let:name>...</div>`

 ### Forwarded events

@ -306,7 +311,7 @@ import { AspectRatio } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -335,7 +340,7 @@ import { Breadcrumb } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -367,7 +372,7 @@ import { BreadcrumbItem } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -443,7 +448,7 @@ import { Button } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -474,7 +479,7 @@ import { ButtonSet } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -608,7 +613,7 @@ import { ClickableTile } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -655,7 +660,7 @@ import { CodeSnippet } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -740,7 +745,7 @@ type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -831,7 +836,7 @@ import { ComposedModal } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -865,7 +870,7 @@ import { Content } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -895,7 +900,7 @@ import { ContentSwitcher } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -928,7 +933,7 @@ import { Copy } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -980,25 +985,30 @@ import { DataTable } from "carbon-components-svelte";

 ### Props

-| Prop name      | Type                                                                                             | Default value | Description                                                                                          |
-| :------------- | :----------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------- |
-| headers        | <code>{key: string; value: string; display?: (item) => string; sort?: (a, b) => number}[]</code> | `[]`          | Specify the data table headers.                                                                      |
-| rows           | <code>Object[]</code>                                                                            | `[]`          | Specify the rows the data table should render. keys defined in `headers` are used for the row ids.   |
-| size           | <code>"compact" &#124; "short" &#124; "tall"</code>                                              | --            | Set the size of the data table.                                                                      |
-| title          | <code>string</code>                                                                              | `""`          | Specify the title of the data table.                                                                 |
-| description    | <code>string</code>                                                                              | `""`          | Specify the description of the data table.                                                           |
-| zebra          | <code>boolean</code>                                                                             | `false`       | Set to `true` to use zebra styles.                                                                   |
-| sortable       | <code>boolean</code>                                                                             | `false`       | Set to `true` for the sortable variant.                                                              |
-| expandable     | <code>boolean</code>                                                                             | `false`       | Set to `true` for the expandable variant. Automatically set to `true` if `batchExpansion` is `true`. |
-| batchExpansion | <code>boolean</code>                                                                             | `false`       | Set to `true` to enable batch expansion.                                                             |
-| expandedRowIds | <code>string[]</code>                                                                            | `[]`          | Specify the row ids to be expanded.                                                                  |
-| stickyHeader   | <code>boolean</code>                                                                             | `false`       | Set to `true` to enable a sticky header.                                                             |
+| Prop name      | Type                                                                                             | Default value | Description                                                                                                      |
+| :------------- | :----------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------------------- |
+| headers        | <code>{key: string; value: string; display?: (item) => string; sort?: (a, b) => number}[]</code> | `[]`          | Specify the data table headers.                                                                                  |
+| rows           | <code>Object[]</code>                                                                            | `[]`          | Specify the rows the data table should render. keys defined in `headers` are used for the row ids.               |
+| size           | <code>"compact" &#124; "short" &#124; "tall"</code>                                              | --            | Set the size of the data table.                                                                                  |
+| title          | <code>string</code>                                                                              | `""`          | Specify the title of the data table.                                                                             |
+| description    | <code>string</code>                                                                              | `""`          | Specify the description of the data table.                                                                       |
+| zebra          | <code>boolean</code>                                                                             | `false`       | Set to `true` to use zebra styles.                                                                               |
+| sortable       | <code>boolean</code>                                                                             | `false`       | Set to `true` for the sortable variant.                                                                          |
+| expandable     | <code>boolean</code>                                                                             | `false`       | Set to `true` for the expandable variant. Automatically set to `true` if `batchExpansion` is `true`.             |
+| batchExpansion | <code>boolean</code>                                                                             | `false`       | Set to `true` to enable batch expansion.                                                                         |
+| expandedRowIds | <code>string[]</code>                                                                            | `[]`          | Specify the row ids to be expanded.                                                                              |
+| radio          | <code>boolean</code>                                                                             | `false`       | Set to `true` for the radio selection variant.                                                                   |
+| selectable     | <code>boolean</code>                                                                             | `false`       | Set to `true` for the selectable variant. Automatically set to `true` if `radio` or `batchSelection` are `true`. |
+| batchSelection | <code>boolean</code>                                                                             | `false`       | Set to `true` to enable batch selection.                                                                         |
+| selectedRowIds | <code>string[]</code>                                                                            | `[]`          | Specify the row ids to be selected.                                                                              |
+| stickyHeader   | <code>boolean</code>                                                                             | `false`       | Set to `true` to enable a sticky header.                                                                         |

 ### Slots

- `<slot name="cell-header">...</slot>`
- `<slot name="cell">...</slot>`
- `<slot name="expanded-row">...</slot>`
+- **default**: `<div>...</div>`
+- **"cell-header"**: `<div name="cell-header" let:name let:header>...</div>`
+- **"cell"**: `<div name="cell" let:name let:row let:cell>...</div>`
+- **"expanded-row"**: `<div name="expanded-row" let:name let:row>...</div>`

 ### Forwarded events

@ -1010,6 +1020,8 @@ No forwarded events.
 - `on:click`
 - `on:click:header`
 - `on:click:row`
+- `on:mouseenter:row`
+- `on:mouseleave:row`
 - `on:click:row--expand`
 - `on:click:cell`

@ -1077,7 +1089,7 @@ import { DatePicker } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -1279,8 +1291,8 @@ import { ExpandableTile } from "carbon-components-svelte";

 ### Slots

- `<slot name="above">...</slot>`
- `<slot name="below">...</slot>`
+- **"above"**: `<div name="above" let:name>...</div>`
+- **"below"**: `<div name="below" let:name>...</div>`

 ### Forwarded events

@ -1538,7 +1550,7 @@ No exported props.

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -1564,7 +1576,7 @@ No exported props.

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -1599,7 +1611,7 @@ import { FormGroup } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -1628,7 +1640,7 @@ No exported props.

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -1659,7 +1671,7 @@ import { FormLabel } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -1696,7 +1708,7 @@ import { Grid } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -1730,7 +1742,9 @@ import { Header } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`
+- **"skip-to-content"**: `<div name="skip-to-content" let:name>...</div>`
+- **"platform"**: `<div name="platform" let:name>...</div>`

 ### Forwarded events

@ -1761,7 +1775,8 @@ import { HeaderAction } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`
+- **"text"**: `<div name="text" let:name>...</div>`

 ### Forwarded events

@ -1852,7 +1867,7 @@ import { HeaderGlobalAction } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -1880,7 +1895,7 @@ import { HeaderNav } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -1949,7 +1964,7 @@ import { HeaderNavMenu } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -1982,7 +1997,7 @@ No exported props.

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -2011,7 +2026,7 @@ import { HeaderPanelLink } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -2037,7 +2052,7 @@ No exported props.

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -2063,7 +2078,7 @@ No exported props.

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -2196,7 +2211,8 @@ import { InlineNotification } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`
+- **"actions"**: `<div name="actions" let:name>...</div>`

 ### Forwarded events

@ -2231,7 +2247,7 @@ import { Link } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -2268,7 +2284,7 @@ import { ListBox } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -2309,7 +2325,7 @@ type ListBoxFieldTranslationId = "close" | "open";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -2343,7 +2359,7 @@ import { ListBoxMenu } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -2408,7 +2424,7 @@ import { ListBoxMenuItem } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -2474,7 +2490,7 @@ No exported props.

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -2555,7 +2571,9 @@ import { Modal } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`
+- **"label"**: `<div name="label" let:name>...</div>`
+- **"heading"**: `<div name="heading" let:name>...</div>`

 ### Forwarded events

@ -2591,7 +2609,7 @@ import { ModalBody } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -2624,7 +2642,7 @@ import { ModalFooter } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -2658,7 +2676,7 @@ import { ModalHeader } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -2750,7 +2768,7 @@ No exported props.

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -2848,7 +2866,7 @@ import { NotificationTextDetails } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -2902,7 +2920,7 @@ type NumberInputTranslationId = "increment" | "decrement";

 ### Slots

- `<slot name="label">...</slot>`
+- **"label"**: `<div name="label" let:name>...</div>`

 ### Forwarded events

@ -2965,7 +2983,7 @@ import { OrderedList } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -3004,7 +3022,8 @@ import { OverflowMenu } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`
+- **"menu"**: `<div name="menu" let:name>...</div>`

 ### Forwarded events

@ -3044,7 +3063,7 @@ import { OverflowMenuItem } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -3236,7 +3255,7 @@ import { ProgressIndicator } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -3306,7 +3325,7 @@ import { ProgressStep } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -3378,7 +3397,7 @@ import { RadioButtonGroup } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -3444,7 +3463,7 @@ import { RadioTile } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -3482,7 +3501,7 @@ import { Row } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -3533,6 +3552,8 @@ No slots.
 - `on:mouseleave`
 - `on:change`
 - `on:input`
+- `on:focus`
+- `on:blur`

 ### Dispatched events

@ -3601,7 +3622,7 @@ import { Select } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -3661,7 +3682,7 @@ import { SelectItemGroup } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -3728,7 +3749,7 @@ import { SelectableTile } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -3762,7 +3783,7 @@ import { SideNav } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -3788,7 +3809,7 @@ No exported props.

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -3851,7 +3872,7 @@ import { SideNavMenu } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -3974,7 +3995,7 @@ import { SkipToContent } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -4082,7 +4103,7 @@ import { StructuredList } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -4111,7 +4132,7 @@ No exported props.

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -4143,7 +4164,7 @@ import { StructuredListCell } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -4172,7 +4193,7 @@ No exported props.

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -4238,7 +4259,7 @@ import { StructuredListRow } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -4306,7 +4327,7 @@ import { Switch } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -4343,7 +4364,7 @@ import { Tab } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -4373,7 +4394,7 @@ import { TabContent } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -4406,7 +4427,7 @@ import { Table } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -4432,7 +4453,7 @@ No exported props.

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -4458,7 +4479,7 @@ No exported props.

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -4491,7 +4512,7 @@ import { TableContainer } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -4517,7 +4538,7 @@ No exported props.

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -4550,7 +4571,7 @@ import { TableHeader } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -4575,13 +4596,11 @@ import { TableRow } from "carbon-components-svelte";

 ### Props

-| Prop name  | Type                 | Default value | Description                      |
-| :--------- | :------------------- | :------------ | :------------------------------- |
-| isSelected | <code>boolean</code> | `false`       | Set to `true` to select the row. |
+No exported props.

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -4615,7 +4634,8 @@ import { Tabs } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`
+- **"content"**: `<div name="content" let:name>...</div>`

 ### Forwarded events

@ -4680,7 +4700,7 @@ import { Tag } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -4903,7 +4923,7 @@ import { Tile } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -4936,7 +4956,7 @@ import { TileGroup } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -4977,7 +4997,7 @@ import { TimePicker } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -5019,7 +5039,7 @@ import { TimePickerSelect } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -5059,7 +5079,7 @@ import { ToastNotification } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -5220,6 +5240,123 @@ 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
+
+- **default**: `<div>...</div>`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## ToolbarBatchActions
+
+### Import path
+
+```js
+import { ToolbarBatchActions } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name           | Type                                           | Default value | Description                             |
+| :------------------ | :--------------------------------------------- | :------------ | :-------------------------------------- |
+| formatTotalSelected | <code>(totalSelected: number) => string</code> | --            | Override the total items selected text. |
+
+### Slots
+
+- **default**: `<div>...</div>`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## ToolbarContent
+
+### Import path
+
+```js
+import { ToolbarContent } from "carbon-components-svelte";
+```
+
+### Props
+
+No exported props.
+
+### Slots
+
+- **default**: `<div>...</div>`
+
+### 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
@ -5248,7 +5385,9 @@ import { Tooltip } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`
+- **"triggerText"**: `<div name="triggerText" let:name>...</div>`
+- **"icon"**: `<div name="icon" let:name>...</div>`

 ### Forwarded events

@ -5280,7 +5419,8 @@ import { TooltipDefinition } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`
+- **"tooltip"**: `<div name="tooltip" let:name>...</div>`

 ### Forwarded events

@ -5316,7 +5456,7 @@ import { TooltipIcon } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

@ -5348,7 +5488,7 @@ import { UnorderedList } from "carbon-components-svelte";

 ### Slots

- `<slot>...</slot>`
+- **default**: `<div>...</div>`

 ### Forwarded events

--- a/docs/src/PUBLIC_API.json
+++ b/docs/src/PUBLIC_API.json
--- a/docs/src/components/ComponentApi.svelte
+++ b/docs/src/components/ComponentApi.svelte
@ -120,7 +120,9 @@
      </StructuredListBody>
    </StructuredList>
  </div>
-{:else}No props.{/if}
+{:else}
+  <p class="my-layout-01-03">No props.</p>
+{/if}
 <h3 id="slots">Slots</h3>
 {#if component.slots.length > 0}
  <UnorderedList class="my-layout-01-03">
--- a/docs/src/pages/components/DataTable.svx
+++ b/docs/src/pages/components/DataTable.svx
@ -1,5 +1,9 @@
+---
+components: ["DataTable", "Toolbar", "ToolbarContent", "ToolbarSearch", "ToolbarBatchActions"]
+---
+
 <script>
-  import { DataTable, DataTableSkeleton, Link } from "carbon-components-svelte";
+  import { DataTable, DataTableSkeleton, Toolbar, ToolbarContent, 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,130 @@ 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>
+    <ToolbarContent>
+      <ToolbarSearch />
+      <Button>Create</Button>
+    </ToolbarContent>
+  </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">
+    <ToolbarContent>
+      <ToolbarSearch />
+      <Button>Create</Button>
+    </ToolbarContent>
+  </Toolbar>
+</DataTable>
+
 ### Zebra stripes

 <DataTable zebra
@ -463,6 +591,23 @@ The slot name for the table header cells is `"cell-header"`.
  ]}"
 />

+
+### Selectable
+
+<FileSource src="/framed/DataTable/SelectableDataTable" />
+
+### Initial selected rows
+
+<FileSource src="/framed/DataTable/DataTableBatchSelection" />
+
+### Selectable with batch actions
+
+<FileSource src="/framed/DataTable/DataTableBatchSelectionToolbar" />
+
+### Selectable (radio)
+
+<FileSource src="/framed/DataTable/RadioSelectableDataTable" />
+
 ### Expandable

 <DataTable expandable
--- a/docs/src/pages/framed/DataTable/DataTableBatchSelection.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableBatchSelection.svelte
@ -0,0 +1,29 @@
+<script>
+  import { DataTable } from "carbon-components-svelte";
+
+  const headers = [
+    { key: "name", value: "Name" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ];
+
+  const rows = [
+    { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
+    { id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
+    { id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
+    { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
+    { id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
+    { id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
+  ];
+
+  let selectedRowIds = [rows[0].id, rows[1].id];
+
+  $: console.log("selectedRowIds", selectedRowIds);
+</script>
+
+<DataTable
+  batchSelection
+  bind:selectedRowIds
+  headers="{headers}"
+  rows="{rows}"
+/>
--- a/docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.svelte
@ -0,0 +1,42 @@
+<script>
+  import {
+    DataTable,
+    Toolbar,
+    ToolbarContent,
+    ToolbarSearch,
+    ToolbarBatchActions,
+    Button,
+  } from "carbon-components-svelte";
+  import Save16 from "carbon-icons-svelte/lib/Save16";
+
+  const headers = [
+    { key: "name", value: "Name" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ];
+
+  const rows = [
+    { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
+    { id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
+    { id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
+    { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
+    { id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
+    { id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
+  ];
+
+  let selectedRowIds = [rows[0].id, rows[1].id];
+
+  $: console.log("selectedRowIds", selectedRowIds);
+</script>
+
+<DataTable batchSelection bind:selectedRowIds headers="{headers}" rows="{rows}">
+  <Toolbar>
+    <ToolbarBatchActions>
+      <Button icon="{Save16}">Save</Button>
+    </ToolbarBatchActions>
+    <ToolbarContent>
+      <ToolbarSearch />
+      <Button>Create</Button>
+    </ToolbarContent>
+  </Toolbar>
+</DataTable>
--- a/docs/src/pages/framed/DataTable/RadioSelectableDataTable.svelte
+++ b/docs/src/pages/framed/DataTable/RadioSelectableDataTable.svelte
@ -0,0 +1,24 @@
+<script>
+  import { DataTable } from "carbon-components-svelte";
+
+  const headers = [
+    { key: "name", value: "Name" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ];
+
+  const rows = [
+    { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
+    { id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
+    { id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
+    { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
+    { id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
+    { id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
+  ];
+
+  let selectedRowIds = [rows[1].id];
+
+  $: console.log("selectedRowIds", selectedRowIds);
+</script>
+
+<DataTable radio bind:selectedRowIds headers="{headers}" rows="{rows}" />
--- a/docs/src/pages/framed/DataTable/SelectableDataTable.svelte
+++ b/docs/src/pages/framed/DataTable/SelectableDataTable.svelte
@ -0,0 +1,24 @@
+<script>
+  import { DataTable } from "carbon-components-svelte";
+
+  const headers = [
+    { key: "name", value: "Name" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ];
+
+  const rows = [
+    { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
+    { id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
+    { id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
+    { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
+    { id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
+    { id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
+  ];
+
+  let selectedRowIds = [];
+
+  $: console.log("selectedRowIds", selectedRowIds);
+</script>
+
+<DataTable selectable bind:selectedRowIds headers="{headers}" rows="{rows}" />
--- a/scripts/rollup/generate-index.js
+++ b/scripts/rollup/generate-index.js
@ -77,13 +77,15 @@ export function generateIndex(components, groups, pkg) {

    if (slots.size > 0) {
      if (slots.get("default")) {
-        code += "- `<slot>...</slot>`\n";
-      } else {
-        slots.forEach((slot, name) => {
-          if (slot.default) return;
-          code += `- \`<slot name="${name}">...</slot>\`\n`;
-        });
+        code += "- **default**: `<div>...</div>`\n";
      }
+
+      slots.forEach((slot, name) => {
+        if (slot.default) return;
+        code += `- **"${name}"**: \`<div name="${name}" ${slot.attributes
+          .map((attr) => `let:${attr.name}`)
+          .join(" ")}>...</div>\`\n`;
+      });
    } else {
      code += "No slots.\n\n";
    }
--- a/src/Checkbox/InlineCheckbox.svelte
+++ b/src/Checkbox/InlineCheckbox.svelte
@ -0,0 +1,43 @@
+<script>
+  /**
+   * Specify whether the checkbox is checked
+   * @type {boolean} [checked=false]
+   */
+  export let checked = false;
+
+  /**
+   * Specify whether the checkbox is indeterminate
+   * @type {boolean} [indeterminate=false]
+   */
+  export let indeterminate = false;
+
+  /**
+   * Specify the title attribute for the label element
+   * @type {string} [title]
+   */
+  export let title = undefined;
+
+  /**
+   * Set an id for the input label
+   * @type {string} [id]
+   */
+  export let id = "ccs-" + Math.random().toString(36);
+</script>
+
+<input
+  type="checkbox"
+  class:bx--checkbox="{true}"
+  checked="{indeterminate ? false : checked}"
+  indeterminate="{indeterminate}"
+  id="{id}"
+  {...$$restProps}
+  aria-label="{undefined}"
+  aria-checked="{indeterminate ? 'mixed' : checked}"
+  on:change
+/>
+<label
+  for="{id}"
+  title="{title}"
+  aria-label="{$$props['aria-label']}"
+  class:bx--checkbox-label="{true}"
+></label>
--- a/src/Checkbox/index.js
+++ b/src/Checkbox/index.js
@ -1,2 +1,3 @@
 export { default as Checkbox } from "./Checkbox.svelte";
 export { default as CheckboxSkeleton } from "./Checkbox.Skeleton.svelte";
+export { default as InlineCheckbox } from "./InlineCheckbox.svelte";
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@ -61,6 +61,31 @@
   */
  export let expandedRowIds = [];

+  /**
+   * Set to `true` for the radio selection variant
+   * @type {boolean} [radio=false]
+   */
+  export let radio = false;
+
+  /**
+   * Set to `true` for the selectable variant
+   * Automatically set to `true` if `radio` or `batchSelection` are `true`
+   * @type {boolean} [selectable=false]
+   */
+  export let selectable = false;
+
+  /**
+   * Set to `true` to enable batch selection
+   * @type {boolean} [batchSelection=false]
+   */
+  export let batchSelection = false;
+
+  /**
+   * Specify the row ids to be selected
+   * @type {string[]} [selectedRowIds=[]]
+   */
+  export let selectedRowIds = [];
+
  /**
   * Set to `true` to enable a sticky header
   * @type {boolean} [stickyHeader=false]
@ -70,6 +95,8 @@
  import { createEventDispatcher, setContext } from "svelte";
  import { writable, derived } from "svelte/store";
  import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";
+  import { InlineCheckbox } from "../Checkbox";
+  import { RadioButton } from "../RadioButton";
  import Table from "./Table.svelte";
  import TableBody from "./TableBody.svelte";
  import TableCell from "./TableCell.svelte";
@ -84,6 +111,7 @@
    descending: "none",
  };
  const dispatch = createEventDispatcher();
+  const batchSelectedIds = writable(false);
  const tableSortable = writable(sortable);
  const sortHeader = writable({
    id: null,
@ -101,6 +129,10 @@
  setContext("DataTable", {
    sortHeader,
    tableSortable,
+    batchSelectedIds,
+    resetSelectedRowIds: () => {
+      selectedRowIds = [];
+    },
    add: (id) => {
      headerItems.update((_) => [..._, id]);
    },
@ -113,7 +145,13 @@
    (a, id) => ({ ...a, [id]: true }),
    {}
  );
+
+  let selectAll = false;
+  $: batchSelectedIds.set(selectedRowIds);
+  $: indeterminate =
+    selectedRowIds.length > 0 && selectedRowIds.length < rows.length;
  $: if (batchExpansion) expandable = true;
+  $: if (radio || batchSelection) selectable = true;
  $: tableSortable.set(sortable);
  $: headerKeys = headers.map(({ key }) => key);
  $: rows = rows.map((row) => ({
@ -149,6 +187,7 @@
 </script>

 <TableContainer title="{title}" description="{description}" {...$$restProps}>
+  <slot />
  <Table
    zebra="{zebra}"
    size="{size}"
@ -179,6 +218,32 @@
            {/if}
          </th>
        {/if}
+        {#if selectable && !batchSelection}
+          <th scope="col"></th>
+        {/if}
+        {#if batchSelection && !radio}
+          <th scope="col" class:bx--table-column-checkbox="{true}">
+            <InlineCheckbox
+              aria-label="Select all rows"
+              checked="{selectAll}"
+              indeterminate="{indeterminate}"
+              on:change="{(e) => {
+                if (indeterminate) {
+                  e.target.checked = false;
+                  selectAll = false;
+                  selectedRowIds = [];
+                  return;
+                }
+
+                if (e.target.checked) {
+                  selectedRowIds = rows.map((row) => row.id);
+                } else {
+                  selectedRowIds = [];
+                }
+              }}"
+            />
+          </th>
+        {/if}
        {#each headers as header, i (header.key)}
          <TableHeader
            on:click="{() => {
@ -203,11 +268,18 @@
    <TableBody>
      {#each sorting ? sortedRows : rows as row, i (row.id)}
        <TableRow
-          class="{expandedRows[row.id] ? 'bx--expandable-row' : ''} {expandable ? 'bx--parent-row' : ''} {expandable && parentRowId === row.id ? 'bx--expandable-row--hover' : ''}"
+          id="row-{row.id}"
+          class="{selectedRowIds.includes(row.id) ? 'bx--data-table--selected' : ''} {expandedRows[row.id] ? 'bx--expandable-row' : ''} {expandable ? 'bx--parent-row' : ''} {expandable && parentRowId === row.id ? 'bx--expandable-row--hover' : ''}"
          on:click="{() => {
            dispatch('click', { row });
            dispatch('click:row', row);
          }}"
+          on:mouseenter="{() => {
+            dispatch('mouseenter:row', row);
+          }}"
+          on:mouseleave="{() => {
+            dispatch('mouseleave:row', row);
+          }}"
        >
          {#if expandable}
            <TableCell
@ -234,6 +306,34 @@
              </button>
            </TableCell>
          {/if}
+          {#if selectable}
+            <td
+              class:bx--table-column-checkbox="{true}"
+              class:bx--table-column-radio="{radio}"
+            >
+              {#if radio}
+                <RadioButton
+                  name="select-row-{row.id}"
+                  checked="{selectedRowIds.includes(row.id)}"
+                  on:change="{() => {
+                    selectedRowIds = [row.id];
+                  }}"
+                />
+              {:else}
+                <InlineCheckbox
+                  name="select-row-{row.id}"
+                  checked="{selectedRowIds.includes(row.id)}"
+                  on:change="{() => {
+                    if (selectedRowIds.includes(row.id)) {
+                      selectedRowIds = selectedRowIds.filter((id) => id !== row.id);
+                    } else {
+                      selectedRowIds = [...selectedRowIds, row.id];
+                    }
+                  }}"
+                />
+              {/if}
+            </td>
+          {/if}
          {#each row.cells as cell, j (cell.key)}
            <TableCell
              on:click="{() => {
--- a/src/DataTable/TableRow.svelte
+++ b/src/DataTable/TableRow.svelte
@ -1,20 +1,3 @@
-<script>
-  /**
-   * Set to `true` to select the row
-   * @type {boolean} [isSelected=false]
-   */
-  export let isSelected = false;
-
-  // TODO: include ariaLabel, isSelected
-</script>
-
-<tr
-  class:bx--data-table--selected="{isSelected}"
-  {...$$restProps}
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
->
+<tr {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave>
  <slot />
 </tr>
--- a/src/DataTable/Toolbar.svelte
+++ 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>
--- a/src/DataTable/ToolbarBatchActions.svelte
+++ b/src/DataTable/ToolbarBatchActions.svelte
@ -0,0 +1,44 @@
+<script>
+  /**
+   * Override the total items selected text
+   * @type {(totalSelected: number) => string} [formatTotalSelected = (totalSelected: number) => string]
+   */
+  export let formatTotalSelected = (totalSelected) =>
+    `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`;
+
+  import { onMount, getContext } from "svelte";
+  import { Button } from "../Button";
+
+  let batchSelectedIds = [];
+
+  $: showActions = batchSelectedIds.length > 0;
+
+  const ctx = getContext("DataTable");
+  const unsubscribe = ctx.batchSelectedIds.subscribe((value) => {
+    batchSelectedIds = value;
+  });
+
+  onMount(() => unsubscribe);
+</script>
+
+<div
+  class:bx--batch-actions="{true}"
+  class:bx--batch-actions--active="{showActions}"
+  {...$$restProps}
+>
+  <div class:bx--batch-summary="{true}">
+    <p class:bx--batch-summary__para="{true}">
+      <span> {formatTotalSelected(batchSelectedIds.length)} </span>
+    </p>
+  </div>
+  <div class:bx--action-list="{true}">
+    <slot />
+    <Button
+      class="bx--batch-summary__cancel"
+      tabindex="{showActions ? '0' : '-1'}"
+      on:click="{ctx.resetSelectedRowIds}"
+    >
+      Cancel
+    </Button>
+  </div>
+</div>
--- a/src/DataTable/ToolbarContent.svelte
+++ b/src/DataTable/ToolbarContent.svelte
@ -0,0 +1,3 @@
+<div class:bx--toolbar-content="{true}">
+  <slot />
+</div>
--- a/src/DataTable/ToolbarSearch.svelte
+++ 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>
--- a/src/DataTable/index.js
+++ b/src/DataTable/index.js
@ -6,3 +6,7 @@ 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 ToolbarContent } from "./ToolbarContent.svelte";
+export { default as ToolbarSearch } from "./ToolbarSearch.svelte";
+export { default as ToolbarBatchActions } from "./ToolbarBatchActions.svelte";
--- 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"
--- a/src/index.js
+++ b/src/index.js
@ -23,6 +23,10 @@ export {
  TableHead,
  TableHeader,
  TableRow,
+  Toolbar,
+  ToolbarContent,
+  ToolbarSearch,
+  ToolbarBatchActions,
 } from "./DataTable";
 export { DataTableSkeleton } from "./DataTableSkeleton";
 export { DatePicker, DatePickerInput, DatePickerSkeleton } from "./DatePicker";
--- a/types/index.d.ts
+++ b/types/index.d.ts
@ -849,6 +849,31 @@ export class DataTable extends CarbonSvelteComponent {
     */
    expandedRowIds?: string[];

+    /**
+     * Set to `true` for the radio selection variant
+     * @default false
+     */
+    radio?: boolean;
+
+    /**
+     * Set to `true` for the selectable variant
+     * Automatically set to `true` if `radio` or `batchSelection` are `true`
+     * @default false
+     */
+    selectable?: boolean;
+
+    /**
+     * Set to `true` to enable batch selection
+     * @default false
+     */
+    batchSelection?: boolean;
+
+    /**
+     * Specify the row ids to be selected
+     * @default []
+     */
+    selectedRowIds?: string[];
+
    /**
     * Set to `true` to enable a sticky header
     * @default false
@ -857,6 +882,7 @@ export class DataTable extends CarbonSvelteComponent {
  };

  $$slot_def: {
+    default: {};
    "cell-header": { header: any };
    cell: { row: any; cell: any };
    "expanded-row": { row: any };
@ -4394,14 +4420,6 @@ export class TableHeader extends CarbonSvelteComponent {
 }

 export class TableRow extends CarbonSvelteComponent {
-  $$prop_def: {
-    /**
-     * Set to `true` to select the row
-     * @default false
-     */
-    isSelected?: boolean;
-  };
-
  $$slot_def: { default: {} };
 }

@ -5078,6 +5096,67 @@ 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 ToolbarBatchActions extends CarbonSvelteComponent {
+  $$prop_def: {
+    /**
+     * Override the total items selected text
+     */
+    formatTotalSelected?: (totalSelected: number) => string;
+  };
+
+  $$slot_def: { default: {} };
+}
+
+export class ToolbarContent extends CarbonSvelteComponent {
+  $$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: {
    /**