[Table Visualization] Replace table visualization with React and DataGrid

CHANGELOG.md

@@ -48,6 +48,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [I18n] Register ru, ru-RU locale ([#2817](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2817))
 - Add yarn opensearch arg to setup plugin dependencies ([#2544](https://github.com/opensearch-project/OpenSearch-Dashboards/issues/2544))
 - [Multi DataSource] Test the connection to an external data source when creating or updating ([#2973](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2973))
+- [Table Visualization] Replace table visualization using React and DataGrid component ([#2863](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2863))
 
 ### 🐛 Bug Fixes
 

src/plugins/data/common/field_formats/field_format.ts

@@ -95,6 +95,12 @@ export abstract class FieldFormat {
    */
   public type: any = this.constructor;
 
+  /**
+   * @property {boolean} - allow numeric aggregation
+   * @private
+   */
+  allowsNumericalAggregations?: boolean;
+
   protected readonly _params: any;
   protected getConfig: FieldFormatsGetConfigFn | undefined;
 

src/plugins/vis_builder/public/visualizations/table/components/table_viz_options.tsx

@@ -3,14 +3,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { get } from 'lodash';
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import { i18n } from '@osd/i18n';
 import { FormattedMessage } from '@osd/i18n/react';
 import produce from 'immer';
 import { Draft } from 'immer';
 import { EuiIconTip } from '@elastic/eui';
-import { search } from '../../../../../data/public';
 import { NumberInputOption, SwitchOption } from '../../../../../charts/public';
 import {
   useTypedDispatch,

src/plugins/vis_builder/public/visualizations/table/to_expression.ts

@@ -4,7 +4,7 @@
  */
 
 import { SchemaConfig } from '../../../../visualizations/public';
-import { TableVisExpressionFunctionDefinition } from '../../../../vis_type_table_new/public';
+import { TableVisExpressionFunctionDefinition } from '../../../../vis_type_table/public';
 import { AggConfigs, IAggConfig } from '../../../../data/common';
 import { buildExpression, buildExpressionFunction } from '../../../../expressions/public';
 import { RenderState } from '../../application/utils/state_management';
@@ -120,7 +120,7 @@ export const toExpression = async ({ style: styleState, visualization }: TableRo
   };
 
   const tableVis = buildExpressionFunction<TableVisExpressionFunctionDefinition>(
-    'opensearch_dashboards_table_new',
+    'opensearch_dashboards_table',
     {
       visConfig: JSON.stringify(visConfig),
     }

src/plugins/vis_type_table/README.md

@@ -1 +1,35 @@
-Contains the data table visualization, that allows presenting data in a simple table format.
+# Data Table
+
+This is an OpenSearch Dashboards plugin that is used to visualize data and aggregations in tabular format.
+
+## Create Data Table
+To create a data table in OpenSearch Dashboards, first select `Visualize` from the navigation menu. Then click `Create Visualization` and choose `Data Table` as the visualization type.
+
+## Select Metrics
+
+### Metrics Aggregation
+At the `Metrics`, select the metric aggregation type from the menu and config it accordinly.
+
+### Buckets Aggregation
+At the `Buckets`, config the columns to be displayed in the table visualization.
+- `Split Rows` is used when you want to divide one row into more categories. It splits one row into multiple and add columns based on the categories you choose to split. For example, if you split the data based on gender then you want to know more on each gender's clothing preference. You could click `Split Rows` and input `clothing.category` in terms. Each genger's data is now splitted to multiple rows based on a new added column `clothing.category`.
+- `Split Table` splits the table into seperate tables for the aggregation you choose. It is similar to `Split Rows`, but this time you will see multiple tables.
+
+## Select Options
+In the `Options` tab, you could config more options.
+- `Max rows per page` is the maximum number of rows displayed per page.
+- `Show metrics for every bucket/level` adds metrics aggregation to every columns.
+- `Show partial rows` will include data with missing columns.
+- `Show total` calculates the selected metrics per column and displays the result at the bottom.
+- `Percentage column` adds one percentage column based on the chosen metrics aggregation.
+
+## Example
+
+Below is an example of creating a table visualization using sample ecommerce data.
+
+- Create a new data table visualization and set a relative time 15 weeks ago.
+- Compute the count of ecommerce: Choose `Count` in Metrics Aggregation.
+- Split the rows on the top 5 of `manufacturer.keyword` ordered by `Metric:Count` in descending and add a label "manufacturer".
+- Split the table in rows on the top 5 of `geoip.city_name` ordered by `Metric:Count` in ascending order.
+- Click the `Save` button on the top left and save the visualization as "Top manufacturers by count per city".
+- Choose a table and click the download icon to download the table.

src/plugins/vis_type_table/opensearch_dashboards.json

@@ -6,11 +6,11 @@
   "requiredPlugins": [
     "expressions",
     "visualizations",
-    "data",
-    "opensearchDashboardsLegacy"
+    "data"
   ],
   "requiredBundles": [
     "opensearchDashboardsUtils",
+    "opensearchDashboardsReact",
     "share",
     "charts",
     "visDefaultEditor"