Как сделать адаптивную таблицу на Material-UI?

Question

[kaleon]

Нужно доработать таблицу, чтобы в на мобильных устройствах выводило в строчку по два.
https://codesandbox.io/s/dywbw

Как это должно выглядеть в мобильной версии:

Desert Frozen yoghurt
Calories 159
Fat 6
Carbs 24
Protein 4

Answer 1

[Сергей Сунцев]

Тут надо условие сделать на размер экрана, и по нему подставлять нужные данные в таблицу.

*Храните в state текущие данные таблицы и размер экрана.
*Создайте событие updateDimensions, в котором по событию изменения экрана (window.innerWidth) обновляете state с новыми данными.

Пример события изменения экрана

Comments

[kaleon]

Выходит, нужно 2 разных таблицы, которые будут отрисовываться по условию?

[Сергей Сунцев]

kaleon, Как вам удобнее будет, если вы хотите транспанировать таблицу, то проще пожалуй иметь две таблицы. А если уменьшать кол-во столбцов, то и одной хватит.

[kaleon]

Сергей Сунцев, Я хочу те же данные, что и на десктопе, выводить в два столбца на мобильной версии (как описал в вопросе) и пока что ничего, только кроме отрисовки второй таблицы, в голову не приходит

[Сергей Сунцев]

Ну просто как вы формируете таблицу?
У вас есть массив объектов со столбцами, внутри каждого столбца массив объектов со строками.
После события updateDimensions(в меньшую сторону), вы меняете кол-во столбцов до двух, и пересобираете данные, сохранив после этого их, через setState.

Компонент подхватывает изменение и таблица видоизменяется.