Using pagination without a table

[joonarahko]

Right now the pagination works well for paginating tables. However, I have a use case where I want to paginate an unordered list. Right now I can override the root tr component to be a div for example. However, I would like to be able to turn the underlying td into something else as well. Overall I think it would be good if I could use the pagination outside of a table.

[oliviertassinari]

@leMaik I have been having a look at how react-toolbox is going to handle deep nesting of the components. This is something we could explore but I believe we could implement something simpler.
Here is what I propose: we remove the TableRow from the TablePagination component. It should be straightforward. Then the root components become a TableCell. As far as I know, people can customize it to fit anywhere.

[leMaik]

@oliviertassinari As long as the pagination component still looks as in the specs when used in a table, I'm finde with that. 👍 Sounds like one would just need to wrap <TablePaginaten ... /> inside <TableRow> when using it inside a table? Is using a TableCell outside of a table ok?

Edit: Oh nice, TableCell has a component prop. 🎉 I'm working on a PR...

[joonarahko]

🎆 🍾 🎉

[oliviertassinari]

Here is how to use the TablePagination outside of the table with #8525:

<TablePagination component="div" …

[cherendeen-envative]

Edit: After further investigation, I discovered that in the current source the TablePagination component uses the "div" component prop by default. Unfortunately this doesn't appear to be in the latest 5.8.3 though. So im stuck waiting for a new release, or im miss interpreting something.

From TablePagination.js in 5.83
Its still using a td instead of a div by default and with no way to override.

const {
    ActionsComponent = TablePaginationActions,
    backIconButtonProps,
    className,
    colSpan: colSpanProp,
    component = TableCell,
    ...
  } = props,
...

Unfortunately this is no longer possible due to the component now being omitted from the base props:

material-ui/packages/mui-material/src/TablePagination/TablePagination.d.ts

Line 143 in 736f89f

export type TablePaginationBaseProps = Omit<TableCellProps, 'classes' | 'component' | 'children'>;

Trying to find another way. I need to be able to place the pagination controls in the table header ( but above the header columns )