Tabulator not updating upon change to paginationSize option

[h-tendy]

Hi, I'm using the latest react-tabulator. I am trying to provide a control to set the page size dynamically. However, the react component doesn't seem to be accepting the new paginationSize option. Any clues on this? Briefly looking at the code, this option seems to be missing in the propsToOptions function and could explain why?

Update (8/22/2020): There is a new paginationSizeSelector option natively supported in tabulator-tables, so I figured out that I can simply use that instead of a custom one. Setting both paginationSize and paginationSizeSelector does the trick. Still, the react-tabulator doesn't seem to destroy and recreate a table if other options change.... Only data and columns can be changed once the table is constructed looks like. Thanks.

[SamirLadoui]

there are some options don't call the redraw function so you should use a ref to your tabulator. if you are using functional component use useRef hook and for class component use createRef

const refObj = useRef(null);

const refObj = createRef();

<ReactTabulator ref={refObj}....

and then use useEffect for functional component or shouldComponentUpdate() for class component:

useEffect(() => {
    refObj.current.table.setPageSize(paginationSize);
}, [// Here put the state of your pagination object which contains the size of your tabulator for exemple paginationSize])

shouldComponentUpdate(nextProps, nextState) {
    if (nextState.paginationSize !== state.paginationSize) {
        setState({...state, paginationSize: nextState.paginationSize})
        refObj.current.table.setPageSize(nextState.paginationSize);
    }
}

and there are many functions like setPageSize (setGroupBy, addRow,..etc).

[h-tendy]

Thanks @whitexgate. I ended up doing something similar. I'd argue that react-tabulator needs to facilitate this directly. There are many tabulator options which can be set declaratively and when the user changes any of that, it should trigger a re-rendering of the table.

Currently, react-tabulator creates the table just once when componentDidMount is done. This doesn't solve other use-cases when I need to redo the table completely (a different instance) when some props change. For example, let us say you want to use the initialHeaderFilters option. If I change them, I'd want the table to re-render with the changed options.

[SamirLadoui]

Thanks @whitexgate. I ended up doing something similar. I'd argue that react-tabulator needs to facilitate this directly. There are many tabulator options which can be set declaratively and when the user changes any of that, it should trigger a re-rendering of the table.

Currently, react-tabulator creates the table just once when componentDidMount is done. This doesn't solve other use-cases when I need to redo the table completely (a different instance) when some props change. For example, let us say you want to use the initialHeaderFilters option. If I change them, I'd want the table to re-render with the changed options.

Yeah, they should add this feature. We hope so!

[ngduc]

Thanks @whitexgate for the solution. Yes, to rerender the table, use "refObj.current.table..."

There is another ticket asking to rerender when options changed. Do you want that for any option for just a subset of options? That may impact something if we make this change. Open for any ideas. Thanks.

[ngduc]

Released 0.14.7: when "options" prop changed, it will rebuild the table to reflect that change. Let me know if you still have this issue. Thanks.