Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: Table does not reflect changed options #261

Open
christianitis opened this issue May 26, 2022 · 1 comment
Open

Bug: Table does not reflect changed options #261

christianitis opened this issue May 26, 2022 · 1 comment

Comments

@christianitis
Copy link

christianitis commented May 26, 2022

Environment Details

  • react-tabulator version: 0.18.1
  • OS: Windows 10 Pro
  • Node.js version: 16.14.2

Long Description
The table does not update when an option is changed. For example, changing the options object or a column title does nothing, even though the table is re-rendering.

The following code does nothing, even though I expect the table to update its data or change a column title when the value of an <input> is changed. I know the function itself is rerunning because the console shows "This should be a rerender. whenever an input value is changed, which is expected.

import React, {useState} from "react";
import {ReactTabulator} from "react-tabulator";

export default function App() {
    const [someOptions, setSomeOptions] = useState({
        // Maybe some other options
        ajaxURL: ""
    });
    const [columnTitle, setColumnTitle] = useState("Initial title");

    console.log("This should be a rerender.")
    return(
        <div>
            <input type={"text"} onChange={event => { setSomeOptions({...someOptions, ajaxURL: event.target.value}) }}/>
            <input type={"text"} onChange={event => { setColumnTitle(event.target.value) }}/>

            <ReactTabulator
                checkOptions={true}

                options={someOptions}
                columns={[
                    {
                      title: "Some column title",
                      field: "ignoreme"
                    },
                    {
                        title: columnTitle,
                        field: "summary"
                    }
                ]}>
            </ReactTabulator>
        </div>
    )
}
@cobbman
Copy link

cobbman commented May 26, 2022

You might need to force a re-render by using the key prop. You can read about it here: https://github.com/ngduc/react-tabulator/blob/master/docs/examples.md

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants