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.

[amasen02]

The reason it works with a signal but appears "stuck" with a resource almost always comes down to how the resource accessor is passed and where it is tracked in Solid's reactive graph.

In Solid, component bodies only run once. If reactivity is lost at the prop boundary or if table.getRowModel().rows is evaluated outside a tracking scope, the table will remain frozen with the initial empty array [].

Here is the exact breakdown and the robust pattern to get it working reliably:

---

Pitfall 1: Calling the Resource Accessor in the Parent JSX

If the parent does:

// ❌ WRONG: Calls the accessor once during parent mount when resource is still undefined
<TableComponent data={resource()} />

props.data receives undefined statically and will never re-evaluate when the promise resolves.

Instead, pass the accessor itself:

// ✅ CORRECT: Passes the getter function so the child can track it reactively
<TableComponent data={resource} />

---

Pitfall 2: Reading Rows Outside a Reactive Tracking Context

If you assign rows to a local variable in the component body:

// ❌ WRONG: Evaluated once at mount before the resource finishes fetching
const rows = table.getRowModel().rows;

return (
  <tbody>
    <For each={rows}>...</For>
  </tbody>
);

rows will forever be the empty array [].

Instead, pass table.getRowModel().rows directly into <For each={...}> or wrap it in createMemo:

// ✅ CORRECT: Solid tracks property access inside <For>'s reactive computation
<tbody>
  <For each={table.getRowModel().rows}>
    {(row) => (
      <tr>
        <For each={row.getVisibleCells()}>
          {(cell) => (
            <td>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
          )}
        </For>
      </tr>
    )}
  </For>
</tbody>

---

Complete Working Implementation

import { createResource, For, Show, Suspense, type Accessor } from 'solid-js';
import {
  createTable,
  getCoreRowModel,
  flexRender,
  type ColumnDef,
} from '@tanstack/solid-table';

interface Props<T> {
  // Accept the resource accessor directly
  data: Accessor<T[] | undefined>;
  columns: ColumnDef<T>[];
}

export function DataTable<T>(props: Props<T>) {
  // Empty fallback array to preserve object identity across renders
  const defaultData: T[] = [];

  const table = createTable({
    // TanStack Table v9 options
    get data() {
      // Calling props.data() here tracks the Solid resource dependency
      return props.data() ?? defaultData;
    },
    columns: props.columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <div class="table-container">
      <table>
        <thead>
          <For each={table.getHeaderGroups()}>
            {(headerGroup) => (
              <tr>
                <For each={headerGroup.headers}>
                  {(header) => (
                    <th>
                      <Show when={!header.isPlaceholder}>
                        {flexRender(
                          header.column.columnDef.header,
                          header.getContext()
                        )}
                      </Show>
                    </th>
                  )}
                </For>
              </tr>
            )}
          </For>
        </thead>
        <tbody>
          {/* Direct property access inside <For> guarantees fine-grained re-renders */}
          <For each={table.getRowModel().rows}>
            {(row) => (
              <tr>
                <For each={row.getVisibleCells()}>
                  {(cell) => (
                    <td>
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext()
                      )}
                    </td>
                  )}
                </For>
              </tr>
            )}
          </For>
        </tbody>
      </table>
    </div>
  );
}

// In your parent page / component:
export function UserPage() {
  const [users] = createResource(fetchUsers);

  return (
    <Suspense fallback={<p>Loading users...</p>}>
      {/* Pass accessor without invoking it */}
      <DataTable data={users} columns={columns} />
    </Suspense>
  );
}

Key Takeaways:

1. Pass the accessor data={resource} instead of the unwrapped value data={resource()}.
2. Read props.data() inside get data() so TanStack Table's data getter registers a reactive dependency on the resource signal.
3. Keep table.getRowModel().rows inside <For each={...}> in JSX so Solid's DOM reconciliation triggers as soon as the promise resolves.