@eventcatalog/core 2.16.2 → 2.16.4

package/README.md

@@ -24,7 +24,10 @@
 
 <!-- <hr /> -->
 
-<img alt="header" src="./images/example.png" />
+<img width="745" alt="Screenshot 2024-12-13 at 09 56 05" src="https://github.com/user-attachments/assets/f537ec1f-54ee-4de1-996c-c6b72191be39" />
+
+
+
 
 <h4>Features: Documentation generator for Event Driven Architectures, Markdown driven, Document Domains/Services/Messages/Schemas and more, Content versioning, Assign Owners, Schemas, OpenAPI, MDX Components and more...</h4>
 

package/dist/analytics/analytics.cjs

@@ -37,7 +37,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.16.2";
+var version = "2.16.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-7V6DXP63.js";
-import "../chunk-5K2SMJL6.js";
+} from "../chunk-YHWKWHZA.js";
+import "../chunk-X7R2UJHK.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -106,7 +106,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.16.2";
+var version = "2.16.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-D5BKFMHD.js";
-import "../chunk-7V6DXP63.js";
-import "../chunk-5K2SMJL6.js";
+} from "../chunk-CV37NPK3.js";
+import "../chunk-YHWKWHZA.js";
+import "../chunk-X7R2UJHK.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/{chunk-D5BKFMHD.js → chunk-CV37NPK3.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-7V6DXP63.js";
+} from "./chunk-YHWKWHZA.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/{chunk-5K2SMJL6.js → chunk-X7R2UJHK.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "2.16.2";
+var version = "2.16.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/{chunk-7V6DXP63.js → chunk-YHWKWHZA.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-5K2SMJL6.js";
+} from "./chunk-X7R2UJHK.js";
 
 // src/analytics/analytics.js
 import axios from "axios";

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "2.16.2";
+var version = "2.16.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-5K2SMJL6.js";
+} from "./chunk-X7R2UJHK.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -161,7 +161,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.16.2";
+var version = "2.16.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -1,13 +1,13 @@
 import {
   log_build_default
-} from "./chunk-D5BKFMHD.js";
-import "./chunk-7V6DXP63.js";
+} from "./chunk-CV37NPK3.js";
+import "./chunk-YHWKWHZA.js";
 import {
   catalogToAstro
 } from "./chunk-55YPRY5U.js";
 import {
   VERSION
-} from "./chunk-5K2SMJL6.js";
+} from "./chunk-X7R2UJHK.js";
 import {
   generate
 } from "./chunk-YEQVKHST.js";

package/eventcatalog/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "eventcatalog",
+  "homepage": "https://github.com/event-catalog/eventcatalog",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/event-catalog/eventcatalog.git",
+    "directory": "eventcatalog/"
+  },
+  "type": "module",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "astro": "astro",
+    "build": "astro build",
+    "dev": "astro dev",
+    "preview": "astro preview",
+    "start": "astro dev"
+  },
+  "dependencies": {
+    "@astrojs/markdown-remark": "^5.3.0",
+    "@astrojs/mdx": "^3.1.8",
+    "@astrojs/react": "^3.6.2",
+    "@astrojs/tailwind": "^5.1.2",
+    "@asyncapi/avro-schema-parser": "^3.0.24",
+    "@asyncapi/parser": "^3.4.0",
+    "@asyncapi/react-component": "^2.4.3",
+    "@headlessui/react": "^2.0.3",
+    "@heroicons/react": "^2.1.3",
+    "@stoplight/json-schema-viewer": "^4.7.0",
+    "@stoplight/mosaic": "^1.53.2",
+    "@tailwindcss/typography": "^0.5.13",
+    "@tanstack/react-table": "^8.17.3",
+    "@xyflow/react": "^12.3.6",
+    "astro": "^4.16.5",
+    "astro-expressive-code": "^0.36.1",
+    "astro-pagefind": "^1.6.0",
+    "astro-seo": "^0.8.4",
+    "dagre": "^0.8.5",
+    "diff": "^7.0.0",
+    "diff2html": "^3.4.48",
+    "html-to-image": "^1.11.11",
+    "js-yaml": "^4.1.0",
+    "lodash.debounce": "^4.0.8",
+    "lodash.merge": "4.6.2",
+    "lucide-react": "^0.453.0",
+    "mermaid": "^10.9.1",
+    "prismjs": "^1.29.0",
+    "rapidoc": "^9.3.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rehype-slug": "^6.0.0",
+    "remark-gfm": "^3.0.1",
+    "semver": "7.6.3",
+    "tailwindcss": "^3.4.3",
+    "unist-util-visit": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/dagre": "^0.7.52",
+    "@types/diff": "^5.2.2",
+    "@types/js-yaml": "^4.0.9",
+    "@types/lodash.debounce": "^4.0.9",
+    "@types/lodash.merge": "4.6.9",
+    "@types/node": "^20.14.2",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/semver": "^7.5.8",
+    "typescript": "^5.4.5"
+  }
+}

package/eventcatalog/src/components/MDX/Accordion/Accordion.tsx

@@ -7,7 +7,7 @@ export default function Example({ title, children }: any) {
     <div className="border border-gray-200 rounded-md px-4 shadow-sm py-2 accordion">
       <Disclosure as="div" key={title} className="">
         {({ open }) => (
-          <>
+          <div>
             <DisclosureButton className="flex w-full items-start justify-between text-left text-gray-900">
               <span className="text-base font-semibold leading-7">{title}</span>
               <span className="ml-6 flex h-7 items-center">
@@ -21,7 +21,7 @@ export default function Example({ title, children }: any) {
             <DisclosurePanel as="dd" className="pr-12 not-prose py-4">
               <p className="text-base leading-7 text-gray-600">{children}</p>
             </DisclosurePanel>
-          </>
+          </div>
         )}
       </Disclosure>
     </div>

package/eventcatalog/src/components/MDX/AsyncAPI/AsyncAPI.astro

@@ -4,13 +4,13 @@ import Admonition from '../Admonition';
 
 <div class="mb-4">
   <Admonition type="warning">
-    <>
+    <div>
       <span class="block font-bold">{`<AsyncAPI/>`} component now deprecated</span>
       <span class="block"
         >Use the new specifications frontmatter api. <a href="https://www.eventcatalog.dev/docs/api/service-api"
           >Read more here.</a
         ></span
       >
-    </>
+    </div>
   </Admonition>
 </div>

package/eventcatalog/src/components/MDX/ChannelInformation/ChannelInformation.tsx

@@ -25,9 +25,9 @@ const ChannelParameters = (data: CollectionEntry<'channels'>['data']) => {
       <div>
         <p className="text-md">
           {data.address && (
-            <>
+            <div>
               <span className="font-semibold">Address:</span> <code className="bg-gray-100 p-1 rounded">{data.address}</code>
-            </>
+            </div>
           )}
           {data.protocols && data.protocols.length > 0 && (
             <div className="mt-2 flex items-center space-x-1">

package/eventcatalog/src/components/MDX/Flow/Flow.astro

@@ -23,12 +23,12 @@ const { nodes, edges } = await getNodesAndEdges({
 {
   !flow && (
     <Admonition type="warning">
-      <>
+      <div>
         <span class="block font-bold">{`<Flow/>`} failed to load</span>
         <span class="block">
           Tried to load flow id: {id} with version {version}. Make sure you have this flow defined in your project.
         </span>
-      </>
+      </div>
     </Admonition>
   )
 }

package/eventcatalog/src/components/MDX/NodeGraph/DownloadButton.tsx

@@ -1,4 +1,4 @@
-import { Panel, useReactFlow, getNodesBounds, getViewportForBounds } from 'reactflow';
+import { Panel, useReactFlow, getNodesBounds, getViewportForBounds } from '@xyflow/react';
 import { toPng } from 'html-to-image';
 import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
 
@@ -19,7 +19,7 @@ function DownloadButton({ filename, addPadding = true }: { filename?: string; ad
     const nodesBounds = getNodesBounds(getNodes());
     const width = imageWidth > nodesBounds.width ? imageWidth : nodesBounds.width;
     const height = imageHeight > nodesBounds.height ? imageHeight : nodesBounds.height;
-    const viewport = getViewportForBounds(nodesBounds, width, height, 0.5, 2);
+    const viewport = getViewportForBounds(nodesBounds, width, height, 0.5, 2, 0);
 
     // Hide the button
     // @ts-ignore

package/eventcatalog/src/components/MDX/NodeGraph/Edges/AnimatedMessageEdge.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { BaseEdge, getBezierPath } from 'reactflow';
+import { BaseEdge, getBezierPath } from '@xyflow/react';
 
 const AnimatedMessageEdge = ({
   id,
@@ -44,6 +44,7 @@ const AnimatedMessageEdge = ({
   const randomDelay = useMemo(() => Math.random() * 1, []);
 
   return (
+    // @ts-ignore
     <>
       <BaseEdge id={id} path={edgePath} markerEnd={markerEnd} />
       {/* Circle Icon */}

package/eventcatalog/src/components/MDX/NodeGraph/NodeGraph.astro

@@ -6,7 +6,10 @@ import {
   getNodesAndEdgesForEvents,
   getNodesAndEdgesForQueries,
 } from '@utils/node-graphs/message-node-graph';
-import { getNodesAndEdges as getNodesAndEdgesForDomain } from '@utils/node-graphs/domains-node-graph';
+import {
+  getNodesAndEdges as getNodesAndEdgesForDomain,
+  getNodesAndEdgesForDomainContextMap,
+} from '@utils/node-graphs/domains-node-graph';
 import { getNodesAndEdges as getNodesAndEdgesForFlows } from '@utils/node-graphs/flows-node-graph';
 
 interface Props {
@@ -24,8 +27,10 @@ interface Props {
 }
 
 const { id, collection, title, mode = 'simple', linkTo = 'docs', version, href, linksToVisualiser } = Astro.props;
+
 let nodes = [],
   edges = [];
+
 const getNodesAndEdgesFunctions = {
   services: getNodesAndEdgesForService,
   events: getNodesAndEdgesForEvents,
@@ -47,6 +52,12 @@ if (collection in getNodesAndEdgesFunctions) {
   nodes = fetchedNodes;
   edges = fetchedEdges;
 }
+
+if (collection === 'domain-context-map') {
+  const { nodes: fetchedNodes, edges: fetchedEdges } = await getNodesAndEdgesForDomainContextMap({});
+  nodes = fetchedNodes;
+  edges = fetchedEdges;
+}
 ---
 
 <div>

package/eventcatalog/src/components/MDX/NodeGraph/NodeGraph.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState, useCallback, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import ReactFlow, {
+import {
+  ReactFlow,
   Background,
   ConnectionLineType,
   Controls,
@@ -11,8 +12,8 @@ import ReactFlow, {
   type Edge,
   type Node,
   useReactFlow,
-} from 'reactflow';
-import 'reactflow/dist/style.css';
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
 
 // Nodes and edges
 import ServiceNode from './Nodes/Service';
@@ -105,10 +106,10 @@ const NodeGraphBuilder = ({
     (_: any, node: Node) => {
       if (linksToVisualiser) {
         if (node.type === 'events' || node.type === 'commands') {
-          navigate(getVisualiserUrlForCollection(node.data.message));
+          navigate(getVisualiserUrlForCollection(node.data.message as CollectionEntry<CollectionTypes>));
         }
         if (node.type === 'services') {
-          navigate(getVisualiserUrlForCollection(node.data.service));
+          navigate(getVisualiserUrlForCollection(node.data.service as CollectionEntry<'services'>));
         }
         return;
       }

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Channel.tsx

@@ -2,7 +2,7 @@ import { BoltIcon } from '@heroicons/react/16/solid';
 import { ArrowsRightLeftIcon } from '@heroicons/react/20/solid';
 import type { CollectionMessageTypes, CollectionTypes } from '@types';
 import type { CollectionEntry } from 'astro:content';
-import { Handle } from 'reactflow';
+import { Handle } from '@xyflow/react';
 
 interface Data {
   title: string;

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Command.tsx

@@ -1,6 +1,6 @@
 import { ChatBubbleLeftIcon } from '@heroicons/react/16/solid';
 import type { CollectionEntry } from 'astro:content';
-import { Handle } from 'reactflow';
+import { Handle } from '@xyflow/react';
 
 interface Data {
   title: string;

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Event.tsx

@@ -1,6 +1,6 @@
 import { BoltIcon } from '@heroicons/react/16/solid';
 import type { CollectionEntry } from 'astro:content';
-import { Handle } from 'reactflow';
+import { Handle } from '@xyflow/react';
 
 interface Data {
   title: string;

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/ExternalSystem.tsx

@@ -1,7 +1,7 @@
 import { ServerIcon } from '@heroicons/react/16/solid';
 import { GlobeAmericasIcon } from '@heroicons/react/20/solid';
 import type { CollectionEntry } from 'astro:content';
-import { Handle } from 'reactflow';
+import { Handle } from '@xyflow/react';
 
 interface Data {
   label: string;

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Query.tsx

@@ -1,6 +1,6 @@
 import { MagnifyingGlassIcon } from '@heroicons/react/16/solid';
 import type { CollectionEntry } from 'astro:content';
-import { Handle } from 'reactflow';
+import { Handle } from '@xyflow/react';
 
 interface Data {
   title: string;

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Service.tsx

@@ -1,6 +1,6 @@
 import { ServerIcon } from '@heroicons/react/16/solid';
 import type { CollectionEntry } from 'astro:content';
-import { Handle } from 'reactflow';
+import { Handle } from '@xyflow/react';
 
 interface Data {
   label: string;

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Step.tsx

@@ -1,4 +1,4 @@
-import { Handle } from 'reactflow';
+import { Handle } from '@xyflow/react';
 
 interface Data {
   title: string;
@@ -45,7 +45,7 @@ export default function StepNode({ data, sourcePosition, targetPosition }: any)
         )}
 
         {summary && (
-          <>
+          <div>
             <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
               <span className="text-xs font-bold block pb-0.5">{title}</span>
             </div>
@@ -56,7 +56,7 @@ export default function StepNode({ data, sourcePosition, targetPosition }: any)
                 </div>
               </div>
             )}
-          </>
+          </div>
         )}
       </div>
     </div>

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/User.tsx

@@ -1,5 +1,5 @@
 import { UserIcon } from '@heroicons/react/20/solid';
-import { Handle } from 'reactflow';
+import { Handle } from '@xyflow/react';
 
 interface Data {
   title: string;
@@ -57,7 +57,7 @@ export default function UserNode({ data, sourcePosition, targetPosition }: any)
         )}
 
         {summary && mode === 'full' && (
-          <>
+          <div>
             <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
               <span className="text-xs font-bold block pb-0.5">{name}</span>
             </div>
@@ -68,7 +68,7 @@ export default function UserNode({ data, sourcePosition, targetPosition }: any)
                 </div>
               </div>
             )}
-          </>
+          </div>
         )}
       </div>
     </div>

package/eventcatalog/src/components/MDX/OpenAPI/OpenAPI.astro

@@ -4,13 +4,13 @@ import Admonition from '../Admonition';
 
 <div class="mb-4">
   <Admonition type="warning">
-    <>
+    <div>
       <span class="block font-bold">{`<OpenAPI/>`} component now deprecated</span>
       <span class="block"
         >Use the new specifications frontmatter api. <a href="https://www.eventcatalog.dev/docs/api/service-api"
           >Read more here.</a
         ></span
       >
-    </>
+    </div>
   </Admonition>
 </div>

package/eventcatalog/src/components/MDX/SchemaViewer/SchemaViewer.astro

@@ -82,10 +82,10 @@ try {
           {/* User has tried to load the schema, but it was not found on file system */}
           {!schema.exists && (
             <Admonition type="warning">
-              <>
+              <div>
                 <span class="block font-bold">{`<SchemaViewer/>`} failed to load</span>
                 <span class="block">Tried to load schema from {schema.schemaPath}, but no schema can be found</span>
-              </>
+              </div>
             </Admonition>
           )}
         </div>

package/eventcatalog/src/components/SideBars/CatalogResourcesSideBar/index.tsx

@@ -6,7 +6,16 @@ import { getIconForCollection as getIconForCollectionOriginal } from '@utils/col
 
 const STORAGE_KEY = 'EventCatalog:catalogSidebarCollapsedGroups';
 
-const CatalogResourcesSideBar = ({ resources, currentPath }: any) => {
+interface CatalogResourcesSideBarProps {
+  resources: any;
+  currentPath: string;
+}
+
+const CatalogResourcesSideBar: React.FC<CatalogResourcesSideBarProps> = ({ resources, currentPath }) => {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
   const [data, setData] = useState(resources);
   const [searchQuery, setSearchQuery] = useState('');
   const [isInitialized, setIsInitialized] = useState(false);

package/eventcatalog/src/components/Tables/Table.tsx

@@ -21,7 +21,7 @@ import type { CollectionTypes } from '@types';
 declare module '@tanstack/react-table' {
   // @ts-ignore
   interface ColumnMeta<TData extends RowData, TValue> {
-    filterVariant?: 'collection' | 'name';
+    filterVariant?: 'collection' | 'name' | 'badges';
     collectionFilterKey?: string;
     showFilter?: boolean;
     className?: string;
@@ -67,7 +67,7 @@ export const Table = ({
   });
 
   return (
-    <>
+    <div>
       {/* <div className='text-right text-gray-400'>{table.getPrePaginationRowModel().rows.length} results</div> */}
       <div className=" bg-gray-100/20 rounded-md border-2 border-gray-200 shadow-sm ">
         <table className="min-w-full divide-y divide-gray-200 rounded-md ">
@@ -171,7 +171,7 @@ export const Table = ({
           </select>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 
@@ -211,11 +211,21 @@ function Filter({ column }: { column: Column<any, unknown> }) {
 
       return uniqueItemsInList.sort().slice(0, 2000);
     }
+    if (filterVariant === 'badges') {
+      const allBadges = column.getFacetedUniqueValues().keys();
+      // join all badges into a single array
+      const allBadgesArray = Array.from(allBadges)
+        .flat()
+        .filter((b) => !!b);
+      const allBadgesString = allBadgesArray.map((badge) => badge.content);
+      const uniqueBadges = Array.from(new Set(allBadgesString));
+      return uniqueBadges.sort().slice(0, 2000);
+    }
     return Array.from(column.getFacetedUniqueValues().keys()).sort().slice(0, 2000);
   }, [column.getFacetedUniqueValues(), filterVariant]);
 
   return (
-    <>
+    <div>
       {/* Autocomplete suggestions from faceted values feature */}
       <datalist id={column.id + 'list'}>
         {sortedUniqueValues.map((value: any, index) => (
@@ -231,6 +241,6 @@ function Filter({ column }: { column: Column<any, unknown> }) {
         list={column.id + 'list'}
       />
       <div className="h-1" />
-    </>
+    </div>
   );
 }

package/eventcatalog/src/components/Tables/columns/DomainTableColumns.tsx

@@ -2,8 +2,10 @@ import { ServerIcon } from '@heroicons/react/20/solid';
 import { RectangleGroupIcon } from '@heroicons/react/20/solid';
 import { createColumnHelper } from '@tanstack/react-table';
 import type { CollectionEntry } from 'astro:content';
-import { filterByName, filterCollectionByName } from '../filters/custom-filters';
+import { filterByBadge, filterByName, filterCollectionByName } from '../filters/custom-filters';
 import { buildUrl } from '@utils/url-builder';
+import { Tag } from 'lucide-react';
+import { createBadgesColumn } from './SharedColumns';
 
 const columnHelper = createColumnHelper<CollectionEntry<'domains'>>();
 
@@ -40,14 +42,6 @@ export const columns = () => [
     },
     filterFn: filterByName,
   }),
-  // columnHelper.accessor('data.version', {
-  //   header: () => <span>Version</span>,
-  //   cell: (info) => {
-  //     const service = info.row.original;
-  //     return <div className="text-left font-light">{`v${info.getValue()} ${service.data.latestVersion === service.data.version ? '(latest)': ''}`}</div>
-  //   },
-  //   footer: (info) => info.column.id,
-  // }),
   columnHelper.accessor('data.summary', {
     id: 'summary',
     header: () => 'Summary',
@@ -96,9 +90,9 @@ export const columns = () => [
         </ul>
       );
     },
-    // footer: (info) => info.column.id,
     filterFn: filterCollectionByName('services'),
   }),
+  createBadgesColumn(columnHelper),
   columnHelper.accessor('data.name', {
     header: () => <span />,
     cell: (info) => {

package/eventcatalog/src/components/Tables/columns/FlowTableColumns.tsx

@@ -1,10 +1,9 @@
-import { ServerIcon } from '@heroicons/react/20/solid';
-import { RectangleGroupIcon } from '@heroicons/react/20/solid';
 import { createColumnHelper } from '@tanstack/react-table';
 import type { CollectionEntry } from 'astro:content';
-import { filterByName, filterCollectionByName } from '../filters/custom-filters';
+import { filterByName } from '../filters/custom-filters';
 import { buildUrl } from '@utils/url-builder';
 import { QueueListIcon } from '@heroicons/react/24/solid';
+import { createBadgesColumn } from './SharedColumns';
 
 const columnHelper = createColumnHelper<CollectionEntry<'flows'>>();
 
@@ -61,6 +60,7 @@ export const columns = () => [
       className: 'max-w-md',
     },
   }),
+  createBadgesColumn(columnHelper),
   columnHelper.accessor('data.name', {
     header: () => <span />,
     cell: (info) => {