@fastnd/components 1.0.32 → 1.0.33

package/dist/examples/dashboard/DashboardPage/DashboardPage.tsx

@@ -25,7 +25,7 @@ const DashboardPage = React.forwardRef<HTMLElement, DashboardPageProps>(
         ref={ref}
         data-slot="dashboard-page"
         className={cn(
-          'grid grid-cols-1 lg:grid-cols-[350px_1fr] gap-6 max-w-[1400px] mx-auto p-8',
+          'grid grid-cols-1 lg:grid-cols-[280px_1fr] gap-6 max-w-[1400px] mx-auto p-8',
           className,
         )}
         {...props}

package/dist/examples/dashboard/ProjectList/ProjectList.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react'
-import { Star } from 'lucide-react'
 import { Card, CardContent } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
-import { Table, TableHeader, TableHead, TableBody, TableRow, TableCell } from '@/components/ui/table'
 import { Badge } from '@/components/ui/badge'
-import { FavoriteButton } from '@/components/FavoriteButton/FavoriteButton'
+import { DataTableView } from '@/features/data-visualization/DataTableView/DataTableView'
+import { formatRelativeDate } from '@/utils/date'
 import { cn } from '@/lib/utils'
+import type { ColumnDef, SortState } from '@/features/data-visualization/types'
 import type { Project, ProjectStatus } from '../types'
 import { STATUS_CONFIG } from '../constants'
 
@@ -17,6 +17,9 @@ const STATUS_BADGE_CLASSES: Record<ProjectStatus, string> = {
   'abgeschlossen': 'bg-[#1ec489]/15 text-[#0a6e44] border-transparent',
 }
 
+const STATIC_SORT: SortState = { column: null, direction: 'asc' }
+const EMPTY_ROWS = new Set<string>()
+
 interface ProjectListProps extends React.ComponentProps<'section'> {
   projects: Project[]
   filterLabel: string
@@ -38,6 +41,75 @@ const ProjectList = React.forwardRef<HTMLElement, ProjectListProps>(
     },
     ref,
   ) => {
+    const columns: Record<string, ColumnDef> = React.useMemo(() => ({
+      isFavorite: {
+        label: 'Favorit',
+        type: 'favorite',
+        sortable: false,
+        filterable: false,
+        visible: true,
+        headerIcon: 'star',
+        headerTooltip: 'Favorit',
+      },
+      name: {
+        label: 'Projekt / Applikation',
+        type: 'double-text',
+        secondary: 'application',
+        sortable: false,
+        filterable: false,
+        visible: true,
+      },
+      client: {
+        label: 'Kunde',
+        type: 'text',
+        sortable: false,
+        filterable: false,
+        visible: true,
+      },
+      status: {
+        label: 'Status',
+        type: 'text',
+        sortable: false,
+        filterable: false,
+        visible: true,
+        render: (val) => {
+          const s = val as ProjectStatus
+          return (
+            <Badge variant="secondary" className={STATUS_BADGE_CLASSES[s]}>
+              {STATUS_CONFIG[s].label}
+            </Badge>
+          )
+        },
+      },
+      updatedAt: {
+        label: 'Aktivität',
+        type: 'text',
+        sortable: false,
+        filterable: false,
+        visible: true,
+        render: (val, row) => (
+          <div className="flex flex-col">
+            <span className="font-medium text-[13px]">{formatRelativeDate(String(val))}</span>
+            <span className="text-muted-foreground text-xs">
+              Erstellt: {new Date(String(row.createdAt)).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })}
+            </span>
+          </div>
+        ),
+      },
+    }), [])
+
+    const visibleColumns = ['isFavorite', 'name', 'client', 'status', 'updatedAt']
+
+    const rowData = React.useMemo(
+      () => projects.map(p => ({ ...p } as Record<string, unknown>)),
+      [projects],
+    )
+
+    const favorites = React.useMemo(
+      () => new Set(projects.filter(p => p.isFavorite).map(p => p.id)),
+      [projects],
+    )
+
     return (
       <section
         ref={ref}
@@ -63,50 +135,18 @@ const ProjectList = React.forwardRef<HTMLElement, ProjectListProps>(
               onChange={e => onSearchChange(e.target.value)}
             />
           </div>
-          <CardContent>
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead scope="col">Projektname</TableHead>
-                  <TableHead scope="col">Kunde</TableHead>
-                  <TableHead scope="col">Applikation</TableHead>
-                  <TableHead scope="col">Status</TableHead>
-                  <TableHead scope="col" aria-label="Favorit">
-                    <Star className="size-3.5" />
-                  </TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {projects.map(project => (
-                  <TableRow key={project.id}>
-                    <TableCell>
-                      <span className="font-medium">{project.name}</span>
-                    </TableCell>
-                    <TableCell>
-                      <span className="text-muted-foreground text-[0.8125rem]">
-                        {project.client}
-                      </span>
-                    </TableCell>
-                    <TableCell>{project.application}</TableCell>
-                    <TableCell>
-                      <Badge
-                        variant="secondary"
-                        className={cn(STATUS_BADGE_CLASSES[project.status])}
-                      >
-                        {STATUS_CONFIG[project.status].label}
-                      </Badge>
-                    </TableCell>
-                    <TableCell>
-                      <FavoriteButton
-                        pressed={project.isFavorite}
-                        projectName={project.name}
-                        onPressedChange={() => onToggleFavorite(project.id)}
-                      />
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
+          <CardContent className="p-0">
+            <DataTableView
+              data={rowData}
+              columns={columns}
+              visibleColumns={visibleColumns}
+              sort={STATIC_SORT}
+              onToggleSort={() => {}}
+              expandedRows={EMPTY_ROWS}
+              onToggleExpansion={() => {}}
+              favorites={favorites}
+              onToggleFavorite={onToggleFavorite}
+            />
           </CardContent>
         </Card>
       </section>

package/dist/examples/dashboard/constants.ts

@@ -8,11 +8,25 @@ export const STATUS_CONFIG: Record<ProjectStatus, { label: string; color: string
   'abgeschlossen': { label: 'Abgeschlossen', color: '#1ec489' },
 }
 
+const d = (daysAgo: number) => new Date(Date.now() - daysAgo * 86_400_000).toISOString()
+
 export const MOCK_PROJECTS: Project[] = [
-  { id: '1', name: 'E-Commerce Relaunch',     client: 'Müller GmbH',       application: 'Shopify CMS',       status: 'neu',           isFavorite: false },
-  { id: '2', name: 'CRM Integration MVP',     client: 'TechCorp Inc.',     application: 'Salesforce API',    status: 'offen',         isFavorite: true },
-  { id: '3', name: 'Data Analytics Dashboard', client: 'DataViz AG',        application: 'React / Supabase',  status: 'in-prufung',    isFavorite: false },
-  { id: '4', name: 'Mobile App Onboarding',   client: 'FitHealth',         application: 'Flutter',           status: 'neu',           isFavorite: false },
-  { id: '5', name: 'Payment Gateway Update',  client: 'FinTech Solutions', application: 'Stripe API',        status: 'validierung',   isFavorite: false },
-  { id: '6', name: 'Legacy System Migration', client: 'OldBank Corp.',     application: 'Node.js / PostgreSQL', status: 'abgeschlossen', isFavorite: true },
+  { id: '1', name: 'E-Commerce Relaunch',      client: 'Müller GmbH',       application: 'Shopify CMS',          status: 'neu',           isFavorite: false, createdAt: '2025-03-15', updatedAt: d(0)  },
+  { id: '2', name: 'CRM Integration MVP',      client: 'TechCorp Inc.',     application: 'Salesforce API',       status: 'offen',         isFavorite: true,  createdAt: '2025-02-10', updatedAt: d(1)  },
+  { id: '3', name: 'Data Analytics Dashboard', client: 'DataViz AG',        application: 'React / Supabase',     status: 'in-prufung',    isFavorite: false, createdAt: '2025-01-20', updatedAt: d(3)  },
+  { id: '4', name: 'Mobile App Onboarding',    client: 'FitHealth',         application: 'Flutter',              status: 'neu',           isFavorite: false, createdAt: '2025-03-01', updatedAt: d(7)  },
+  { id: '5', name: 'Payment Gateway Update',   client: 'FinTech Solutions', application: 'Stripe API',           status: 'validierung',   isFavorite: false, createdAt: '2024-11-05', updatedAt: d(14) },
+  { id: '6', name: 'Legacy System Migration',  client: 'OldBank Corp.',     application: 'Node.js / PostgreSQL', status: 'abgeschlossen', isFavorite: true,  createdAt: '2024-08-20', updatedAt: d(60) },
+]
+
+export const MOCK_PROJECTS_EXTENDED: Project[] = [
+  ...MOCK_PROJECTS,
+  { id: '7',  name: 'Supply Chain Visibility Platform', client: 'LogiTrans GmbH',     application: 'Next.js / GraphQL',    status: 'in-prufung',    isFavorite: true,  createdAt: '2024-12-03', updatedAt: d(2)  },
+  { id: '8',  name: 'HR Self-Service Portal',           client: 'Personalwerk AG',    application: 'Angular / .NET Core',  status: 'offen',         isFavorite: false, createdAt: '2025-01-08', updatedAt: d(5)  },
+  { id: '9',  name: 'IoT Monitoring Dashboard',         client: 'SmartFactory SE',    application: 'Vue.js / InfluxDB',    status: 'validierung',   isFavorite: false, createdAt: '2024-10-14', updatedAt: d(9)  },
+  { id: '10', name: 'Document Management System',       client: 'Kanzlei Bauer & Co', application: 'SharePoint / Power Automate', status: 'abgeschlossen', isFavorite: false, createdAt: '2024-06-01', updatedAt: d(30) },
+  { id: '11', name: 'Customer Loyalty App',             client: 'Retail Chain GmbH',  application: 'React Native',         status: 'neu',           isFavorite: false, createdAt: '2025-03-20', updatedAt: d(0)  },
+  { id: '12', name: 'Predictive Maintenance Engine',    client: 'IndustrieWerk KG',   application: 'Python / FastAPI / ML',status: 'in-prufung',    isFavorite: true,  createdAt: '2024-09-17', updatedAt: d(4)  },
+  { id: '13', name: 'Compliance Reporting Suite',       client: 'RegulaCorp AG',      application: 'Power BI / Azure',     status: 'offen',         isFavorite: false, createdAt: '2025-02-25', updatedAt: d(11) },
+  { id: '14', name: 'Field Service Management',         client: 'TechService GmbH',   application: 'Salesforce Field Srv', status: 'validierung',   isFavorite: true,  createdAt: '2024-07-30', updatedAt: d(6)  },
 ]

package/dist/examples/dashboard/types.ts

@@ -9,6 +9,8 @@ export interface Project {
   application: string
   status: ProjectStatus
   isFavorite: boolean
+  createdAt: string
+  updatedAt: string
 }
 
 export interface StatusCount {

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

@@ -5,15 +5,9 @@ import { Button } from '@/components/ui/button'
 import { ScoreBar } from '@/components/ScoreBar/ScoreBar'
 import { FavoriteButton } from '@/components/FavoriteButton/FavoriteButton'
 import { cn } from '@/lib/utils'
-import type { ColumnDef } from '../types'
-
-export interface RenderCellOptions {
-  mode?: 'default' | 'compact' | 'inventory-label'
-  isExpanded?: boolean
-  isFavorite?: boolean
-  onToggleExpand?: () => void
-  onToggleFavorite?: () => void
-}
+import type { ColumnDef, RenderCellOptions } from '../types'
+
+export type { RenderCellOptions }
 
 const STATUS_COLORS: Record<string, string> = {
   active: 'bg-[var(--lifecycle-active-bg)] text-[var(--lifecycle-active)] border-transparent',
@@ -42,6 +36,8 @@ export function renderCell(
   const { mode = 'default', isExpanded = false, isFavorite = false, onToggleExpand, onToggleFavorite } = options
   const val = row[colKey]
 
+  if (col.render) return col.render(val, row, options)
+
   switch (col.type) {
     case 'text': {
       // col.rowLines drives the clamp; default 2 so columns can shrink without growing rows

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

@@ -97,7 +97,7 @@ function DataCardView({
     <div
       ref={gridRef}
       data-slot="data-card-view"
-      className={cn('grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-3', className)}
+      className={cn('grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4', className)}
     >
       {data.map((row) => {
         const rowId = String(row.id ?? '')
@@ -111,7 +111,7 @@ function DataCardView({
             <div className="flex flex-col">
               <div
                 className={cn(
-                  'flex flex-col border border-border rounded-lg overflow-hidden hover:shadow-md transition-shadow bg-card text-card-foreground',
+                  'flex flex-col flex-1 border border-border rounded-lg overflow-hidden hover:shadow-md transition-shadow bg-card text-card-foreground',
                   isAnyExpanded && 'border-b-2 border-b-primary',
                 )}
               >
@@ -136,7 +136,7 @@ function DataCardView({
 
                 {/* Badges */}
                 {layout.badgeFields.length > 0 && (
-                  <div className="px-4 pt-2 flex gap-2 flex-wrap">
+                  <div className="px-4 pt-2 flex gap-1.5 flex-wrap">
                     {layout.badgeFields.map((bf) => {
                       const col = columns[bf]
                       if (!col || row[bf] == null) return null
@@ -163,9 +163,9 @@ function DataCardView({
                           )
                         : String(row[r.field] ?? '')
                       return (
-                        <div key={r.field} className="flex justify-between items-center">
-                          <span className="text-xs text-muted-foreground">{r.label}</span>
-                          <span className="text-[13px] font-medium">{valueNode}</span>
+                        <div key={r.field} className="flex justify-between items-start gap-4">
+                          <span className="text-xs text-muted-foreground shrink-0">{r.label}</span>
+                          <span className="text-[13px] font-medium min-w-0 text-right">{valueNode}</span>
                         </div>
                       )
                     })}
@@ -174,7 +174,7 @@ function DataCardView({
 
                 {/* Footer — expand buttons */}
                 {expandFields.length > 0 && (
-                  <div className="p-4 pt-3">
+                  <div className="mt-auto p-4 pt-3 border-t border-border">
                     <div className="flex gap-2">
                       {expandFields.map((ef) => {
                         const col = columns[ef]

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

@@ -23,6 +23,7 @@ export interface DataListViewProps {
   onToggleExpansion: (rowId: string, field: string) => void
   favorites: Set<string>
   onToggleFavorite: (id: string) => void
+  showHeader?: boolean
   className?: string
 }
 
@@ -122,6 +123,43 @@ function ExpansionCell({ ec, value }: ExpansionCellProps) {
   return <span>{text}</span>
 }
 
+interface ListHeaderProps {
+  columns: Record<string, ColumnDef>
+  layout: ListLayout
+}
+
+function ListHeader({ columns, layout }: ListHeaderProps) {
+  const titleCol = columns[layout.titleField]
+  const expandFields = layout.expandFields ?? (layout.expandField ? [layout.expandField] : [])
+  const secondaryLabel =
+    titleCol?.type === 'double-text' && titleCol.secondary
+      ? columns[titleCol.secondary]?.label
+      : undefined
+  const titleLabel = secondaryLabel
+    ? `${titleCol!.label} / ${secondaryLabel}`
+    : (titleCol?.label ?? '')
+
+  return (
+    <div className="flex items-center gap-3 px-4 py-2 border-b border-border">
+      {/* Placeholder matching FavoriteButton size */}
+      <div className="size-[28px] flex-none" aria-hidden="true" />
+      <div className="flex-1 min-w-0 text-xs font-medium text-muted-foreground">
+        {titleLabel}
+      </div>
+      {layout.badgeFields.map((field) => (
+        <span key={field} className="shrink-0 text-xs font-medium text-muted-foreground">
+          {columns[field]?.label ?? ''}
+        </span>
+      ))}
+      {expandFields.map((field) => (
+        <span key={field} className="shrink-0 text-xs font-medium text-muted-foreground">
+          {columns[field]?.expandLabel ?? columns[field]?.label ?? ''}
+        </span>
+      ))}
+    </div>
+  )
+}
+
 function DataListView({
   data,
   columns,
@@ -130,6 +168,7 @@ function DataListView({
   onToggleExpansion,
   favorites,
   onToggleFavorite,
+  showHeader = false,
   className,
 }: DataListViewProps) {
   const expandFields = layout.expandFields ?? (layout.expandField ? [layout.expandField] : [])
@@ -139,58 +178,58 @@ function DataListView({
   return (
     <div
       data-slot="data-list-view"
-      className={cn(
-        'border border-border rounded-lg overflow-hidden divide-y divide-border',
-        className,
-      )}
+      className={cn('divide-y divide-border', className)}
     >
+      {showHeader && <ListHeader columns={columns} layout={layout} />}
       {data.map((row) => {
         const rowId = String(row.id ?? '')
         const titleValue = row[layout.titleField]
         const subtitleValue = isDoubleText && titleCol.secondary ? row[titleCol.secondary] : undefined
+        const hasBadges = layout.badgeFields.length > 0
+        const hasExpand = expandFields.length > 0
 
         return (
-          <div
-            key={rowId}
-            className="grid grid-cols-[36px_1fr_auto_auto] sm:grid-cols-[36px_1fr_auto_auto] items-start gap-x-3 px-4 py-3 hover:bg-accent transition-colors"
-          >
-            {/* Col 1: Favorite */}
-            <div className="flex items-center justify-center pt-0.5">
-              <FavoriteButton
-                pressed={favorites.has(rowId)}
-                itemName={titleValue != null ? String(titleValue) : ''}
-                onPressedChange={() => onToggleFavorite(rowId)}
-              />
-            </div>
-
-            {/* Col 2: Title block */}
-            <div className="min-w-0">
-              <div className="font-semibold text-sm truncate max-w-[280px] sm:max-w-none">
-                {titleValue != null ? String(titleValue) : ''}
+          <div key={rowId}>
+            {/* Single slim row: Fav | Title block | Badges | Expand */}
+            <div className="flex items-center gap-3 px-4 py-2 hover:bg-accent transition-colors">
+              <div className="flex-none">
+                <FavoriteButton
+                  pressed={favorites.has(rowId)}
+                  itemName={titleValue != null ? String(titleValue) : ''}
+                  onPressedChange={() => onToggleFavorite(rowId)}
+                />
               </div>
-              <div className="flex flex-wrap items-center gap-2 mt-0.5">
-                {subtitleValue != null && (
-                  <span className="text-xs text-muted-foreground truncate max-w-[320px] sm:max-w-none">
-                    {String(subtitleValue)}
-                  </span>
+
+              {/* Title block grows to fill space — no fixed width */}
+              <div className="flex-1 min-w-0">
+                <div className="font-semibold text-sm truncate">
+                  {titleValue != null ? String(titleValue) : ''}
+                </div>
+                {/* Secondary line: subtitle + meta chips inline */}
+                {(subtitleValue != null || layout.metaFields.length > 0) && (
+                  <div className="flex items-center gap-1.5 mt-0.5 min-w-0">
+                    {subtitleValue != null && (
+                      <span className="text-xs text-muted-foreground truncate shrink">
+                        {String(subtitleValue)}
+                      </span>
+                    )}
+                    {layout.metaFields.map((field) => {
+                      const v = row[field]
+                      if (v == null || v === '') return null
+                      return (
+                        <span
+                          key={field}
+                          className="shrink-0 bg-secondary rounded-md px-1.5 py-px text-xs truncate max-w-[140px]"
+                        >
+                          {String(v)}
+                        </span>
+                      )
+                    })}
+                  </div>
                 )}
-                {layout.metaFields.map((field) => {
-                  const v = row[field]
-                  if (v == null || v === '') return null
-                  return (
-                    <span
-                      key={field}
-                      className="shrink-0 bg-secondary rounded-md px-2 py-0.5 text-xs max-w-[180px] truncate"
-                    >
-                      {String(v)}
-                    </span>
-                  )
-                })}
               </div>
-            </div>
 
-            {/* Col 3: Badges */}
-            <div className="flex items-center gap-2 pt-0.5 max-sm:col-start-2 max-sm:col-end-3 max-sm:row-start-2">
+              {/* Badges — shrink-0, sizes to content, no fixed column */}
               {layout.badgeFields.map((field) => {
                 const col = columns[field]
                 if (!col) return null
@@ -202,10 +241,8 @@ function DataListView({
                   </React.Fragment>
                 )
               })}
-            </div>
 
-            {/* Col 4: Expand buttons */}
-            <div className="flex items-center gap-2 pt-0.5 max-sm:col-start-2 max-sm:col-end-3 max-sm:row-start-3">
+              {/* Expand buttons — trailing edge */}
               {expandFields.map((field) => {
                 const col = columns[field]
                 if (!col) return null
@@ -222,14 +259,14 @@ function DataListView({
               })}
             </div>
 
-            {/* Expansion content — full width */}
+            {/* Expansion panels — full width, below the row */}
             {expandFields.map((field) => {
               const expandKey = `${rowId}::${field}`
               if (!expandedRows.has(expandKey)) return null
               return (
                 <div
                   key={field}
-                  className="col-span-full border-t border-border pt-3 mt-1 max-sm:col-start-1 max-sm:row-start-4"
+                  className="px-4 pb-3 pt-3 border-t border-border"
                   data-slot="expansion-content"
                 >
                   <ExpansionTable row={row} colKey={field} columns={columns} />

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

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useCallback } from 'react'
-import { ChevronUp, ChevronDown, ArrowLeftRight, Sparkles, Plus } from 'lucide-react'
+import { ChevronUp, ChevronDown, ArrowLeftRight, Sparkles, Plus, Star } from 'lucide-react'
 import {
   Table,
   TableBody,
@@ -24,6 +24,7 @@ import type { ColumnDef, ExpandColumnDef, SortState } from '../types'
 const HEADER_ICONS: Record<string, React.ElementType> = {
   arrowLeftRight: ArrowLeftRight,
   sparkles: Sparkles,
+  star: Star,
 }
 
 // Default minimum widths per column type (px)
@@ -227,6 +228,7 @@ export interface DataTableViewProps {
   onToggleExpansion: (rowId: string, field: string) => void
   favorites: Set<string>
   onToggleFavorite: (id: string) => void
+  footer?: React.ReactNode
   className?: string
 }
 
@@ -240,6 +242,7 @@ export function DataTableView({
   onToggleExpansion,
   favorites,
   onToggleFavorite,
+  footer,
   className,
 }: DataTableViewProps) {
   // Column widths: keyed by column key, value in px
@@ -286,8 +289,9 @@ export function DataTableView({
   const expandColKeys = visibleColumns.filter((k) => columns[k]?.type === 'expand')
 
   return (
+    <div className={cn('mx-4 mb-4 border border-border rounded-md overflow-hidden', className)}>
     <div
-        className={cn('overflow-x-auto', className)}
+        className="overflow-x-auto"
         role="region"
         aria-label="Datentabelle"
         tabIndex={0}
@@ -445,5 +449,7 @@ export function DataTableView({
           </TableBody>
         </Table>
       </div>
+      {footer && <div className="border-t border-border">{footer}</div>}
+    </div>
   )
 }

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

@@ -97,6 +97,17 @@ export function DataVisualizationPage({ className }: { className?: string }) {
               onToggleExpansion={state.toggleExpansion}
               favorites={state.favorites}
               onToggleFavorite={state.toggleFavorite}
+              footer={
+                <DataExplorerPagination
+                  currentPage={state.currentPage}
+                  totalPages={state.totalPages}
+                  pageSize={state.pageSize}
+                  totalFiltered={state.totalFiltered}
+                  resultLabel={state.domainConfig.resultLabel}
+                  onPageChange={state.setPage}
+                  onPageSizeChange={state.setPageSize}
+                />
+              }
             />
           )}
           {state.viewMode === 'list' && (
@@ -124,7 +135,7 @@ export function DataVisualizationPage({ className }: { className?: string }) {
         </>
       )}
 
-      {state.totalFiltered > 0 && (
+      {state.totalFiltered > 0 && state.viewMode !== 'table' && (
         <DataExplorerPagination
           currentPage={state.currentPage}
           totalPages={state.totalPages}

package/dist/examples/data-visualization/constants.ts

@@ -283,7 +283,7 @@ export const MOCK_PRODUCTS: Record<string, unknown>[] = [
 // ===== PROJECT DOMAIN =====
 
 const PROJECT_COLUMNS: Record<string, ColumnDef> = {
-  favorite: { label: 'Favorit', type: 'favorite', sortable: false, filterable: false, visible: true },
+  favorite: { label: 'Favorit', type: 'favorite', sortable: false, filterable: false, visible: true, headerIcon: 'star', headerTooltip: 'Favorit' },
   name: { label: 'Projektname', type: 'double-text', sortable: true, filterable: false, visible: true, secondary: 'customer_name', searchable: true },
   customer_name: { label: 'Kunde', type: 'link', sortable: true, filterable: true, primaryFilter: true, visible: true, searchable: true },
   status: {
@@ -354,7 +354,7 @@ export const MOCK_PROJECTS: Record<string, unknown>[] = [
 // ===== CUSTOMER DOMAIN =====
 
 const CUSTOMER_COLUMNS: Record<string, ColumnDef> = {
-  favorite: { label: 'Favorit', type: 'favorite', sortable: false, filterable: false, visible: true },
+  favorite: { label: 'Favorit', type: 'favorite', sortable: false, filterable: false, visible: true, headerIcon: 'star', headerTooltip: 'Favorit' },
   name: { label: 'Kunde', type: 'double-text', sortable: true, filterable: false, visible: true, secondary: 'main_customer', searchable: true },
   category: { label: 'Kategorie', type: 'text', sortable: true, filterable: true, primaryFilter: true, visible: true, searchable: true },
   region: { label: 'Region', type: 'text', sortable: true, filterable: true, primaryFilter: true, visible: true, hideTablet: true },
@@ -418,7 +418,7 @@ export const MOCK_CUSTOMERS: Record<string, unknown>[] = [
 // ===== APPLICATION DOMAIN =====
 
 const APPLICATION_COLUMNS: Record<string, ColumnDef> = {
-  favorite: { label: 'Favorit', type: 'favorite', sortable: false, filterable: false, visible: true },
+  favorite: { label: 'Favorit', type: 'favorite', sortable: false, filterable: false, visible: true, headerIcon: 'star', headerTooltip: 'Favorit' },
   name: { label: 'Applikation', type: 'double-text', sortable: true, filterable: false, visible: true, secondary: 'description', searchable: true },
   url: { label: 'Referenz', type: 'link', sortable: false, filterable: false, visible: true, hideMobile: true },
   trends: { label: 'Trend', type: 'text', sortable: true, filterable: true, primaryFilter: true, visible: true, hideTablet: true, searchable: true },

package/dist/examples/data-visualization/hooks/use-data-explorer-state.ts

@@ -63,7 +63,7 @@ export function useDataExplorerState(
   initialDomain: DomainKey = 'products',
 ): DataExplorerState {
   const [activeDomain, setActiveDomainRaw] = useState<DomainKey>(initialDomain)
-  const [viewMode, setViewMode] = useState<ViewMode>('table')
+  const [viewMode, setViewModeRaw] = useState<ViewMode>('table')
   const [sort, setSort] = useState<SortState>({ column: null, direction: 'asc' })
   const [filters, setFilters] = useState<FilterState>({})
   const [searchTerm, setSearchTermRaw] = useState('')
@@ -79,6 +79,11 @@ export function useDataExplorerState(
     [activeDomain],
   )
 
+  const setViewMode = useCallback((mode: ViewMode) => {
+    setViewModeRaw(mode)
+    setSort({ column: null, direction: 'asc' })
+  }, [])
+
   const setActiveDomain = useCallback((domain: DomainKey) => {
     setActiveDomainRaw(domain)
     setSort({ column: null, direction: 'asc' })

package/dist/examples/data-visualization/types.ts

@@ -1,3 +1,5 @@
+import type React from 'react'
+
 export type DomainKey = 'products' | 'projects' | 'customers' | 'applications'
 
 export type CellType =
@@ -32,6 +34,14 @@ export interface ExpandColumnDef {
   type?: CellType
 }
 
+export interface RenderCellOptions {
+  mode?: 'default' | 'compact' | 'inventory-label'
+  isExpanded?: boolean
+  isFavorite?: boolean
+  onToggleExpand?: () => void
+  onToggleFavorite?: () => void
+}
+
 export interface ColumnDef {
   label: string
   type: CellType
@@ -57,6 +67,7 @@ export interface ColumnDef {
   hideTablet?: boolean
   hideMobile?: boolean
   rowLines?: number
+  render?: (val: unknown, row: Record<string, unknown>, opts: RenderCellOptions) => React.ReactNode
 }
 
 export interface ListLayout {