PanelEdit: Adds a table view toggle to quickly view data in table form (#33753)

* PanelEdit: Adds raw data toggle to quickly be able to view data in table form

* With transforms

* Updated name for toggle

* refactoring and added e2e test

* Support options

* fixing e2e

public/app/features/dashboard/components/PanelEditor/PanelEditorTableView.tsx

@@ -0,0 +1,40 @@
+import { PanelChrome } from '@grafana/ui';
+import { PanelRenderer } from 'app/features/panel/PanelRenderer';
+import React, { useState } from 'react';
+import { PanelModel } from '../../state';
+import { usePanelLatestData } from './usePanelLatestData';
+import { PanelOptions } from 'app/plugins/panel/table/models.gen';
+
+interface Props {
+  width: number;
+  height: number;
+  panel: PanelModel;
+}
+
+export function PanelEditorTableView({ width, height, panel }: Props) {
+  const { data } = usePanelLatestData(panel, { withTransforms: true, withFieldConfig: false }, true);
+  const [options, setOptions] = useState<PanelOptions>({
+    frameIndex: 0,
+    showHeader: true,
+  });
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <PanelChrome width={width} height={height} padding="none">
+      {(innerWidth, innerHeight) => (
+        <PanelRenderer
+          title="Raw data"
+          pluginId="table"
+          width={innerWidth}
+          height={innerHeight}
+          data={data}
+          options={options}
+          onOptionsChange={setOptions}
+        />
+      )}
+    </PanelChrome>
+  );
+}