Skip to content

Commit 7eb70d6

Browse files
Optimize table rendering with truncation and keying fixes
- Add keys to table columns to improve Svelte rendering performance - Limit tooltip content to 100 characters to prevent performance issues - Only render tooltip when actually showing to reduce DOM overhead - Show plain text for non-truncated content without tooltip wrapper
1 parent 07e7699 commit 7eb70d6

File tree

1 file changed

+9
-4
lines changed
  • src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]

1 file changed

+9
-4
lines changed

src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@
9090
? `${formattedColumn.slice(0, 20)}...`
9191
: formattedColumn,
9292
truncated: formattedColumn.length > 20,
93-
whole: formattedColumn
93+
whole: `${formattedColumn.slice(0, 100)}...`
9494
};
9595
}
9696
@@ -196,7 +196,7 @@
196196
{/key}
197197
</Table.Cell>
198198

199-
{#each $columns as { id }}
199+
{#each $columns as { id } (id)}
200200
{@const attr = $attributes.find((n) => n.key === id)}
201201
<Table.Cell column={id} {root}>
202202
{#if isRelationship(attr)}
@@ -251,16 +251,21 @@
251251
<span slot="title">Timestamp</span>
252252
{toLocaleDateTime(formatted.whole, true, 'UTC')}
253253
</DualTimeView>
254-
{:else}
254+
{:else if formatted.truncated}
255255
<Tooltip placement="bottom" disabled={!formatted.truncated}>
256256
<Typography.Text truncate>{formatted.value}</Typography.Text>
257257
<span
258+
let:showing
258259
slot="tooltip"
259260
style:white-space="pre-wrap"
260261
style:word-break="break-all">
261-
{formatted.whole}
262+
{#if showing}
263+
{formatted.whole}
264+
{/if}
262265
</span>
263266
</Tooltip>
267+
{:else}
268+
<Typography.Text truncate>{formatted.value}</Typography.Text>
264269
{/if}
265270
{/if}
266271
</Table.Cell>

0 commit comments

Comments
 (0)