diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8e24a320130..a825a4cb7b0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -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)
diff --git a/src-docs/src/views/tables/in_memory/in_memory_selection.js b/src-docs/src/views/tables/in_memory/in_memory_selection.js
index 8b99e4d39e7..99f86d66a27 100644
--- a/src-docs/src/views/tables/in_memory/in_memory_selection.js
+++ b/src-docs/src/views/tables/in_memory/in_memory_selection.js
@@ -146,6 +146,7 @@ export class Table extends Component {
}];
const pagination = {
+ initialPageSize: 5,
pageSizeOptions: [3, 5, 8]
};
diff --git a/src-docs/src/views/tables/in_memory/props_info.js b/src-docs/src/views/tables/in_memory/props_info.js
index eaf6deb6223..53d6d5ae9dd 100644
--- a/src-docs/src/views/tables/in_memory/props_info.js
+++ b/src-docs/src/views/tables/in_memory/props_info.js
@@ -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
}
}
diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
index 78583b3511d..80045d39c36 100644
--- a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
+++ b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
@@ -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`] = `
@@ -223,6 +230,43 @@ exports[`EuiInMemoryTable with pagination and selection 1`] = `
/>
`;
+exports[`EuiInMemoryTable with pagination, default page size and error 1`] = `
+
+`;
+
exports[`EuiInMemoryTable with pagination, selection and sorting 1`] = `
{
};
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,
}
};
};
@@ -133,7 +155,9 @@ export class EuiInMemoryTable extends React.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
diff --git a/src/components/basic_table/in_memory_table.test.js b/src/components/basic_table/in_memory_table.test.js
index afefd77fc34..a11d50cc33b 100644
--- a/src/components/basic_table/in_memory_table.test.js
+++ b/src/components/basic_table/in_memory_table.test.js
@@ -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(
+
+ );
+
+ expect(component).toMatchSnapshot();
+ });
+
+ test('with pagination, default page size and error', () => {
const props = {
...requiredProps,
@@ -161,6 +189,7 @@ describe('EuiInMemoryTable', () => {
}
],
pagination: {
+ initialPageSize: 4,
pageSizeOptions: [2, 4, 6]
}
};