Skip to content

Commit

Permalink
Add ability to specify default page size for EuiInMemoryTable (#477)
Browse files Browse the repository at this point in the history
* Add ability to specify default page size for EuiInMemoryTable
  • Loading branch information
jen-huang authored Mar 8, 2018
1 parent 4377f22 commit b3dd10b
Show file tree
Hide file tree
Showing 6 changed files with 113 additions and 9 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# [`master`](https://github.com/elastic/eui/tree/master)

- Added `search.onChange` callback to `EuiInMemoryTable` ([#469](https://github.com/elastic/eui/pull/469))
- Added `initialPageSize` option to `EuiInMemoryTable` ([#477](https://github.com/elastic/eui/pull/477))

# [`0.0.24`](https://github.com/elastic/eui/tree/v0.0.24)

Expand Down
1 change: 1 addition & 0 deletions src-docs/src/views/tables/in_memory/in_memory_selection.js
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,7 @@ export class Table extends Component {
}];

const pagination = {
initialPageSize: 5,
pageSizeOptions: [3, 5, 8]
};

Expand Down
5 changes: 5 additions & 0 deletions src-docs/src/views/tables/in_memory/props_info.js
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,11 @@ export const propsInfo = {
__docgenInfo: {
_euiObjectType: 'type',
props: {
initialPageSize: {
description: 'Configures the default page size to show, must be one of "pageSizeOptions"',
required: false,
type: { name: 'number' }
},
pageSizeOptions: basicPropsInfo.Pagination.__docgenInfo.props.pageSizeOptions
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ exports[`EuiInMemoryTable with pagination 1`] = `
/>
`;

exports[`EuiInMemoryTable with pagination and error 1`] = `
exports[`EuiInMemoryTable with pagination and default page size 1`] = `
<EuiBasicTable
columns={
Array [
Expand All @@ -152,27 +152,34 @@ exports[`EuiInMemoryTable with pagination and error 1`] = `
},
]
}
error="ouch!"
items={
Array [
Object {
"id": "1",
"name": "name1",
},
Object {
"id": "2",
"name": "name2",
},
Object {
"id": "3",
"name": "name3",
},
]
}
noItemsMessage="No items found"
onChange={[Function]}
pagination={
Object {
"pageIndex": 0,
"pageSize": 2,
"pageSize": 4,
"pageSizeOptions": Array [
2,
4,
6,
],
"totalItemCount": 1,
"totalItemCount": 3,
}
}
/>
Expand Down Expand Up @@ -223,6 +230,43 @@ exports[`EuiInMemoryTable with pagination and selection 1`] = `
/>
`;

exports[`EuiInMemoryTable with pagination, default page size and error 1`] = `
<EuiBasicTable
columns={
Array [
Object {
"description": "description",
"field": "name",
"name": "Name",
},
]
}
error="ouch!"
items={
Array [
Object {
"id": "1",
"name": "name1",
},
]
}
noItemsMessage="No items found"
onChange={[Function]}
pagination={
Object {
"pageIndex": 0,
"pageSize": 4,
"pageSizeOptions": Array [
2,
4,
6,
],
"totalItemCount": 1,
}
}
/>
`;

exports[`EuiInMemoryTable with pagination, selection and sorting 1`] = `
<EuiBasicTable
columns={
Expand Down
32 changes: 28 additions & 4 deletions src/components/basic_table/in_memory_table.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@ const InMemoryTablePropTypes = {
PropTypes.bool,
PropTypes.shape({
pageSizeOptions: PropTypes.arrayOf(PropTypes.number)
}),
PropTypes.shape({
initialPageSize: PropTypes.number,
pageSizeOptions: PropTypes.arrayOf(PropTypes.number)
})
]),
sorting: PropTypes.bool,
Expand All @@ -50,11 +54,29 @@ const initialQuery = (props) => {
};

const initialCriteria = (props) => {
const { pagination } = props;
if (!props.pagination) {
return {
page: undefined,
};
}

const {
pagination: {
pageSizeOptions,
initialPageSize,
}
} = props;

if (initialPageSize && (!pageSizeOptions || !pageSizeOptions.includes(initialPageSize))) {
throw new Error(`EuiInMemoryTable received initialPageSize ${initialPageSize}, which wasn't provided within pageSizeOptions.`);
}

const defaultPageSize = pageSizeOptions ? pageSizeOptions[0] : paginationBarDefaults.pageSizeOptions[0];

return {
page: !pagination ? undefined : {
page: {
index: 0,
size: pagination.pageSizeOptions ? pagination.pageSizeOptions[0] : paginationBarDefaults.pageSizeOptions[0]
size: initialPageSize || defaultPageSize,
}
};
};
Expand Down Expand Up @@ -132,7 +154,9 @@ export class EuiInMemoryTable extends Component {
pageIndex: criteria.page.index,
pageSize: criteria.page.size,
totalItemCount: totalCount,
...(isBoolean(this.props.pagination) ? {} : this.props.pagination)
...(isBoolean(this.props.pagination) ? {} : {
pageSizeOptions: this.props.pagination.pageSizeOptions
})
};
const sorting = !this.props.sorting ? undefined : {
sort: criteria.sort
Expand Down
31 changes: 30 additions & 1 deletion src/components/basic_table/in_memory_table.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,35 @@ describe('EuiInMemoryTable', () => {
expect(component).toMatchSnapshot();
});

test('with pagination and error', () => {
test('with pagination and default page size', () => {

const props = {
...requiredProps,
items: [
{ id: '1', name: 'name1' },
{ id: '2', name: 'name2' },
{ id: '3', name: 'name3' }
],
columns: [
{
field: 'name',
name: 'Name',
description: 'description'
}
],
pagination: {
initialPageSize: 4,
pageSizeOptions: [2, 4, 6]
}
};
const component = shallow(
<EuiInMemoryTable {...props} />
);

expect(component).toMatchSnapshot();
});

test('with pagination, default page size and error', () => {

const props = {
...requiredProps,
Expand All @@ -161,6 +189,7 @@ describe('EuiInMemoryTable', () => {
}
],
pagination: {
initialPageSize: 4,
pageSizeOptions: [2, 4, 6]
}
};
Expand Down

0 comments on commit b3dd10b

Please sign in to comment.