CODEWITHSUNDEEP
reactjsmaterial-ui
Igal
Igal

Reputation: 6083

How to add an element to Material-UI TablePagination?

I'm using Material-UI Table with TablePagination in my project. This is how it appears:

enter image description here

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.

I was able to move the alignment to left by restyling the .spacer element. 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>

enter image description here

Now I'm trying to add another element. I tried to use action property:

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>. Same thing with 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:

enter image description here

And <td> is about the only element that was even showing, since TableRow generates, well, <tr> element.

Any ideas how to insert an element in there?

Upvotes: 4

Views: 6217

Answers (2)

SasaT
SasaT

Reputation: 731

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/

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

<TablePagination
    ...props
>

Upvotes: 1

ddann
ddann

Reputation: 51

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

hope this can help you

Upvotes: 1

Related Questions