I need to add new column to react-table when button click, even after re-rendering table with flag Iam unable to add new column, can you please suggest on where am I gone wrong. Here is the executable sandbox code.
https://codesandbox.io/s/tannerlinsley-react-table-row-selection-forked-3gcwm?file=/src/App.js
You need to keep a state for the columns and change it accordingly using the setter method. Try like below:
const intialColumns = [
{
Header: "Units",
accessor: "units",
width: 400
},
{
Header: "Units1",
accessor: "units1",
width: 400
}
];
function App() {
const [columns, setColumns] = useState(intialColumns);
const addColumn = () => {
setColumns((prevCols) => [
...prevCols,
{
Header: "Units3",
accessor: "units3",
width: 400
}
]);
};
const data = React.useMemo(() => makeData(100), []);
return (
<Styles>
<button style={{ margin: "5px" }} onClick={addColumn}>
click here to add column{" "}
</button>
<Table columns={columns} data={data} />
</Styles>
);
}
Codesandbox:
