From a73a531f40798dbb09866d8016aefd3c4a83c9bd Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 8 Mar 2022 08:12:19 -0800 Subject: [PATCH 01/12] Revert "Update EuiDataGrid pagination props to accept 'all'" This reverts commit c476dc8c0beb748b14c49d3501ec47bfd2046503. --- src/components/datagrid/data_grid.tsx | 26 ++++++++------- src/components/datagrid/data_grid_types.ts | 12 +++---- .../utils/data_grid_pagination.test.tsx | 33 ------------------- .../datagrid/utils/data_grid_pagination.tsx | 12 ++----- src/components/datagrid/utils/focus.ts | 7 ++-- .../datagrid/utils/grid_height_width.ts | 3 +- src/components/datagrid/utils/ref.ts | 2 +- src/components/datagrid/utils/row_count.ts | 12 +++---- 8 files changed, 32 insertions(+), 75 deletions(-) diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index 83b6ba54035..36ad9f3181d 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -344,20 +344,23 @@ export const EuiDataGrid = forwardRef( const interactiveCellId = useGeneratedHtmlId(); const ariaLabelledById = useGeneratedHtmlId(); - const ariaPage = pagination ? pagination.pageIndex + 1 : 1; - const ariaPageCount = - typeof pagination?.pageSize === 'number' - ? Math.ceil(rowCount / pagination.pageSize) - : 1; const ariaLabel = useEuiI18n( 'euiDataGrid.ariaLabel', '{label}; Page {page} of {pageCount}.', - { label: rest['aria-label'], page: ariaPage, pageCount: ariaPageCount } + { + label: rest['aria-label'], + page: pagination ? pagination.pageIndex + 1 : 0, + pageCount: pagination ? Math.ceil(rowCount / pagination.pageSize) : 0, + } ); + const ariaLabelledBy = useEuiI18n( 'euiDataGrid.ariaLabelledBy', 'Page {page} of {pageCount}.', - { page: ariaPage, pageCount: ariaPageCount } + { + page: pagination ? pagination.pageIndex + 1 : 0, + pageCount: pagination ? Math.ceil(rowCount / pagination.pageSize) : 0, + } ); // extract aria-label and/or aria-labelledby from `rest` @@ -410,10 +413,11 @@ export const EuiDataGrid = forwardRef( renderCellValue={renderCellValue} columns={columns} rowCount={ - inMemory.level === 'enhancements' && // if `inMemory.level === enhancements` then we can only be sure the pagination's pageSize is available in memory - typeof pagination?.pageSize === 'number' // If pageSize is set to 'all' instead of a number, then all rows are being displayed - ? pagination?.pageSize || rowCount - : rowCount // otherwise, all of the data is present and usable + inMemory.level === 'enhancements' + ? // if `inMemory.level === enhancements` then we can only be sure the pagination's pageSize is available in memory + pagination?.pageSize || rowCount + : // otherwise, all of the data is present and usable + rowCount } onCellRender={onCellRender} /> diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts index da8614e9998..cde84ee6250 100644 --- a/src/components/datagrid/data_grid_types.ts +++ b/src/components/datagrid/data_grid_types.ts @@ -771,20 +771,18 @@ export interface EuiDataGridPaginationProps { */ pageIndex: number; /** - * How many rows should initially be shown per page. - * Pass `'all'` to display the selected "Show all" option and hide the pagination. + * How many rows should initially be shown per page */ - pageSize: number | 'all'; + pageSize: number; /** * An array of page sizes the user can select from. - * Pass `'all'` as one of the options to create a "Show all" option. - * Leave this prop undefined or use an empty array to hide "Rows per page" select button. + * Leave this prop undefined or use an empty array to hide "Rows per page" select button */ - pageSizeOptions?: Array; + pageSizeOptions?: number[]; /** * A callback for when the user changes the page size selection */ - onChangeItemsPerPage: (itemsPerPage: number | 'all') => void; + onChangeItemsPerPage: (itemsPerPage: number) => void; /** * A callback for when the current page index changes */ diff --git a/src/components/datagrid/utils/data_grid_pagination.test.tsx b/src/components/datagrid/utils/data_grid_pagination.test.tsx index 6a312453dac..e76be9718b1 100644 --- a/src/components/datagrid/utils/data_grid_pagination.test.tsx +++ b/src/components/datagrid/utils/data_grid_pagination.test.tsx @@ -101,39 +101,6 @@ describe('EuiDataGridPaginationRenderer', () => { `); }); - it('handles the "all" page size option', () => { - const component = shallow( - - ); - expect(component).toMatchInlineSnapshot(` -
- -
- `); - }); - it('does not render if there are fewer rows than the smallest page size option', () => { const component = shallow( { - // Account for 'all' strings - if (typeof b !== 'number') return a; - if (typeof a !== 'number') return b; - // Find the smallest number - return Math.min(a, b); - }); + pageSizeOptions && [...pageSizeOptions].sort((a, b) => a - b)[0]; if (rowCount < (minSizeOption || pageSize)) { /** diff --git a/src/components/datagrid/utils/focus.ts b/src/components/datagrid/utils/focus.ts index 1bcfdc023d9..910e067a70a 100644 --- a/src/components/datagrid/utils/focus.ts +++ b/src/components/datagrid/utils/focus.ts @@ -215,9 +215,10 @@ export const createKeyDownHandler = ({ setFocusedCell([x + 1, y]); } } else if (key === keys.PAGE_DOWN) { - if (pagination && pagination.pageSize !== 'all') { + if (pagination) { event.preventDefault(); - const pageCount = Math.ceil(rowCount / pagination.pageSize); + const pageSize = pagination.pageSize; + const pageCount = Math.ceil(rowCount / pageSize); const pageIndex = pagination.pageIndex; if (pageIndex < pageCount - 1) { pagination.onChangePage(pageIndex + 1); @@ -225,7 +226,7 @@ export const createKeyDownHandler = ({ setFocusedCell([focusedCell[0], 0]); } } else if (key === keys.PAGE_UP) { - if (pagination && pagination.pageSize !== 'all') { + if (pagination) { event.preventDefault(); const pageIndex = pagination.pageIndex; if (pageIndex > 0) { diff --git a/src/components/datagrid/utils/grid_height_width.ts b/src/components/datagrid/utils/grid_height_width.ts index a1ede181602..02458020d3f 100644 --- a/src/components/datagrid/utils/grid_height_width.ts +++ b/src/components/datagrid/utils/grid_height_width.ts @@ -10,7 +10,6 @@ import { useEffect, useState, useContext, MutableRefObject } from 'react'; import { IS_JEST_ENVIRONMENT } from '../../../utils'; import { useUpdateEffect, useForceRender } from '../../../services'; import { useResizeObserver } from '../../observer/resize_observer'; -import { EuiTablePaginationProps } from '../../table/table_pagination'; import { EuiDataGridRowHeightsOptions } from '../data_grid_types'; import { RowHeightUtils } from './row_heights'; import { DataGridSortingContext } from './sorting'; @@ -163,7 +162,7 @@ export const useUnconstrainedHeight = ({ export const useVirtualizeContainerWidth = ( virtualizeContainer: HTMLDivElement | null, gridWidth: number, - pageSize: EuiTablePaginationProps['itemsPerPage'] + pageSize: number | undefined ) => { const [virtualizeContainerWidth, setVirtualizeContainerWidth] = useState(0); useResizeObserver(virtualizeContainer); diff --git a/src/components/datagrid/utils/ref.ts b/src/components/datagrid/utils/ref.ts index 34f3ee0ebfa..88aebb8eb8d 100644 --- a/src/components/datagrid/utils/ref.ts +++ b/src/components/datagrid/utils/ref.ts @@ -135,7 +135,7 @@ export const useSortPageCheck = ( : rowIndex; // Account for pagination - if (pagination && pagination.pageSize !== 'all') { + if (pagination) { const pageIndex = Math.floor(visibleRowIndex / pagination.pageSize); // If the targeted row is on a different page than the current page, // we should automatically navigate the user to the correct page diff --git a/src/components/datagrid/utils/row_count.ts b/src/components/datagrid/utils/row_count.ts index c32bc6062e2..81bf03050b2 100644 --- a/src/components/datagrid/utils/row_count.ts +++ b/src/components/datagrid/utils/row_count.ts @@ -15,15 +15,11 @@ export const computeVisibleRows = ({ pagination: EuiDataGridProps['pagination']; rowCount: EuiDataGridProps['rowCount']; }): EuiDataGridVisibleRows => { - const startRow = - pagination && pagination.pageSize !== 'all' - ? pagination.pageIndex * pagination.pageSize - : 0; + const startRow = pagination ? pagination.pageIndex * pagination.pageSize : 0; - let endRow = - pagination && pagination.pageSize !== 'all' - ? (pagination.pageIndex + 1) * pagination.pageSize - : rowCount; + let endRow = pagination + ? (pagination.pageIndex + 1) * pagination.pageSize + : rowCount; endRow = Math.min(endRow, rowCount); const visibleRowCount = endRow - startRow; From b26b454935c1c8e90cafdecb48a2bd184cf3489a Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 8 Mar 2022 08:15:33 -0800 Subject: [PATCH 02/12] Revert "Update EuiBasicTable and EuiInMemoryTable props to accept 'all'" This reverts commit 8efabe62257d135891c639b5efb8e24ab291a658. --- .../__snapshots__/basic_table.test.tsx.snap | 112 ------------ .../in_memory_table.test.tsx.snap | 172 ------------------ .../pagination_bar.test.tsx.snap | 23 --- .../basic_table/basic_table.test.tsx | 26 --- src/components/basic_table/basic_table.tsx | 53 +++--- .../basic_table/in_memory_table.test.tsx | 27 +-- .../basic_table/in_memory_table.tsx | 14 +- .../basic_table/pagination_bar.test.tsx | 18 -- src/components/basic_table/pagination_bar.tsx | 15 +- 9 files changed, 45 insertions(+), 415 deletions(-) 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 c0b432625a9..64d8243600d 100644 --- a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap @@ -2371,118 +2371,6 @@ 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 efd47f674c1..9a69a992f08 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 | 'all'; + size: number; }; /** * 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 | 'all'; + size: number; }; } @@ -459,7 +459,7 @@ export class EuiBasicTable extends Component< this.changeSelection([]); } - onPageSizeChange(size: number | 'all') { + onPageSizeChange(size: number) { this.clearSelection(); const currentCriteria = this.buildCriteria(this.props); const criteria: CriteriaWithPagination = { @@ -657,14 +657,6 @@ 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) { @@ -672,7 +664,13 @@ export class EuiBasicTable extends Component< ); } else { @@ -685,7 +683,14 @@ export class EuiBasicTable extends Component< ); } else { @@ -693,7 +698,13 @@ export class EuiBasicTable extends Component< ); } @@ -702,7 +713,9 @@ export class EuiBasicTable extends Component< ); } @@ -948,12 +961,10 @@ 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) && - typeof this.props.pagination.pageSize === 'number' - ? this.props.pagination.pageIndex * this.props.pagination.pageSize + - index - : index; + const tableItemIndex = hasPagination(this.props) + ? 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 70a8dc2641c..9e750d3483b 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, render } from 'enzyme'; +import { mount, shallow } from 'enzyme'; import { requiredProps } from '../../test'; import { EuiInMemoryTable, EuiInMemoryTableProps } from './in_memory_table'; @@ -224,31 +224,6 @@ 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 49ca5c4c498..7093033ebb4 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?: Array; + pageSizeOptions?: number[]; initialPageIndex?: number; - initialPageSize?: number | 'all'; + initialPageSize?: number; pageIndex?: number; - pageSize?: number | 'all'; + pageSize?: number; } type Pagination = boolean | PaginationOptions; @@ -114,8 +114,8 @@ interface State { search?: Search; query: Query | null; pageIndex: number; - pageSize?: number | 'all'; - pageSizeOptions?: Array; + pageSize?: number; + pageSizeOptions?: number[]; 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 | 'all'; + size: number; }; // don't apply pagination changes that are otherwise controlled @@ -583,7 +583,7 @@ export class EuiInMemoryTable extends Component< : matchingItems; const visibleItems = - typeof pageSize === 'number' && this.props.pagination + pageSize && 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 3e39ae01e49..f7bf54ee8ea 100644 --- a/src/components/basic_table/pagination_bar.test.tsx +++ b/src/components/basic_table/pagination_bar.test.tsx @@ -64,22 +64,4 @@ 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 5c4972e80da..81866ccbe7d 100644 --- a/src/components/basic_table/pagination_bar.tsx +++ b/src/components/basic_table/pagination_bar.tsx @@ -20,19 +20,17 @@ export interface Pagination { */ pageIndex: number; /** - * 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. + * The maximum number of items that can be shown in a single page */ - pageSize: number | 'all'; + pageSize: number; /** * The total number of items the page is "sliced" of */ totalItemCount: number; /** - * Configures the page size dropdown options. - * Pass `'all'` as one of the options to create a "Show all" option. + * Configures the page size dropdown options */ - pageSizeOptions?: Array; + pageSizeOptions?: number[]; /** * Hides the page size dropdown */ @@ -64,10 +62,7 @@ export const PaginationBar = ({ const pageSizeOptions = pagination.pageSizeOptions ? pagination.pageSizeOptions : defaults.pageSizeOptions; - const pageCount = - pagination.pageSize === 'all' - ? 1 - : Math.ceil(pagination.totalItemCount / pagination.pageSize); + const pageCount = Math.ceil(pagination.totalItemCount / pagination.pageSize); useEffect(() => { if (pageCount < pagination.pageIndex + 1) { From f35c79c53ea1778301276125f0b07d4f0aba1429 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 8 Mar 2022 08:16:39 -0800 Subject: [PATCH 03/12] Revert "Update documentation examples to use 'all'" This reverts commit 2a05385313a2e6e70efa9b11355e2e8ba959fa93. --- src-docs/src/views/datagrid/in_memory_pagination.js | 2 +- src-docs/src/views/pagination/paginated_table.js | 12 ++++++------ src-docs/src/views/tables/data_store.js | 2 +- .../in_memory/in_memory_controlled_pagination.js | 2 +- src-docs/src/views/tables/paginated/paginated.js | 4 ++-- 5 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src-docs/src/views/datagrid/in_memory_pagination.js b/src-docs/src/views/datagrid/in_memory_pagination.js index f901bcdd4fe..016d66863ea 100644 --- a/src-docs/src/views/datagrid/in_memory_pagination.js +++ b/src-docs/src/views/datagrid/in_memory_pagination.js @@ -117,7 +117,7 @@ export default () => { sorting={{ columns: sortingColumns, onSort }} pagination={{ ...pagination, - pageSizeOptions: [10, 50, 'all'], + pageSizeOptions: [10, 50, 100], onChangeItemsPerPage: onChangeItemsPerPage, onChangePage: onChangePage, }} diff --git a/src-docs/src/views/pagination/paginated_table.js b/src-docs/src/views/pagination/paginated_table.js index 408dc416603..8d0920071e7 100644 --- a/src-docs/src/views/pagination/paginated_table.js +++ b/src-docs/src/views/pagination/paginated_table.js @@ -56,12 +56,12 @@ export default () => { const totalItemCount = raw_data.length; const startIndex = pageIndex * pageSize; const pageOfItems = - pageSize === 'all' - ? raw_data - : raw_data.slice( + pageSize > 0 + ? raw_data.slice( startIndex, Math.min(startIndex + pageSize, totalItemCount) - ); + ) + : raw_data; const columns = [ { @@ -93,11 +93,11 @@ export default () => { pageIndex, pageSize, totalItemCount, - pageSizeOptions: [10, 'all'], + pageSizeOptions: [10, 0], }; const resultsCount = - pageSize === 'all' ? ( + pageSize === 0 ? ( All ) : ( <> diff --git a/src-docs/src/views/tables/data_store.js b/src-docs/src/views/tables/data_store.js index 43c4a3ba2b1..a9d1b73082a 100644 --- a/src-docs/src/views/tables/data_store.js +++ b/src-docs/src/views/tables/data_store.js @@ -112,7 +112,7 @@ export const createDataStore = () => { let pageOfItems; - if ((!pageIndex && !pageSize) || pageSize === 'all') { + if (!pageIndex && !pageSize) { pageOfItems = items; } else { const startIndex = pageIndex * pageSize; diff --git a/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination.js b/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination.js index 217516603d4..ddc7156d395 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination.js +++ b/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination.js @@ -115,7 +115,7 @@ export const Table = () => { columns={columns} pagination={{ ...pagination, - pageSizeOptions: [10, 20, 'all'], + pageSizeOptions: [10, 20, 0], }} sorting={sorting} /> diff --git a/src-docs/src/views/tables/paginated/paginated.js b/src-docs/src/views/tables/paginated/paginated.js index c514f791227..2b1e128bb71 100644 --- a/src-docs/src/views/tables/paginated/paginated.js +++ b/src-docs/src/views/tables/paginated/paginated.js @@ -134,12 +134,12 @@ export const Table = () => { pageIndex, pageSize, totalItemCount, - pageSizeOptions: [10, 'all'], + pageSizeOptions: [10, 0], showPerPageOptions, }; const resultsCount = - pageSize === 'all' ? ( + pageSize === 0 ? ( All ) : ( <> From cc07948fb9f2b1af879992a9835c48bc2b2c9332 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 8 Mar 2022 08:24:19 -0800 Subject: [PATCH 04/12] Revert "Update EuiTablePagination to accept number | 'all' instead of 0 for all" This reverts commit 6903978abfa8376f4830369d6018f9413eb2efa2. --- .../src/views/pagination/table_pagination.tsx | 10 ++++------ .../table_pagination/table_pagination.test.tsx | 4 ++-- .../table_pagination/table_pagination.tsx | 18 +++++++++--------- 3 files changed, 15 insertions(+), 17 deletions(-) diff --git a/src-docs/src/views/pagination/table_pagination.tsx b/src-docs/src/views/pagination/table_pagination.tsx index 4ae75bd63fb..dbcbe981c0b 100644 --- a/src-docs/src/views/pagination/table_pagination.tsx +++ b/src-docs/src/views/pagination/table_pagination.tsx @@ -5,14 +5,12 @@ import { EuiTablePagination } from '../../../../src'; export default () => { const totalEntries = 1250; const [activePage, setActivePage] = useState(0); - const [rowSize, setRowSize] = useState(50); + const [rowSize, setRowSize] = useState(50); const [pageCount, setPageCount] = useState(Math.ceil(totalEntries / 50)); const goToPage = (pageNumber: number) => setActivePage(pageNumber); - const changeItemsPerPage = (pageSize: number | 'all') => { - const pageCount = - pageSize === 'all' ? 1 : Math.ceil(totalEntries / pageSize); - setPageCount(pageCount); + const changeItemsPerPage = (pageSize: number) => { + setPageCount(Math.ceil(totalEntries / pageSize)); setRowSize(pageSize); setActivePage(0); }; @@ -25,7 +23,7 @@ export default () => { onChangePage={goToPage} itemsPerPage={rowSize} onChangeItemsPerPage={changeItemsPerPage} - itemsPerPageOptions={[10, 20, 'all']} + itemsPerPageOptions={[10, 20, 0]} /> ); }; diff --git a/src/components/table/table_pagination/table_pagination.test.tsx b/src/components/table/table_pagination/table_pagination.test.tsx index 3326f98d8c5..26e5821960f 100644 --- a/src/components/table/table_pagination/table_pagination.test.tsx +++ b/src/components/table/table_pagination/table_pagination.test.tsx @@ -43,8 +43,8 @@ describe('EuiTablePagination', () => { ); diff --git a/src/components/table/table_pagination/table_pagination.tsx b/src/components/table/table_pagination/table_pagination.tsx index c14398dbba7..f1d7aefdd9d 100644 --- a/src/components/table/table_pagination/table_pagination.tsx +++ b/src/components/table/table_pagination/table_pagination.tsx @@ -21,7 +21,7 @@ import { EuiPopover } from '../../popover'; import { EuiI18n } from '../../i18n'; export type PageChangeHandler = EuiPaginationProps['onPageClick']; -export type ItemsPerPageChangeHandler = (pageSize: number | 'all') => void; +export type ItemsPerPageChangeHandler = (pageSize: number) => void; export interface EuiTablePaginationProps extends Omit { @@ -31,14 +31,14 @@ export interface EuiTablePaginationProps showPerPageOptions?: boolean; /** * Current selection for "Rows per page". - * Pass `'all'` to display the selected "Show all" option and hide the pagination. + * Pass `0` as to display the selected "Show all" option and hide the pagination. */ - itemsPerPage?: number | 'all'; + itemsPerPage?: number; /** * Custom array of options for "Rows per page". - * Pass `'all'` as one of the options to create a "Show all" option. + * Pass `0` as one of option to create a "Show all" option. */ - itemsPerPageOptions?: Array; + itemsPerPageOptions?: number[]; /** * Click handler that passes back selected `pageSize` number */ @@ -80,9 +80,9 @@ export const EuiTablePagination: FunctionComponent = ({ data-test-subj="tablePaginationPopoverButton" onClick={togglePopover} > - {itemsPerPage === 'all' ? ( + {itemsPerPage === 0 ? ( ) : ( @@ -109,7 +109,7 @@ export const EuiTablePagination: FunctionComponent = ({ }} data-test-subj={`tablePagination-${itemsPerPageOption}-rows`} > - {itemsPerPageOption === 'all' ? ( + {itemsPerPageOption === 0 ? ( = ({ - {itemsPerPage !== 'all' && ( + {itemsPerPage > 0 && ( Date: Tue, 8 Mar 2022 08:34:37 -0800 Subject: [PATCH 05/12] Add changelog entry --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 72ce5c755ec..a9b38924f97 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,10 @@ - Fixed non-searchable `EuiSelectable`s not selecting items with the Enter & Space keys ([#5693](https://github.com/elastic/eui/pull/5693)) +**Breaking changes** + +- Removed the `'all'` option in `EuiTablePagination.itemsPerPage` and `itemsPerPageOptions` in `EuiBasicTable` and `EuiDataGrid` due to Typescript issues. Use `0` instead to represent a "Show all" option ([#5699](https://github.com/elastic/eui/issues/5699)) + ## [`50.0.0`](https://github.com/elastic/eui/tree/v50.0.0) - Updated `EuiComboBox` to WAI-ARIA 1.2 pattern and improved keyboard navigation ([#5636](https://github.com/elastic/eui/pull/5636)) From beb69cb752afa59d90dbf224524ab41803051b76 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 8 Mar 2022 08:39:50 -0800 Subject: [PATCH 06/12] Re-add removed tests/snapshots --- .../__snapshots__/basic_table.test.tsx.snap | 112 ++++++++ .../in_memory_table.test.tsx.snap | 244 ++++++++++++++++++ .../pagination_bar.test.tsx.snap | 23 ++ .../basic_table/basic_table.test.tsx | 26 ++ .../basic_table/in_memory_table.test.tsx | 27 +- .../basic_table/pagination_bar.test.tsx | 18 ++ .../utils/data_grid_pagination.test.tsx | 33 +++ 7 files changed, 482 insertions(+), 1 deletion(-) 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..611bd6365b4 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 + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+`; + 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: 0, + pageSizeOptions: [1, 5, 0], + 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/in_memory_table.test.tsx b/src/components/basic_table/in_memory_table.test.tsx index 9e750d3483b..0830df32c7a 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: 0, + pageSizeOptions: [1, 2, 3, 0], + }, + }; + 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/pagination_bar.test.tsx b/src/components/basic_table/pagination_bar.test.tsx index f7bf54ee8ea..5d64fcea1f7 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: 0, + pageSizeOptions: [1, 5, 0], + totalItemCount: 5, + }, + onPageSizeChange: () => {}, + onPageChange: () => {}, + }; + + const component = shallow(); + + expect(component).toMatchSnapshot(); + }); }); diff --git a/src/components/datagrid/utils/data_grid_pagination.test.tsx b/src/components/datagrid/utils/data_grid_pagination.test.tsx index e76be9718b1..e84c6ca7349 100644 --- a/src/components/datagrid/utils/data_grid_pagination.test.tsx +++ b/src/components/datagrid/utils/data_grid_pagination.test.tsx @@ -101,6 +101,39 @@ describe('EuiDataGridPaginationRenderer', () => { `); }); + it('handles the "show all" page size option', () => { + const component = shallow( + + ); + expect(component).toMatchInlineSnapshot(` +
+ +
+ `); + }); + it('does not render if there are fewer rows than the smallest page size option', () => { const component = shallow( Date: Tue, 8 Mar 2022 08:57:37 -0800 Subject: [PATCH 07/12] Re-add datagrid pagination checks --- src/components/datagrid/utils/focus.ts | 4 ++-- src/components/datagrid/utils/ref.ts | 2 +- src/components/datagrid/utils/row_count.ts | 12 ++++++++---- 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/components/datagrid/utils/focus.ts b/src/components/datagrid/utils/focus.ts index 910e067a70a..06c3145e343 100644 --- a/src/components/datagrid/utils/focus.ts +++ b/src/components/datagrid/utils/focus.ts @@ -215,7 +215,7 @@ export const createKeyDownHandler = ({ setFocusedCell([x + 1, y]); } } else if (key === keys.PAGE_DOWN) { - if (pagination) { + if (pagination && pagination.pageSize > 0) { event.preventDefault(); const pageSize = pagination.pageSize; const pageCount = Math.ceil(rowCount / pageSize); @@ -226,7 +226,7 @@ export const createKeyDownHandler = ({ setFocusedCell([focusedCell[0], 0]); } } else if (key === keys.PAGE_UP) { - if (pagination) { + if (pagination && pagination.pageSize > 0) { event.preventDefault(); const pageIndex = pagination.pageIndex; if (pageIndex > 0) { diff --git a/src/components/datagrid/utils/ref.ts b/src/components/datagrid/utils/ref.ts index 88aebb8eb8d..5c4d6a0085e 100644 --- a/src/components/datagrid/utils/ref.ts +++ b/src/components/datagrid/utils/ref.ts @@ -135,7 +135,7 @@ export const useSortPageCheck = ( : rowIndex; // Account for pagination - if (pagination) { + if (pagination && pagination.pageSize > 0) { const pageIndex = Math.floor(visibleRowIndex / pagination.pageSize); // If the targeted row is on a different page than the current page, // we should automatically navigate the user to the correct page diff --git a/src/components/datagrid/utils/row_count.ts b/src/components/datagrid/utils/row_count.ts index 81bf03050b2..7db5ea90834 100644 --- a/src/components/datagrid/utils/row_count.ts +++ b/src/components/datagrid/utils/row_count.ts @@ -15,11 +15,15 @@ export const computeVisibleRows = ({ pagination: EuiDataGridProps['pagination']; rowCount: EuiDataGridProps['rowCount']; }): EuiDataGridVisibleRows => { - const startRow = pagination ? pagination.pageIndex * pagination.pageSize : 0; + const startRow = + pagination && pagination.pageSize > 0 + ? pagination.pageIndex * pagination.pageSize + : 0; - let endRow = pagination - ? (pagination.pageIndex + 1) * pagination.pageSize - : rowCount; + let endRow = + pagination && pagination.pageSize > 0 + ? (pagination.pageIndex + 1) * pagination.pageSize + : rowCount; endRow = Math.min(endRow, rowCount); const visibleRowCount = endRow - startRow; From 03fdeee20293806b3eaed1a7b642de8285baa7f7 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 8 Mar 2022 08:57:58 -0800 Subject: [PATCH 08/12] Re-add prop documentation changes --- src/components/basic_table/pagination_bar.tsx | 6 ++++-- src/components/datagrid/data_grid_types.ts | 6 ++++-- src/components/table/table_pagination/table_pagination.tsx | 4 ++-- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/basic_table/pagination_bar.tsx b/src/components/basic_table/pagination_bar.tsx index 81866ccbe7d..03414ff05da 100644 --- a/src/components/basic_table/pagination_bar.tsx +++ b/src/components/basic_table/pagination_bar.tsx @@ -20,7 +20,8 @@ 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 `0` to display the selected "Show all" option and hide the pagination. */ pageSize: number; /** @@ -28,7 +29,8 @@ export interface Pagination { */ totalItemCount: number; /** - * Configures the page size dropdown options + * Configures the page size dropdown options. + * Pass `0` as one of the options to create a "Show all" option. */ pageSizeOptions?: number[]; /** diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts index cde84ee6250..fc09d3e50d3 100644 --- a/src/components/datagrid/data_grid_types.ts +++ b/src/components/datagrid/data_grid_types.ts @@ -771,12 +771,14 @@ export interface EuiDataGridPaginationProps { */ pageIndex: number; /** - * How many rows should initially be shown per page + * How many rows should initially be shown per page. + * Pass `0` to display the selected "Show all" option and hide the pagination. */ pageSize: number; /** * An array of page sizes the user can select from. - * Leave this prop undefined or use an empty array to hide "Rows per page" select button + * Pass `0` as one of the options to create a "Show all" option. + * Leave this prop undefined or use an empty array to hide "Rows per page" select button. */ pageSizeOptions?: number[]; /** diff --git a/src/components/table/table_pagination/table_pagination.tsx b/src/components/table/table_pagination/table_pagination.tsx index f1d7aefdd9d..1da0490bc11 100644 --- a/src/components/table/table_pagination/table_pagination.tsx +++ b/src/components/table/table_pagination/table_pagination.tsx @@ -31,12 +31,12 @@ export interface EuiTablePaginationProps showPerPageOptions?: boolean; /** * Current selection for "Rows per page". - * Pass `0` as to display the selected "Show all" option and hide the pagination. + * Pass `0` to display the selected "Show all" option and hide the pagination. */ itemsPerPage?: number; /** * Custom array of options for "Rows per page". - * Pass `0` as one of option to create a "Show all" option. + * Pass `0` as one of the options to create a "Show all" option. */ itemsPerPageOptions?: number[]; /** From c35aa4078ef24434e7d63a5b395d087554547e38 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 8 Mar 2022 09:11:57 -0800 Subject: [PATCH 09/12] Restore pageSize checks that would otherwise result in Infinity --- .../__snapshots__/basic_table.test.tsx.snap | 2 +- .../pagination_bar.test.tsx.snap | 2 +- src/components/basic_table/basic_table.tsx | 45 +++++++------------ src/components/basic_table/pagination_bar.tsx | 4 +- src/components/datagrid/data_grid.tsx | 16 +++---- .../datagrid/utils/data_grid_pagination.tsx | 2 +- 6 files changed, 28 insertions(+), 43 deletions(-) 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 611bd6365b4..c0b432625a9 100644 --- a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap @@ -2409,7 +2409,7 @@ exports[`EuiBasicTable with pagination - show all 1`] = ` Object { "itemCount": 2, "page": 1, - "pageCount": Infinity, + "pageCount": 1, "totalItemCount": 2, } } diff --git a/src/components/basic_table/__snapshots__/pagination_bar.test.tsx.snap b/src/components/basic_table/__snapshots__/pagination_bar.test.tsx.snap index 6b877e671b2..6163b2665d5 100644 --- a/src/components/basic_table/__snapshots__/pagination_bar.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/pagination_bar.test.tsx.snap @@ -65,7 +65,7 @@ exports[`PaginationBar render - show all pageSize 1`] = ` } onChangeItemsPerPage={[Function]} onChangePage={[Function]} - pageCount={Infinity} + pageCount={1} />
`; diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx index 9a69a992f08..bf3061ae5d7 100644 --- a/src/components/basic_table/basic_table.tsx +++ b/src/components/basic_table/basic_table.tsx @@ -657,6 +657,13 @@ 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 = pagination?.pageSize + ? Math.ceil(pagination.totalItemCount / pagination.pageSize) + : 1; + let captionElement; if (tableCaption) { if (pagination) { @@ -664,13 +671,7 @@ export class EuiBasicTable extends Component< ); } else { @@ -683,14 +684,7 @@ export class EuiBasicTable extends Component< ); } else { @@ -698,13 +692,7 @@ export class EuiBasicTable extends Component< ); } @@ -713,9 +701,7 @@ export class EuiBasicTable extends Component< ); } @@ -961,10 +947,11 @@ 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) && this.props.pagination.pageSize > 0 + ? this.props.pagination.pageIndex * this.props.pagination.pageSize + + index + : index; return this.renderItemRow(item, tableItemIndex); }); return {rows}; diff --git a/src/components/basic_table/pagination_bar.tsx b/src/components/basic_table/pagination_bar.tsx index 03414ff05da..377eafe595b 100644 --- a/src/components/basic_table/pagination_bar.tsx +++ b/src/components/basic_table/pagination_bar.tsx @@ -64,7 +64,9 @@ export const PaginationBar = ({ const pageSizeOptions = pagination.pageSizeOptions ? pagination.pageSizeOptions : defaults.pageSizeOptions; - const pageCount = Math.ceil(pagination.totalItemCount / pagination.pageSize); + const pageCount = pagination.pageSize + ? Math.ceil(pagination.totalItemCount / pagination.pageSize) + : 1; useEffect(() => { if (pageCount < pagination.pageIndex + 1) { diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index 36ad9f3181d..bdc4ac6e9a0 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -344,23 +344,19 @@ export const EuiDataGrid = forwardRef( const interactiveCellId = useGeneratedHtmlId(); const ariaLabelledById = useGeneratedHtmlId(); + const ariaPage = pagination ? pagination.pageIndex + 1 : 1; + const ariaPageCount = pagination?.pageSize + ? Math.ceil(rowCount / pagination.pageSize) + : 1; const ariaLabel = useEuiI18n( 'euiDataGrid.ariaLabel', '{label}; Page {page} of {pageCount}.', - { - label: rest['aria-label'], - page: pagination ? pagination.pageIndex + 1 : 0, - pageCount: pagination ? Math.ceil(rowCount / pagination.pageSize) : 0, - } + { label: rest['aria-label'], page: ariaPage, pageCount: ariaPageCount } ); - const ariaLabelledBy = useEuiI18n( 'euiDataGrid.ariaLabelledBy', 'Page {page} of {pageCount}.', - { - page: pagination ? pagination.pageIndex + 1 : 0, - pageCount: pagination ? Math.ceil(rowCount / pagination.pageSize) : 0, - } + { page: ariaPage, pageCount: ariaPageCount } ); // extract aria-label and/or aria-labelledby from `rest` diff --git a/src/components/datagrid/utils/data_grid_pagination.tsx b/src/components/datagrid/utils/data_grid_pagination.tsx index 9c597b20a48..dea8dd5424e 100644 --- a/src/components/datagrid/utils/data_grid_pagination.tsx +++ b/src/components/datagrid/utils/data_grid_pagination.tsx @@ -42,7 +42,7 @@ export const EuiDataGridPaginationRenderer = ({ [setFocusedCell, _onChangePage] ); - const pageCount = Math.ceil(rowCount / pageSize); + const pageCount = pageSize ? Math.ceil(rowCount / pageSize) : 1; const minSizeOption = pageSizeOptions && [...pageSizeOptions].sort((a, b) => a - b)[0]; From 6a0f56a962b5ed0406d1af9c57a2e07b322be275 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 8 Mar 2022 09:13:26 -0800 Subject: [PATCH 10/12] Revert token revert --- src/components/table/table_pagination/table_pagination.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/table/table_pagination/table_pagination.tsx b/src/components/table/table_pagination/table_pagination.tsx index 1da0490bc11..3c94efc0cce 100644 --- a/src/components/table/table_pagination/table_pagination.tsx +++ b/src/components/table/table_pagination/table_pagination.tsx @@ -82,7 +82,7 @@ export const EuiTablePagination: FunctionComponent = ({ > {itemsPerPage === 0 ? ( ) : ( From b3807db006172370eaed555322286fd0f42d1fea Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 8 Mar 2022 09:33:13 -0800 Subject: [PATCH 11/12] Update docs (thanks Caroline for the catch) --- src-docs/src/views/pagination/pagination_example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/pagination/pagination_example.js b/src-docs/src/views/pagination/pagination_example.js index 69d0cedd296..4ab5753b754 100644 --- a/src-docs/src/views/pagination/pagination_example.js +++ b/src-docs/src/views/pagination/pagination_example.js @@ -238,7 +238,7 @@ export const PaginationExample = { tables - . If you pass {"'all'"} in as one of the{' '} + . If you pass 0 in as one of the{' '} itemsPerPageOptions, it will create a "Show all" option and hide the pagination.

From b8bcfbb84f4254699a2e6ed6c56af79832216172 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 8 Mar 2022 09:48:18 -0800 Subject: [PATCH 12/12] [EuiInMemoryTable] Account for pageSizes of 0 0 is falsey and thus is failing a bunch of checks/fallthroughs, switching to `??` and `!=` null generally solves the problem --- .../in_memory_table.test.tsx.snap | 164 +++++------------- .../basic_table/in_memory_table.tsx | 8 +- 2 files changed, 50 insertions(+), 122 deletions(-) diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap index ec904516e9b..9e6781fe72e 100644 --- a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap @@ -1783,6 +1783,50 @@ exports[`EuiInMemoryTable with pagination and "show all" page size 1`] = `
+ + +
+ Name +
+
+ + name2 + +
+ + + + +
+ Name +
+
+ + name3 + +
+ +
@@ -1818,7 +1862,7 @@ exports[`EuiInMemoryTable with pagination and "show all" page size 1`] = ` - Rows per page: 1 + Showing all rows @@ -1827,123 +1871,7 @@ exports[`EuiInMemoryTable with pagination and "show all" page size 1`] = `
- -
+ />
diff --git a/src/components/basic_table/in_memory_table.tsx b/src/components/basic_table/in_memory_table.tsx index 7093033ebb4..a0da84671f8 100644 --- a/src/components/basic_table/in_memory_table.tsx +++ b/src/components/basic_table/in_memory_table.tsx @@ -161,15 +161,15 @@ const getInitialPagination = (pagination: Pagination | undefined) => { const initialPageIndex = pagination === true ? 0 - : pagination.pageIndex || pagination.initialPageIndex || 0; + : pagination.pageIndex ?? pagination.initialPageIndex ?? 0; const initialPageSize = pagination === true ? defaultPageSize - : pagination.pageSize || pagination.initialPageSize || defaultPageSize; + : pagination.pageSize ?? pagination.initialPageSize ?? defaultPageSize; if ( showPerPageOptions && - initialPageSize && + initialPageSize != null && (!pageSizeOptions || !pageSizeOptions.includes(initialPageSize)) ) { throw new Error( @@ -640,7 +640,7 @@ export class EuiInMemoryTable extends Component< ? undefined : { pageIndex, - pageSize: pageSize || 1, + pageSize: pageSize ?? 1, pageSizeOptions, totalItemCount, showPerPageOptions,