Browse Source

Add table cell max width and support text truncation

gh-pages
Andrew Kingston 6 years ago
parent
commit
c95baec83f
  1. 3
      packages/standard-components/src/table/CellRenderer.svelte
  2. 12
      packages/standard-components/src/table/StringRenderer.svelte
  3. 2
      packages/standard-components/src/table/Table.svelte

3
packages/standard-components/src/table/CellRenderer.svelte

@ -1,4 +1,5 @@
<script> <script>
import StringRenderer from "./StringRenderer.svelte"
import BooleanRenderer from "./BooleanRenderer.svelte" import BooleanRenderer from "./BooleanRenderer.svelte"
import DateTimeRenderer from "./DateTimeRenderer.svelte" import DateTimeRenderer from "./DateTimeRenderer.svelte"
import RelationshipRenderer from "./RelationshipRenderer.svelte" import RelationshipRenderer from "./RelationshipRenderer.svelte"
@ -13,7 +14,7 @@
{#if value != null && value !== ''} {#if value != null && value !== ''}
{#if plainTypes.includes(type)} {#if plainTypes.includes(type)}
{value} <StringRenderer {value} />
{:else if type === 'boolean'} {:else if type === 'boolean'}
<BooleanRenderer {value} /> <BooleanRenderer {value} />
{:else if type === 'datetime'} {:else if type === 'datetime'}

12
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>

2
packages/standard-components/src/table/Table.svelte

@ -192,6 +192,8 @@
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
max-width: 320px;
overflow: hidden;
} }
.spectrum-Table-sortedIcon { .spectrum-Table-sortedIcon {
opacity: 0; opacity: 0;

Loading…
Cancel
Save