From a07265a350ed1af40ae4f28c5e9748b587317e68 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 23 Apr 2022 12:11:27 -0700
Subject: [PATCH] docs(data-table): add "Custom column widths" example

---
 docs/src/pages/components/DataTable.svx       |  6 ++++++
 .../DataTable/DataTableHeaderWidth.svelte     | 19 +++++++++++++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 docs/src/pages/framed/DataTable/DataTableHeaderWidth.svelte

diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx
index 2789d711..d457ebb8 100644
--- a/docs/src/pages/components/DataTable.svx
+++ b/docs/src/pages/components/DataTable.svx
@@ -328,6 +328,12 @@ title="Load balancers" description="Your organization's active load balancers."
   ]}"
 />
 
+### Custom column widths
+
+Specify a `width` or `minWidth` property in the `headers` object to customize the width of each column.
+
+<FileSource src="/framed/DataTable/DataTableHeaderWidth" />
+
 ### Sticky header
 
 Set `stickyHeader` to `true` for the header to be fixed in place.
diff --git a/docs/src/pages/framed/DataTable/DataTableHeaderWidth.svelte b/docs/src/pages/framed/DataTable/DataTableHeaderWidth.svelte
new file mode 100644
index 00000000..cf2faaf4
--- /dev/null
+++ b/docs/src/pages/framed/DataTable/DataTableHeaderWidth.svelte
@@ -0,0 +1,19 @@
+<script>
+  import { DataTable } from "carbon-components-svelte";
+</script>
+
+<DataTable
+  headers="{[
+    { key: 'name', value: 'Name', width: '50%', minWidth: '200px' },
+    { key: 'protocol', value: 'Protocol', width: '60px' },
+    { key: 'port', value: 'Port', width: '60px' },
+    { key: 'rule', value: 'Rule', width: '10rem' },
+  ]}"
+  rows="{Array.from({ length: 6 }).map((_, i) => ({
+    id: i,
+    name: 'Load Balancer ' + (i + 1),
+    protocol: 'HTTP',
+    port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
+    rule: i % 3 ? 'Round robin' : 'DNS delegation',
+  }))}"
+/>