[Table Visualization] add a plain datagrid component

implement a plain OuiDataGrid component use the basic
pagenation, sort and format.

Partially resolve:
opensearch-project#2305

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

src/plugins/vis_type_table/opensearch_dashboards.json

@@ -10,6 +10,7 @@
   ],
   "requiredBundles": [
     "opensearchDashboardsUtils",
+    "opensearchDashboardsReact",
     "charts",
     "visDefaultEditor"
   ]

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

@@ -0,0 +1,45 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { CoreStart } from 'opensearch-dashboards/public';
+import { I18nProvider } from '@osd/i18n/react';
+import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
+import { OpenSearchDashboardsContextProvider } from '../../../opensearch_dashboards_react/public';
+
+import { TableContext } from '../table_vis_response_handler';
+import { TableVisConfig } from '../types';
+import { TableVisComponent } from './table_vis_component';
+
+interface TableVisAppProps {
+  visData: TableContext;
+  visConfig: TableVisConfig;
+  handlers: IInterpreterRenderHandlers;
+}
+
+const TableVisApp = ({
+  services,
+  visData: { table, tableGroups, direction },
+  visConfig,
+  handlers,
+}: TableVisAppProps & { services: CoreStart }) => {
+  return (
+    <I18nProvider>
+      <OpenSearchDashboardsContextProvider services={services}>
+        <div className="tableVis" data-test-subj="tableVisEditor">
+          {tableGroups?.length !== 0 ? (
+            <></>
+          ) : (
+            <TableVisComponent table={table} visConfig={visConfig} handlers={handlers} />
+          )}
+        </div>
+      </OpenSearchDashboardsContextProvider>
+    </I18nProvider>
+  );
+};
+
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { TableVisApp as default };

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

@@ -0,0 +1,64 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useCallback, useMemo } from 'react';
+import { EuiDataGridProps, EuiDataGrid } from '@elastic/eui';
+
+import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
+import { Table } from '../table_vis_response_handler';
+import { TableVisConfig } from '../types';
+
+interface TableVisComponentProps {
+  table: Table;
+  visConfig: TableVisConfig;
+  handlers: IInterpreterRenderHandlers;
+}
+
+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,
+  ]);
+
+  // toDo: it is a sample renderCellValue to render a data grid component
+  // will check on it and it might be replaced
+  const renderCellValue = useMemo(() => {
+    return (({ rowIndex, columnId }) => {
+      let adjustedRowIndex = rowIndex;
+
+      // 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;
+
+      return rows.hasOwnProperty(adjustedRowIndex)
+        ? rows[adjustedRowIndex][columnId] || null
+        : null;
+    }) as EuiDataGridProps['renderCellValue'];
+  }, [rows, pagination.pageIndex, pagination.pageSize]);
+
+  return (
+    <EuiDataGrid
+      aria-label="tableVis"
+      columns={columns}
+      columnVisibility={{
+        visibleColumns: columns.map(({ id }) => id),
+        setVisibleColumns: () => {},
+      }}
+      rowCount={rows.length}
+      renderCellValue={renderCellValue}
+      pagination={{
+        ...pagination,
+        onChangeItemsPerPage,
+        onChangePage,
+      }}
+    />
+  );
+};

src/plugins/vis_type_table/public/plugin.ts

@@ -30,6 +30,16 @@ export interface TableVisPluginStartDependencies {
   data: DataPublicPluginStart;
 }
 
