Как я могу заставить страницы таблицы React переполняться по горизонтали, пока окно не заполнится, а затем go на следующую страницу - PullRequest
0 голосов
/ 29 мая 2020

Я пытаюсь отобразить следующий набор строк в таблице, который вы обычно получаете, прокручивая страницу вниз или переходя на следующую страницу в случае разбитой на страницы таблицы, справа от существующей таблицы. Примерно так

# Page 1
┌───┬────────┬───────┐┌───┬────────┬───────┐┌───┬────────┬───────┐
│ # │  Name  │ Price ││ # │  Name  │ Price ││ # │  Name  │ Price │
├───┼────────┼───────┤├───┼────────┼───────┤├───┼────────┼───────┤
│ 1 │ Pen    │ $10   ││ 4 │ X      │ $102  ││ 7 │ A      │ $125  │
│ 2 │ Tablet │ $50   ││ 5 │ Y      │ $450  ││ 8 │ B      │ $504  │
│ 3 │ TV     │ $150  ││ 6 │ Z      │ $120  ││ 9 │ C      │ $150  │
└───┴────────┴───────┘└───┴────────┴───────┘└───┴────────┴───────┘

# Page 2
┌────┬────────┬───────┐┌────┬────────┬───────┐┌────┬────────┬───────┐
│ #  │  Name  │ Price ││ #  │  Name  │ Price ││ #  │  Name  │ Price │
├────┼────────┼───────┤├────┼────────┼───────┤├────┼────────┼───────┤
│ 10 │ D      │ $10   ││ 13 │ G      │ $102  ││ 16 │ J      │ $125  │
│ 11 │ E      │ $50   ││ 14 │ H      │ $450  ││ 17 │ K      │ $504  │
│ 12 │ F      │ $150  ││ 15 │ I      │ $120  ││ 18 │ L      │ $150  │
└────┴────────┴───────┘└────┴────────┴───────┘└────┴────────┴───────┘

Допустим, у меня есть таблица реакции с 200 строками. В таблице 4 столбца, и 3 таких таблицы можно разместить на странице по горизонтали (без переполнения). На странице помещается 25 строк. Если я использую React-table, на первой странице появляется таблица с 25 строками, все пространство справа пусто. Следующие 25 строк go до следующей страницы, занимая 8 страниц для размещения данных. Вместо этого я хотел показать 3 таблицы по 25 строк в каждой на первых 2 страницах и 2 таблицы с 25 строками на 3-й странице. Используя всего 3 страницы.

При необходимости могу уточнить.

...