Limit table's row to show a limited amount of text (truncate)

[kuatroka]

I have almost implemented all the features I need (server based search/pagination/sort) and I'm trying to make the table not to change it's look by jumping up and down a bit during pagination when certain rows have a bigger or shorter text to display. See the gif. The truncation doesn't seem to work, nor the string slicing. Any help would be awesome.

I see in the 'tasks' example the long text has the three dots at the end, but I can't seem to find the piece of code that does it...

I tried it with truncate and an explicit string slicing, but it doesn't work. See the gif. I would appreciate any help. Thanks

[kuatroka]

Add class="line-clamp-1" to the body cell

<Table.Cell 
{...attrs}
>
{#if cell.id === 'cik_name'}
<a href="/{row.cells.find(c => c.id === 'cik').value}" 
class="line-clamp-1 w-[320px]">{cell.value}</a>
{:else}
<Render of={cell.render()} />
{/if}
</Table.Cell>