How may I set the page size using pagination with Tanstack table with solid.js?

71 views Asked by At

I'trying to addapt the example in the documentation of TanStaeck Table for Pagination using react

https://tanstack.com/table/v8/docs/examples/react/pagination

to solid.js [i.e.: using solid-table]

However the following part for letting the user choose the page size does not work:

    <select
          value={table.getState().pagination.pageSize}
          onChange={e => {
            table.setPageSize(Number(e.target.value))
          }}
        >
          {[10, 20, 30, 40, 50].map(pageSize => (
            <option value={pageSize}>
              Mostrar {pageSize} filas
            </option>
          ))}
        </select>

It seemes that there is a problem with the reactivity of the table. The pagination state is updated, but the table is not re-draw in the DOM. (I known that unlike what happends in React, in Solid.js the render function is only run once)

Hence, I think that I would need somehow to add a signal connecting the PaginationState. Something like the signals in the SortingState in the example

https://tanstack.com/table/v8/docs/examples/solid/sorting

but nothing of what I have tried worked.

On the other hand, this code, for setting a button for advancing to the next page does work:

        <button onClick={() => table.nextPage()}>Next Page</button>

Any idea that can help? Could it be a bug in solid-table?

0

There are 0 answers