From 81a3b34d79b716dd526ebae86a13151c59924632 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Wed, 4 Oct 2023 10:22:28 -0700
Subject: [PATCH] [docs] Update example w/ truncation to include new multiline
 feature

+ fix default starting valign - should be middle, not top
---
 src-docs/src/views/tables/auto/auto.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src-docs/src/views/tables/auto/auto.tsx b/src-docs/src/views/tables/auto/auto.tsx
index 0344bf816b0..80c861df198 100644
--- a/src-docs/src/views/tables/auto/auto.tsx
+++ b/src-docs/src/views/tables/auto/auto.tsx
@@ -83,11 +83,12 @@ const columns: Array<EuiTableFieldDataColumnType<User>> = [
   {
     field: 'jobTitle',
     name: 'Job title',
+    truncateText: true,
   },
   {
     field: 'address',
     name: 'Address',
-    truncateText: true,
+    truncateText: { lines: 2 },
   },
 ];
 
@@ -147,11 +148,12 @@ const alignButtons: EuiButtonGroupOptionProps[] = [
 
 export default () => {
   const [tableLayout, setTableLayout] = useState('tableLayoutFixed');
-  const [vAlign, setVAlign] = useState('columnVAlignTop');
+  const [vAlign, setVAlign] = useState('columnVAlignMiddle');
   const [align, setAlign] = useState('columnAlignLeft');
 
   const onTableLayoutChange = (id: string, value: string) => {
     setTableLayout(id);
+    columns[4].width = value === 'custom' ? '100px' : undefined;
     columns[5].width = value === 'custom' ? '20%' : undefined;
   };
 
@@ -169,14 +171,16 @@ export default () => {
 
   switch (tableLayout) {
     case 'tableLayoutFixed':
-      callOutText = 'Address has truncateText set to true';
+      callOutText =
+        'Job title has truncateText set to true. Address is set to { lines: 2 }';
       break;
     case 'tableLayoutAuto':
       callOutText =
-        'Address has truncateText set to true which is not applied since tableLayout is set to auto';
+        'Job title will not wrap or truncate since tableLayout is set to auto. Address will truncate if necessary';
       break;
     case 'tableLayoutCustom':
-      callOutText = 'Address has truncateText set to true and width set to 20%';
+      callOutText =
+        'Job title has a custom column width of 100px. Address has a custom column width of 20%';
       break;
   }