@fastnd/components 1.0.28 → 1.0.30

package/dist/components/FavoriteButton/FavoriteButton.d.ts

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { Button } from '@/components/ui/button';
 interface FavoriteButtonProps extends Omit<React.ComponentProps<typeof Button>, 'children' | 'onToggle'> {
     pressed: boolean;
-    projectName: string;
+    itemName?: string;
+    projectName?: string;
     onPressedChange?: (newState: boolean) => void;
 }
 declare const FavoriteButton: React.ForwardRefExoticComponent<Omit<FavoriteButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/index.d.ts

@@ -1,7 +1,4 @@
-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';
@@ -20,6 +17,7 @@ export * from './ui/collapsible';
 export * from './ui/combobox';
 export * from './ui/command';
 export * from './ui/context-menu';
+export * from './ui/data-table';
 export * from './ui/dialog';
 export * from './ui/direction';
 export * from './ui/drawer';

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?: "link" | "secondary" | "default" | "destructive" | "outline" | "ghost" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | 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?: "link" | "secondary" | "default" | "destructive" | "outline" | "ghost" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | 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/data-table.d.ts

@@ -0,0 +1,8 @@
+import { type ColumnDef } from '@tanstack/react-table';
+interface DataTableProps<TData, TValue = unknown> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+}
+declare function DataTable<TData, TValue = unknown>({ columns, data, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export { DataTable };
+export type { DataTableProps };

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-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
+    align?: "inline-start" | "inline-end" | "block-start" | "block-end" | 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?: "image" | "default" | "icon" | null | undefined;
+    variant?: "default" | "icon" | "image" | 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?: "line" | "default" | null | undefined;
+    variant?: "default" | "line" | 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-explorer/CardCarouselPanel/CardCarouselPanel.tsx

@@ -0,0 +1,197 @@
+import * as React from 'react'
+import { X, Plus } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+} from '@/components/ui/carousel'
+import { cn } from '@/lib/utils'
+import type { ColumnDef, CardLayout } from '../types'
+import { CellRenderer } from '../cells'
+import { ScoreBar } from '../cells/ScoreBar'
+
+interface CardCarouselPanelProps {
+  row: Record<string, unknown>
+  columnKey: string
+  column: ColumnDef
+  cardLayout: CardLayout
+  columns: Record<string, ColumnDef>
+  onClose: () => void
+  className?: string
+}
+
+const CardCarouselPanel = ({
+  row,
+  columnKey,
+  column,
+  cardLayout,
+  columns,
+  onClose,
+  className,
+}: CardCarouselPanelProps) => {
+  const items = row[columnKey]
+  if (!Array.isArray(items) || items.length === 0) return null
+  if (!column.expandColumns) return null
+
+  const title = column.expandTitleFn ? column.expandTitleFn(row) : column.expandLabel ?? columnKey
+  const scoreEc = column.expandColumns.find((ec) => ec.type === 'score-bar')
+
+  return (
+    <div
+      data-slot="card-carousel-panel"
+      className={cn(
+        'col-span-full bg-accent border border-border rounded-lg p-0 overflow-hidden',
+        className
+      )}
+    >
+      {/* Header */}
+      <div className="flex justify-between items-center px-4 py-3 border-b border-border">
+        <div className="flex items-center gap-2">
+          <span className="font-semibold text-sm">{title}</span>
+          <Badge variant="secondary" className="text-xs">{items.length}</Badge>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="icon-xs"
+            aria-label="Schließen"
+            onClick={onClose}
+          >
+            <X className="size-4" aria-hidden="true" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Carousel */}
+      <div className="px-4 py-3">
+        <Carousel
+          opts={{ align: 'start', dragFree: true }}
+          className="w-full px-10"
+        >
+          <CarouselContent className="-ml-3">
+            {items.map((item, index) => {
+              // Build virtual row by mapping expandColumns → main column keys via mapTo
+              const vRow: Record<string, unknown> = {}
+              for (const ec of column.expandColumns!) {
+                if (ec.mapTo) {
+                  vRow[ec.mapTo] = (item as Record<string, unknown>)[ec.key]
+                }
+                if (ec.secondaryKey && ec.mapTo) {
+                  const mainCol = columns[ec.mapTo]
+                  if (mainCol?.secondary) {
+                    vRow[mainCol.secondary] = (item as Record<string, unknown>)[ec.secondaryKey]
+                  }
+                }
+              }
+
+              return (
+                <CarouselItem
+                  key={index}
+                  className="pl-3 basis-[280px] shrink-0"
+                >
+                  {/* Mini card */}
+                  <div className="flex flex-col gap-2 rounded-lg border border-border bg-card p-3 h-full text-[13px]">
+                    {/* Mini card header */}
+                    <div>
+                      <div className="font-semibold text-xs line-clamp-2">
+                        {String(vRow[cardLayout.titleField] ?? '')}
+                      </div>
+                      {cardLayout.subtitleField && vRow[cardLayout.subtitleField] != null && (
+                        <div className="text-xs text-muted-foreground line-clamp-1 mt-0.5">
+                          {String(vRow[cardLayout.subtitleField])}
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Badges */}
+                    {cardLayout.badgeFields && cardLayout.badgeFields.length > 0 && (
+                      <div className="flex flex-wrap gap-1.5">
+                        {cardLayout.badgeFields.map((bf) => {
+                          const bc = columns[bf]
+                          if (!bc || vRow[bf] == null) return null
+                          return (
+                            <CellRenderer
+                              key={bf}
+                              column={bc}
+                              columnKey={bf}
+                              row={vRow}
+                            />
+                          )
+                        })}
+                      </div>
+                    )}
+
+                    {/* Key-value rows */}
+                    {cardLayout.rows && cardLayout.rows.length > 0 && (
+                      <div className="flex flex-col gap-1">
+                        {cardLayout.rows.map((r) => {
+                          if (vRow[r.field] == null) return null
+                          const rc = columns[r.field]
+                          return (
+                            <div key={r.field} className="flex justify-between">
+                              <span className="text-muted-foreground shrink-0">{r.label}</span>
+                              <span className="font-medium text-right">
+                                {r.rendererOverride && rc ? (
+                                  <CellRenderer
+                                    column={{ ...rc, type: r.rendererOverride as ColumnDef['type'] }}
+                                    columnKey={r.field}
+                                    row={vRow}
+                                  />
+                                ) : rc ? (
+                                  <CellRenderer column={rc} columnKey={r.field} row={vRow} />
+                                ) : (
+                                  String(vRow[r.field] ?? '')
+                                )}
+                              </span>
+                            </div>
+                          )
+                        })}
+                      </div>
+                    )}
+
+                    {/* Score bar (expand-specific) */}
+                    {scoreEc && (
+                      <ScoreBar
+                        value={
+                          typeof (item as Record<string, unknown>)[scoreEc.key] === 'number'
+                            ? Math.round(
+                                ((item as Record<string, unknown>)[scoreEc.key] as number) * 100
+                              )
+                            : 0
+                        }
+                      />
+                    )}
+
+                    {/* Add button */}
+                    <div className="mt-auto pt-1">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="gap-1.5 text-xs h-7 font-normal w-full"
+                        onClick={(e) => e.preventDefault()}
+                      >
+                        <Plus className="size-3 shrink-0" aria-hidden="true" />
+                        Hinzufügen
+                      </Button>
+                    </div>
+                  </div>
+                </CarouselItem>
+              )
+            })}
+          </CarouselContent>
+          <CarouselPrevious className="-left-10" />
+          <CarouselNext className="-right-10" />
+        </Carousel>
+      </div>
+    </div>
+  )
+}
+
+CardCarouselPanel.displayName = 'CardCarouselPanel'
+
+export { CardCarouselPanel }
+export type { CardCarouselPanelProps }

package/dist/examples/data-explorer/CardView/CardView.tsx

@@ -0,0 +1,168 @@
+import * as React from 'react'
+import { Card } from '@/components/ui/card'
+import { FavoriteButton } from '@/components/FavoriteButton/FavoriteButton'
+import { cn } from '@/lib/utils'
+import type { ColumnDef, CardLayout } from '../types'
+import { CellRenderer } from '../cells'
+import { CardCarouselPanel } from '../CardCarouselPanel/CardCarouselPanel'
+
+interface CardViewProps {
+  data: Record<string, unknown>[]
+  columns: Record<string, ColumnDef>
+  layout: CardLayout
+  expandedRows: Set<string>
+  favorites: Set<string>
+  onToggleExpand: (rowId: string) => void
+  onToggleFavorite: (rowId: string) => void
+  className?: string
+}
+
+const CardView = ({
+  data,
+  columns,
+  layout,
+  expandedRows,
+  favorites,
+  onToggleExpand,
+  onToggleFavorite,
+  className,
+}: CardViewProps) => {
+  const expandFields = layout.expandFields ?? (layout.expandField ? [layout.expandField] : [])
+
+  return (
+    <div
+      data-slot="card-view"
+      className={cn(
+        'grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4 px-6',
+        className
+      )}
+    >
+      {data.map((row) => {
+        const rowId = row['id'] as string
+        const isFavorite = favorites.has(rowId)
+        const isExpanded = expandFields.some((f) => expandedRows.has(`${rowId}::${f}`))
+
+        const activeExpandField =
+          expandFields.find((f) => expandedRows.has(`${rowId}::${f}`)) ?? null
+
+        return (
+          <React.Fragment key={rowId}>
+            <Card
+              className={cn(
+                'rounded-lg p-0 gap-0 overflow-hidden hover:shadow-md transition-shadow',
+                isExpanded && 'border-b-2 border-b-primary shadow-md'
+              )}
+            >
+              {/* Inner content padding wrapper */}
+              <div className="p-4 flex flex-col gap-3">
+                {/* Header: title + favorite */}
+                <div className="flex justify-between items-start gap-2">
+                  <div className="min-w-0">
+                    <div className="font-semibold text-sm min-h-[2.8em] line-clamp-2">
+                      {String(row[layout.titleField] ?? '')}
+                    </div>
+                    {layout.subtitleField && row[layout.subtitleField] != null && (
+                      <div className="text-xs text-muted-foreground mt-0.5">
+                        {String(row[layout.subtitleField])}
+                      </div>
+                    )}
+                  </div>
+                  <FavoriteButton
+                    pressed={isFavorite}
+                    itemName={rowId}
+                    onPressedChange={() => onToggleFavorite(rowId)}
+                    className="shrink-0 -mt-0.5 -mr-1"
+                  />
+                </div>
+
+                {/* Badge fields */}
+                {layout.badgeFields && layout.badgeFields.length > 0 && (
+                  <div className="flex flex-wrap gap-1.5">
+                    {layout.badgeFields.map((bf) => {
+                      const bc = columns[bf]
+                      if (!bc) return null
+                      return (
+                        <CellRenderer
+                          key={bf}
+                          column={bc}
+                          columnKey={bf}
+                          row={row}
+                        />
+                      )
+                    })}
+                  </div>
+                )}
+
+                {/* Key-value rows */}
+                {layout.rows && layout.rows.length > 0 && (
+                  <div className="flex flex-col gap-1.5">
+                    {layout.rows.map((r) => {
+                      const rc = columns[r.field]
+                      return (
+                        <div key={r.field} className="flex justify-between text-[13px]">
+                          <span className="text-muted-foreground">{r.label}</span>
+                          <span className="font-medium text-right">
+                            {r.rendererOverride && rc ? (
+                              <CellRenderer
+                                column={{ ...rc, type: r.rendererOverride as ColumnDef['type'] }}
+                                columnKey={r.field}
+                                row={row}
+                              />
+                            ) : rc ? (
+                              <CellRenderer column={rc} columnKey={r.field} row={row} />
+                            ) : (
+                              String(row[r.field] ?? '')
+                            )}
+                          </span>
+                        </div>
+                      )
+                    })}
+                  </div>
+                )}
+              </div>
+
+              {/* Footer — outside padding div, with border-top */}
+              {expandFields.length > 0 && (
+                <div className="mt-auto border-t border-border px-4 py-3 flex gap-2">
+                  {expandFields.map((ef) => {
+                    const ec = columns[ef]
+                    if (!ec) return null
+                    const expandKey = `${rowId}::${ef}`
+                    return (
+                      <CellRenderer
+                        key={ef}
+                        column={ec}
+                        columnKey={ef}
+                        row={row}
+                        expanded={expandedRows.has(expandKey)}
+                        onToggleExpand={() => onToggleExpand(expandKey)}
+                        className="flex-1 justify-center"
+                      />
+                    )
+                  })}
+                </div>
+              )}
+            </Card>
+
+            {/* Expansion carousel panel — spans full grid width */}
+            {activeExpandField && (
+              <CardCarouselPanel
+                row={row}
+                columnKey={activeExpandField}
+                column={columns[activeExpandField]}
+                cardLayout={layout}
+                columns={columns}
+                onClose={() => onToggleExpand(`${rowId}::${activeExpandField}`)}
+              />
+            )}
+          </React.Fragment>
+        )
+      })}
+    </div>
+  )
+}
+
+CardView.displayName = 'CardView'
+
+export { CardView }
+export type { CardViewProps }

package/dist/examples/data-explorer/ColumnConfigPopover/ColumnConfigPopover.tsx

@@ -0,0 +1,157 @@
+import * as React from 'react'
+import { GripVertical, SlidersHorizontal } from 'lucide-react'
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core'
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+  arrayMove,
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Switch } from '@/components/ui/switch'
+import type { ColumnDef } from '../types'
+import { cn } from '@/lib/utils'
+
+// --- Sortable item ---
+
+interface SortableColumnItemProps {
+  id: string
+  label: string
+  visible: boolean
+  onToggleVisibility: () => void
+}
+
+function SortableColumnItem({ id, label, visible, onToggleVisibility }: SortableColumnItemProps) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id })
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  }
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className="flex items-center gap-2 rounded px-2 py-1.5 text-sm hover:bg-accent"
+    >
+      <button
+        {...attributes}
+        {...listeners}
+        className="cursor-grab touch-none text-muted-foreground hover:text-foreground focus-visible:outline-none active:cursor-grabbing"
+        aria-label={`${label} verschieben`}
+        tabIndex={0}
+      >
+        <GripVertical className="size-4" />
+      </button>
+      <span className="flex-1 leading-snug">{label}</span>
+      <Switch
+        checked={visible}
+        onCheckedChange={onToggleVisibility}
+        size="sm"
+        aria-label={visible ? `${label} ausblenden` : `${label} einblenden`}
+      />
+    </div>
+  )
+}
+
+// --- Main component ---
+
+export interface ColumnConfigPopoverProps {
+  columns: Record<string, ColumnDef>
+  columnOrder: string[]
+  columnVisibility: Record<string, boolean>
+  onToggleVisibility: (columnKey: string) => void
+  onReorder: (newOrder: string[]) => void
+  className?: string
+}
+
+export function ColumnConfigPopover({
+  columns,
+  columnOrder,
+  columnVisibility,
+  onToggleVisibility,
+  onReorder,
+  className,
+}: ColumnConfigPopoverProps) {
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  )
+
+  // Exclude 'favorite' columns from config list
+  const configurableKeys = columnOrder.filter(
+    (key) => columns[key] && columns[key].type !== 'favorite',
+  )
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event
+    if (!over || active.id === over.id) return
+
+    const oldIndex = columnOrder.indexOf(active.id as string)
+    const newIndex = columnOrder.indexOf(over.id as string)
+    if (oldIndex === -1 || newIndex === -1) return
+
+    onReorder(arrayMove(columnOrder, oldIndex, newIndex))
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          data-slot="column-config-popover"
+          variant="outline"
+          size="sm"
+          aria-haspopup="dialog"
+          aria-label="Spalten konfigurieren"
+          className={cn('h-8 gap-1.5 text-sm', className)}
+        >
+          <SlidersHorizontal className="size-3.5" />
+          <span>Konfigurieren</span>
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent
+        align="end"
+        sideOffset={4}
+        role="dialog"
+        aria-label="Spalten konfigurieren"
+        className="w-72 p-0"
+      >
+        <div className="border-b px-3 py-2">
+          <span className="text-sm font-medium">Spalten konfigurieren</span>
+        </div>
+
+        <div className="max-h-[400px] overflow-y-auto p-2">
+          <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+            <SortableContext items={configurableKeys} strategy={verticalListSortingStrategy}>
+              {configurableKeys.map((key) => (
+                <SortableColumnItem
+                  key={key}
+                  id={key}
+                  label={columns[key].label}
+                  visible={columnVisibility[key] ?? true}
+                  onToggleVisibility={() => onToggleVisibility(key)}
+                />
+              ))}
+            </SortableContext>
+          </DndContext>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+ColumnConfigPopover.displayName = 'ColumnConfigPopover'

