Динамическое добавление новых столбцов с помощью mui-datatable - PullRequest
Новая
       16

Динамическое добавление новых столбцов с помощью mui-datatable

2 голосов
/ 08 июля 2019

Я хочу добавить новый столбец в mui-datatable при каждом нажатии кнопки. Однако данные, кажется, не рендерит это. Однако, если я нажму на кнопку добавления столбца, а затем выберу раскрывающийся список, появятся новые столбцы. Кроме того, выбранное значение раскрывающегося списка также не отражается. Я сузил проблему до использования const [columns, setColumns] = useState (...) для столбца, но без этого я не могу вообще динамически добавлять новые столбцы. Спасибо за любую помощь, чтобы вытащить меня из этого рассола, спасибо.

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>
  );
};

1 Ответ

0 голосов
/ 08 июля 2019

Ваш новый столбец фактически не выдвигался в переменную columns. Когда вы используете useState, вы не можете вносить изменения в переменную, если вы не используете setColumns, иначе это не вызовет рендеринг. Попробуйте это: 

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

Или это: 

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

Оба будут работать, это просто ваши предпочтения.

Вы можете проверить, редактирует ли он столбцы следующим образом: useEffect(() => console.log(columns), [columns]);

...