Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds ability to hide per page options when enabling table pagination #1130

Merged
merged 4 commits into from
Aug 22, 2018
Merged

Adds ability to hide per page options when enabling table pagination #1130

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
51ae567
Adds ability to hide per page options when enabling pagination
jasonrhodes Aug 21, 2018
3a1ba6a
Adds tests for new disable per page options
jasonrhodes Aug 21, 2018
ca9fb24
Renames disablePerPageOptions to hidePerPageOptions
jasonrhodes Aug 22, 2018
143aafe
Updates table documentation based on review feedback
jasonrhodes Aug 22, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions src-docs/src/views/tables/basic/props_info.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export const propsInfo = {
},
onChange: {
description: 'Called whenever pagination or sorting changes (this property is required when either' +
'pagination or sorting is configured',
'pagination or sorting is configured',
required: false,
type: { name: '(criteria: #Criteria) => void' }
}
Expand Down Expand Up @@ -71,6 +71,12 @@ export const propsInfo = {
required: false,
defaultValue: { value: '[5, 10, 20]' },
type: { name: 'number[]' }
},
disablePerPageOptions: {
description: 'Hides the page size dropdown',
required: false,
defaultValue: { value: 'false' },
type: { name: 'bool' }
}
}
}
Expand Down Expand Up @@ -105,7 +111,7 @@ export const propsInfo = {
},
selectableMessage: {
description: 'A callback that is called per item to retrieve a message for its selectable state.' +
'We display these messages as a tooltip on an unselectable checkbox',
'We display these messages as a tooltip on an unselectable checkbox',
required: false,
type: { name: '(selectable, item) => string' }
}
Expand Down Expand Up @@ -312,7 +318,7 @@ export const propsInfo = {
props: {
render: {
description: 'The function that renders the action. Note that the returned node is ' +
'expected to have`onFocus` and `onBlur` functions',
'expected to have`onFocus` and `onBlur` functions',
required: true,
type: { name: '(item, enabled) => PropTypes.node' }
},
Expand Down
15 changes: 14 additions & 1 deletion src-docs/src/views/tables/custom/custom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
EuiButton,
EuiButtonIcon,
EuiCheckbox,
EuiCode,
EuiContextMenuItem,
EuiContextMenuPanel,
EuiFieldSearch,
Expand All @@ -17,6 +18,7 @@ import {
EuiLink,
EuiPopover,
EuiSpacer,
EuiSwitch,
EuiTable,
EuiTableBody,
EuiTableHeader,
Expand Down Expand Up @@ -45,7 +47,8 @@ export default class extends Component {
itemIdToSelectedMap: {},
itemIdToOpenActionsPopoverMap: {},
sortedColumn: 'title',
itemsPerPage: 20,
itemsPerPage: 10,
showPerPageOptions: true
};

this.items = [{
Expand Down Expand Up @@ -546,6 +549,8 @@ export default class extends Component {
return rows;
}

togglePerPageOptions = () => this.setState((state) => ({ showPerPageOptions: !state.showPerPageOptions }));

render() {
let optionalActionButtons;

Expand Down Expand Up @@ -595,9 +600,17 @@ export default class extends Component {
itemsPerPage={this.state.itemsPerPage}
itemsPerPageOptions={[5, 10, 20]}
pageCount={this.pager.getTotalPages()}
disablePerPageOptions={!this.state.showPerPageOptions}
onChangeItemsPerPage={this.onChangeItemsPerPage}
onChangePage={this.onChangePage}
/>

<EuiSpacer size="xl" />

<EuiSwitch
label={<span>Hide per page options with <EuiCode>pagination.disablePerPageOptions = true</EuiCode></span>}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

onChange={this.togglePerPageOptions}
/>
</div>
);
}
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/tables/in_memory/in_memory.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ export const Table = () => {
<EuiInMemoryTable
items={store.users}
columns={columns}
pagination={true}
pagination={{ disablePerPageOptions: true }}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's keep the pagination option in this example. But, again, good to know it works with custom tables.

sorting={sorting}
/>
);
Expand Down
35 changes: 25 additions & 10 deletions src-docs/src/views/tables/paginated/paginated.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,13 @@ import { createDataStore } from '../data_store';

import {
EuiBasicTable,
EuiCode,
EuiLink,
EuiHealth,
EuiFlexGroup,
EuiFlexItem,
EuiSpacer,
EuiSwitch
} from '../../../../../src/components';

/*
Expand Down Expand Up @@ -43,6 +46,7 @@ export class Table extends Component {
this.state = {
pageIndex: 0,
pageSize: 5,
showPerPageOptions: true
};
}

Expand All @@ -64,10 +68,13 @@ export class Table extends Component {
return <EuiHealth color={color}>{label}</EuiHealth>;
}

togglePerPageOptions = () => this.setState((state) => ({ showPerPageOptions: !state.showPerPageOptions }));

render() {
const {
pageIndex,
pageSize,
showPerPageOptions
} = this.state;

const {
Expand Down Expand Up @@ -125,19 +132,27 @@ export class Table extends Component {
}];

const pagination = {
pageIndex: pageIndex,
pageSize: pageSize,
totalItemCount: totalItemCount,
pageSizeOptions: [3, 5, 8]
pageIndex,
pageSize,
totalItemCount,
pageSizeOptions: [3, 5, 8],
disablePerPageOptions: !showPerPageOptions
};

return (
<EuiBasicTable
items={pageOfItems}
columns={columns}
pagination={pagination}
onChange={this.onTableChange}
/>
<div>
<EuiBasicTable
items={pageOfItems}
columns={columns}
pagination={pagination}
onChange={this.onTableChange}
/>
<EuiSpacer size="xl" />
<EuiSwitch
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Move this switch to before the table to coincide with the other examples.

label={<span>Hide per page options with <EuiCode>pagination.disablePerPageOptions = true</EuiCode></span>}
onChange={this.togglePerPageOptions}
/>
</div>
);
}
}
86 changes: 86 additions & 0 deletions src/components/basic_table/__snapshots__/basic_table.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -882,6 +882,92 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
</div>
`;

exports[`EuiBasicTable with pagination, hiding the per page options 1`] = `
<div
className="euiBasicTable"
>
<div>
<EuiTableHeaderMobile />
<EuiTable
responsive={true}
>
<EuiTableHeader>
<EuiTableHeaderCell
align="left"
data-test-subj="tableHeaderCell_name_0"
key="_data_h_name_0"
scope="col"
>
Name
</EuiTableHeaderCell>
</EuiTableHeader>
<EuiTableBody>
<React.Fragment
key="row_0"
>
<EuiTableRow
isSelected={false}
>
<EuiTableRowCell
align="left"
header="Name"
key="_data_column_name_0_0"
textOnly={true}
>
name1
</EuiTableRowCell>
</EuiTableRow>
</React.Fragment>
<React.Fragment
key="row_1"
>
<EuiTableRow
isSelected={false}
>
<EuiTableRowCell
align="left"
header="Name"
key="_data_column_name_1_0"
textOnly={true}
>
name2
</EuiTableRowCell>
</EuiTableRow>
</React.Fragment>
<React.Fragment
key="row_2"
>
<EuiTableRow
isSelected={false}
>
<EuiTableRowCell
align="left"
header="Name"
key="_data_column_name_2_0"
textOnly={true}
>
name3
</EuiTableRowCell>
</EuiTableRow>
</React.Fragment>
</EuiTableBody>
</EuiTable>
</div>
<PaginationBar
onPageChange={[Function]}
onPageSizeChange={[Function]}
pagination={
Object {
"disablePerPageOptions": true,
"pageIndex": 0,
"pageSize": 3,
"totalItemCount": 5,
}
}
/>
</div>
`;

exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
<div
className="euiBasicTable"
Expand Down
Loading