如何向 Material-UI TablePagination 添加元素？

Question

我在我的項目中使用帶有 TablePagination 的 Material-UI Table。 這是它的外觀：

現在我希望分頁左對齊而不是右對齊，並且在左側我想添加另一個元素，例如 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>元素。

任何想法如何在其中插入元素？

Answer 1

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

希望這可以幫到你

Answer 2

您需要將 TablePagination 一起放在表格之外。查看演示中的 3 個示例https://material-ui.com/components/tables/

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

<TablePagination
    ...props
>