Simple table with data from external API

src/codegen/dataTypes/GenerateIntersection.ts

@@ -20,7 +20,7 @@ export class GenerateIntersection<U extends CodeGenerator<any>[]> extends Descri
   }
 
   toTypeScriptDefinition(symbol: string | undefined): string {
-    const out = this.types.map((type) => type.toTypeScript()).join(' & ');
+    const out = this.types.map((type) => `(${type.toTypeScript()})`).join(' & ');
 
     return symbol ? `type ${symbol} = ${out};` : out;
   }

src/features/externalApi/useExternalApi.ts

@@ -48,7 +48,7 @@ export function useExternalApis(ids: string[]): ExternalApisResult {
   });
 }
 
-export function useExternalApi(id: string): unknown {
+export function useExternalApi(id: string) {
   const instanceId = useLaxInstanceId();
 
   return useQuery(getExternalApiQueryDef({ externalApiId: id, instanceId }));

src/layout/GenericComponent.tsx

@@ -63,7 +63,7 @@ function _GenericComponent<Type extends CompTypes = CompTypes>({
   if (generatorErrors && Object.keys(generatorErrors).length > 0) {
     return (
       <ErrorList
-        node={node}
+        nodeId={node.id}
         errors={Object.keys(generatorErrors)}
       />
     );
@@ -256,8 +256,7 @@ const gridToClasses = (labelGrid: IGridStyling | undefined, classes: { [key: str
   };
 };
 
-const ErrorList = ({ node, errors }: { node: LayoutNode; errors: string[] }) => {
-  const id = node.id;
+export const ErrorList = ({ nodeId, errors }: { nodeId: string; errors: string[] }) => {
   const isDev = useIsDev();
   if (!isDev) {
     return null;
@@ -268,7 +267,7 @@ const ErrorList = ({ node, errors }: { node: LayoutNode; errors: string[] }) =>
       <h3>
         <Lang
           id={'config_error.component_has_errors'}
-          params={[id]}
+          params={[nodeId]}
         />
       </h3>
       <ul>

src/layout/SimpleTable/SimpleTableComponent.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+
+import { Link, Table } from '@digdir/designsystemet-react';
+import dot from 'dot-object';
+
+import { Caption } from 'src/components/form/Caption';
+import { useExternalApi } from 'src/features/externalApi/useExternalApi';
+import { ErrorList } from 'src/layout/GenericComponent';
+import { useNodeItem } from 'src/utils/layout/useNodeItem';
+import type { PropsFromGenericComponent } from 'src/layout';
+import type { ColumnConfig } from 'src/layout/SimpleTable/config.generated';
+
+export const SimpleTableComponent = ({ node }: PropsFromGenericComponent<'SimpleTable'>) => {
+  const nodeItem = useNodeItem(node);
+
+  const { data: externalApi } = useExternalApi(nodeItem.data.id);
+  const data: unknown = dot.pick(nodeItem.data.path, externalApi);
+
+  if (!isArrayOfObjects(data)) {
+    return (
+      <ErrorList
+        nodeId={node.id}
+        errors={['Tabelldata må være en liste av objekter']}
+      />
+    );
+  }
+
+  return (
+    <Table width='100%'>
+      <Caption title={nodeItem.title} />
+      <Table.Head>
+        <Table.Row>
+          {nodeItem.columns.map((column) => (
+            <Table.HeaderCell key={column.id}>{column.title}</Table.HeaderCell>
+          ))}
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        {data.length === 0 && (
+          <Table.Row>
+            <Table.Cell colSpan={nodeItem.columns.length}>Ingen data</Table.Cell>
+          </Table.Row>
+        )}
+        {data.map((row) => (
+          <Table.Row key={String(row)}>
+            {nodeItem.columns.map((column, idx) => (
+              <Table.Cell key={`${column.id}[${idx}]`}>{renderCell(column.component, row)}</Table.Cell>
+            ))}
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  );
+};
+
+function renderCell(component: ColumnConfig['component'], row: Record<string, unknown>) {
+  if (component.type === 'Link') {
+    return (
+      <Link
+        href={dot.pick(component.hrefPath, row)}
+        target='_blank'
+      >
+        {dot.pick(component.textPath, row)}
+      </Link>
+    );
+  }
+
+  // FIXME: what if the path does not exist and the resulting value is undefined?
+  // Should we display an error, or is this a valid use case in production?
+  return dot.pick(component.valuePath, row);
+}
+
+function isArrayOfObjects(data: unknown): data is Record<string, unknown>[] {
+  return Array.isArray(data) && data.every((row: unknown) => !!row && typeof row === 'object' && !Array.isArray(row));
+}

src/layout/SimpleTable/config.ts

@@ -0,0 +1,52 @@
+import { CG } from 'src/codegen/CG';
+import { CompCategory } from 'src/layout/common';
+
+export const Config = new CG.component({
+  category: CompCategory.Presentation,
+  capabilities: {
+    renderInTable: false,
+    renderInButtonGroup: false,
+    renderInAccordion: false,
+    renderInAccordionGroup: false,
+    renderInCards: false,
+    renderInCardsMedia: false,
+    renderInTabs: true,
+  },
+  functionality: {
+    customExpressions: false,
+  },
+})
+  .extends(CG.common('LabeledComponentProps'))
+  .addProperty(new CG.prop('title', new CG.str()))
+  .addProperty(
+    new CG.prop(
+      'columns',
+      new CG.arr(
+        new CG.obj(
+          new CG.prop('id', new CG.str()),
+          new CG.prop('title', new CG.str()),
+          new CG.prop(
+            'component',
+            new CG.union(
+              new CG.obj(new CG.prop('type', new CG.const('Text')), new CG.prop('valuePath', new CG.str())),
+              new CG.obj(
+                new CG.prop('type', new CG.const('Link')),
+                new CG.prop('hrefPath', new CG.str()),
+                new CG.prop('textPath', new CG.str()),
+              ),
+            ).setUnionType('discriminated'),
+          ),
+        ).exportAs('ColumnConfig'),
+      ),
+    ),
+  )
+  .addProperty(
+    new CG.prop(
+      'data',
+      new CG.obj(
+        new CG.prop('type', new CG.const('externalApi')),
+        new CG.prop('id', new CG.str()),
+        new CG.prop('path', new CG.str()),
+      ).exportAs('DataConfig'),
+    ),
+  );

src/layout/SimpleTable/index.tsx

@@ -0,0 +1,14 @@
+import React, { forwardRef } from 'react';
+import type { JSX } from 'react';
+
+import { SimpleTableDef } from 'src/layout/SimpleTable/config.def.generated';
+import { SimpleTableComponent } from 'src/layout/SimpleTable/SimpleTableComponent';
+import type { PropsFromGenericComponent } from 'src/layout';
+
+export class SimpleTable extends SimpleTableDef {
+  render = forwardRef<HTMLElement, PropsFromGenericComponent<'SimpleTable'>>(
+    function LayoutComponentSimpleTableRender(props, _): JSX.Element | null {
+      return <SimpleTableComponent {...props} />;
+    },
+  );
+}