Table fully redrawing on column changed

[ziarmandhost]

Descriprion of the bug
I have a sign with a "select row" checkbox. After I click on the checkbox id of this row (which is stored in the cell with index 2) is added to my side. Actually, everything works as it should, however, when the checkbox state changes from checked = {true} to checked = {false} or vice versa, the table is completely redrawn and throws us to the very beginning. That is, if we have scrolled a little and clicked on "select a row", then we will be sent to the top of the table and it will be completely redrawn. Also in the table there is a column with images and, accordingly, they are constantly being rerendered, which leads to unnecessary http requests and frequent animation of the image "loading". Most likely the problem is in the wrong keys for the components in the plugin. Please fix this bug.

Desktop :

• OS: Windows
• Browser chrome
• Version 91.0.4472.124 (Official), (64 bit)

[mianazmatali9]

Stuck on a similar issue, I'm updating a column, changing the status of a record. It automatically resets the table state,
i.e pagination got reset.
@afshinm do we have a plan to address this bug?

[augiwan]

The entire table seems to be glitching (redrawing) on pagination, and sometimes on its own (still figuring out why)

[etcimon]

I rewrote this repo as an internal jsx file and it works. Had to remove the forceUpdate()

import gridjs, {Grid, h, Component, createRef } from 'gridjs';
import ReactDOM from 'react-dom'
import React from 'react';
import 'gridjs/dist/theme/mermaid.css';

export class AdminGrid extends React.Component {
    constructor(props) {
        super(props);
        this.wrapper = React.createRef();
        // Grid.js instance
        this.instance = null;
        this.instance = new Grid(props || {});
    }
    getInstance() {
        return this.instance;
    }
    componentDidMount() {
        this.instance.render(this.wrapper.current);
    }
    componentDidUpdate() {
        this.instance.updateConfig(this.props);
    }
    render() {
        return React.createElement("div", { ref: this.wrapper });
    }
}

export class ReactWrapper extends Component {
    constructor() {
        super(arguments);
        this.defaultProps = {
            parent: "div"
        }
        this.ref = createRef();
        return this;
    }
   componentDidMount() {
        var root = ReactDOM.createRoot(this.ref.current);
        root.render(this.props.element);
    };
    render() {
        return h(this.props.parent, { ref: this.ref });
    };
}

export function _(element, parent) {
    return h(ReactWrapper, {
        element: element,
        parent: parent,
    });
}

[MehdiBenbahri]

Same issue here, i always normally recreate a grid component, but it's heavy... Each time you need to add dynamic options the grid redraw....

https://codesandbox.io/s/gridjs-react-server-side-forked-lsrcfv?file=/src/App.js

And he is making an Api call too....

[carleighroche]

The issue of rerendering on state change still exists. Even on the docs page, you can see the screen flashes when clicking the add new record button:

https://gridjs.io/docs/integrations/react