Placement of showing x to x of x entries - tables

[rubinahaddad]

From HE: wet-boew/wet-boew-styleguide#12

On default could we display “Showing x to x of x entries” at the top of the table instead of the bottom. This helps the user see how many entries they have the option of going through, and it helps them decide if they want to refine.

[pjackson28]

@rubinahaddad Where would it go? We already have the show entries in the upper left and the filter items in the upper right. It will get quite crowded and busy to cram another thing up there. Also is it a good idea to put the showing x to x at the top while the next/previous are at the bottom? Shouldn't they be together?

[rubinahaddad]

I saw the pattern of the table pagination to work very similar to that of the search results pattern, and in that pattern it’s at the top and not the bottom for similar reasons.

[pjackson28]

So is the suggestion to have all four elements at the top stacked in two rows? How is that supposed to look? Could that get to busy with so many elements in advance of the table?

[rubinahaddad]

[rubinahaddad]

@pjackson28 Above is what i was thinking... so on smaller views the filter will wrap.

[pjackson28]

It is possible to change the order of the markup using the following initialization parameter sDom: "<'top'ilf>rt<'bottom'p><'clear'>", (taken from: http://datatables.net/examples/basic_init/dom.html).

As for the pagination, @thomasgohard was looking into whether it was a good idea to have the same pagination widget used for tables and pages.

[rubinahaddad]

@pjackson28 Ideally when the "Show X entries" and filter section do not fit on one line it will align-left instead of right

[pjackson28]

Fix is in PR #5360

[pjackson28]

Fix has been merged in.

[rubinahaddad]

@pjackson28 Thanks! Could you plz remove the font-weight on the "Show entries", and "Filter items" to keep it balanced because the "Showing" as no weight?

[pjackson28]

@rubinahaddad All form field labels are bolded in every other case so wouldn't it be better to bold showing instead? Also looks a little odd for them to not be bolded but the table header cells right below are bolded.

[rubinahaddad]

@pjackson28 I recommend not bolding the show and filter labels because they are all secondary to the table headings. The table headings should stand out because the data is what the user is after. If you bold all the labels above the table you take away the focus on the headings and the data.

[pjackson28]

@rubinahaddad Okay, we can always change it back if it doesn't work out. Fixed in PR #5383.