Блог

Я использую Material-UI Table с TablePagination в моем проекте. Вот как это выглядит:

Теперь я хочу, чтобы нумерация страниц была выровнена по левому краю, а не по правому, а слева я хочу добавить еще один элемент, например Button.

Я смог переместить выравнивание влево, изменив стиль элемента .spacer. Вот мой код:

 <TableFooter>
      <TableRow>
        <TablePagination
          rowsPerPageOptions={[5, 10, 25]}
          colSpan={3}
          count={rows.length}
          rowsPerPage={rowsPerPage}
          page={page}
          SelectProps={{
            native: false,
          }}
          onChangePage={this.handleChangePage}
          onChangeRowsPerPage={this.handleChangeRowsPerPage}
          ActionsComponent={TablePaginationActions}
          classes={{spacer: classes.paginationSpacer}} >
        </TablePagination>
      </TableRow>
</TableFooter>
  

Теперь я пытаюсь добавить еще один элемент. Я пытался использовать action свойство:

 action="<div>Some text</div>"
  

Но это даже не отображается. Пытался использовать

 component="<td>Some text</td>"
  

Получена следующая ошибка: Warning: validateDOMNesting(...): <<th>Some text</th>> cannot appear as a child of <tr>. То же самое с div.

Затем я попробовал что-то подобное:

 ...
<TableRow>
    <TablePagination
        ...all the props
    >
    </TablePagination>
    <td>Some text</td>
</TableRow>
  

Текст появился, но он полностью скремблировал всю мою таблицу:

И <td> это, пожалуй, единственный элемент, который вообще отображался, поскольку TableRow генерирует, ну, <tr> элемент.

Есть идеи, как вставить туда элемент?

 <TableFooter>
    <TableRow>
        <TablePagination
            ...all the props
        >
        </TablePagination>
        <TableCell colSpan={1}>
            <p>Some text</p>
        </TableCell>
    </TableRow>
</TableFooter>
  

надеюсь, это может вам помочь

Вам нужно разместить представление таблицы за пределами table все вместе.Посмотрите на 3 примера в демонстрационных версиях https://material-ui.com/components/tables /

 <div>   
    <Table>
        ...
    </Table>
</div>

<TablePagination
    ...props
>