How do I use a Solid Store as the data source?

[escritorio-gustavo]

I have a table component that invokes createSolidTable with the following code:

type TableProps<T, U> = Omit<JSX.HTMLAttributes<HTMLTableElement>, 'children'> & {
  data: T[]
  ref?: HTMLTableElement
  columns: ColumnDef<T, U>[]
  pageSize?: number
}

export function Table<T, U>(props: TableProps<T, U>) {
  const [local, rest] = splitProps(props, ['data', 'columns', 'pageSize', 'class'])

  const table = createSolidTable<T>({
    get data() {
      return local.data
    },
    get columns() {
      return local.columns
    },
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
  })

  return (
    // render code...
  )
}

This works fine, but if I have data which I keep in a Solid store as such:

function Foo() {
  const [state, setState] = createStore({ data: [] })

  return <Table data={state.data} columns={/* columnDef */} pageSize={100} />
}

This will not update the table when state.data is changed through setState unless I use data={[...state.data]}, which degrades performance a lot and kinda defeats the point of using a store in the first place.

Does anyone know how to make this work without copying the data all the time?

[AlexErrant]

I somewhat answer this question here #5019 (comment)