search

gregnb / mui-datatables

Datatables for React using Material-UI
MIT License
2.71k stars 932 forks source link

Rendering Paging on Top of Table as well #1533

Open netanel-haber opened 4 years ago

netanel-haber commented 4 years ago

First of all you've built a very helpful component - so thank you.

I would like to request it to be possible to opt into rendering the table paging on top as well (or instead) as the bottom of the table. What I'm imagining is maybe a hook that receives the table ref and returns the paging callbacks and stats so it would be possible to style the paging freely.

Thanks in advance!

wdh2100 commented 4 years ago

@netanel-haber

table paging Do you mean this?

image

Do you want to place this top or bottom the table body?

netanel-haber commented 4 years ago

I would like it to be optional to place it either on top, or on the bottom, or both

patorjk commented 4 years ago

The component you want is actually a material-ui component:

import TablePagination from "@material-ui/core/TablePagination"

You could plug that component into the table's toolbar, or create a custom toolbar which had that component (see: https://github.com/gregnb/mui-datatables#custom-components). The only tricky thing would be wiring up the callbacks to work correctly, though I think it would be do-able:

https://github.com/gregnb/mui-datatables/blob/master/src/components/TablePagination.js#L66