[英]How to add an element to Material-UI TablePagination?
I'm using Material-UI Table with TablePagination in my project.我在我的项目中使用带有 TablePagination 的 Material-UI Table。 This is how it appears:
这是它的外观:
Now I want the pagination to be aligned to left instead of right, and on the left I want to add another element, for example Button.现在我希望分页左对齐而不是右对齐,并且在左侧我想添加另一个元素,例如 Button。
I was able to move the alignment to left by restyling the .spacer element.我能够通过重新设计 .spacer 元素将对齐方式向左移动。 Here's my code:
这是我的代码:
<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>
Now I'm trying to add another element.现在我正在尝试添加另一个元素。 I tried to use
action
property:我尝试使用
action
属性:
action="<div>Some text</div>"
But that is not even showing.但这甚至没有表现出来。 Tried to use
尝试使用
component="<td>Some text</td>"
Got the following error: Warning: validateDOMNesting(...): <<th>Some text</th>> cannot appear as a child of <tr>.
收到以下错误:
Warning: validateDOMNesting(...): <<th>Some text</th>> cannot appear as a child of <tr>.
Same thing with div. div 也是一样。
Then I tried something like that:然后我尝试了这样的事情:
...
<TableRow>
<TablePagination
...all the props
>
</TablePagination>
<td>Some text</td>
</TableRow>
The text appeared, but it completely scrambled my entire Table:文字出现了,但它完全打乱了我的整个表格:
And <td>
is about the only element that was even showing, since TableRow
generates, well, <tr>
element.而
<td>
是唯一显示的元素,因为TableRow
生成了<tr>
元素。
Any ideas how to insert an element in there?任何想法如何在其中插入元素?
<TableFooter>
<TableRow>
<TablePagination
...all the props
>
</TablePagination>
<TableCell colSpan={1}>
<p>Some text</p>
</TableCell>
</TableRow>
</TableFooter>
hope this can help you希望这可以帮到你
You need to place the TablePagination outside of table all together.Look at the 3 example on the demos https://material-ui.com/components/tables/您需要将 TablePagination 一起放在表格之外。查看演示中的 3 个示例https://material-ui.com/components/tables/
<div>
<Table>
...
</Table>
</div>
<TablePagination
...props
>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.