restore datagrid columns

* display column title correctly
* restore filter in and filter out value functions

Partially resolve:
opensearch-project#2305

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

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
+   */
+  public allowsNumericalAggregations?: boolean;
+
   protected readonly _params: any;
   protected getConfig: FieldFormatsGetConfigFn | undefined;
 

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

@@ -9,6 +9,7 @@ import { EuiDataGridProps, EuiDataGrid } from '@elastic/eui';
 import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
 import { Table } from '../table_vis_response_handler';
 import { TableVisConfig } from '../types';
+import { getDataGridColumns } from './table_vis_grid_columns';
 
 interface TableVisComponentProps {
   table: Table;
@@ -44,10 +45,11 @@ export const TableVisComponent = ({ table, visConfig, handlers }: TableVisCompon
     }) as EuiDataGridProps['renderCellValue'];
   }, [rows, pagination.pageIndex, pagination.pageSize]);
 
+  const dataGridColumns = getDataGridColumns(table, visConfig, handlers);
   return (
     <EuiDataGrid
       aria-label="tableVis"
-      columns={columns}
+      columns={dataGridColumns}
       columnVisibility={{
         visibleColumns: columns.map(({ id }) => id),
         setVisibleColumns: () => {},

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

@@ -0,0 +1,149 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { i18n } from '@osd/i18n';
+import { EuiDataGridColumn, EuiDataGridColumnCellActionProps } from '@elastic/eui';
+import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
+import { Table } from '../table_vis_response_handler';
+import { TableVisConfig } from '../types';
+import { convertToFormattedData } from '../utils/convert_to_formatted_data';
+
+interface FilterData {
+  row: number;
+  column: number;
+  value: unknown;
+}
+
+export const getDataGridColumns = (
+  table: Table,
+  visConfig: TableVisConfig,
+  handlers: IInterpreterRenderHandlers
+) => {
+  const { formattedRows, formattedColumns } = convertToFormattedData(table, visConfig);
+
+  const filterBucket = (data: FilterData, negate: boolean) => {
+    const foramttedColumnId = formattedColumns[data.column].id;
+    const filterColumnIndex = table.columns.findIndex((col) => col.id === foramttedColumnId);
+    handlers.event({
+      name: 'filterBucket',
+      data: {
+        data: [
+          {
+            table: {
+              columns: table.columns,
+              rows: formattedRows,
+            },
+            ...data,
+            column: filterColumnIndex,
+          },
+        ],
+        negate,
+      },
+    });
+  };
+
+  return formattedColumns.map((col, colIndex) => {
+    const cellActions = col.filterable
+      ? [
+          ({ rowIndex, columnId, Component, closePopover }: EuiDataGridColumnCellActionProps) => {
+            const filterValue = formattedRows[rowIndex][columnId];
+            const filterContent = col.formatter?.convert(filterValue);
+
+            const filterForValueText = i18n.translate(
+              'visTypeTable.tableVisFilter.filterForValue',
+              {
+                defaultMessage: 'Filter for value',
+              }
+            );
+            const filterForValueLabel = i18n.translate(
+              'visTypeTable.tableVisFilter.filterForValueLabel',
+              {
+                defaultMessage: 'Filter for value: {filterContent}',
+                values: {
+                  filterContent,
+                },
+              }
+            );
+
+            return (
+              filterValue != null && (
+                <Component
+                  onClick={() => {
+                    filterBucket({ row: rowIndex, column: colIndex, value: filterValue }, false);
+                    closePopover();
+                  }}
+                  iconType="plusInCircle"
+                  aria-label={filterForValueLabel}
+                  data-test-subj="filterForValue"
+                >
+                  {filterForValueText}
+                </Component>
+              )
+            );
+          },
+          ({ rowIndex, columnId, Component, closePopover }: EuiDataGridColumnCellActionProps) => {
+            const filterValue = formattedRows[rowIndex][columnId];
+            const filterContent = col.formatter?.convert(filterValue);
+
+            const filterOutValueText = i18n.translate(
+              'visTypeTable.tableVisFilter.filterOutValue',
+              {
+                defaultMessage: 'Filter out value',
+              }
+            );
+            const filterOutValueLabel = i18n.translate(
+              'visTypeTable.tableVisFilter.filterOutValueLabel',
+              {
+                defaultMessage: 'Filter out value: {filterContent}',
+                values: {
+                  filterContent,
+                },
+              }
+            );
+
+            return (
+              filterValue != null && (
+                <Component
+                  onClick={() => {
+                    filterBucket({ row: rowIndex, column: colIndex, value: filterValue }, true);
+                    closePopover();
+                  }}
+                  iconType="minusInCircle"
+                  aria-label={filterOutValueLabel}
+                  data-test-subj="filterOutValue"
+                >
+                  {filterOutValueText}
+                </Component>
+              )
+            );
+          },
+        ]
+      : undefined;
+
+    const dataGridColumn: EuiDataGridColumn = {
+      id: col.id,
+      display: col.title,
+      displayAsText: col.title,
+      actions: {
+        showHide: false,
+        showMoveLeft: false,
+        showMoveRight: false,
+        showSortAsc: {
+          label: i18n.translate('visTypeTable.sort.ascLabel', {
+            defaultMessage: 'Sort asc',
+          }),
+        },
+        showSortDesc: {
+          label: i18n.translate('visTypeTable.sort.descLabel', {
+            defaultMessage: 'Sort desc',
+          }),
+        },
+      },
+      cellActions,
+    };
+    return dataGridColumn;
+  });
+};

src/plugins/vis_type_table/public/register_vis.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { PluginInitializerContext, CoreSetup } from 'opensearch-dashboards/public';
+
+import { TableVisPluginSetupDependencies } from './plugin';
+import { createTableVisFn } from './table_vis_fn';
+import { tableVisRenderer } from './table_vis_renderer';
+import { getTableVisTypeDefinition } from './table_vis_type';
+
+export const registerTableVis = async (
+  core: CoreSetup,
+  { expressions, visualizations }: TableVisPluginSetupDependencies,
+  context: PluginInitializerContext
+) => {
+  const [coreStart] = await core.getStartServices();
+  expressions.registerFunction(createTableVisFn);
+  expressions.registerRenderer(tableVisRenderer(coreStart));
+  visualizations.createBaseVisualization(getTableVisTypeDefinition());
+};

src/plugins/vis_type_table/public/types.ts

@@ -29,6 +29,7 @@
  */
 
 import { SchemaConfig } from 'src/plugins/visualizations/public';
+import { IFieldFormat } from 'src/plugins/data/public';
 
 export enum AggTypes {
   SUM = 'sum',
@@ -53,3 +54,13 @@ export interface TableVisParams {
   totalFunc: AggTypes;
   percentageCol: string;
 }
+
+export interface FormattedColumn {
+  id: string;
+  title: string;
+  formatter: IFieldFormat | undefined;
+  filterable: boolean;
+  formattedTotal?: string | number;
+  sumTotal?: number;
+  total?: number;
+}