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

import React from 'react';
import { css, cx } from '@emotion/css';
import { isString } from 'lodash';
import { TableCellProps, TableFieldOptions } from './types';
import { CellActions } from './CellActions';

export function JSONViewCell(props: TableCellProps): JSX.Element {
  const { cell, tableStyles, cellProps, field } = props;
  const inspectEnabled = Boolean((field.config.custom as TableFieldOptions)?.inspect);
  const txt = css`
    cursor: pointer;
    font-family: monospace;
  `;

  let value = cell.value;
  let displayValue = value;

  if (isString(value)) {
    try {
      value = JSON.parse(value);
    } catch {} // ignore errors
  } else {
    displayValue = JSON.stringify(value, null, ' ');
  }

  return (
    <div {...cellProps} className={inspectEnabled ? tableStyles.cellContainerNoOverflow : tableStyles.cellContainer}>
      <div className={cx(tableStyles.cellText, txt)}>{displayValue}</div>
      {inspectEnabled && <CellActions {...props} previewMode="code" />}
    </div>
  );
}