#reactjs #material-ui #material-design
#reactjs #материал-пользовательский интерфейс #материал-дизайн
Вопрос:
Я создаю таблицу с данными. Хотите разбивку на страницы, подобную этому прикрепленному изображению в нижнем колонтитуле. С левой стороны мне нужны цифры и результаты с правой стороны на страницу.
Комментарии:
1. Вы видели примеры разбивки на страницы в документации Material UI tables ?
2. Эта разбивка на страницы отличается от моей. Я хочу квадратную форму с правой стороны, а с левой стороны — номера страниц.
Ответ №1:
Вероятно, вам придется использовать комбинацию разбивки на страницы и разбивки на страницы таблицы. И скройте неиспользуемые панели с помощью CSS.
<div className={classes.root}>
<Pagination count={10} variant="outlined" shape="rounded" />
<TablePagination
component="div"
count={100}
page={page}
onChangePage={handleChangePage}
rowsPerPage={rowsPerPage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</div>;
Я создал образец codesandbox (это просто обходной путь) — https://codesandbox.io/s/material-demo-forked-wmm4z?file=/demo.tsx:891-1225
Дайте мне знать, если вам нужна дополнительная помощь.
Ответ №2:
Как упоминал @Tejogol, вы можете использовать разбивку на страницы в примере таблицы пользовательского интерфейса Material и изменить ее.
Вы можете сохранить номер текущей страницы в переменной состояния и добавить другой стиль в соответствующее поле навигации. Стиль выглядит как простая граница с небольшим радиусом границы (1-3 пикселя).
Для результатов на странице вы можете использовать разделители React. Не забудьте обновить номер текущей страницы при изменении результатов для каждой страницы.