ReactJS - Как можно обернуть текст ячейки в MaterialTable при вводе данных для новой строки?

Question

Вопрос : возможно ли обернуть текст при вводе ненормально длинных имен в MaterialTable?

У меня возникла проблема с таблицей материалов при вводе очень длинного имени Например, «LONG NAME LONG NAME LONG NAME LONG NAME» строка продолжается, и предыдущие слова «исчезают».

Есть ли способ обернуть текст, чтобы при наборе действительно длинного имени, текстовое поле постоянно расширяется?

Код: https://codesandbox.io/s/material-demo-vnk66

Текущий выпуск:

То, что я хочу попробовать сделать, когда текст будет заключен в рамку.

То, что я пытался сделать, было встроенным стили в объявлении MaterialTable, а затем во внешнем элементе, который у меня есть, но это не работает:

style = {{
    whiteSpace: "normal", 
    wordWrap: "break-word",
}}

Answer 1

Вы можете настроить компоненты так, чтобы они работали точно так, как вы хотите в таблицах редактируемых материалов. Например, если вы хотите иметь многострочное TextField, вы можете сделать:

columns: [
  {
    title: "Name",
    field: "name",
    editComponent: ({ value, onChange }) => (   
      <TextField
        onChange={e => onChange(e.target.value)}
        value={value}
        multiline
      />
    )
  },
  ...
] 

Демо: https://codesandbox.io/s/material-demo-8ysj5