Add new column on button click in React JS react-table

Question

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

Answer 1

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: