Header does not re-render

[rtritto]

When I update the data (length changes), the header doen't update.

In the example, after the click on button, data.length change from 0 to 1 but the header text doesn't update to 1 and remain 0.

I already tested re-render in cell and it works.

App.tsx

import { type ColumnDef, createColumnHelper } from '@tanstack/solid-table'
import { createMemo, createSignal, type Component } from 'solid-js'

import Table from './Table'

const App: Component = () => {
  const [data, setData] = createSignal([])

  const columnHelper = createColumnHelper<Record<string, unknown>>()
  const columns = createMemo<ColumnDef<Record<string, unknown>, any>[]>(() => [
    columnHelper.accessor(() => { }, {
      id: 'total',
      header: () => `Total: ${data().length}`
      cell: () => <div>Test</div>
    })
  ])

  return (
    <div>
      <button onClick={() => setData(['A'])}>Add element A to Data</button>

      <Table columnData={data()} columns={columns()} />
    </div>
  )
}

export default App

Table.tsx

import { IconSortAscending, IconSortDescending, IconDots } from '@tabler/icons-solidjs'
import { createSolidTable, flexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel } from '@tanstack/solid-table'
import type { ColumnDef, ColumnFilter, ColumnSort, RowSelectionState, Row as TanstackRow } from '@tanstack/solid-table'
import { For, Show, createSignal, mergeProps, type Component } from 'solid-js'

const Table: Component<{ columnData: Record<string, unknown>[], columns: ColumnDef<Record<string, unknown>, any>[] }> = (props) => {
  const merged = mergeProps({
    enableRowSelection: () => true
  }, props)

  const [sorting, sortingSet] = createSignal<ColumnSort[]>()
  const [rowSelection, rowSelectionSet] = createSignal<RowSelectionState>()
  const [columnFilters, setColumnFilters] = createSignal<ColumnFilter[]>()

  const solidTable = createSolidTable({
    get data() {
      return merged.columnData ?? []
    },
    // eslint-disable-next-line solid/reactivity
    columns: merged.columns ?? [],
    state: {
      get rowSelection() {
        return rowSelection()
      },
      get sorting() {
        return sorting()
      },
      get columnFilters() {
        return columnFilters()
      }
    },
    enableRowSelection: (row: TanstackRow<Record<string, unknown>>) => merged.enableRowSelection(row),
    onColumnFiltersChange: setColumnFilters,
    getFilteredRowModel: getFilteredRowModel(),
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    onSortingChange: sortingSet,
    onRowSelectionChange: rowSelectionSet
  })

  return (
    <table class="table w-full">
      <thead>
        <For each={solidTable.getHeaderGroups()}>{(headerGroup) => (
          <tr>
            <For each={headerGroup.headers}>{(header) => (
              <th colSpan={header.colSpan}>
                <Show when={!header.isPlaceholder}>
                  <div
                    class={`${header.column.getCanSort() ? "cursor-pointer select-none" : ""} flex items-center gap-x-2 p-4`}
                    onClick={header.column.getToggleSortingHandler()}
                  >
                    {flexRender(header.column.columnDef.header, header.getContext())}
                    {{
                      asc: <IconSortAscending />,
                      desc: <IconSortDescending />,
                    }[header.column.getIsSorted() as string]
                      ?? (header.column.getCanSort() ? (
                        <IconDots />
                      ) : null)}
                  </div>
                </Show>
              </th>
            )}</For>
          </tr>
        )}</For>
      </thead>
      <tbody>
        <For each={solidTable.getRowModel().rows}>{(row) => (
          <tr>
            <For each={row.getVisibleCells()}>{(cell) => (
              <td>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </td>
            )}</For>
          </tr>
        )}</For>
      </tbody>
    </table>
  )
}

export default Table

[AlexErrant]

I demo the header updating here #5019 (comment)