Fluentui: New Component: Pagination

[Supaibo]

Hi all,

I would like to implement react fabric pagination component but actually we haven't. Could you implement this control ?

It would be great if we could have this option directly on the list component or just the HTML tag with CSS class in order to integrate in our custom component.

Thank you

[quanglefed]

Hi all,

May I know the status of this feature? I really need to apply it to our project. Or can you suggest is there any control has pagination that we can apply?

Thank you

[andybandy89]

Hi,
I'd also like to know the status of this feature request? Are there plans for an implementation?

[koltyakov]

Any update on this?

[lebbar]

Hi,
Pagination is really essential, we need it for detailsList.
I think without pagination the component is really useless.
It would be great to work on it because we are waiting it since 2016...
TY
Regards

[OverkillTV]

Or At least integrate the pagination with DetailList !!

[reecreatepatrik]

I created a simple fabric style pagination control on top of react-ultimate-pagination if anyone needs a quick solution while this component gets implemented:
https://www.npmjs.com/package/office-ui-fabric-react-pagination

[betrue-final-final]

I'm trying to understand how Detailslist is useless without pagination? It incorporates virtualization. Pagination would be an extra layer on top of that. @dzearing, can you chime in?

[OverkillTV]

I think most of the time when the DetailsList is used it was meant to used with lot of items/rows so without a pagination it would not be user friendly.

[betrue-final-final]

But that's the point, it's virtualized so it should be responsive to scrolling. If the scenario is to add specific jump points between, instead of arbitrary pages, there are lots of ways to precisely slice and dice the data by meaningful metadata, such as sorting, filtering, and grouping. Pagination is forcing people to hunt and peck, not to mention it's so 1997.

[d0tkom]

It's virtualized, but you still have to provide all the data to it all at once. It could start being a problem when you have a lot of records.

[betrue-final-final]

Actually you can have "paging" behind the scenes on the server.

[d0tkom]

Yes but there is no straightforward way to do it atm. (Or I just don't know about it) The best way would be I think is to have an 'onMore' event that fires once the user gets to the bottom of the list, so we could load the next chunk.

[betrue-final-final]

@dzearing might have some ideas.

[stale[bot]]

This issue has been automatically marked as stale because it has not activity for 30 days. It will be closed if no further activity occurs within 14 days of this comment. Thank you for your contributions to Fabric React!
Why am I receiving this notification?

[dzearing]

This is how @d0tkom:

1. Implement a simple loader item which onRender of a give item, kicks off a network request in your data flow. (e.g. executes a redux action.)

2. Use a null placeholder + onRenderMissingItem and render the placeholder.

If you know your items have "more" (e.g. you have a paging token), leave a null placeholder and use onRenderMissingItem to render "loading" and kick off the next request in your datamodel.

1. Use a special item + onRenderRow.

If you encounter your special item (e.g. item.type === 'loading'), render your placeholder.

The solution is not super clear and especially the documentation needs improvement here, but it is indeed very possible as we do this in a number of products today.

Codepen example here which uses the paginated reddit api to render a subreddit:

https://codepen.io/dzearing/pen/EgqMZq

[dzearing]

Lots of up-votes, we'll add this component shortly.

[dzearing]

@betrue-final-final just for visibility; lots of upvotes for this component. :) Would be great to add soon, even in experiments.

[rohmanhm]

Hi @reecreatepatrik where's your public repo for https://www.npmjs.com/package/office-ui-fabric-react-pagination ?

[betrue-final-final]

I’ll be working on a design spec this month.

[betrue-final-final]

Here's the design spec: https://microsoft.sharepoint.com/:u:/t/odspux/Ef8XQfRMxMFHkL108TztUmkB0KuR51P8TqJ6UGcZoiycmg?e=CbDFXC

[caradong]

@dzearing @betrue-final-final As part of the M365Analytics project, I have implemented a pagination control for the project and I put together this checkin to add this component to the experiment packages. https://github.com/OfficeDev/office-ui-fabric-react/pull/6532 Please take a look and I would love to work with the fabric team to finish this control. I aslo have unit tests for this component and will create follow up checkins. The default styles captures the design provided by office designers and it also meet the accessibility requirement.

Our project also has a intergrated component combining this pagination and the details list as a common control. I would love to include that component as well into the experiment package in the near future.

[msft-github-bot]

:tada:This issue was addressed in #7100, which has now been successfully released as @uifabric/[email protected].:tada:

Handy Links:

• Release Notes
• Official NPM Release