diff --git a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap index 64d8243600d..c0b432625a9 100644 --- a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap @@ -2371,6 +2371,118 @@ exports[`EuiBasicTable with pagination - 2nd page 1`] = ` `; +exports[`EuiBasicTable with pagination - show all 1`] = ` +
+
+ + + + + + + + + + + + + + + + + Name + + + + + + name1 + + + + + name2 + + + + +
+ + + +
+`; + exports[`EuiBasicTable with pagination 1`] = `
`; +exports[`EuiInMemoryTable with pagination and "show all" page size 1`] = ` +
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + +
+
+ + + Name + + + description + + +
+
+ Name +
+
+ + name1 + +
+
+
+ Name +
+
+ + name2 + +
+
+
+ Name +
+
+ + name3 + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+`; + exports[`EuiInMemoryTable with pagination and default page size and index 1`] = ` `; +exports[`PaginationBar render - show all pageSize 1`] = ` +
+ + +
+`; + exports[`PaginationBar render 1`] = `
{ expect(component).toMatchSnapshot(); }); + test('with pagination - show all', () => { + const props: EuiBasicTableProps = { + items: [ + { id: '1', name: 'name1' }, + { id: '2', name: 'name2' }, + ], + columns: [ + { + field: 'name', + name: 'Name', + description: 'description', + }, + ], + pagination: { + pageIndex: 0, + pageSize: 'all', + pageSizeOptions: [1, 5, 'all'], + totalItemCount: 2, + }, + onChange: () => {}, + }; + const component = shallow(); + + expect(component).toMatchSnapshot(); + }); + test('with pagination and error', () => { const props: EuiBasicTableProps = { items: [ diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx index 9a69a992f08..efd47f674c1 100644 --- a/src/components/basic_table/basic_table.tsx +++ b/src/components/basic_table/basic_table.tsx @@ -165,7 +165,7 @@ export interface Criteria { */ page?: { index: number; - size: number; + size: number | 'all'; }; /** * If the shown items are sorted, this describes the sort criteria @@ -182,7 +182,7 @@ export interface CriteriaWithPagination extends Criteria { */ page: { index: number; - size: number; + size: number | 'all'; }; } @@ -459,7 +459,7 @@ export class EuiBasicTable extends Component< this.changeSelection([]); } - onPageSizeChange(size: number) { + onPageSizeChange(size: number | 'all') { this.clearSelection(); const currentCriteria = this.buildCriteria(this.props); const criteria: CriteriaWithPagination = { @@ -657,6 +657,14 @@ export class EuiBasicTable extends Component< renderTableCaption() { const { items, pagination, tableCaption } = this.props; + const itemCount = items.length; + const totalItemCount = pagination ? pagination.totalItemCount : itemCount; + const page = pagination ? pagination.pageIndex + 1 : 1; + const pageCount = + typeof pagination?.pageSize === 'number' + ? Math.ceil(pagination.totalItemCount / pagination.pageSize) + : 1; + let captionElement; if (tableCaption) { if (pagination) { @@ -664,13 +672,7 @@ export class EuiBasicTable extends Component< ); } else { @@ -683,14 +685,7 @@ export class EuiBasicTable extends Component< ); } else { @@ -698,13 +693,7 @@ export class EuiBasicTable extends Component< ); } @@ -713,9 +702,7 @@ export class EuiBasicTable extends Component< ); } @@ -961,10 +948,12 @@ export class EuiBasicTable extends Component< const rows = items.map((item: T, index: number) => { // if there's pagination the item's index must be adjusted to the where it is in the whole dataset - const tableItemIndex = hasPagination(this.props) - ? this.props.pagination.pageIndex * this.props.pagination.pageSize + - index - : index; + const tableItemIndex = + hasPagination(this.props) && + typeof this.props.pagination.pageSize === 'number' + ? this.props.pagination.pageIndex * this.props.pagination.pageSize + + index + : index; return this.renderItemRow(item, tableItemIndex); }); return {rows}; diff --git a/src/components/basic_table/in_memory_table.test.tsx b/src/components/basic_table/in_memory_table.test.tsx index 9e750d3483b..70a8dc2641c 100644 --- a/src/components/basic_table/in_memory_table.test.tsx +++ b/src/components/basic_table/in_memory_table.test.tsx @@ -7,7 +7,7 @@ */ import React from 'react'; -import { mount, shallow } from 'enzyme'; +import { mount, shallow, render } from 'enzyme'; import { requiredProps } from '../../test'; import { EuiInMemoryTable, EuiInMemoryTableProps } from './in_memory_table'; @@ -224,6 +224,31 @@ describe('EuiInMemoryTable', () => { expect(component).toMatchSnapshot(); }); + test('with pagination and "show all" page size', () => { + const props: EuiInMemoryTableProps = { + ...requiredProps, + items: [ + { id: '1', name: 'name1' }, + { id: '2', name: 'name2' }, + { id: '3', name: 'name3' }, + ], + columns: [ + { + field: 'name', + name: 'Name', + description: 'description', + }, + ], + pagination: { + initialPageSize: 'all', + pageSizeOptions: [1, 2, 3, 'all'], + }, + }; + const component = render(); + + expect(component).toMatchSnapshot(); + }); + test('with pagination, default page size and error', () => { const props: EuiInMemoryTableProps = { ...requiredProps, diff --git a/src/components/basic_table/in_memory_table.tsx b/src/components/basic_table/in_memory_table.tsx index 7093033ebb4..49ca5c4c498 100644 --- a/src/components/basic_table/in_memory_table.tsx +++ b/src/components/basic_table/in_memory_table.tsx @@ -48,11 +48,11 @@ function isEuiSearchBarProps( export type Search = boolean | EuiSearchBarProps; interface PaginationOptions extends EuiTablePaginationProps { - pageSizeOptions?: number[]; + pageSizeOptions?: Array; initialPageIndex?: number; - initialPageSize?: number; + initialPageSize?: number | 'all'; pageIndex?: number; - pageSize?: number; + pageSize?: number | 'all'; } type Pagination = boolean | PaginationOptions; @@ -114,8 +114,8 @@ interface State { search?: Search; query: Query | null; pageIndex: number; - pageSize?: number; - pageSizeOptions?: number[]; + pageSize?: number | 'all'; + pageSizeOptions?: Array; sortName: ReactNode; sortDirection?: Direction; allowNeutralSort: boolean; @@ -389,7 +389,7 @@ export class EuiInMemoryTable extends Component< onTableChange = ({ page, sort }: Criteria) => { let { index: pageIndex, size: pageSize } = (page || {}) as { index: number; - size: number; + size: number | 'all'; }; // don't apply pagination changes that are otherwise controlled @@ -583,7 +583,7 @@ export class EuiInMemoryTable extends Component< : matchingItems; const visibleItems = - pageSize && this.props.pagination + typeof pageSize === 'number' && this.props.pagination ? (() => { const startIndex = pageIndex * pageSize; return sortedItems.slice( diff --git a/src/components/basic_table/pagination_bar.test.tsx b/src/components/basic_table/pagination_bar.test.tsx index f7bf54ee8ea..3e39ae01e49 100644 --- a/src/components/basic_table/pagination_bar.test.tsx +++ b/src/components/basic_table/pagination_bar.test.tsx @@ -64,4 +64,22 @@ describe('PaginationBar', () => { expect(component).toMatchSnapshot(); }); + + test('render - show all pageSize', () => { + const props = { + ...requiredProps, + pagination: { + pageIndex: 0, + pageSize: 'all' as const, + pageSizeOptions: [1, 5, 'all' as const], + totalItemCount: 5, + }, + onPageSizeChange: () => {}, + onPageChange: () => {}, + }; + + const component = shallow(); + + expect(component).toMatchSnapshot(); + }); }); diff --git a/src/components/basic_table/pagination_bar.tsx b/src/components/basic_table/pagination_bar.tsx index 2f88696c451..ea75aba19cf 100644 --- a/src/components/basic_table/pagination_bar.tsx +++ b/src/components/basic_table/pagination_bar.tsx @@ -20,17 +20,19 @@ export interface Pagination { */ pageIndex: number; /** - * The maximum number of items that can be shown in a single page + * The maximum number of items that can be shown in a single page. + * Pass `'all'` to display the selected "Show all" option and hide the pagination. */ - pageSize: number; + pageSize: number | 'all'; /** * The total number of items the page is "sliced" of */ totalItemCount: number; /** - * Configures the page size dropdown options + * Configures the page size dropdown options. + * Pass `'all'` as one of the options to create a "Show all" option. */ - pageSizeOptions?: number[]; + pageSizeOptions?: Array; /** * Hides the page size dropdown */ @@ -62,7 +64,10 @@ export const PaginationBar = ({ const pageSizeOptions = pagination.pageSizeOptions ? pagination.pageSizeOptions : defaults.pageSizeOptions; - const pageCount = Math.ceil(pagination.totalItemCount / pagination.pageSize); + const pageCount = + pagination.pageSize === 'all' + ? 1 + : Math.ceil(pagination.totalItemCount / pagination.pageSize); useEffect(() => { if (pageCount < pagination.pageIndex + 1) {