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`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- name1
-
-
-
-
-
-
-
-
-
- name2
-
-
-
-
-
-
-
-
-
- name3
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Showing all rows
-
-
-
-
-
-
-
-
-
-
-`;
-
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`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ name1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Rows per page: 1
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
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`] = `
+
+
+
+
+
+ name2
+
+
+
+
+
+
+
+
+
+ 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,