@otfdashkit/ui 0.1.0

package/src/components/StructuredList/StructuredList.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { StructuredList } from './StructuredList'
+
+// TODO: add full a11y + variant tests
+describe('StructuredList', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<StructuredList />)).not.toThrow()
+  })
+})

package/src/components/StructuredList/StructuredList.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+interface StructuredListSectionProps {
+  title?: string
+  children: React.ReactNode
+  className?: string
+}
+
+export function StructuredListSection({ title, children, className }: StructuredListSectionProps) {
+  return (
+    <div className={cn('', className)}>
+      {title && <p className="px-4 pb-1 pt-4 text-xs font-semibold uppercase tracking-wider text-[hsl(var(--muted-foreground))]">{title}</p>}
+      <div className="rounded-md border border-[hsl(var(--border))] overflow-hidden divide-y divide-[hsl(var(--border))]">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+interface StructuredListItemProps {
+  left?: React.ReactNode
+  title: string
+  description?: string
+  right?: React.ReactNode
+  onClick?: () => void
+  className?: string
+}
+
+export function StructuredListItem({ left, title, description, right, onClick, className }: StructuredListItemProps) {
+  return (
+    <div
+      onClick={onClick}
+      className={cn('flex items-center gap-3 px-4 py-3 bg-[hsl(var(--card))]', onClick && 'cursor-pointer hover:bg-[hsl(var(--muted)/0.5)] transition-colors', className)}
+    >
+      {left && <div className="shrink-0">{left}</div>}
+      <div className="min-w-0 flex-1">
+        <p className="text-sm font-medium text-[hsl(var(--foreground))] truncate">{title}</p>
+        {description && <p className="text-xs text-[hsl(var(--muted-foreground))] truncate">{description}</p>}
+      </div>
+      {right && <div className="shrink-0 text-[hsl(var(--muted-foreground))]">{right}</div>}
+    </div>
+  )
+}
+
+interface StructuredListProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const StructuredList = React.forwardRef<HTMLDivElement, StructuredListProps>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn('space-y-4', className)} {...props} />
+)
+StructuredList.displayName = 'StructuredList'

package/src/components/StructuredList/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './StructuredList'

package/src/components/Timeline/Timeline.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Timeline } from './Timeline'
+
+// TODO: add all variants
+const meta: Meta<typeof Timeline> = {
+  title: 'Components/Timeline',
+  component: Timeline,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Timeline>
+
+export const Default: Story = {}

package/src/components/Timeline/Timeline.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { Timeline } from './Timeline'
+
+// TODO: add full a11y + variant tests
+describe('Timeline', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<Timeline />)).not.toThrow()
+  })
+})

package/src/components/Timeline/Timeline.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+type TimelineVariant = 'default' | 'success' | 'error' | 'warning'
+
+const dotColors: Record<TimelineVariant, string> = {
+  default: 'bg-[hsl(var(--primary))]',
+  success: 'bg-green-500',
+  error: 'bg-red-500',
+  warning: 'bg-yellow-500',
+}
+
+interface TimelineContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+export const TimelineContent = React.forwardRef<HTMLDivElement, TimelineContentProps>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn('pb-1', className)} {...props} />
+)
+TimelineContent.displayName = 'TimelineContent'
+
+export function TimelineConnector({ className }: { className?: string }) {
+  return <div className={cn('absolute left-[7px] top-5 bottom-0 w-0.5 bg-[hsl(var(--border))]', className)} />
+}
+
+interface TimelineItemProps {
+  icon?: React.ReactNode
+  title: string
+  description?: string
+  timestamp?: string
+  variant?: TimelineVariant
+  isLast?: boolean
+  className?: string
+}
+
+export function TimelineItem({ icon, title, description, timestamp, variant = 'default', isLast, className }: TimelineItemProps) {
+  return (
+    <div className={cn('relative flex gap-4', !isLast && 'pb-6', className)}>
+      <div className="relative flex-none">
+        <div className={cn('h-4 w-4 rounded-full border-2 border-[hsl(var(--background))] flex items-center justify-center mt-0.5', dotColors[variant])}>
+          {icon && <span className="text-white text-[8px]">{icon}</span>}
+        </div>
+        {!isLast && <TimelineConnector />}
+      </div>
+      <TimelineContent>
+        <div className="flex items-baseline justify-between gap-2">
+          <p className="text-sm font-medium text-[hsl(var(--foreground))]">{title}</p>
+          {timestamp && <span className="text-xs text-[hsl(var(--muted-foreground))] shrink-0">{timestamp}</span>}
+        </div>
+        {description && <p className="text-sm text-[hsl(var(--muted-foreground))] mt-0.5">{description}</p>}
+      </TimelineContent>
+    </div>
+  )
+}
+
+interface TimelineProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export function Timeline({ children, className }: TimelineProps) {
+  const items = React.Children.toArray(children)
+  return (
+    <div className={cn('', className)}>
+      {items.map((child, i) =>
+        React.isValidElement(child)
+          ? React.cloneElement(child as React.ReactElement<TimelineItemProps>, { isLast: i === items.length - 1 })
+          : child
+      )}
+    </div>
+  )
+}

