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

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: