Add controlled pagination props to EuiInMemoryTable (#4038)

* Adds pageSize and pageIndex controlled pagination fields to EuiInMemoryTable's pagination

* Update src-docs/src/views/tables/in_memory/in_memory_controlled_pagination_section.js

Co-authored-by: Greg Thompson <[email protected]>

* changelog

Co-authored-by: Greg Thompson <[email protected]>

CHANGELOG.md

@@ -10,6 +10,7 @@
 - Added `popoverButton` and `popoverButtonBreakpoints` props to `EuiSelectableTemplateSitewide` for responsive capabilities ([#4008](https://github.com/elastic/eui/pull/4008))
 - Added `isWithinMaxBreakpoint` service ([#4008](https://github.com/elastic/eui/pull/4008))
 - Added horizontal line separator to `EuiContextMenu` ([#4018](https://github.com/elastic/eui/pull/4018))
+- Added controlled pagination props to `EuiInMemoryTablee` ([#4038](https://github.com/elastic/eui/pull/4038))
 
 **Bug fixes**
 

src-docs/src/views/tables/in_memory/in_memory_controlled_pagination.js

@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from 'react';
+import { formatDate } from '../../../../../src/services/format';
+import { createDataStore } from '../data_store';
+import {
+  EuiInMemoryTable,
+  EuiLink,
+  EuiHealth,
+} from '../../../../../src/components';
+
+/*
+Example user object:
+
+{
+  id: '1',
+  firstName: 'john',
+  lastName: 'doe',
+  github: 'johndoe',
+  dateOfBirth: Date.now(),
+  nationality: 'NL',
+  online: true
+}
+
+Example country object:
+
+{
+  code: 'NL',
+  name: 'Netherlands',
+  flag: '🇳🇱'
+}
+*/
+
+const store = createDataStore();
+
+export const Table = () => {
+  const columns = [
+    {
+      field: 'firstName',
+      name: 'First Name',
+      sortable: true,
+      truncateText: true,
+    },
+    {
+      field: 'lastName',
+      name: 'Last Name',
+      truncateText: true,
+    },
+    {
+      field: 'github',
+      name: 'Github',
+      render: username => (
+        <EuiLink href={`https://github.com/${username}`} target="_blank">
+          {username}
+        </EuiLink>
+      ),
+    },
+    {
+      field: 'dateOfBirth',
+      name: 'Date of Birth',
+      dataType: 'date',
+      render: date => formatDate(date, 'dobLong'),
+      sortable: true,
+    },
+    {
+      field: 'nationality',
+      name: 'Nationality',
+      render: countryCode => {
+        const country = store.getCountry(countryCode);
+        return `${country.flag} ${country.name}`;
+      },
+    },
+    {
+      field: 'online',
+      name: 'Online',
+      dataType: 'boolean',
+      render: online => {
+        const color = online ? 'success' : 'danger';
+        const label = online ? 'Online' : 'Offline';
+        return <EuiHealth color={color}>{label}</EuiHealth>;
+      },
+      sortable: true,
+    },
+  ];
+
+  const sorting = {
+    sort: {
+      field: 'dateOfBirth',
+      direction: 'desc',
+    },
+  };
+
+  const [users, setUsers] = useState(store.users);
+
+  useEffect(() => {
+    const updateInterval = setInterval(() => {
+      setUsers(users =>
+        // randomly toggle some of the online statuses
+        users.map(({ online, ...user }) => ({
+          ...user,
+          online: Math.random() > 0.7 ? !online : online,
+        }))
+      );
+    }, 1000);
+    return () => clearInterval(updateInterval);
+  }, []);
+
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
+
+  return (
+    <EuiInMemoryTable
+      onTableChange={({ page: { index } }) =>
+        setPagination({ pageIndex: index })
+      }
+      items={users}
+      columns={columns}
+      pagination={pagination}
+      sorting={sorting}
+    />
+  );
+};

src-docs/src/views/tables/in_memory/in_memory_controlled_pagination_section.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { EuiCode } from '../../../../../src/components';
+import { GuideSectionTypes } from '../../../components';
+import { renderToHtml } from '../../../services';
+
+import { Table } from './in_memory_controlled_pagination';
+import { propsInfo } from './props_info';
+
+const source = require('!!raw-loader!./in_memory_controlled_pagination');
+const html = renderToHtml(Table);
+
+export const controlledPaginationSection = {
+  title: 'In-memory table with controlled pagination',
+  source: [
+    {
+      type: GuideSectionTypes.JS,
+      code: source,
+    },
+    {
+      type: GuideSectionTypes.HTML,
+      code: html,
+    },
+  ],
+  text: (
+    <div>
+      <p>
+        By default <EuiCode>EuiInMemoryTable</EuiCode> resets its page index
+        when receiving a new <EuiCode>EuiInMemoryTable</EuiCode> array. To avoid
+        this behavior the pagination object optionally takes a
+        <EuiCode>pageIndex</EuiCode> value to control this yourself.
+        Additionally, <EuiCode>pageSize</EuiCode> can also be controlled the
+        same way. Both of these are provided to your app during the
+        <EuiCode>onTableChange</EuiCode> callback.
+      </p>
+      <p>
+        The example below updates the array of users every second, randomly
+        toggling their online status. Pagination state is maintained by the app,
+        preventing it from being reset by the updates.
+      </p>
+    </div>
+  ),
+  props: propsInfo,
+  demo: <Table />,
+};

src-docs/src/views/tables/in_memory/index.js

@@ -4,3 +4,4 @@ export { searchSection } from './in_memory_search_section';
 export { searchExternalSection } from './in_memory_search_external_section';
 export { searchCallbackSection } from './in_memory_search_callback_section';
 export { customSortingSection } from './in_memory_custom_sorting_section';
+export { controlledPaginationSection } from './in_memory_controlled_pagination_section';

src-docs/src/views/tables/in_memory/props_info.js

@@ -85,6 +85,18 @@ export const propsInfo = {
           required: false,
           type: { name: 'number' },
         },
+        pageIndex: {
+          description:
+            "When present, controls the table's pagination index. You must listen to the onTableChange callback to respond to user actions. Ignores any initialPageIndex value",
+          required: false,
+          type: { name: 'number' },
+        },
+        pageSize: {
+          description:
+            "When present, controls the table's page size. You must listen to the onTableChange callback to respond to user actions. Ignores any initialPageSize value",
+          required: false,
+          type: { name: 'number' },
+        },
         pageSizeOptions:
           basicPropsInfo.Pagination.__docgenInfo.props.pageSizeOptions,
         hidePerPageOptions:

src-docs/src/views/tables/tables_in_memory_example.js

@@ -5,6 +5,7 @@ import {
   searchExternalSection as inMemorySearchExternalSection,
   searchCallbackSection as inMemorySearchCallbackSection,
   customSortingSection as inMemoryCustomSortingSection,
+  controlledPaginationSection as inMemoryControlledPaginationSection,
 } from './in_memory';
 
 export const TableInMemoryExample = {
@@ -16,5 +17,6 @@ export const TableInMemoryExample = {
     inMemorySearchCallbackSection,
     inMemorySearchExternalSection,
     inMemoryCustomSortingSection,
+    inMemoryControlledPaginationSection,
   ],
 };