Add onTableChange callback function to EuiInMemoryTable

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `onTableChange` callback to `EuiInMemoryTable` which notifies on sorting and pagination changes. ([#1060](https://github.com/elastic/eui/pull/1060))
 - `EuiComboBox` now applies the provided `data-test-subj` to its options list element with the suffix `-optionsList` so you can find a specific combo box instance's options list. This wasn't previously possible because the options list is attached to the body element, not the combo box element. This is in addition to the existing `data-test-subj="comboBoxOptionsList"`. ([#1054](https://github.com/elastic/eui/pull/1054))
 
 **Bug fixes**

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

@@ -49,6 +49,13 @@ export const propsInfo = {
           type: { name: 'boolean | #Search' }
         },
         selection: basicPropsInfo.EuiBasicTable.__docgenInfo.props.selection,
+        onTableChange: {
+          description: `Callback for when table pagination or sorting is changed. This is meant to
+          be informational only, and not used to set any state as the in-memory table already
+          manages this state.`,
+          required: false,
+          type: { name: 'function' }
+        },
       }
     }
   },

src/components/basic_table/__snapshots__/basic_table.test.js.snap

@@ -12,6 +12,7 @@ exports[`EuiBasicTable cellProps renders cells with custom props from a callback
       <EuiTableHeader>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           key="_data_h_name_0"
           scope="col"
         >
@@ -94,6 +95,7 @@ exports[`EuiBasicTable cellProps renders rows with custom props from an object 1
       <EuiTableHeader>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           key="_data_h_name_0"
           scope="col"
         >
@@ -178,6 +180,7 @@ exports[`EuiBasicTable empty is rendered 1`] = `
       <EuiTableHeader>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           key="_data_h_name_0"
           scope="col"
         >
@@ -213,6 +216,7 @@ exports[`EuiBasicTable empty renders a node as a custom message 1`] = `
       <EuiTableHeader>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           key="_data_h_name_0"
           scope="col"
         >
@@ -256,6 +260,7 @@ exports[`EuiBasicTable empty renders a string as a custom message 1`] = `
       <EuiTableHeader>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           key="_data_h_name_0"
           scope="col"
         >
@@ -291,6 +296,7 @@ exports[`EuiBasicTable itemIdToExpandedRowMap renders an expanded row 1`] = `
       <EuiTableHeader>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           key="_data_h_name_0"
           scope="col"
         >
@@ -379,6 +385,7 @@ exports[`EuiBasicTable rowProps renders rows with custom props from a callback 1
       <EuiTableHeader>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           key="_data_h_name_0"
           scope="col"
         >
@@ -461,6 +468,7 @@ exports[`EuiBasicTable rowProps renders rows with custom props from an object 1`
       <EuiTableHeader>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           key="_data_h_name_0"
           scope="col"
         >
@@ -543,6 +551,7 @@ exports[`EuiBasicTable with pagination - 2nd page 1`] = `
       <EuiTableHeader>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           key="_data_h_name_0"
           scope="col"
         >
@@ -611,6 +620,7 @@ exports[`EuiBasicTable with pagination 1`] = `
       <EuiTableHeader>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           key="_data_h_name_0"
           scope="col"
         >
@@ -695,6 +705,7 @@ exports[`EuiBasicTable with pagination and error 1`] = `
       <EuiTableHeader>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           key="_data_h_name_0"
           scope="col"
         >
@@ -752,6 +763,7 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
         </EuiTableHeaderCellCheckbox>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           key="_data_h_name_0"
           scope="col"
         >
@@ -908,6 +920,7 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
         </EuiTableHeaderCellCheckbox>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           isSortAscending={true}
           isSorted={true}
           key="_data_h_name_0"
@@ -1067,6 +1080,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
         </EuiTableHeaderCellCheckbox>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           isSortAscending={true}
           isSorted={true}
           key="_data_h_name_0"
@@ -1317,6 +1331,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
         </EuiTableHeaderCellCheckbox>
         <EuiTableHeaderCell
           align="right"
+          data-test-subj="tableHeaderCell_count_0"
           isSortAscending={true}
           isSorted={true}
           key="_data_h_count_0"
@@ -1476,6 +1491,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
         </EuiTableHeaderCellCheckbox>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           isSortAscending={true}
           isSorted={true}
           key="_data_h_name_0"
@@ -1635,6 +1651,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
         </EuiTableHeaderCellCheckbox>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           isSortAscending={true}
           isSorted={true}
           key="_data_h_name_0"
@@ -1879,6 +1896,7 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
         </EuiTableHeaderCellCheckbox>
         <EuiTableHeaderCell
           align="right"
+          data-test-subj="tableHeaderCell_count_0"
           isSortAscending={true}
           isSorted={true}
           key="_data_h_count_0"
@@ -2008,6 +2026,7 @@ exports[`EuiBasicTable with sortable columns and sorting disabled 1`] = `
       <EuiTableHeader>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           key="_data_h_name_0"
           scope="col"
         >
@@ -2095,6 +2114,7 @@ exports[`EuiBasicTable with sorting 1`] = `
       <EuiTableHeader>
         <EuiTableHeaderCell
           align="left"
+          data-test-subj="tableHeaderCell_name_0"
           isSortAscending={true}
           isSorted={true}
           key="_data_h_name_0"

src/components/basic_table/__snapshots__/in_memory_table.test.js.snap

@@ -110,11 +110,13 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                 <tr>
                   <EuiTableHeaderCell
                     align="left"
+                    data-test-subj="tableHeaderCell_name_0"
                     key="_data_h_name_0"
                     scope="col"
                   >
                     <th
                       className="euiTableHeaderCell"
+                      data-test-subj="tableHeaderCell_name_0"
                       scope="col"
                     >
                       <div

src/components/basic_table/basic_table.js

@@ -470,6 +470,7 @@ export class EuiBasicTable extends Component {
           width={width}
           isMobileHeader={isMobileHeader}
           hideForMobile={hideForMobile}
+          data-test-subj={`tableHeaderCell_${field}_${index}`}
           {...sorting}
         >
           {name}

src/components/basic_table/in_memory_table.js

@@ -71,6 +71,7 @@ const InMemoryTablePropTypes = {
   itemId: ItemIdType,
   rowProps: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   cellProps: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  onTableChange: PropTypes.func,
 };
 
 const getInitialQuery = (search) => {
@@ -172,6 +173,10 @@ export class EuiInMemoryTable extends Component {
   }
 
   onTableChange = ({ page = {}, sort = {} }) => {
+    if (this.props.onTableChange) {
+      this.props.onTableChange({ page, sort });
+    }
+
     const {
       index: pageIndex,
       size: pageSize
@@ -310,6 +315,7 @@ export class EuiInMemoryTable extends Component {
       cellProps,
       items: _unuseditems, // eslint-disable-line no-unused-vars
       search, // eslint-disable-line no-unused-vars
+      onTableChange, // eslint-disable-line no-unused-vars
       ...rest
     } = this.props;
 

src/components/basic_table/in_memory_table.test.js

@@ -670,5 +670,59 @@ describe('EuiInMemoryTable', () => {
 
       expect(component).toMatchSnapshot();
     });
+
+    test('onTableChange callback', () => {
+      const props = {
+        ...requiredProps,
+        items: [
+          { id: '1', name: 'name1' },
+          { id: '2', name: 'name2' },
+          { id: '3', name: 'name3' },
+          { id: '4', name: 'name4' },
+        ],
+        columns: [
+          {
+            field: 'name',
+            name: 'Name',
+            description: 'description',
+            sortable: true,
+          }
+        ],
+        sorting: true,
+        pagination: {
+          pageSizeOptions: [2, 4, 6],
+        },
+        onTableChange: jest.fn(),
+      };
+
+      const component = mount(
+        <EuiInMemoryTable {...props}/>
+      );
+
+      expect(props.onTableChange).toHaveBeenCalledTimes(0);
+      component.find('EuiPaginationButton[data-test-subj="pagination-button-1"]').simulate('click');
+      expect(props.onTableChange).toHaveBeenCalledTimes(1);
+      expect(props.onTableChange).toHaveBeenCalledWith({
+        sort: {},
+        page: {
+          index: 1,
+          size: 2,
+        },
+      });
+
+      props.onTableChange.mockClear();
+      component.find('[data-test-subj*="tableHeaderCell_name_0"] [data-test-subj="tableHeaderSortButton"]').simulate('click');
+      expect(props.onTableChange).toHaveBeenCalledTimes(1);
+      expect(props.onTableChange).toHaveBeenCalledWith({
+        sort: {
+          direction: 'asc',
+          field: 'name',
+        },
+        page: {
+          index: 0,
+          size: 2,
+        },
+      });
+    });
   });
 });

src/components/table/table_header_cell.js

@@ -71,6 +71,7 @@ export const EuiTableHeaderCell = ({
           className={buttonClasses}
           onClick={onSort}
           aria-label={statefulAriaLabel}
+          data-test-subj="tableHeaderSortButton"
         >
           <span className={contentClasses}>
             <span className="euiTableCellContent__text">{children}</span>