[EuiBasicTable][EuiInMemoryTable][EuiDataGrid] Revert page size number | 'all' type to just number

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))

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,
       }}

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 ? (
       <strong>All</strong>
     ) : (
       <>

src-docs/src/views/pagination/pagination_example.js

@@ -238,7 +238,7 @@ export const PaginationExample = {
           <Link to="/tabular-content/tables#adding-pagination-to-a-table">
             tables
           </Link>
-          . If you pass <EuiCode>{"'all'"}</EuiCode> in as one of the{' '}
+          . If you pass <EuiCode>0</EuiCode> in as one of the{' '}
           <EuiCode>itemsPerPageOptions</EuiCode>, it will create a &quot;Show
           all&quot; option and hide the pagination.
         </p>

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<number | 'all'>(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]}
     />
   );
 };

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;

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}
     />

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 ? (
       <strong>All</strong>
     ) : (
       <>

src/components/basic_table/__snapshots__/pagination_bar.test.tsx.snap

@@ -55,12 +55,12 @@ exports[`PaginationBar render - show all pageSize 1`] = `
   <EuiTablePagination
     activePage={0}
     aria-label="aria-label"
-    itemsPerPage="all"
+    itemsPerPage={0}
     itemsPerPageOptions={
       Array [
         1,
         5,
-        "all",
+        0,
       ]
     }
     onChangeItemsPerPage={[Function]}

src/components/basic_table/basic_table.test.tsx

@@ -319,8 +319,8 @@ describe('EuiBasicTable', () => {
       ],
       pagination: {
         pageIndex: 0,
-        pageSize: 'all',
-        pageSizeOptions: [1, 5, 'all'],
+        pageSize: 0,
+        pageSizeOptions: [1, 5, 0],
         totalItemCount: 2,
       },
       onChange: () => {},

src/components/basic_table/basic_table.tsx

@@ -165,7 +165,7 @@ export interface Criteria<T> {
    */
   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<T> extends Criteria<T> {
    */
   page: {
     index: number;
-    size: number | 'all';
+    size: number;
   };
 }
 
@@ -459,7 +459,7 @@ export class EuiBasicTable<T = any> extends Component<
     this.changeSelection([]);
   }
 
-  onPageSizeChange(size: number | 'all') {
+  onPageSizeChange(size: number) {
     this.clearSelection();
     const currentCriteria = this.buildCriteria(this.props);
     const criteria: CriteriaWithPagination<T> = {
@@ -660,10 +660,9 @@ export class EuiBasicTable<T = any> extends Component<
     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;
+    const pageCount = pagination?.pageSize
+      ? Math.ceil(pagination.totalItemCount / pagination.pageSize)
+      : 1;
 
     let captionElement;
     if (tableCaption) {
@@ -949,8 +948,7 @@ export class EuiBasicTable<T = any> 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'
+        hasPagination(this.props) && this.props.pagination.pageSize > 0
           ? this.props.pagination.pageIndex * this.props.pagination.pageSize +
             index
           : index;

src/components/basic_table/in_memory_table.test.tsx

@@ -240,8 +240,8 @@ describe('EuiInMemoryTable', () => {
         },
       ],
       pagination: {
-        initialPageSize: 'all',
-        pageSizeOptions: [1, 2, 3, 'all'],
+        initialPageSize: 0,
+        pageSizeOptions: [1, 2, 3, 0],
       },
     };
     const component = render(<EuiInMemoryTable {...props} />);

src/components/basic_table/in_memory_table.tsx

@@ -48,11 +48,11 @@ function isEuiSearchBarProps<T>(
 export type Search = boolean | EuiSearchBarProps;
 
 interface PaginationOptions extends EuiTablePaginationProps {
-  pageSizeOptions?: Array<number | 'all'>;
+  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<T> {
   search?: Search;
   query: Query | null;
   pageIndex: number;
-  pageSize?: number | 'all';
-  pageSizeOptions?: Array<number | 'all'>;
+  pageSize?: number;
+  pageSizeOptions?: number[];
   sortName: ReactNode;
   sortDirection?: Direction;
   allowNeutralSort: boolean;
@@ -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(
@@ -389,7 +389,7 @@ export class EuiInMemoryTable<T> extends Component<
   onTableChange = ({ page, sort }: Criteria<T>) => {
     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<T> extends Component<
       : matchingItems;
 
     const visibleItems =
-      typeof pageSize === 'number' && this.props.pagination
+      pageSize && this.props.pagination
         ? (() => {
             const startIndex = pageIndex * pageSize;
             return sortedItems.slice(
@@ -640,7 +640,7 @@ export class EuiInMemoryTable<T> extends Component<
       ? undefined
       : {
           pageIndex,
-          pageSize: pageSize || 1,
+          pageSize: pageSize ?? 1,
           pageSizeOptions,
           totalItemCount,
           showPerPageOptions,

src/components/basic_table/pagination_bar.test.tsx

@@ -70,8 +70,8 @@ describe('PaginationBar', () => {
       ...requiredProps,
       pagination: {
         pageIndex: 0,
-        pageSize: 'all' as const,
-        pageSizeOptions: [1, 5, 'all' as const],
+        pageSize: 0,
+        pageSizeOptions: [1, 5, 0],
         totalItemCount: 5,
       },
       onPageSizeChange: () => {},

src/components/basic_table/pagination_bar.tsx

@@ -21,18 +21,18 @@ 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.
+   * Pass `0` to display the selected "Show all" option and hide the pagination.
    */
-  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.
+   * Pass `0` as one of the options to create a "Show all" option.
    */
-  pageSizeOptions?: Array<number | 'all'>;
+  pageSizeOptions?: number[];
   /**
    * Hides the page size dropdown
    */
@@ -64,10 +64,9 @@ 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 = pagination.pageSize
+    ? Math.ceil(pagination.totalItemCount / pagination.pageSize)
+    : 1;
 
   useEffect(() => {
     if (pageCount < pagination.pageIndex + 1) {

src/components/datagrid/data_grid.tsx

@@ -345,10 +345,9 @@ export const EuiDataGrid = forwardRef<EuiDataGridRefProps, EuiDataGridProps>(
     const ariaLabelledById = useGeneratedHtmlId();
 
     const ariaPage = pagination ? pagination.pageIndex + 1 : 1;
-    const ariaPageCount =
-      typeof pagination?.pageSize === 'number'
-        ? Math.ceil(rowCount / pagination.pageSize)
-        : 1;
+    const ariaPageCount = pagination?.pageSize
+      ? Math.ceil(rowCount / pagination.pageSize)
+      : 1;
     const ariaLabel = useEuiI18n(
       'euiDataGrid.ariaLabel',
       '{label}; Page {page} of {pageCount}.',
@@ -410,10 +409,11 @@ export const EuiDataGrid = forwardRef<EuiDataGridRefProps, EuiDataGridProps>(
                     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}
                   />

src/components/datagrid/data_grid_types.ts

@@ -772,19 +772,19 @@ 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.
+   * Pass `0` to display the selected "Show all" option and hide the pagination.
    */
-  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.
+   * 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?: Array<number | 'all'>;
+  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
    */