Add headertext prop

Signed-off-by: Tyler Ohlsen <[email protected]>
ohltyler · Dec 17, 2024 · d2b79fe · d2b79fe
1 parent e0022d6
commit d2b79fe
Showing 1 changed file with 31 additions and 10 deletions.
diff --git a/public/general_components/jsonpath_examples_table.tsx b/public/general_components/jsonpath_examples_table.tsx
@@ -4,9 +4,18 @@
  */
 
 import React from 'react';
-import { EuiInMemoryTable, EuiCode, EuiText } from '@elastic/eui';
+import { isEmpty } from 'lodash';
+import {
+  EuiInMemoryTable,
+  EuiCode,
+  EuiText,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '@elastic/eui';
 
-interface JsonPathExamplesTableProps {}
+interface JsonPathExamplesTableProps {
+  headerText?: string;
+}
 
 type JSONPathExample = {
   expression: string;
@@ -47,16 +56,28 @@ const columns = [
 ];
 
 /**
- * A stateless component containing JSONPath examples in a table.
+ * A stateless component containing JSONPath examples in a table. Optionally takes in
+ * a header text for some more contextual information.
  */
 export function JsonPathExamplesTable(props: JsonPathExamplesTableProps) {
   return (
-    <EuiInMemoryTable<JSONPathExample>
-      items={examples}
-      columns={columns}
-      pagination={false}
-      sorting={false}
-      hasActions={false}
-    />
+    <EuiFlexItem style={{ width: '20vw' }}>
+      <EuiFlexGroup direction="column" gutterSize="xs">
+        {!isEmpty(props.headerText) && (
+          <EuiFlexItem grow={false}>
+            <EuiText size="s">{props.headerText}</EuiText>
+          </EuiFlexItem>
+        )}
+        <EuiFlexItem>
+          <EuiInMemoryTable<JSONPathExample>
+            items={examples}
+            columns={columns}
+            pagination={false}
+            sorting={false}
+            hasActions={false}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlexItem>
   );
 }