feat(table v2): agGridTableChart add row numer column (#39284)

Co-authored-by: Evan Rusackas <evan@preset.io>
Co-authored-by: codeant-ai-for-open-source[bot] <244253245+codeant-ai-for-open-source[bot]@users.noreply.github.com>

superset-frontend/plugins/plugin-chart-ag-grid-table/src/utils/useColDefs.ts

@@ -17,9 +17,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { t } from '@apache-superset/core/translation';
 import { ColDef } from '@superset-ui/core/components/ThemedAgGridReact';
 import { useCallback, useMemo } from 'react';
-import { DataRecord, DataRecordValue } from '@superset-ui/core';
+import { DataRecord, DataRecordValue, JsonObject } from '@superset-ui/core';
 import { GenericDataType } from '@apache-superset/core/common';
 import { useTheme } from '@apache-superset/core/theme';
 import { ColorFormatters } from '@superset-ui/chart-controls';
@@ -41,7 +42,7 @@ import { getAggFunc } from './getAggFunc';
 import { TextCellRenderer } from '../renderers/TextCellRenderer';
 import { NumericCellRenderer } from '../renderers/NumericCellRenderer';
 import CustomHeader from '../AgGridTable/components/CustomHeader';
-import { NOOP_FILTER_COMPARATOR } from '../consts';
+import { NOOP_FILTER_COMPARATOR, ROW_NUMBER_COL_ID } from '../consts';
 import { valueFormatter, valueGetter } from './formatValue';
 import getCellStyle from './getCellStyle';
 
@@ -53,6 +54,9 @@ type UseColDefsProps = {
   columns: InputColumn[];
   data: InputData[];
   serverPagination: boolean;
+  serverPaginationData: JsonObject;
+  serverPageLength: number;
+  showNumberedColumn: boolean;
   isRawRecords: boolean;
   defaultAlignPN: boolean;
   showCellBars: boolean;
@@ -216,6 +220,9 @@ export const useColDefs = ({
   columns,
   data,
   serverPagination,
+  serverPaginationData,
+  serverPageLength,
+  showNumberedColumn,
   isRawRecords,
   defaultAlignPN,
   showCellBars,
@@ -459,5 +466,61 @@ export const useColDefs = ({
     }, []);
   }, [stringifiedCols, getCommonColProps]);
 
-  return colDefs;
+  const rawPageSize = serverPaginationData?.pageSize ?? serverPageLength;
+  const pageSize = rawPageSize && rawPageSize > 0 ? rawPageSize : data.length;
+  const currentPage = serverPaginationData?.currentPage ?? 0;
+  const maxVisibleRowNumber = serverPagination
+    ? currentPage * pageSize + data.length
+    : data.length;
+  const rowIndexLength = `${Math.max(maxVisibleRowNumber, 1)}`.length;
+  const rowNumberCol = useMemo<ColDef>(
+    () => ({
+      headerName: t('№'),
+      headerClass: 'ag-header-center',
+      field: ROW_NUMBER_COL_ID,
+      valueGetter: params => {
+        if (params.node?.rowPinned != null) return '';
+        if (serverPagination && serverPaginationData) {
+          return currentPage * pageSize + (params.node?.rowIndex ?? 0) + 1;
+        }
+        return (params.node?.rowIndex ?? 0) + 1;
+      },
+      headerStyle: {
+        backgroundColor: theme.colorFillTertiary,
+        fontSize: '1em',
+        color: theme.colorTextTertiary,
+      },
+      width: 30 + rowIndexLength * 6,
+      minWidth: 30 + rowIndexLength * 6,
+      sortable: false,
+      filter: false,
+      pinned: 'left' as const,
+      lockPosition: true,
+      suppressNavigable: true,
+      resizable: false,
+      suppressMovable: true,
+      suppressSizeToFit: true,
+      cellStyle: {
+        backgroundColor: theme.colorFillTertiary,
+        padding: '0',
+        textAlign: 'center',
+        fontSize: '0.9em',
+        color: theme.colorTextTertiary,
+      },
+    }),
+    [
+      currentPage,
+      pageSize,
+      rowIndexLength,
+      serverPagination,
+      serverPaginationData,
+      theme.colorFillTertiary,
+      theme.colorTextTertiary,
+    ],
+  );
+
+  return useMemo(
+    () => (showNumberedColumn ? [rowNumberCol, ...colDefs] : colDefs),
+    [showNumberedColumn, rowNumberCol, colDefs],
+  );
 };