[Table Visualization] Replace table visualization with React and DataGrid

CHANGELOG.md

@@ -49,6 +49,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - 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))
 - [Doc] Add current plugin persistence implementation readme ([#3081](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3081))
+- [Table Visualization] Refactor 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 configure it accordingly. You could also add multiple metrics and each metrics is a separate column in table visualization.
+
+### Buckets Aggregation
+At the `Buckets`, configure the columns to be displayed in the table visualization.
+- `Split Rows` is used when you want to divide one row into more based on some category. 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 gender's data is now split across to multiple rows based on a new added column `clothing.category`.
+- `Split Table` splits the table into separate tables for the aggregation you choose. It is similar to `Split Rows`, but this time each row becomes a single table with aggregation columns arranged horizontally or vertically.
+
+## Select Options
+In the `Options` tab, you can configure 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 column.
+- `Show partial rows` will include data with missing columns.
+- `Show total` calculates the selected metrics per column and displays the result at the bottom. Warning - depending on your columns and the total aggregation function selected, this may generate statistically invalid results. For example, avoid summing or averaging averages.
+- `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"