Dynamic Columns from async Load

[WallaceSociety]

I'm coming from Vue and as a Svelte learning exercise I'm simply trying to create a component that loads a CSV file and displays the results. Assuming the first row contains headers I would like to creating dynamic columns based on that first row.

I think I am about 90% of the way there, but I'm not sure how to go about updating the view model of the table after data has been loaded ( or changed ). Is there something to the effect of updateViewModel that I should be calling?

  const results = writable([]);
  const table = createTable(results);

  // Create Table
  results.subscribe((rowData) => {
    console.log('value', rowData);

    // Setup Columns
    if (!rowData[0]) {
      return;
    }
    let headers = Object.keys(rowData[0]);
    let columns = table.createColumns(
      headers.map((header) => {
        return table.column({
          header: header,
          accessor: header,
        });
      })
    );

    // How to Update the View?
    // table.updateViewModel(columns) ???
  });

  (async () => {
    try {
      const response = await fetch('./results.csv');
      const rawData = await response.text();
      results.update(() => Papa.parse(rawData, { header: true }).data);
    } catch (err) {
      console.log(err);
    }
  })();

  const { headerRows, rows, tableAttrs, tableBodyAttrs } = table.createViewModel();

[bryanmylee]

Hi @WallaceSociety, thanks for the feature suggestion!

I built Svelte Headless Table with static columns in mind mostly to guarantee type safety for all the plugins, so I didn’t plan for dynamic columns.

However, you do bring up a pretty good point about dynamically loading columns based on loaded data.

I can plan for an API extension that allows updating the view model columns, but it would most likely require recreating the view model under the hood.

In the meantime, would it be possible for you to re-create the table instance on data load?

Something like:

let table = createTable(data, {…});
let viewModel = table.createViewModel(…);

async function loadData() {
  // handle loading
  const columns = …
  table = createTable(data, {…});
  viewModel = table.createViewModel(columns);
}

$: {headerRows, rows} = viewModel;

[WallaceSociety]

That actually worked great. What is the downside of just recreating on each file load like this?

[WallaceSociety]

Awesome way of tackling the data table problem by the way. I really love how this works.

[bryanmylee]

Presumably with Svelte's optimizations, it shouldn't be much. But since you're recreating the stores, I still wouldn't recommend this approach if you're updating the columns more than once a second.

[rohanrajpal]

Just used this approach to create a dynamic table and it works wonderfully! Thanks a lot.