Add table cell max width and support text truncation
This commit is contained in:
parent
2f52f31ae4
commit
950b022798
|
@ -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'}
|
||||||
|
|
|
@ -0,0 +1,12 @@
|
||||||
|
<script>
|
||||||
|
export let value
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>{value}</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -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…
Reference in New Issue