Как добавить элемент в Table-UI TablePagination? - PullRequest
Новая
       7

Как добавить элемент в Table-UI TablePagination?

0 голосов
/ 19 марта 2019

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

enter image description here

Теперь я хочу, чтобы нумерация страниц была выровнена по левому краю, а не по правому, а слева я хочу добавить еще один элемент, например, 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>

enter image description here

Теперь я пытаюсь добавить еще один элемент. Я пытался использовать 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>

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

enter image description here

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

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

1 Ответ

0 голосов
/ 07 мая 2019 
<TableFooter>
    <TableRow>
        <TablePagination
            ...all the props
        >
        </TablePagination>
        <TableCell colSpan={1}>
            <p>Some text</p>
        </TableCell>
    </TableRow>
</TableFooter>

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

...