package/dist/examples/data-explorer/DataExplorerEmpty/DataExplorerEmpty.tsx

@@ -0,0 +1,56 @@
+import { Search } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import {
+  Empty,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+  EmptyDescription,
+} from '@/components/ui/empty'
+import { cn } from '@/lib/utils'
+
+export interface DataExplorerEmptyProps {
+  searchTerm: string
+  hasActiveFilters: boolean
+  onResetAll: () => void
+  className?: string
+}
+
+function buildDescription(searchTerm: string, hasActiveFilters: boolean): string {
+  const hasTerm = searchTerm.length > 0
+  if (hasTerm && hasActiveFilters) {
+    return `Für '${searchTerm}' mit den aktiven Filtern wurden keine Ergebnisse gefunden.`
+  }
+  if (hasTerm) {
+    return `Für '${searchTerm}' wurden keine Ergebnisse gefunden.`
+  }
+  return 'Die aktiven Filter liefern keine Ergebnisse.'
+}
+
+export function DataExplorerEmpty({
+  searchTerm,
+  hasActiveFilters,
+  onResetAll,
+  className,
+}: DataExplorerEmptyProps) {
+  const showReset = hasActiveFilters || searchTerm.length > 0
+
+  return (
+    <Empty data-slot="data-explorer-empty" className={cn(className)}>
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <Search />
+        </EmptyMedia>
+        <EmptyTitle>Keine Ergebnisse gefunden</EmptyTitle>
+        <EmptyDescription>{buildDescription(searchTerm, hasActiveFilters)}</EmptyDescription>
+      </EmptyHeader>
+      {showReset && (
+        <Button variant="outline" size="sm" onClick={onResetAll}>
+          Filter zurücksetzen
+        </Button>
+      )}
+    </Empty>
+  )
+}
+
+DataExplorerEmpty.displayName = 'DataExplorerEmpty'