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?