[TablePagination] Slot for the left side before the spacer

[davidbielik]

Summary

Is there an easier way to set text on the left side of the default TablePagination component?

I'm using this workaround, but curious if there's another way, and if not to raise this as a feature request.

<TablePagination
          slotProps={{
            spacer: {
              // Create a wrapper that includes your additional content
              component: 'div',
              style: {
                display: 'flex',
                alignItems: 'center',
              },
              children: (
                <>
                  {/* Your custom prepended text */}
                  <span style={{ marginRight: '10px', color: 'gray' }}>
                    Additional Info
                  </span>

                  {/* The original spacer will be automatically included */}
                </>
              ),
            },
          }}
          component="div"
          count={total}
          page={page}
          disabled={!total}
          onPageChange={handleChangePage}
          rowsPerPage={rowsPerPage}
          rowsPerPageOptions={[20]}
          onRowsPerPageChange={handleRowsPerPageChange}
        />

Examples

No response

Motivation

No response

Search keywords: tablepagination slot left

[ZeeshanTamboli]

@davidbielik Why do you consider this as a workaround? It's correct that you need to use the spacer slot to render a text there.

[davidbielik]

Thanks @ZeeshanTamboli - it seemed odd to use a slot just to define children to prepend vs. using it to define the component itself. Thanks for confirming!

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.