[Table Visualization] restore pagination to table vis (#2461)

* add pagination

patically resolved:
#2305

Signed-off-by: Anan Zhuang <ananzh@amazon.com>

src/plugins/vis_type_table/public/components/table_vis_component.tsx

@@ -10,6 +10,7 @@ import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
 import { Table } from '../table_vis_response_handler';
 import { TableVisConfig } from '../types';
 import { getDataGridColumns } from './table_vis_grid_columns';
+import { usePagination } from '../utils';
 
 interface TableVisComponentProps {
  table: Table;
@@ -19,15 +20,8 @@ interface TableVisComponentProps {
 
 export const TableVisComponent = ({ table, visConfig, handlers }: TableVisComponentProps) => {
  const { rows, columns } = table;
- const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 5 });
- const onChangeItemsPerPage = useCallback(
- (pageSize) => setPagination((p) => ({ ...p, pageSize, pageIndex: 0 })),
- [setPagination]
- );
 
- const onChangePage = useCallback((pageIndex) => setPagination((p) => ({ ...p, pageIndex })), [
- setPagination,
- ]);
+ const pagination = usePagination(visConfig, rows.length);
 
  // toDo: it is a sample renderCellValue to render a data grid component
  // will check on it and it might be replaced
@@ -37,15 +31,16 @@ export const TableVisComponent = ({ table, visConfig, handlers }: TableVisCompon
 
  // If we are doing the pagination (instead of leaving that to the grid)
  // then the row index must be adjusted as `data` has already been pruned to the page size
- adjustedRowIndex = rowIndex - pagination.pageIndex * pagination.pageSize;
+ adjustedRowIndex = rowIndex - pagination!.pageIndex * pagination!.pageSize;
 
  return rows.hasOwnProperty(adjustedRowIndex)
  ? rows[adjustedRowIndex][columnId] || null
  : null;
  }) as EuiDataGridProps['renderCellValue'];
- }, [rows, pagination.pageIndex, pagination.pageSize]);
+ }, [rows, pagination]);
 
  const dataGridColumns = getDataGridColumns(table, visConfig, handlers);
+
  return (
  <EuiDataGrid
  aria-label="tableVis"
@@ -56,11 +51,7 @@ export const TableVisComponent = ({ table, visConfig, handlers }: TableVisCompon
  }}
  rowCount={rows.length}
  renderCellValue={renderCellValue}
- pagination={{
- ...pagination,
- onChangeItemsPerPage,
- onChangePage,
- }}
+ pagination={pagination}
  />
  );
 };

src/plugins/vis_type_table/public/types.ts

@@ -47,7 +47,7 @@ export interface TableVisConfig extends TableVisParams {
 }
 
 export interface TableVisParams {
- perPage: number | '';
+ perPage: number;
  showPartialRows: boolean;
  showMetricsAtAllLevels: boolean;
  showTotal: boolean;

src/plugins/vis_type_table/public/utils/index.ts

@@ -4,3 +4,4 @@
  */
 
 export * from './convert_to_formatted_data';
+export * from './use_pagination';

src/plugins/vis_type_table/public/utils/use_pagination.ts

@@ -0,0 +1,38 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { TableVisConfig } from '../types';
+
+export const usePagination = (visConfig: TableVisConfig, nrow: number) => {
+ const [pagination, setPagination] = useState({
+ pageIndex: 0,
+ pageSize: visConfig.perPage,
+ });
+ const onChangeItemsPerPage = useCallback(
+ (pageSize) => setPagination((p) => ({ ...p, pageSize, pageIndex: 0 })),
+ [setPagination]
+ );
+ const onChangePage = useCallback((pageIndex) => setPagination((p) => ({ ...p, pageIndex })), [
+ setPagination,
+ ]);
+
+ useEffect(() => {
+ const maxiPageIndex = Math.ceil(nrow / visConfig.perPage) - 1;
+ setPagination((p) => ({
+ pageIndex: p.pageIndex > maxiPageIndex ? maxiPageIndex : p.pageIndex,
+ pageSize: visConfig.perPage,
+ }));
+ }, [nrow, visConfig.perPage]);
+
+ return useMemo(
+ () => ({
+ ...pagination,
+ onChangeItemsPerPage,
+ onChangePage,
+ }),
+ [pagination, onChangeItemsPerPage, onChangePage]
+ );
+};