TableNG: Improve sub table styling

packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import { ReactNode, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { TableCellDisplayMode } from '@grafana/schema';
+import { TableAutoCellOptions, TableCellDisplayMode } from '@grafana/schema';
 
 import { useStyles2 } from '../../../../themes';
 import { IconButton } from '../../../IconButton/IconButton';
@@ -39,14 +39,13 @@ export function TableCellNG(props: any) {
     cellInspect,
   } = props;
   const { config: fieldConfig } = field;
-  const { type: cellType } = fieldConfig.custom.cellOptions;
+  const defaultCellOptions: TableAutoCellOptions = { type: TableCellDisplayMode.Auto };
+  const cellOptions = fieldConfig.custom?.cellOptions ?? defaultCellOptions;
+  const { type: cellType } = cellOptions;
 
   const isRightAligned = getTextAlign(field) === 'flex-end';
   const displayValue = field.display!(value);
-  const colors = useMemo(
-    () => getCellColors(theme, fieldConfig.custom.cellOptions, displayValue),
-    [theme, fieldConfig.custom.cellOptions, displayValue]
-  );
+  const colors = useMemo(() => getCellColors(theme, cellOptions, displayValue), [theme, cellOptions, displayValue]);
   const styles = useStyles2(getStyles, isRightAligned, colors);
 
   // TODO
@@ -100,7 +99,7 @@ export function TableCellNG(props: any) {
     case TableCellDisplayMode.Image:
       cell = (
         <ImageCell
-          cellOptions={fieldConfig.custom.cellOptions}
+          cellOptions={cellOptions}
           field={field}
           height={height}
           justifyContent={justifyContent}
@@ -117,13 +116,7 @@ export function TableCellNG(props: any) {
     case TableCellDisplayMode.Auto:
     default:
       cell = (
-        <AutoCell
-          value={value}
-          field={field}
-          theme={theme}
-          justifyContent={justifyContent}
-          cellOptions={fieldConfig.custom.cellOptions}
-        />
+        <AutoCell value={value} field={field} theme={theme} justifyContent={justifyContent} cellOptions={cellOptions} />
       );
   }
 

packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx

@@ -234,7 +234,7 @@ export function TableNG(props: TableNGProps) {
     return records;
   }, []);
   const calcsRef = useRef<string[]>([]);
-  const mapFrameToDataGrid = (main: DataFrame, calcsRef: React.MutableRefObject<string[]>, subTable?: boolean) => {
+  const mapFrameToDataGrid = (main: DataFrame, calcsRef: React.MutableRefObject<string[]>) => {
     const columns: TableColumn[] = [];
 
     const hasNestedFrames = getIsNestedTable(main);
@@ -282,7 +282,7 @@ export function TableNG(props: TableNGProps) {
           // If it's a child, render entire DataGrid at first column position
           let expandedColumns: TableColumn[] = [];
           let expandedRecords: Array<Record<string, string>> = [];
-          expandedColumns = mapFrameToDataGrid(row.data, calcsRef, true);
+          expandedColumns = mapFrameToDataGrid(row.data, calcsRef);
           expandedRecords = frameToRecords(row.data);
           // TODO add renderHeaderCell HeaderCell's here and handle all features
           return (
@@ -290,7 +290,7 @@ export function TableNG(props: TableNGProps) {
               rows={expandedRecords}
               columns={expandedColumns}
               rowHeight={defaultRowHeight}
-              style={{ height: '100%', overflow: 'visible' }}
+              style={{ height: '100%', overflow: 'visible', marginLeft: EXPANDER_WIDTH }}
               headerRowHeight={row.data.meta?.custom?.noHeader ? 0 : undefined}
             />
           );
@@ -322,42 +322,40 @@ export function TableNG(props: TableNGProps) {
         name: field.name,
         field,
         cellClass: styles.cell,
-        renderCell: subTable
-          ? undefined
-          : (props: any) => {
-              const { row, rowIdx } = props;
-              const value = row[key];
-              // Cell level rendering here
-              return (
-                <TableCellNG
-                  key={key}
-                  value={value}
-                  field={field}
-                  theme={theme}
-                  timeRange={timeRange}
-                  height={defaultRowHeight}
-                  justifyContent={justifyColumnContent}
-                  rowIdx={rowIdx}
-                  shouldTextOverflow={() =>
-                    shouldTextOverflow(
-                      key,
-                      row,
-                      columnTypes,
-                      headerCellRefs,
-                      osContext,
-                      defaultLineHeight,
-                      defaultRowHeight,
-                      DEFAULT_CELL_PADDING,
-                      textWrap,
-                      cellInspect
-                    )
-                  }
-                  setIsInspecting={setIsInspecting}
-                  setContextMenuProps={setContextMenuProps}
-                  cellInspect={cellInspect}
-                />
-              );
-            },
+        renderCell: (props: any) => {
+          const { row, rowIdx } = props;
+          const value = row[key];
+          // Cell level rendering here
+          return (
+            <TableCellNG
+              key={key}
+              value={value}
+              field={field}
+              theme={theme}
+              timeRange={timeRange}
+              height={defaultRowHeight}
+              justifyContent={justifyColumnContent}
+              rowIdx={rowIdx}
+              shouldTextOverflow={() =>
+                shouldTextOverflow(
+                  key,
+                  row,
+                  columnTypes,
+                  headerCellRefs,
+                  osContext,
+                  defaultLineHeight,
+                  defaultRowHeight,
+                  DEFAULT_CELL_PADDING,
+                  textWrap,
+                  cellInspect
+                )
+              }
+              setIsInspecting={setIsInspecting}
+              setContextMenuProps={setContextMenuProps}
+              cellInspect={cellInspect}
+            />
+          );
+        },
         renderSummaryCell: () => {
           if (isCountRowsSet && fieldIndex === 0) {
             return (