Adding new columns dynamically with mui-datatables

Question

I want to add a new column in mui-datatable every time a button is pressed. However datatables doesn't seem to be rendering it. However, if I clicked on the add column button, and then select the dropdown, the new columns appear. Furthermore the selected dropdown value does not seem to be reflected as well . I've narrowed the issue down to using const [columns,setColumns] = useState(...) for the column, but without that, I can't add any new columns dynamically at all. Appreciate any help to get me out of this pickle, thank you.

https://codesandbox.io/s/unruffled-sun-g77xc

const App = () => {
  function handleChange(event) {
    setState({ value: event.target.value });
  }

  const [state, setState] = useState({ value: "coconut" });

  const [columns, setColumns] = useState([
    {
      name: "Column 1",
      options: {}
    },
    {
      name: "Column with Input",
      options: {
        customBodyRender: (value, tableMeta, updateValue) => {
          return (
            <div>
              <select value={state.value} onChange={handleChange}>
                <option value="grapefruit">Grapefruit</option>
                <option value="lime">Lime</option>
                <option value="coconut">Coconut</option>
                <option value="mango">Mango</option>
              </select>
            </div>
          );
        }
      }
    }
  ]);

  const options = {
    responsive: "scroll"
  };

  const addColumn = () => {
    columns.push({
      name: "NewColumn",
      label: "NewColumn"
    });
    setColumns(columns);
  };

  const data = [["value", "value for input"], ["value", "value for input"]];

  return (
    <React.Fragment>
      <MUIDataTable columns={columns} options={options} data={data} />

      //add a new column if this button is clicked
      <button onClick={addColumn}>Add Column</button>
    </React.Fragment>
  );
};

Michael Cox · Accepted Answer · 2019-07-08 15:45:00Z

2

Your new column wasn't actually getting pushed to the columns variable. When you're using useState, you can't make changes to the variable unless you use setColumns, otherwise it won't trigger a rerender. Try this:

  const addColumn = () => {
    setColumns([ ...columns, {
      name: "NewColumn"
    }]);
  };

Or this:

  const addColumn = () => {
    const editableColumns = [...columns];
    editableColumns.push({
      name: "NewColumn"
    });
    setColumns(editableColumns);
  };

Both will work, it's just your preference.

You can test if it's editing the columns with this: useEffect(() => console.log(columns), [columns]);

edited Jul 8, 2019 at 15:45

answered Jul 8, 2019 at 15:38

Michael Cox

1,3062 gold badges15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dasherzx Over a year ago

Thanks for the help. I have modified it and appending columns work now. Tbh i have already fixed it by using the method you described after opening this post here. However, as you can see from this modified code here codesandbox.io/s/elastic-lalande-hntew?fontsize=14 the dropdown still doesnt reflect my selected value.

Michael Cox Over a year ago

Change your select tag to <select value={value} onChange={e => updateValue(e.target.value)}>

Collectives™ on Stack Overflow

Adding new columns dynamically with mui-datatables

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related