I'm having trouble loading a Svelte table

Question

There aren't any vanilla examples on creating a datatable for Svelte. I've found a couple examples that I'm trying to learn from, but still a no go. Right now I'm trying to build it on the REPL tab and in the results tab I get my two rows but all three fields are the same, instead unique like I'm expecting.

I've tried [], slice, concating, each per row, and probably some others I can't think of right now.

<script>
import { beforeUpdate, createEventDispatcher, onMount } from 'svelte';

export let faketable = [{Color:'BLUE', Car:'Camaro', Brand:'Chevy'},{Color:'RED', Car:'Pinto', Brand:'Ford'}];
export let columns = ["Color", "Car", "Brand"];
export let rows = ['blue','Camaro','Chevy'];
//export let try1 = JSON.parse(faketable);

export let clickable = true

const dispatch = createEventDispatcher();

export function click(row) {
        if (!clickable) {
            return;
        }
        if (getSelection().toString()) {
            // Return if some text is selected instead of firing the row-click event.
            return;
        }
        dispatch('row-click', row);
        // console.log('click', row);
}
</script>



<div>
    <h3 class="panel-title">Please work!</h3>   
        <table ref="table" class="table table-striped table-hover" style="width:100%">
            <thead>
                <tr>                    
                    {#each columns as column, x}    
                    <th style="width: { column.width ? column.width : 'auto' }" align="center"> 
                        {column}
                    </th>                       
                    {/each}                 
                </tr>
            </thead>
            <tbody>
                {#each faketable as row, y}
                <tr class="{ clickable ? 'clickable' : '' }" on:click="{() => click(row)}">         
                    {#each columns as column, x}
                    <td align="center">                 
                        {row.Color}
                    </td> 
                    {/each}
                </tr>
                {/each}
            </tbody>
        </table>
</div>

<style>

    tr.clickable {
        cursor: pointer;
    }
    table {
        table-layout: fixed;
    }

  table tr td {
        padding: 0 0 0 56px;
        height: 48px;
        font-size: 13px;
        color: rgba(0, 0, 0, 0.87);
        border-bottom: solid 1px #DDDDDD;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;        
    }
    table th {
        border-radius: 0;
    }
    table tbody tr:hover {
        background-color: #EEE;
    }
</style>

The headers look like I want them to be Color, Car, & Brand. But each row I expect faketable to return Blue Camaro Chevy then Red Pinto Ford, respectively.

Answer 1

You have {row.Color} where you should have {row[column]}. Fix that, and it works