I'm having trouble loading a Svelte table - datatable

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