package/src/components/Timeline/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './Timeline'

package/src/components/Toaster/Toaster.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Toaster } from './Toaster'
+
+// TODO: add all variants
+const meta: Meta<typeof Toaster> = {
+  title: 'Components/Toaster',
+  component: Toaster,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Toaster>
+
+export const Default: Story = {}

package/src/components/Toaster/Toaster.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { Toaster } from './Toaster'
+
+// TODO: add full a11y + variant tests
+describe('Toaster', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<Toaster />)).not.toThrow()
+  })
+})

package/src/components/Toaster/Toaster.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import React from 'react'
+import { Toaster as SonnerToaster, toast } from 'sonner'
+import { useOtfUI } from '../../provider/otf-ui-provider'
+
+export interface ToasterProps extends React.ComponentProps<typeof SonnerToaster> {}
+
+export function Toaster(props: ToasterProps) {
+  const ctx = useOtfUI?.()
+  const dark = ctx?.darkMode === 'dark'
+
+  return (
+    <SonnerToaster
+      theme={dark ? 'dark' : 'light'}
+      position="bottom-right"
+      toastOptions={{
+        classNames: {
+          toast: [
+            'group flex items-start gap-3 rounded-lg border px-4 py-3.5 text-sm shadow-md',
+            'border-[hsl(var(--border))] bg-[hsl(var(--card))] text-[hsl(var(--card-foreground))]',
+          ].join(' '),
+          title: 'font-semibold text-sm leading-snug',
+          description: 'text-xs text-[hsl(var(--muted-foreground))] mt-0.5 leading-snug',
+          actionButton: [
+            'mt-2 inline-flex items-center gap-1 text-xs font-medium',
+            'text-[hsl(var(--primary))] underline-offset-2 hover:underline',
+          ].join(' '),
+          cancelButton: 'mt-2 text-xs text-[hsl(var(--muted-foreground))] hover:opacity-80',
+          closeButton: 'text-[hsl(var(--muted-foreground))] opacity-60 hover:opacity-100 transition-opacity',
+          error: 'border-red-200/80 bg-red-50/60 dark:border-red-800/60 dark:bg-red-950/30',
+          success: 'border-green-200/80 bg-green-50/60 dark:border-green-800/60 dark:bg-green-950/30',
+          warning: 'border-yellow-200/80 bg-yellow-50/60 dark:border-yellow-800/60 dark:bg-yellow-950/30',
+          info: 'border-blue-200/80 bg-blue-50/60 dark:border-blue-800/60 dark:bg-blue-950/30',
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { toast }

package/src/components/Toaster/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './Toaster'

package/src/components/banner.tsx

@@ -0,0 +1,203 @@
+import React from 'react'
+import { Info, CheckCircle2, AlertTriangle, XCircle, X, ArrowRight } from 'lucide-react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../utils/cn'
+
+// ─── Variant config ──────────────────────────────────────────────────────────
+
+const bannerVariants = cva(
+  'relative flex items-start gap-3 rounded-lg border px-4 py-3.5 text-sm transition-all',
+  {
+    variants: {
+      variant: {
+        info:    'border-blue-200/80   bg-blue-50/60   dark:border-blue-800/60  dark:bg-blue-950/30',
+        success: 'border-green-200/80  bg-green-50/60  dark:border-green-800/60 dark:bg-green-950/30',
+        warning: 'border-yellow-200/80 bg-yellow-50/60 dark:border-yellow-800/60 dark:bg-yellow-950/30',
+        error:   'border-red-200/80    bg-red-50/60    dark:border-red-800/60   dark:bg-red-950/30',
+        neutral: 'border-[hsl(var(--border))] bg-[hsl(var(--muted)/0.5)]',
+      },
+    },
+    defaultVariants: { variant: 'info' },
+  }
+)
+
+const accentVariants = cva('absolute left-0 top-[12%] bottom-[12%] w-[3px] rounded-full', {
+  variants: {
+    variant: {
+      info:    'bg-blue-500',
+      success: 'bg-green-500',
+      warning: 'bg-yellow-500',
+      error:   'bg-red-500',
+      neutral: 'bg-[hsl(var(--foreground)/0.3)]',
+    },
+  },
+  defaultVariants: { variant: 'info' },
+})
+
+const iconVariants = cva('mt-0.5 h-4 w-4 shrink-0', {
+  variants: {
+    variant: {
+      info:    'text-blue-500   dark:text-blue-400',
+      success: 'text-green-500  dark:text-green-400',
+      warning: 'text-yellow-500 dark:text-yellow-400',
+      error:   'text-red-500    dark:text-red-400',
+      neutral: 'text-[hsl(var(--muted-foreground))]',
+    },
+  },
+  defaultVariants: { variant: 'info' },
+})
+
+const titleVariants = cva('font-semibold leading-snug', {
+  variants: {
+    variant: {
+      info:    'text-blue-900   dark:text-blue-100',
+      success: 'text-green-900  dark:text-green-100',
+      warning: 'text-yellow-900 dark:text-yellow-100',
+      error:   'text-red-900    dark:text-red-100',
+      neutral: 'text-[hsl(var(--foreground))]',
+    },
+  },
+  defaultVariants: { variant: 'info' },
+})
+
+const descriptionVariants = cva('mt-0.5 leading-snug opacity-80', {
+  variants: {
+    variant: {
+      info:    'text-blue-800   dark:text-blue-200',
+      success: 'text-green-800  dark:text-green-200',
+      warning: 'text-yellow-800 dark:text-yellow-200',
+      error:   'text-red-800    dark:text-red-200',
+      neutral: 'text-[hsl(var(--muted-foreground))]',
+    },
+  },
+  defaultVariants: { variant: 'info' },
+})
+
+const actionVariants = cva(
+  'inline-flex items-center gap-1 text-xs font-medium underline-offset-2 hover:underline transition-opacity hover:opacity-80',
+  {
+    variants: {
+      variant: {
+        info:    'text-blue-700   dark:text-blue-300',
+        success: 'text-green-700  dark:text-green-300',
+        warning: 'text-yellow-700 dark:text-yellow-300',
+        error:   'text-red-700    dark:text-red-300',
+        neutral: 'text-[hsl(var(--foreground))]',
+      },
+    },
+    defaultVariants: { variant: 'info' },
+  }
+)
+
+// ─── Icons ───────────────────────────────────────────────────────────────────
+
+const ICONS: Record<NonNullable<BannerVariant>, React.ReactNode> = {
+  info:    <Info className="h-4 w-4" />,
+  success: <CheckCircle2 className="h-4 w-4" />,
+  warning: <AlertTriangle className="h-4 w-4" />,
+  error:   <XCircle className="h-4 w-4" />,
+  neutral: <Info className="h-4 w-4" />,
+}
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+type BannerVariant = VariantProps<typeof bannerVariants>['variant']
+
+export interface BannerAction {
+  label: string
+  onClick: () => void
+  icon?: boolean
+}
+
+export interface BannerProps extends VariantProps<typeof bannerVariants> {
+  title?: string
+  description?: string
+  dismissible?: boolean
+  onDismiss?: () => void
+  action?: BannerAction
+  icon?: boolean
+  className?: string
+  children?: React.ReactNode
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export function Banner({
+  variant = 'info',
+  title,
+  description,
+  dismissible,
+  onDismiss,
+  action,
+  icon = true,
+  className,
+  children,
+}: BannerProps) {
+  const [dismissed, setDismissed] = React.useState(false)
+  const [exiting, setExiting] = React.useState(false)
+
+  const handleDismiss = () => {
+    setExiting(true)
+    setTimeout(() => {
+      setDismissed(true)
+      onDismiss?.()
+    }, 200)
+  }
+
+  if (dismissed) return null
+
+  return (
+    <div
+      className={cn(
+        bannerVariants({ variant }),
+        'pl-[18px]',
+        exiting && 'opacity-0 translate-x-1 scale-[0.98]',
+        'transition-all duration-200',
+        className
+      )}
+    >
+      {/* left accent bar */}
+      <span className={accentVariants({ variant })} aria-hidden />
+
+      {/* icon */}
+      {icon && (
+        <span className={iconVariants({ variant })}>
+          {ICONS[variant as NonNullable<BannerVariant>]}
+        </span>
+      )}
+
+      {/* body */}
+      <div className="min-w-0 flex-1 space-y-1">
+        {title && (
+          <p className={cn(titleVariants({ variant }), 'text-sm')}>{title}</p>
+        )}
+        {description && (
+          <p className={cn(descriptionVariants({ variant }), 'text-sm')}>{description}</p>
+        )}
+        {children && (
+          <div className={cn(descriptionVariants({ variant }), 'text-sm')}>{children}</div>
+        )}
+        {action && (
+          <button
+            onClick={action.onClick}
+            className={cn(actionVariants({ variant }), 'mt-1.5')}
+          >
+            {action.label}
+            {action.icon !== false && <ArrowRight className="h-3 w-3" />}
+          </button>
+        )}
+      </div>
+
+      {/* dismiss */}
+      {dismissible && (
+        <button
+          onClick={handleDismiss}
+          aria-label="Dismiss"
+          className="shrink-0 rounded-md p-0.5 text-[hsl(var(--muted-foreground))] opacity-60 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      )}
+    </div>
+  )
+}

package/src/components/breadcrumb.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import { ChevronRight } from 'lucide-react'
+import { cn } from '../utils/cn'
+
+interface BreadcrumbItemProps {
+  href?: string
+  label: string
+  active?: boolean
+  className?: string
+}
+
+export function BreadcrumbItem({ href, label, active, className }: BreadcrumbItemProps) {
+  return (
+    <li className={cn('flex items-center', className)}>
+      {href && !active ? (
+        <a href={href} className="text-sm text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors">{label}</a>
+      ) : (
+        <span className="text-sm text-[hsl(var(--foreground))] font-medium">{label}</span>
+      )}
+    </li>
+  )
+}
+
+export function BreadcrumbPage({ children, className }: { children: React.ReactNode; className?: string }) {
+  return (
+    <li aria-current="page" className={cn('flex items-center text-sm font-medium text-[hsl(var(--foreground))]', className)}>
+      {children}
+    </li>
+  )
+}
+
+export function BreadcrumbSeparator({ className }: { className?: string }) {
+  return (
+    <li role="presentation" aria-hidden="true" className={cn('flex items-center text-[hsl(var(--muted-foreground))]', className)}>
+      <ChevronRight className="h-3.5 w-3.5" />
+    </li>
+  )
+}
+
+interface BreadcrumbProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export function Breadcrumb({ children, className }: BreadcrumbProps) {
+  const items = React.Children.toArray(children)
+  const withSeparators: React.ReactNode[] = []
+  items.forEach((item, i) => {
+    withSeparators.push(item)
+    if (i < items.length - 1) withSeparators.push(<BreadcrumbSeparator key={`sep-${i}`} />)
+  })
+
+  return (
+    <nav aria-label="breadcrumb">
+      <ol className={cn('flex flex-wrap items-center gap-1', className)}>{withSeparators}</ol>
+    </nav>
+  )
+}

package/src/components/command-item.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+interface CommandItemProps {
+  icon?: React.ReactNode
+  label: string
+  description?: string
+  shortcut?: string
+  active?: boolean
+  onClick?: () => void
+  className?: string
+}
+
+export function CommandItem({ icon, label, description, shortcut, active, onClick, className }: CommandItemProps) {
+  return (
+    <div
+      onClick={onClick}
+      className={cn(
+        'flex items-center gap-3 rounded-md px-3 py-2 cursor-pointer transition-colors',
+        active ? 'bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))]' : 'hover:bg-[hsl(var(--accent)/0.6)]',
+        className
+      )}
+    >
+      {icon && <span className="shrink-0 text-[hsl(var(--muted-foreground))] h-4 w-4 flex items-center justify-center">{icon}</span>}
+      <div className="min-w-0 flex-1">
+        <p className="text-sm font-medium truncate">{label}</p>
+        {description && <p className="text-xs text-[hsl(var(--muted-foreground))] truncate">{description}</p>}
+      </div>
+      {shortcut && (
+        <kbd className="shrink-0 pointer-events-none inline-flex h-5 items-center gap-1 rounded border border-[hsl(var(--border))] bg-[hsl(var(--muted))] px-1.5 text-[10px] font-medium text-[hsl(var(--muted-foreground))]">
+          {shortcut}
+        </kbd>
+      )}
+    </div>
+  )
+}

package/src/components/data-grid.tsx

@@ -0,0 +1,125 @@
+import React from 'react'
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+  RowSelectionState,
+  ColumnResizeMode,
+} from '@tanstack/react-table'
+import { cn } from '../utils/cn'
+import { Checkbox } from '../primitives/checkbox'
+
+interface DataGridProps<T extends object> {
+  columns: ColumnDef<T, any>[]
+  data: T[]
+  onDataChange?: (data: T[]) => void
+  editable?: boolean
+  className?: string
+}
+
+function EditableCell<T>({ value: initial, onSave }: { value: unknown; onSave: (v: string) => void }) {
+  const [editing, setEditing] = React.useState(false)
+  const [val, setVal] = React.useState(String(initial ?? ''))
+
+  const commit = () => { onSave(val); setEditing(false) }
+
+  if (editing) {
+    return (
+      <input
+        autoFocus
+        className="w-full bg-transparent outline outline-1 outline-[hsl(var(--ring))] rounded px-1 text-sm"
+        value={val}
+        onChange={(e) => setVal(e.target.value)}
+        onBlur={commit}
+        onKeyDown={(e) => { if (e.key === 'Enter') commit(); if (e.key === 'Escape') setEditing(false) }}
+      />
+    )
+  }
+  return (
+    <span className="cursor-pointer w-full block" onDoubleClick={() => setEditing(true)}>
+      {String(initial ?? '')}
+    </span>
+  )
+}
+
+const selectionCol = <T,>(): ColumnDef<T> => ({
+  id: '_select',
+  header: ({ table }) => (
+    <Checkbox checked={table.getIsAllRowsSelected()} onCheckedChange={(v) => table.toggleAllRowsSelected(!!v)} />
+  ),
+  cell: ({ row }) => (
+    <Checkbox checked={row.getIsSelected()} onCheckedChange={(v) => row.toggleSelected(!!v)} />
+  ),
+  size: 40,
+  enableResizing: false,
+})
+
+export function DataGrid<T extends object>({ columns, data: initialData, onDataChange, editable, className }: DataGridProps<T>) {
+  const [data, setData] = React.useState<T[]>(initialData)
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})
+  const columnResizeMode: ColumnResizeMode = 'onChange'
+
+  const editableColumns = React.useMemo(() => {
+    if (!editable) return columns
+    return columns.map((col) => ({
+      ...col,
+      cell: (info: any) => (
+        <EditableCell
+          value={info.getValue()}
+          onSave={(v) => {
+            const updated = data.map((row, i) =>
+              i === info.row.index ? { ...row, [info.column.id]: v } : row
+            ) as T[]
+            setData(updated)
+            onDataChange?.(updated)
+          }}
+        />
+      ),
+    }))
+  }, [columns, data, editable, onDataChange])
+
+  const allColumns = React.useMemo(() => [selectionCol<T>(), ...editableColumns], [editableColumns])
+
+  const table = useReactTable({
+    data,
+    columns: allColumns,
+    columnResizeMode,
+    getCoreRowModel: getCoreRowModel(),
+    onRowSelectionChange: setRowSelection,
+    state: { rowSelection },
+    enableColumnResizing: true,
+  })
+
+  return (
+    <div className={cn('overflow-auto rounded-md border border-[hsl(var(--border))]', className)}>
+      <table className="w-full text-sm" style={{ width: table.getCenterTotalSize() }}>
+        <thead className="bg-[hsl(var(--muted)/0.4)]">
+          {table.getHeaderGroups().map((hg) => (
+            <tr key={hg.id}>
+              {hg.headers.map((h) => (
+                <th key={h.id} style={{ width: h.getSize() }} className="relative px-3 py-2 text-left font-medium text-[hsl(var(--muted-foreground))] border-r border-[hsl(var(--border))] last:border-r-0">
+                  {h.isPlaceholder ? null : flexRender(h.column.columnDef.header, h.getContext())}
+                  {h.column.getCanResize() && (
+                    <div onMouseDown={h.getResizeHandler()} className="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-[hsl(var(--primary)/0.4)]" />
+                  )}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {table.getRowModel().rows.map((row) => (
+            <tr key={row.id} className={cn('border-t border-[hsl(var(--border))] hover:bg-[hsl(var(--muted)/0.3)] transition-colors', row.getIsSelected() && 'bg-[hsl(var(--primary)/0.06)]')}>
+              {row.getVisibleCells().map((cell) => (
+                <td key={cell.id} style={{ width: cell.column.getSize() }} className="px-3 py-2 border-r border-[hsl(var(--border))] last:border-r-0">
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}