Adds ability to hide per page options when enabling table pagination #1130
Conversation
|
Note: this addresses a todo item from elastic/kibana#21300 |
|
retest this please |
| @@ -104,4 +109,5 @@ EuiTablePagination.propTypes = { | |||
| EuiTablePagination.defaultProps = { | |||
| itemsPerPage: 50, | |||
| itemsPerPageOptions: [10, 20, 50, 100], | |||
| disablePerPageOptions: false | |||
There was a problem hiding this comment.
I think this prop should be renamed to hidePerPageOptions as the word "disable" seems to imply that it will still exist but just be grayed out and non-interactive.
Also, please add it to the EuiTablePagination.propTypes object as well.
| onChange={this.onTableChange} | ||
| /> | ||
| <EuiSpacer size="xl" /> | ||
| <EuiSwitch |
There was a problem hiding this comment.
Move this switch to before the table to coincide with the other examples.
| @@ -83,7 +83,7 @@ export const Table = () => { | |||
| <EuiInMemoryTable | |||
| items={store.users} | |||
| columns={columns} | |||
| pagination={true} | |||
| pagination={{ disablePerPageOptions: true }} | |||
There was a problem hiding this comment.
Let's keep the pagination option in this example. But, again, good to know it works with custom tables.
| <EuiSpacer size="xl" /> | ||
|
|
||
| <EuiSwitch | ||
| label={<span>Hide per page options with <EuiCode>pagination.disablePerPageOptions = true</EuiCode></span>} |
There was a problem hiding this comment.
Since you already have this toggle to show the functionality in the pagination example, we don't need it again in the custom table. (Good to know it works with this type of table)
There was a problem hiding this comment.
This was the one place I think it'd be good to have something in addition to the toggle in the basic table's pagination example, just to make sure it's clear that you can pass this option to the basic table or to the EuiTablePagination component used on its own.
I removed the switch toggle and added EuiTablePagination to the list of props for this custom table and I think that satisfies it, but let me know what you think.
|
Thanks for doing this @jasonrhodes ! |
On the APM team we are hoping to be able to hide the "per page" select box in table pagination, while still leaving the right-aligned page navigation buttons. (The default would be to show those options, which leaves everything working as-is.)
In master:
vs in this PR:
This PR addresses a few things:
paginationobject, calleddisablePerPageOptionsEuiTablePaginationcomponent accepts this property and, when true, rendersnullin the left-alignedEuiFlexItemwhere that select box usually shows up, which keeps the rest of the layout in placeEuiBasicTablealso accepts this same property on itspaginationobject, and passes it alongEuiInMemoryTableaccepts the same property on itspaginationobject, and also passes it along (with some extra work since that object gets transformed a bit on the way in)Would be happy to jump on a zoom to discuss, talk through some other options, change property names or improve on the docs, etc. Thanks!