T
TanStack•3y ago
rare-sapphire

Svelte table cell formatting issue

Title + pic Did I miss something?
No description
5 Replies
helpful-purple
helpful-purple•3y ago
const defaultColumns: ColumnDef<Images>[] = [ { accessorKey: 'image', header: () => 'Image', footer: (info) => info.column.id, cell: (info) => flexRender(Avatar, { src: info.row.original.image, width: ${size === 'small' ? 'w-6' : size === 'medium' ? 'w-10' : 'w-14'} }) },
other-emerald
other-emerald•3y ago
could not make it work, src and alt stay empty. Do you see a mistake ? 
let columnsDef: ColumnDef<any>[] = [
<   {
        accessorFn: (asset: Asset) => {
            return asset.picture.find((picture) => picture.order == 1)?.image;
        },
        header: 'picture',

        cell: (info) =>
            flexRender(ImageCell, {
                src: info.row.original,
                alt: 'zef'
            })
   
    }
];



<tbody>
    {#each $table.getRowModel().rows as row}
        <tr>
            {#each row.getVisibleCells() as cell}
                <td>
                    <svelte:component this={flexRender(cell.column.columnDef.cell, cell.getContext())} />
                </td>
            {/each}
        </tr>
    {/each}
</tbody>



<!-- the ImageCell component : -->
<script lang="ts">
    export const src: string = '';
    export const alt: string = '';
</script>

<img {src} {alt} />
let columnsDef: ColumnDef<any>[] = [
<   {
        accessorFn: (asset: Asset) => {
            return asset.picture.find((picture) => picture.order == 1)?.image;
        },
        header: 'picture',

        cell: (info) =>
            flexRender(ImageCell, {
                src: info.row.original,
                alt: 'zef'
            })
   
    }
];



<tbody>
    {#each $table.getRowModel().rows as row}
        <tr>
            {#each row.getVisibleCells() as cell}
                <td>
                    <svelte:component this={flexRender(cell.column.columnDef.cell, cell.getContext())} />
                </td>
            {/each}
        </tr>
    {/each}
</tbody>



<!-- the ImageCell component : -->
<script lang="ts">
    export const src: string = '';
    export const alt: string = '';
</script>

<img {src} {alt} />
metropolitan-bronze
metropolitan-bronze•3y ago
maybe@GUS try export let src: string;
other-emerald
other-emerald•3y ago
yep that was it 😅 😅 also used 
renderComponent()
renderComponent()
instead of 
flexRender()
flexRender()
i didn't took time to check the difference but it is working fine now . So much lost time for a tiny mistake 🥲 .
like-gold
like-gold•3y ago
Hi! I'm trying to create a display column with a couple of buttons in it. So far, I was able to get the buttons to show, but now, I don't know how to handle events thrown from those buttons. Any chance you were able to make this work?

Did you find this page helpful?