Add footer row

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

@@ -35,7 +35,7 @@ interface TableVisBasicProps {
 }
 
 export const TableVisBasic = memo(({ table, fireEvent, visConfig }: TableVisBasicProps) => {
-  const { columns, rows } = useFormattedColumnsAndRows(table, visConfig);
+  const { columns, rows, splitRow } = useFormattedColumnsAndRows(table, visConfig);
   const renderCellValue = useMemo(() => createTableVisCell(table, columns, rows, fireEvent), [
     table,
     columns,
@@ -66,11 +66,21 @@ export const TableVisBasic = memo(({ table, fireEvent, visConfig }: TableVisBasi
           showColumnSelector: false,
           showFullScreenSelector: false,
           additionalControls: (
-            <TableVisControls cols={columns} rows={rows} table={table} filename={visConfig.title} />
+            <TableVisControls
+              cols={columns}
+              rows={rows}
+              table={table}
+              filename={visConfig.title}
+              splitRow={splitRow}
+            />
           ),
         }
       }
       renderCellValue={renderCellValue}
+      renderFooterCellValue={
+        // @ts-expect-error
+        visConfig.showTotal ? ({ colIndex }) => columns[colIndex].formattedTotal || null : undefined
+      }
       pagination={pagination}
     />
   ) : (

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

@@ -22,7 +22,7 @@ import { EuiButtonEmpty, EuiContextMenuItem, EuiContextMenuPanel, EuiPopover } f
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { KibanaDatatableRow } from 'src/plugins/expressions';
-import { CoreSetup } from 'kibana/public';
+import { CoreStart } from 'kibana/public';
 import { useKibana } from '../../../kibana_react/public';
 import { FormattedColumn } from '../types';
 import { Table } from '../table_vis_response_handler';
@@ -33,6 +33,7 @@ interface TableVisControlsProps {
   cols: FormattedColumn[];
   rows: KibanaDatatableRow[];
   table: Table;
+  splitRow?: FormattedColumn;
 }
 
 export const TableVisControls = memo((props: TableVisControlsProps) => {
@@ -42,7 +43,7 @@ export const TableVisControls = memo((props: TableVisControlsProps) => {
 
   const {
     services: { uiSettings },
-  } = useKibana<CoreSetup>();
+  } = useKibana<CoreStart>();
 
   const onClickRawExport = useCallback(
     () =>

src/plugins/vis_type_table/public/components/table_visualization.scss

@@ -8,7 +8,7 @@
 .tbvChart {
   display: flex;
   flex-direction: column;
-  flex: 1 0 100%;
+  flex: 1 0 0;
   overflow: auto;
 
   @include euiScrollBar;

src/plugins/vis_type_table/public/to_ast.test.ts

@@ -70,6 +70,7 @@ describe('table vis toExpressionAst function', () => {
       showMetricsAtAllLevels: true,
       showPartialRows: true,
       showTotal: true,
+      showToolbar: false,
       sort: { columnIndex: null, direction: null },
       totalFunc: AggTypes.SUM,
     };

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

@@ -21,7 +21,7 @@ import { isObject } from 'lodash';
 // @ts-ignore
 import { saveAs } from '@elastic/filesaver';
 
-import { CoreSetup } from 'kibana/public';
+import { CoreStart } from 'kibana/public';
 import { KibanaDatatableRow, KibanaDatatableColumn } from 'src/plugins/expressions';
 import { CSV_SEPARATOR_SETTING, CSV_QUOTE_VALUES_SETTING } from '../../../share/public';
 import { FormattedColumn } from '../types';
@@ -36,7 +36,7 @@ interface ToCsvData {
   rows: KibanaDatatableRow[];
   table: Table;
   splitRow?: FormattedColumn;
-  uiSettings: CoreSetup['uiSettings'];
+  uiSettings: CoreStart['uiSettings'];
 }
 
 const toCsv = (formatted: boolean, { cols, rows, table, splitRow, uiSettings }: ToCsvData) => {

src/plugins/vis_type_table/public/utils/use/use_formatted_columns.ts

@@ -25,18 +25,22 @@ import { FormattedColumn, TableVisConfig, AggTypes } from '../../types';
 import { getFormatService } from '../../services';
 import { addPercentageColumn } from '../add_percentage_column';
 
-export const useFormattedColumnsAndRows = (table: Table, visParams: TableVisConfig) => {
-  const { formattedColumns: columns, formattedRows: rows } = useMemo(() => {
-    const { buckets, metrics, splitColumn, splitRow } = visParams.dimensions;
+export const useFormattedColumnsAndRows = (table: Table, visConfig: TableVisConfig) => {
+  const {
+    formattedColumns: columns,
+    formattedRows: rows,
+    splitRowGlobal: splitRow,
+  } = useMemo(() => {
+    const { buckets, metrics, splitColumn, splitRow: splitRowLocal } = visConfig.dimensions;
     // todo: use for split table by row/column
-    let splitRowGlobal: FormattedColumn;
+    let splitRowGlobal: FormattedColumn | undefined;
     let formattedRows = table.rows;
 
     let formattedColumns = table.columns
       .map<FormattedColumn | undefined>((col, i) => {
         const isBucket = buckets.find(({ accessor }) => accessor === i);
         const isSplitColumn = splitColumn?.find(({ accessor }) => accessor === i);
-        const isSplitRow = splitRow?.find(({ accessor }) => accessor === i);
+        const isSplitRow = splitRowLocal?.find(({ accessor }) => accessor === i);
         const dimension =
           isBucket || isSplitColumn || metrics.find(({ accessor }) => accessor === i);
 
@@ -59,7 +63,7 @@ export const useFormattedColumnsAndRows = (table: Table, visParams: TableVisConf
         // @ts-expect-error
         const allowsNumericalAggregations: boolean = formatter?.allowsNumericalAggregations;
 
-        if (allowsNumericalAggregations || isDate || visParams.totalFunc === AggTypes.COUNT) {
+        if (allowsNumericalAggregations || isDate || visConfig.totalFunc === AggTypes.COUNT) {
           const sumOfColumnValues = table.rows.reduce((prev, curr) => {
             // some metrics return undefined for some of the values
             // derivative is an example of this as it returns undefined in the first row
@@ -69,12 +73,11 @@ export const useFormattedColumnsAndRows = (table: Table, visParams: TableVisConf
 
           formattedColumn.sumTotal = sumOfColumnValues;
 
-          switch (visParams.totalFunc) {
+          switch (visConfig.totalFunc) {
             case 'sum': {
               if (!isDate) {
-                const total = formattedColumn.sumTotal;
-                formattedColumn.formattedTotal = formatter?.convert(total);
-                formattedColumn.total = formattedColumn.sumTotal;
+                formattedColumn.formattedTotal = formatter?.convert(sumOfColumnValues);
+                formattedColumn.total = sumOfColumnValues;
               }
               break;
             }
@@ -113,15 +116,15 @@ export const useFormattedColumnsAndRows = (table: Table, visParams: TableVisConf
       })
       .filter((column): column is FormattedColumn => !!column);
 
-    if (visParams.percentageCol) {
-      const insertAtIndex = findIndex(formattedColumns, { title: visParams.percentageCol });
+    if (visConfig.percentageCol) {
+      const insertAtIndex = findIndex(formattedColumns, { title: visConfig.percentageCol });
 
       // column to show percentage for was removed
       if (insertAtIndex < 0) return { formattedColumns, formattedRows };
 
       const { cols, rows: rowsWithPercentage } = addPercentageColumn(
         formattedColumns,
-        visParams.percentageCol,
+        visConfig.percentageCol,
         table.rows,
         insertAtIndex
       );
@@ -130,8 +133,8 @@ export const useFormattedColumnsAndRows = (table: Table, visParams: TableVisConf
       formattedColumns = cols;
     }
 
-    return { formattedColumns, formattedRows };
-  }, [table, visParams.dimensions, visParams.percentageCol, visParams.totalFunc]);
+    return { formattedColumns, formattedRows, splitRowGlobal };
+  }, [table, visConfig.dimensions, visConfig.percentageCol, visConfig.totalFunc]);
 
-  return { columns, rows };
+  return { columns, rows, splitRow };
 };

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

@@ -24,7 +24,6 @@ export const usePagination = (visParams: TableVisParams) => {
   const [pagination, setPagination] = useState({
     pageIndex: 0,
     pageSize: visParams.perPage || 0,
-    pageSizeOptions: [visParams.perPage || 0, 50],
   });
   const onChangeItemsPerPage = useCallback(
     (pageSize: number) => setPagination((pag) => ({ ...pag, pageSize, pageIndex: 0 })),
@@ -39,7 +38,6 @@ export const usePagination = (visParams: TableVisParams) => {
     setPagination({
       pageIndex: 0,
       pageSize: visParams.perPage || 0,
-      pageSizeOptions: [visParams.perPage || 0, 50],
     });
   }, [visParams.perPage]);