[8.18] [Inspector]: fix pagination not working (elastic#223537) (elastic#224215)

# Backport

This will backport the following commits from `main` to `8.18`:
- [[Inspector]: fix pagination not working
(elastic#223537)](elastic#223537)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Marco
Vettorello","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-06-17T10:33:38Z","message":"[Inspector]:
fix pagination not working (elastic#223537)\n\n## Summary\n\nfix
https://github.com/elastic/kibana/issues/223536\n\nIt wasn't possible to
change the page index in the Inspector Data View.\nThe table was using
the `onTableChange` callback, coming from the\n`useEuiTablePersist` hook
in the wrapping function, in the `onChange`\nprop of the `EuiTable`
instead of being attached to the `onTableChange`\nprop.\n\nWhen using
the `onChange` the EuiTable leave all the pagination/size etc\nhandling
to the consumer, where the `onTableChange` is just a callback\nrelated
to the changes, used within the `useEuiTablePersist` to store\nsome
configuration across tabels.\n\nThe PR fixes the `onTableChange`
callback to the correct prop.\n\nA functional test was also added to
check the pagination works within\nLens. I haven't used the existing
`inspector.ts` functional tests\nbecause they where within the Legacy
Visualize.\n\nI've checked the usage of `useEuiTablePersist` and the
returned\n`onTableChange` and is correctly used everywhere except for
ESQL query\nhistory that doesn't seems to have enabled pagination cc
@stratoula\n\nhttps://github.com/elastic/kibana/blob/90f65c3dba232e5a8acfc33bd51cdcd269f5fec2/src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.tsx#L383\n\n---------\n\nCo-authored-by:
Marco Liberati
<[email protected]>","sha":"d4fb29bb2deac21fa88ffb0e69f7ecd0d6baf4f4","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","regression","release_note:fix","Team:Visualizations","backport:prev-minor","backport:prev-major","v9.1.0"],"title":"[Inspector]:
fix pagination not
working","number":223537,"url":"https://github.com/elastic/kibana/pull/223537","mergeCommit":{"message":"[Inspector]:
fix pagination not working (elastic#223537)\n\n## Summary\n\nfix
https://github.com/elastic/kibana/issues/223536\n\nIt wasn't possible to
change the page index in the Inspector Data View.\nThe table was using
the `onTableChange` callback, coming from the\n`useEuiTablePersist` hook
in the wrapping function, in the `onChange`\nprop of the `EuiTable`
instead of being attached to the `onTableChange`\nprop.\n\nWhen using
the `onChange` the EuiTable leave all the pagination/size etc\nhandling
to the consumer, where the `onTableChange` is just a callback\nrelated
to the changes, used within the `useEuiTablePersist` to store\nsome
configuration across tabels.\n\nThe PR fixes the `onTableChange`
callback to the correct prop.\n\nA functional test was also added to
check the pagination works within\nLens. I haven't used the existing
`inspector.ts` functional tests\nbecause they where within the Legacy
Visualize.\n\nI've checked the usage of `useEuiTablePersist` and the
returned\n`onTableChange` and is correctly used everywhere except for
ESQL query\nhistory that doesn't seems to have enabled pagination cc
@stratoula\n\nhttps://github.com/elastic/kibana/blob/90f65c3dba232e5a8acfc33bd51cdcd269f5fec2/src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.tsx#L383\n\n---------\n\nCo-authored-by:
Marco Liberati
<[email protected]>","sha":"d4fb29bb2deac21fa88ffb0e69f7ecd0d6baf4f4"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/223537","number":223537,"mergeCommit":{"message":"[Inspector]:
fix pagination not working (elastic#223537)\n\n## Summary\n\nfix
https://github.com/elastic/kibana/issues/223536\n\nIt wasn't possible to
change the page index in the Inspector Data View.\nThe table was using
the `onTableChange` callback, coming from the\n`useEuiTablePersist` hook
in the wrapping function, in the `onChange`\nprop of the `EuiTable`
instead of being attached to the `onTableChange`\nprop.\n\nWhen using
the `onChange` the EuiTable leave all the pagination/size etc\nhandling
to the consumer, where the `onTableChange` is just a callback\nrelated
to the changes, used within the `useEuiTablePersist` to store\nsome
configuration across tabels.\n\nThe PR fixes the `onTableChange`
callback to the correct prop.\n\nA functional test was also added to
check the pagination works within\nLens. I haven't used the existing
`inspector.ts` functional tests\nbecause they where within the Legacy
Visualize.\n\nI've checked the usage of `useEuiTablePersist` and the
returned\n`onTableChange` and is correctly used everywhere except for
ESQL query\nhistory that doesn't seems to have enabled pagination cc
@stratoula\n\nhttps://github.com/elastic/kibana/blob/90f65c3dba232e5a8acfc33bd51cdcd269f5fec2/src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.tsx#L383\n\n---------\n\nCo-authored-by:
Marco Liberati
<[email protected]>","sha":"d4fb29bb2deac21fa88ffb0e69f7ecd0d6baf4f4"}}]}]
BACKPORT-->

Co-authored-by: Marco Vettorello <[email protected]>
Co-authored-by: Marco Liberati <[email protected]>

Author: 3 people

src/platform/packages/shared/shared-ux/table_persist/README.md

@@ -45,6 +45,7 @@ const MyTableComponent: FunctionComponent<Props> = ({ items }) => {
       columns={columns}
       pagination={pagination}
       sorting={sorting}
+      onTableChange={onTableChange}
     />
   );
 };

src/platform/plugins/shared/data/public/utils/table_inspector_view/components/data_table.tsx

@@ -210,7 +210,7 @@ class DataTableFormatClass extends Component<
         items={rows}
         sorting={sorting}
         pagination={pagination}
-        onChange={onTableChange}
+        onTableChange={onTableChange}
         css={css`
           // Set a min width on each column - you can use [data-test-subj] to target specific columns
           .euiTableHeaderCell {

x-pack/test/functional/apps/lens/group1/index.ts

@@ -78,6 +78,7 @@ export default ({ getService, loadTestFile, getPageObjects }: FtrProviderContext
       loadTestFile(require.resolve('./smokescreen')); // 12m 12s
       loadTestFile(require.resolve('./ad_hoc_data_view')); // 3m 40s
       loadTestFile(require.resolve('./multiple_data_views'));
+      loadTestFile(require.resolve('./inspector'));
     }
   });
 };

x-pack/test/functional/apps/lens/group1/inspector.ts

@@ -0,0 +1,69 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { FtrProviderContext } from '../../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const { visualize, lens, timePicker } = getPageObjects(['visualize', 'lens', 'timePicker']);
+  const testSubjects = getService('testSubjects');
+  const inspector = getService('inspector');
+
+  describe('Inspector', () => {
+    it('should allow switch between table page', async () => {
+      await visualize.navigateToNewVisualization();
+      await visualize.clickVisType('lens');
+      await timePicker.setDefaultAbsoluteRange();
+
+      await lens.configureDimension({
+        dimension: 'lnsXY_xDimensionPanel > lns-empty-dimension',
+        operation: 'date_histogram',
+        field: '@timestamp',
+      });
+
+      await lens.configureDimension({
+        dimension: 'lnsXY_yDimensionPanel > lns-empty-dimension',
+        operation: 'average',
+        field: 'bytes',
+      });
+
+      await lens.configureDimension({
+        dimension: 'lnsXY_splitDimensionPanel > lns-empty-dimension',
+        operation: 'terms',
+        field: 'geo.dest',
+      });
+
+      await inspector.open('lnsApp_inspectButton');
+      await inspector.setTablePageSize(10);
+
+      await inspector.expectTableData([
+        ['BT', '2015-09-19 06:00', '-'],
+        ['BT', '2015-09-19 09:00', '-'],
+        ['BT', '2015-09-19 12:00', '-'],
+        ['BT', '2015-09-19 15:00', '-'],
+        ['BT', '2015-09-19 18:00', '-'],
+        ['BT', '2015-09-19 21:00', '-'],
+        ['BT', '2015-09-20 00:00', '-'],
+        ['BT', '2015-09-20 03:00', '-'],
+        ['BT', '2015-09-20 06:00', '-'],
+        ['BT', '2015-09-20 09:00', '-'],
+      ]);
+      await testSubjects.click('pagination-button-1');
+      await inspector.expectTableData([
+        ['BT', '2015-09-20 12:00', '-'],
+        ['BT', '2015-09-20 15:00', '-'],
+        ['BT', '2015-09-20 18:00', '-'],
+        ['BT', '2015-09-20 21:00', '-'],
+        ['BT', '2015-09-21 00:00', '-'],
+        ['BT', '2015-09-21 03:00', '-'],
+        ['BT', '2015-09-21 06:00', '-'],
+        ['BT', '2015-09-21 09:00', '-'],
+        ['BT', '2015-09-21 12:00', '-'],
+        ['BT', '2015-09-21 15:00', '-'],
+      ]);
+    });
+  });
+}