+const setupTableVis = async (
+  core: CoreSetup,
+  { expressions, visualizations }: TableVisPluginSetupDependencies
+) => {
+  const [coreStart] = await core.getStartServices();
+  expressions.registerFunction(createTableVisFn);
+  expressions.registerRenderer(tableVisRenderer(coreStart));
+  visualizations.createBaseVisualization(getTableVisTypeDefinition());
+};
+
 /** @internal */
 export class TableVisPlugin implements Plugin<void, void> {
   initializerContext: PluginInitializerContext<ConfigSchema>;
@@ -38,10 +48,8 @@ export class TableVisPlugin implements Plugin<void, void> {
     this.initializerContext = initializerContext;
   }
 
-  public setup(core: CoreSetup, { expressions, visualizations }: TableVisPluginSetupDependencies) {
-    expressions.registerFunction(createTableVisFn);
-    expressions.registerRenderer(tableVisRenderer);
-    visualizations.createBaseVisualization(getTableVisTypeDefinition());
+  public async setup(core: CoreSetup, dependencies: TableVisPluginSetupDependencies) {
+    setupTableVis(core, dependencies);
   }
 
   public start(core: CoreStart, { data }: TableVisPluginStartDependencies) {

src/plugins/vis_type_table/public/table_vis_renderer.tsx

@@ -3,14 +3,19 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
+import React, { lazy } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 
+import { CoreStart } from 'opensearch-dashboards/public';
 import { VisualizationContainer } from '../../visualizations/public';
 import { ExpressionRenderDefinition } from '../../expressions/common/expression_renderers';
 import { TableVisRenderValue } from './table_vis_fn';
+// @ts-ignore
+const TableVisApp = lazy(() => import('./components/table_vis_app'));
 
-export const tableVisRenderer: () => ExpressionRenderDefinition<TableVisRenderValue> = () => ({
+export const tableVisRenderer: (
+  core: CoreStart
+) => ExpressionRenderDefinition<TableVisRenderValue> = (core) => ({
   name: 'table_vis',
   displayName: 'table visualization',
   reuseDomNode: true,
@@ -25,7 +30,12 @@ export const tableVisRenderer: () => ExpressionRenderDefinition<TableVisRenderVa
 
     render(
       <VisualizationContainer className="tableVis" showNoResult={showNoResult}>
-        <></> //toDo: add TableVisComponent
+        <TableVisApp
+          services={core}
+          visData={visData}
+          visConfig={visConfig}
+          handlers={handlers}
+        />
       </VisualizationContainer>,
       domNode
     );

src/plugins/vis_type_table/public/table_vis_response_handler.ts

@@ -48,7 +48,7 @@ export interface TableGroup {
 }
 
 export interface TableContext {
-  table?: Table;
+  table: Table;
   tableGroups?: TableGroup[];
   direction?: 'row' | 'column';
 }
@@ -58,7 +58,7 @@ export function tableVisResponseHandler(
   config: TableVisConfig
 ): TableContext {
   let table: Table | undefined;
-  const tableGroups: TableGroup[] = [];
+  let tableGroups: TableGroup[] = [];
   let direction: TableContext['direction'];
 
   const split = config.splitColumn || config.splitRow;

yarn.lock

@@ -11640,10 +11640,10 @@ leaflet-responsive-popup@0.6.4:
   resolved "https://registry.yarnpkg.com/leaflet-responsive-popup/-/leaflet-responsive-popup-0.6.4.tgz#b93d9368ef9f96d6dc911cf5b96d90e08601c6b3"
   integrity sha512-2D8G9aQA6NHkulDBPN9kqbUCkCpWQQ6dF0xFL11AuEIWIbsL4UC/ZPP5m8GYM0dpU6YTlmyyCh1Tz+cls5Q4dg==
 
-"leaflet-vega@npm:@amoo-miki/leaflet-vega@0.8.7":
-  version "0.8.7"
-  resolved "https://registry.yarnpkg.com/@amoo-miki/leaflet-vega/-/leaflet-vega-0.8.7.tgz#8faca1b4b8e2ef7d48667ac6faad9204f4da7153"
-  integrity sha512-T4M5yziwj3Fi9Adsbce+cdWqPjON0BRwEjwqLlPMoirU1vhifA6YKrlZkVzJrK0IIm+hdfMCLkBz33gD8fdxzQ==
+"leaflet-vega@npm:@amoo-miki/leaflet-vega@0.8.8":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@amoo-miki/leaflet-vega/-/leaflet-vega-0.8.8.tgz#675abf37d72fbea859755e982f4fd19dea776557"
+  integrity sha512-W2gGgFDxzy/XUx+fQJfz0NYVXsKl7V+G6QywiMcOV5NEodDId9c60up7NNf+cfM7ggpo+5BuLqrKmosuGO1CsA==
   dependencies:
     vega-spec-injector "^0.0.2"
 
@@ -18000,10 +18000,10 @@ vega-hierarchy@~4.1.0:
     vega-dataflow "^5.7.3"
     vega-util "^1.15.2"
 
-"vega-interpreter@npm:@amoo-miki/vega-forced-csp-compliant-interpreter@1.0.5":
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@amoo-miki/vega-forced-csp-compliant-interpreter/-/vega-forced-csp-compliant-interpreter-1.0.5.tgz#49970be9b00ca7e45ced0617fbf373c77a28aab4"
-  integrity sha512-lfeU77lVoUbSCC6N1ywdKg+I6K08xpkd82TLon+LebtKyC8aLCe7P5Dd/89zAPyFwRyobKftHu8z0xpV7R7a4Q==
+"vega-interpreter@npm:@amoo-miki/vega-forced-csp-compliant-interpreter@1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@amoo-miki/vega-forced-csp-compliant-interpreter/-/vega-forced-csp-compliant-interpreter-1.0.6.tgz#5cffdf12b7fe12dc936194edd9e8519506c38716"
+  integrity sha512-9S5nTTVd8JVKobcWp5iwirIeePiamwH1J9uSZPuG5kcF0TUBvGu++ERKjNdst5Qck7e4R6/7vjx2wVf58XUarg==
 
 vega-label@~1.2.0:
   version "1.2.0"