What is the intended usage with solid createResource?

[davenh99]

Hi,

I want to know how to use tanstack table with solid's createResource.

when 'data' is a signal, I found below works:

 const table = createTable({
    features,
    get data() {
      return props.data ?? [];
    },
    columns: props.columns(),
    state: {
      get globalFilter() {
        return globalFilter();
      },
      get columnFilters() {
        return props.filters?.();
      },
    },
  });

however, it does not work when data is a resource. after the resource settles from undefined and the data is populated, the tanstack table does not update with the data.

Any help would be appreciated :)

[barry166]

A Solid resource should be handled the same way as a signal here: read the accessor inside the data getter. Do not pass the resource object, and do not pass a one-time data() snapshot when creating the table.

const emptyRows: Person[] = []
const [rows] = createResource(fetchRows)

const table = createTable({
  features,
  columns: props.columns(),
  get data() {
    return rows() ?? emptyRows
  },
})

If the resource is passed through a prop, pass the accessor and call it in the getter, e.g. return props.data?.() ?? emptyRows. Also make sure table.getRowModel().rows is read from JSX, createMemo, or table.Subscribe; reading it once outside a reactive scope will keep the initial empty row model.