How do you dynamically structure data for a tanstack table?

[tradeGreej]

All the examples I have seen have been hardcoded columns / and I am not getting anywhere by myself, unfortunately. I am using the table from the sorting example in react js. I can get the columns to render but I cant get the rows to render with values. They are just rendering as empty tags. This is my current attempt to convert the row data to a array of arrays of objects but im really having no luck and would appreciate any help.

if (data !== null) {
const allKeys = Array.from(new Set(Object.values(data).flatMap(Object.keys)));
allKeys.forEach((key) => {
const tableData: { [key: string]: string | number }[] = [];
const row: { [key: string]: string | number } = {metric: key, id: "rowName",cell:key};
row[key] = key;
tableData.push(row);
datesFiltered.map(timestamp =>{
const row: { [key: string]: string | number } = {metric: key, accessor: timestamp.toString(),id: timestamp.toString(),cell:data[timestamp][key], header:data[timestamp][key]};
tableData.push(row);
})

          arr.push(tableData);
        });
    }

This is my current code for setting the columns which works fine const newColumns = [
{
id: 'rowName',
accessor: 'rowName',
header: '',
enableSorting: true,
},
...datesFiltered.map(timestamp => ({
id: timestamp.toString(),
accessor: timestamp.toString(),
header: monthNames[new Date(timestamp).getMonth()] + ' ' + new Date(timestamp).getFullYear(),
enableSorting: true,
})),
];