diff --git a/public/app/plugins/datasource/testdata/components/CSVContentEditor.tsx b/public/app/plugins/datasource/testdata/components/CSVContentEditor.tsx
index a2fa57694d2..ed645009971 100644
--- a/public/app/plugins/datasource/testdata/components/CSVContentEditor.tsx
+++ b/public/app/plugins/datasource/testdata/components/CSVContentEditor.tsx
@@ -1,21 +1,21 @@
-import React, { ChangeEvent } from 'react';
-import { InlineField, TextArea } from '@grafana/ui';
+import React from 'react';
+import { CodeEditor } from '@grafana/ui';
 import { EditorProps } from '../QueryEditor';
 
 export const CSVContentEditor = ({ onChange, query }: EditorProps) => {
-  const onContent = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    onChange({ ...query, csvContent: e.currentTarget.value });
+  const onSaveCSV = (csvContent: string) => {
+    onChange({ ...query, csvContent });
   };
 
   return (
-    <InlineField label="CSV" labelWidth={14}>
-      <TextArea
-        width="100%"
-        rows={10}
-        onBlur={onContent}
-        placeholder="CSV content"
-        defaultValue={query.csvContent ?? ''}
-      />
-    </InlineField>
+    <CodeEditor
+      height={300}
+      language="csv"
+      value={query.csvContent ?? ''}
+      onBlur={onSaveCSV}
+      onSave={onSaveCSV}
+      showMiniMap={false}
+      showLineNumbers={true}
+    />
   );
 };