feat(data-table): support empty table body columns

docs/src/pages/components/DataTable.svx

@@ -318,7 +318,7 @@ The slot name for the table header cells is `"cell-header"`.
       <ToolbarSearch />
       <ToolbarMenu>
         <ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
-        <ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">API Documentation</ToolbarMenuItem>
+        <ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">API documentation</ToolbarMenuItem>
         <ToolbarMenuItem danger>Stop all</ToolbarMenuItem>
       </ToolbarMenu>
       <Button>Create balancer</Button>
@@ -385,7 +385,7 @@ The slot name for the table header cells is `"cell-header"`.
       <ToolbarSearch />
       <ToolbarMenu>
         <ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
-        <ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">API Documentation</ToolbarMenuItem>
+        <ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">API documentation</ToolbarMenuItem>
         <ToolbarMenuItem danger>Stop all</ToolbarMenuItem>
       </ToolbarMenu>
       <Button>Create balancer</Button>
@@ -668,6 +668,15 @@ The slot name for the table header cells is `"cell-header"`.
   ]}"
 />
 
+### Empty column with overflow menu
+
+Some use cases require an empty column in the table body without a corresponding table header.
+
+For an object in the `headers` array, set `empty` to `true` to render an empty column.
+
+In the following example, each row in the sortable data table has an overflow menu. There isn't a separate, useless table header column for the overflow menu.
+
+<FileSource src="/framed/DataTable/DataTableAppendColumns" />
 
 ### Selectable
 

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

@@ -0,0 +1,38 @@
+<script>
+  import {
+    DataTable,
+    OverflowMenu,
+    OverflowMenuItem,
+  } from "carbon-components-svelte";
+
+  const headers = [
+    { key: "name", value: "Name" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+    { key: "overflow", empty: true },
+  ];
+
+  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" },
+  ];
+</script>
+
+<DataTable sortable headers="{headers}" rows="{rows}">
+  <span slot="cell" let:cell>
+    {#if cell.key === 'overflow'}
+      <OverflowMenu open flipped>
+        <OverflowMenuItem text="Restart" />
+        <OverflowMenuItem
+          href="https://cloud.ibm.com/docs/loadbalancer-service"
+          text="API documentation"
+        />
+        <OverflowMenuItem danger text="Stop" />
+      </OverflowMenu>
+    {:else}{cell.value}{/if}
+  </span>
+</DataTable>

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

@@ -41,7 +41,7 @@
       <ToolbarMenu>
         <ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
         <ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">
-          API Documentation
+          API documentation
         </ToolbarMenuItem>
         <ToolbarMenuItem danger>Stop all</ToolbarMenuItem>
       </ToolbarMenu>