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
Advertisement
Answer
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: