@fastnd/components 1.0.27 → 1.0.28

package/dist/components/ColumnConfigPopover/ColumnConfigPopover.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+interface ColumnItem {
+    key: string;
+    label: string;
+}
+interface ColumnConfigPopoverProps {
+    columns: ColumnItem[];
+    visibleColumns: Set<string>;
+    onVisibilityChange: (columnKey: string, visible: boolean) => void;
+    onReorder: (newOrder: string[]) => void;
+    minVisible?: number;
+    className?: string;
+    children?: React.ReactNode;
+}
+declare function ColumnConfigPopover({ columns, visibleColumns, onVisibilityChange, onReorder, minVisible, className, children, }: ColumnConfigPopoverProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ColumnConfigPopover {
+    var displayName: string;
+}
+export { ColumnConfigPopover };
+export type { ColumnConfigPopoverProps, ColumnItem };

package/dist/components/DoubleTextCell/DoubleTextCell.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface DoubleTextCellProps extends React.ComponentProps<'div'> {
+    primary: string;
+    secondary?: string;
+    clampLines?: number;
+}
+declare const DoubleTextCell: React.ForwardRefExoticComponent<Omit<DoubleTextCellProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { DoubleTextCell };
+export type { DoubleTextCellProps };

package/dist/components/ProgressCircle/ProgressCircle.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface ProgressCircleProps extends React.ComponentProps<'div'> {
+    value: number;
+    size?: number;
+    strokeWidth?: number;
+}
+declare const ProgressCircle: React.ForwardRefExoticComponent<Omit<ProgressCircleProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { ProgressCircle };
+export type { ProgressCircleProps };

package/dist/components/index.d.ts

@@ -1,4 +1,7 @@
+export * from './ColumnConfigPopover/ColumnConfigPopover';
+export * from './DoubleTextCell/DoubleTextCell';
 export * from './FavoriteButton/FavoriteButton';
+export * from './ProgressCircle/ProgressCircle';
 export * from './ui/accordion';
 export * from './ui/alert';
 export * from './ui/alert-dialog';

package/dist/components/ui/badge.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    variant?: "link" | "secondary" | "default" | "destructive" | "outline" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

package/dist/components/ui/button.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    variant?: "link" | "secondary" | "default" | "destructive" | "outline" | "ghost" | null | undefined;
     size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {

package/dist/components/ui/input-group.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from "class-variance-authority";
 import { Button } from "@/components/ui/button";
 declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-    align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
+    align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): import("react/jsx-runtime").JSX.Element;
 declare const inputGroupButtonVariants: (props?: ({

package/dist/components/ui/item.d.ts

@@ -11,7 +11,7 @@ declare function Item({ className, variant, size, asChild, ...props }: React.Com
     asChild?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 declare const itemMediaVariants: (props?: ({
-    variant?: "default" | "icon" | "image" | null | undefined;
+    variant?: "image" | "default" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function ItemMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): import("react/jsx-runtime").JSX.Element;
 declare function ItemContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/tabs.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from "class-variance-authority";
 import { Tabs as TabsPrimitive } from "radix-ui";
 declare function Tabs({ className, orientation, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare const tabsListVariants: (props?: ({
-    variant?: "default" | "line" | null | undefined;
+    variant?: "line" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function TabsList({ className, variant, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>): import("react/jsx-runtime").JSX.Element;
 declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;

package/dist/examples/data-visualization/DataGrid/DataGrid.tsx

@@ -0,0 +1,136 @@
+import * as React from 'react'
+import { useMemo } from 'react'
+import { SearchX } from 'lucide-react'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
+import { cn } from '@/lib/utils'
+import { useDataGridState } from '../hooks/use-data-grid-state'
+import { DataGridToolbar } from '../DataGridToolbar/DataGridToolbar'
+import { DataGridTableView } from '../DataGridTableView/DataGridTableView'
+import { DataGridListView } from '../DataGridListView/DataGridListView'
+import { DataGridCardView } from '../DataGridCardView/DataGridCardView'
+import { DataGridPagination } from '../DataGridPagination/DataGridPagination'
+import type { DomainConfig } from '../types'
+
+interface DataGridProps extends React.ComponentProps<'div'> {
+  domainConfig: DomainConfig
+}
+
+const DataGrid = React.forwardRef<HTMLDivElement, DataGridProps>(
+  ({ domainConfig, className, ...props }, ref) => {
+    const state = useDataGridState(domainConfig)
+
+    const filterOptions = useMemo(() => {
+      const opts: Record<string, string[]> = {}
+      for (const [key, config] of Object.entries(domainConfig.columns)) {
+        if (!config.filterable) continue
+        const uniqueValues = [
+          ...new Set(
+            domainConfig.data
+              .map((row) => String(row[key] ?? ''))
+              .filter(Boolean)
+          ),
+        ].sort()
+        opts[key] = uniqueValues
+      }
+      return opts
+    }, [domainConfig])
+
+    return (
+      <div
+        ref={ref}
+        data-slot="data-grid"
+        className={cn('flex flex-col border border-border rounded-lg', className)}
+        {...props}
+      >
+        <DataGridToolbar
+          currentView={state.currentView}
+          onViewChange={state.setCurrentView}
+          columns={state.columnConfig}
+          columnOrder={state.columnOrder}
+          visibleColumns={state.visibleColumns}
+          filters={state.filters}
+          filterOptions={filterOptions}
+          onFilterChange={state.setFilter}
+          searchQuery={state.searchQuery}
+          onSearchChange={state.setSearchQuery}
+          hasActiveFilters={state.hasActiveFilters}
+          onResetFilters={state.resetFilters}
+          onToggleColumnVisibility={state.toggleColumnVisibility}
+          onReorderColumns={state.reorderColumns}
+        />
+
+        {state.filteredData.length === 0 ? (
+          <Empty className="py-16">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <SearchX />
+              </EmptyMedia>
+              <EmptyTitle>Keine Ergebnisse</EmptyTitle>
+              <EmptyDescription>
+                Es wurden keine Einträge gefunden, die den aktuellen Filtern entsprechen.
+              </EmptyDescription>
+            </EmptyHeader>
+          </Empty>
+        ) : (
+          <>
+            {state.currentView === 'table' && (
+              <DataGridTableView
+                data={state.pagedData}
+                columns={state.orderedVisibleColumns}
+                sortColumn={state.sortColumn}
+                sortDirection={state.sortDirection}
+                onToggleSort={state.toggleSort}
+                expandedRows={state.expandedRows}
+                onToggleExpand={state.toggleExpand}
+                favorites={state.favorites}
+                onToggleFavorite={state.toggleFavorite}
+                columnWidths={state.columnWidths}
+                onResizeColumn={state.resizeColumn}
+              />
+            )}
+            {state.currentView === 'list' && (
+              <DataGridListView
+                data={state.pagedData}
+                columnConfig={state.columnConfig}
+                layout={state.layout.list}
+                visibleColumns={state.visibleColumns}
+                columnOrder={state.columnOrder}
+                favorites={state.favorites}
+                onToggleFavorite={state.toggleFavorite}
+                expandedRows={state.expandedRows}
+                onToggleExpand={state.toggleExpand}
+              />
+            )}
+            {state.currentView === 'cards' && (
+              <DataGridCardView
+                data={state.pagedData}
+                columnConfig={state.columnConfig}
+                layout={state.layout.card}
+                visibleColumns={state.visibleColumns}
+                favorites={state.favorites}
+                onToggleFavorite={state.toggleFavorite}
+                expandedRows={state.expandedRows}
+                onToggleExpand={state.toggleExpand}
+              />
+            )}
+          </>
+        )}
+
+        <DataGridPagination
+          currentPage={state.currentPage}
+          totalPages={state.totalPages}
+          pageSize={state.pageSize}
+          totalFiltered={state.filteredCount}
+          label={domainConfig.resultLabel}
+          onPageChange={state.setCurrentPage}
+          onPageSizeChange={state.setPageSize}
+        />
+      </div>
+    )
+  }
+)
+
+DataGrid.displayName = 'DataGrid'
+
+export { DataGrid }
+export type { DataGridProps }

package/dist/examples/data-visualization/DataGridCardView/DataGridCardView.tsx

@@ -0,0 +1,179 @@
+import * as React from 'react'
+import { ChevronDown } from 'lucide-react'
+import { Card } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { FavoriteButton } from '@/components/FavoriteButton/FavoriteButton'
+import { cellRenderers } from '../cell-renderers'
+import { cn } from '@/lib/utils'
+import type { CardLayoutConfig, CellType, ColumnConfig, DataRow } from '../types'
+
+const BADGE_TYPES = new Set<CellType>(['status-badge', 'inventory', 'inventory-label'])
+const SKIP_TYPES = new Set<CellType>(['favorite'])
+
+interface DataGridCardViewProps extends React.ComponentProps<'div'> {
+  data: DataRow[]
+  columnConfig: Record<string, ColumnConfig>
+  layout: CardLayoutConfig
+  visibleColumns: Set<string>
+  favorites: Set<string>
+  onToggleFavorite: (rowId: string) => void
+  expandedRows: Set<string>
+  onToggleExpand: (rowId: string, expandKey: string) => void
+}
+
+// Finds extra visible badge columns not already listed in layout.badgeFields.
+function deriveExtraBadgeFields(
+  columnConfig: Record<string, ColumnConfig>,
+  visibleColumns: Set<string>,
+  layout: CardLayoutConfig
+): string[] {
+  const layoutFields = new Set([
+    layout.titleField,
+    ...(layout.subtitleField ? [layout.subtitleField] : []),
+    ...layout.badgeFields,
+    ...layout.rows.map((r) => r.field),
+    ...(layout.footerField ? [layout.footerField] : []),
+    ...(layout.expandField ? [layout.expandField] : []),
+  ])
+
+  const extra: string[] = []
+  for (const key of visibleColumns) {
+    if (layoutFields.has(key)) continue
+    const config = columnConfig[key]
+    if (!config) continue
+    if (SKIP_TYPES.has(config.type)) continue
+    if (BADGE_TYPES.has(config.type)) {
+      extra.push(key)
+    }
+  }
+  return extra
+}
+
+const DataGridCardView = React.forwardRef<HTMLDivElement, DataGridCardViewProps>(
+  (
+    {
+      data,
+      columnConfig,
+      layout,
+      visibleColumns,
+      favorites,
+      onToggleFavorite,
+      expandedRows,
+      onToggleExpand,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const extraBadgeFields = deriveExtraBadgeFields(columnConfig, visibleColumns, layout)
+    const allBadgeFields = [...layout.badgeFields, ...extraBadgeFields]
+
+    return (
+      <div
+        ref={ref}
+        data-slot="data-grid-card-view"
+        className={cn(
+          'grid grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4 p-5',
+          className
+        )}
+        {...props}
+      >
+        {data.map((row) => {
+          const titleValue = String(row[layout.titleField] ?? '')
+          const expandKey = layout.expandField
+          const expandItems = expandKey && Array.isArray(row[expandKey])
+            ? (row[expandKey] as unknown[])
+            : []
+          const compositeKey = expandKey ? `${row.id}::${expandKey}` : ''
+          const isExpanded = compositeKey ? expandedRows.has(compositeKey) : false
+
+          return (
+            <Card
+              key={row.id}
+              className="flex flex-col gap-3 p-4 hover:shadow-md transition-shadow"
+            >
+              {/* Header */}
+              <div className="flex items-start justify-between">
+                <div className="min-w-0">
+                  <div className="font-medium text-sm truncate">{titleValue}</div>
+                  {layout.subtitleField && (
+                    <div className="text-xs text-muted-foreground mt-0.5 line-clamp-2">
+                      {String(row[layout.subtitleField] ?? '')}
+                    </div>
+                  )}
+                </div>
+                <FavoriteButton
+                  pressed={favorites.has(row.id)}
+                  projectName={titleValue}
+                  onPressedChange={() => onToggleFavorite(row.id)}
+                />
+              </div>
+
+              {/* Badges */}
+              {allBadgeFields.length > 0 && (
+                <div className="flex gap-1.5 flex-wrap">
+                  {allBadgeFields.map((field) => {
+                    const config = columnConfig[field]
+                    if (!config) return null
+                    const rendererType: CellType =
+                      config.type === 'inventory' ? 'inventory-label' : config.type
+                    return (
+                      <React.Fragment key={field}>
+                        {cellRenderers[rendererType]?.(row[field], row, config)}
+                      </React.Fragment>
+                    )
+                  })}
+                </div>
+              )}
+
+              {/* Data rows */}
+              {layout.rows.map((rowConfig) => {
+                const config = columnConfig[rowConfig.field]
+                if (!config) return null
+                const rendererType: CellType = rowConfig.rendererOverride ?? config.type
+                return (
+                  <div key={rowConfig.field} className="flex justify-between items-center">
+                    <span className="text-xs uppercase tracking-wider text-muted-foreground">
+                      {rowConfig.label}
+                    </span>
+                    <span className="text-sm font-medium font-[family-name:var(--font-grotesk)]">
+                      {cellRenderers[rendererType]?.(row[rowConfig.field], row, config)}
+                    </span>
+                  </div>
+                )
+              })}
+
+              {/* Footer */}
+              {layout.footerField && (
+                <div className="flex items-center justify-between pt-2.5 border-t border-border">
+                  <span className="text-xs text-primary font-medium">
+                    {String(row[layout.footerField] ?? '')}
+                  </span>
+                  {expandKey && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onToggleExpand(row.id, expandKey)}
+                      aria-expanded={isExpanded}
+                    >
+                      <ChevronDown
+                        className={cn('transition-transform', isExpanded && 'rotate-180')}
+                        size={14}
+                      />
+                      {expandItems.length}
+                    </Button>
+                  )}
+                </div>
+              )}
+            </Card>
+          )
+        })}
+      </div>
+    )
+  }
+)
+
+DataGridCardView.displayName = 'DataGridCardView'
+
+export { DataGridCardView }
+export type { DataGridCardViewProps }

package/dist/examples/data-visualization/DataGridListView/DataGridListView.tsx

@@ -0,0 +1,190 @@
+import * as React from 'react'
+import { ChevronDown } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { FavoriteButton } from '@/components/FavoriteButton/FavoriteButton'
+import { cellRenderers } from '../cell-renderers'
+import { cn } from '@/lib/utils'
+import type { ColumnConfig, DataRow, ListLayoutConfig } from '../types'
+
+const BADGE_TYPES = new Set(['status-badge', 'inventory', 'inventory-label'])
+const SKIP_TYPES = new Set(['favorite'])
+
+interface DataGridListViewProps extends React.ComponentProps<'div'> {
+  data: DataRow[]
+  columnConfig: Record<string, ColumnConfig>
+  layout: ListLayoutConfig
+  visibleColumns: Set<string>
+  columnOrder: string[]
+  favorites: Set<string>
+  onToggleFavorite: (rowId: string) => void
+  expandedRows: Set<string>
+  onToggleExpand: (rowId: string, expandKey: string) => void
+}
+
+// Derives the extra visible columns not already covered by the layout fields.
+function deriveExtraFields(
+  columnConfig: Record<string, ColumnConfig>,
+  visibleColumns: Set<string>,
+  columnOrder: string[],
+  layout: ListLayoutConfig
+): { extraMeta: string[]; extraBadge: string[]; extraExpand: string[] } {
+  const layoutFields = new Set([
+    layout.titleField,
+    ...layout.metaFields,
+    ...layout.badgeFields,
+    ...(layout.valueField ? [layout.valueField] : []),
+    ...(layout.expandField ? [layout.expandField] : []),
+  ])
+
+  const extraMeta: string[] = []
+  const extraBadge: string[] = []
+  const extraExpand: string[] = []
+
+  for (const key of columnOrder) {
+    if (!visibleColumns.has(key) || layoutFields.has(key)) continue
+    const config = columnConfig[key]
+    if (!config) continue
+    if (SKIP_TYPES.has(config.type)) continue
+    if (BADGE_TYPES.has(config.type)) {
+      extraBadge.push(key)
+    } else if (config.type === 'expand') {
+      extraExpand.push(key)
+    } else {
+      extraMeta.push(key)
+    }
+  }
+
+  return { extraMeta, extraBadge, extraExpand }
+}
+
+const DataGridListView = React.forwardRef<HTMLDivElement, DataGridListViewProps>(
+  (
+    {
+      data,
+      columnConfig,
+      layout,
+      visibleColumns,
+      columnOrder,
+      favorites,
+      onToggleFavorite,
+      expandedRows,
+      onToggleExpand,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const { extraMeta, extraBadge, extraExpand } = deriveExtraFields(
+      columnConfig,
+      visibleColumns,
+      columnOrder,
+      layout
+    )
+
+    const allMetaFields = [...layout.metaFields, ...extraMeta]
+    const allBadgeFields = [...layout.badgeFields, ...extraBadge]
+    const allExpandFields = [
+      ...(layout.expandField ? [layout.expandField] : []),
+      ...extraExpand,
+    ]
+
+    return (
+      <div
+        ref={ref}
+        data-slot="data-grid-list-view"
+        className={cn('divide-y divide-border', className)}
+        {...props}
+      >
+        {data.map((row) => {
+          const titleValue = String(row[layout.titleField] ?? '')
+
+          return (
+            <div
+              key={row.id}
+              className="flex items-center gap-3 px-5 py-3 hover:bg-muted/50 transition-colors"
+            >
+              <FavoriteButton
+                pressed={favorites.has(row.id)}
+                projectName={titleValue}
+                onPressedChange={() => onToggleFavorite(row.id)}
+              />
+
+              <div className="flex-1 min-w-0">
+                <div className="font-medium text-sm truncate">{titleValue}</div>
+
+                {allMetaFields.length > 0 && (
+                  <div className="flex items-center gap-1 text-xs text-muted-foreground flex-wrap">
+                    {allMetaFields.map((field, index) => {
+                      const config = columnConfig[field]
+                      if (!config) return null
+                      const rendered = cellRenderers[config.type]?.(
+                        row[field],
+                        row,
+                        config
+                      )
+                      return (
+                        <React.Fragment key={field}>
+                          {index > 0 && <span aria-hidden="true">·</span>}
+                          <span>{rendered}</span>
+                        </React.Fragment>
+                      )
+                    })}
+                  </div>
+                )}
+              </div>
+
+              {allBadgeFields.length > 0 && (
+                <div className="flex items-center gap-1.5 shrink-0">
+                  {allBadgeFields.map((field) => {
+                    const config = columnConfig[field]
+                    if (!config) return null
+                    // Use inventory-label instead of inventory in list view for readability
+                    const rendererType =
+                      config.type === 'inventory' ? 'inventory-label' : config.type
+                    return (
+                      <React.Fragment key={field}>
+                        {cellRenderers[rendererType]?.(row[field], row, config)}
+                      </React.Fragment>
+                    )
+                  })}
+                </div>
+              )}
+
+              {allExpandFields.length > 0 && (
+                <div className="shrink-0 flex items-center gap-1">
+                  {allExpandFields.map((expandKey) => {
+                    const config = columnConfig[expandKey]
+                    if (!config) return null
+                    const items = Array.isArray(row[expandKey]) ? (row[expandKey] as unknown[]) : []
+                    const compositeKey = `${row.id}::${expandKey}`
+                    const isExpanded = expandedRows.has(compositeKey)
+                    return (
+                      <Button
+                        key={expandKey}
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => onToggleExpand(row.id, expandKey)}
+                        aria-expanded={isExpanded}
+                      >
+                        <ChevronDown
+                          className={cn('transition-transform', isExpanded && 'rotate-180')}
+                          size={14}
+                        />
+                        {items.length}
+                      </Button>
+                    )
+                  })}
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+)
+
+DataGridListView.displayName = 'DataGridListView'
+
+export { DataGridListView }
+export type { DataGridListViewProps }

package/dist/examples/data-visualization/DataGridPage/DataGridPage.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import { useState } from 'react'
+import { cn } from '@/lib/utils'
+import { DomainSwitcher } from '../DomainSwitcher/DomainSwitcher'
+import { DataGrid } from '../DataGrid/DataGrid'
+import type { DomainConfig } from '../types'
+
+interface DataGridPageProps extends React.ComponentProps<'div'> {
+  domains: DomainConfig[]
+}
+
+const DataGridPage = React.forwardRef<HTMLDivElement, DataGridPageProps>(
+  ({ domains, className, ...props }, ref) => {
+    const [activeDomain, setActiveDomain] = useState(domains[0]?.key ?? '')
+    const activeDomainConfig = domains.find((d) => d.key === activeDomain) ?? domains[0]
+
+    return (
+      <div
+        ref={ref}
+        data-slot="data-grid-page"
+        className={cn('flex flex-col gap-4', className)}
+        {...props}
+      >
+        <DomainSwitcher
+          domains={domains.map((d) => ({ key: d.key, label: d.label }))}
+          activeDomain={activeDomain}
+          onDomainChange={setActiveDomain}
+        />
+        {activeDomainConfig && (
+          <DataGrid
+            key={activeDomainConfig.key}
+            domainConfig={activeDomainConfig}
+          />
+        )}
+      </div>
+    )
+  }
+)
+
+DataGridPage.displayName = 'DataGridPage'
+
+export { DataGridPage }
+export type { DataGridPageProps }