From 950b0227985ea6367e36711b664b049d5214ff83 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 25 Mar 2021 09:37:14 +0000
Subject: [PATCH] Add table cell max width and support text truncation

---
 .../src/table/CellRenderer.svelte                    |  3 ++-
 .../src/table/StringRenderer.svelte                  | 12 ++++++++++++
 packages/standard-components/src/table/Table.svelte  |  2 ++
 3 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 packages/standard-components/src/table/StringRenderer.svelte

diff --git a/packages/standard-components/src/table/CellRenderer.svelte b/packages/standard-components/src/table/CellRenderer.svelte
index 7374bc337..0c14ec2aa 100644
--- a/packages/standard-components/src/table/CellRenderer.svelte
+++ b/packages/standard-components/src/table/CellRenderer.svelte
@@ -1,4 +1,5 @@
 <script>
+  import StringRenderer from "./StringRenderer.svelte"
   import BooleanRenderer from "./BooleanRenderer.svelte"
   import DateTimeRenderer from "./DateTimeRenderer.svelte"
   import RelationshipRenderer from "./RelationshipRenderer.svelte"
@@ -13,7 +14,7 @@
 
 {#if value != null && value !== ''}
   {#if plainTypes.includes(type)}
-    {value}
+    <StringRenderer {value} />
   {:else if type === 'boolean'}
     <BooleanRenderer {value} />
   {:else if type === 'datetime'}
diff --git a/packages/standard-components/src/table/StringRenderer.svelte b/packages/standard-components/src/table/StringRenderer.svelte
new file mode 100644
index 000000000..1850c9c60
--- /dev/null
+++ b/packages/standard-components/src/table/StringRenderer.svelte
@@ -0,0 +1,12 @@
+<script>
+  export let value
+</script>
+
+<div>{value}</div>
+
+<style>
+  div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>
diff --git a/packages/standard-components/src/table/Table.svelte b/packages/standard-components/src/table/Table.svelte
index b1f2a3ef2..a41b08b43 100644
--- a/packages/standard-components/src/table/Table.svelte
+++ b/packages/standard-components/src/table/Table.svelte
@@ -192,6 +192,8 @@
     justify-content: flex-start;
     align-items: center;
     gap: 4px;
+    max-width: 320px;
+    overflow: hidden;
   }
   .spectrum-Table-sortedIcon {
     opacity: 0;