@fastnd/components 1.0.33 → 1.0.34

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

@@ -10,11 +10,11 @@ import type { Project, ProjectStatus } from '../types'
 import { STATUS_CONFIG } from '../constants'
 
 const STATUS_BADGE_CLASSES: Record<ProjectStatus, string> = {
-  'neu':           'bg-primary/10 text-primary border-transparent',
-  'offen':         'bg-muted-foreground/10 text-muted-foreground border-transparent',
-  'in-prufung':    'bg-[#ebbe0d]/15 text-[#8a7100] border-transparent',
-  'validierung':   'bg-[#e8a026]/15 text-[#8a5a00] border-transparent',
-  'abgeschlossen': 'bg-[#1ec489]/15 text-[#0a6e44] border-transparent',
+  'neu':           'border-primary',
+  'offen':         'border-muted-foreground',
+  'in-prufung':    'border-[#ebbe0d]',
+  'validierung':   'border-[#e8a026]',
+  'abgeschlossen': 'border-[#1ec489]',
 }
 
 const STATIC_SORT: SortState = { column: null, direction: 'asc' }
@@ -75,7 +75,7 @@ const ProjectList = React.forwardRef<HTMLElement, ProjectListProps>(
         render: (val) => {
           const s = val as ProjectStatus
           return (
-            <Badge variant="secondary" className={STATUS_BADGE_CLASSES[s]}>
+            <Badge variant="outline" className={STATUS_BADGE_CLASSES[s]}>
               {STATUS_CONFIG[s].label}
             </Badge>
           )

package/dist/examples/dashboard/StatusDonutChart/StatusDonutChart.tsx

@@ -58,7 +58,7 @@ const StatusDonutChart = React.forwardRef<HTMLDivElement, StatusDonutChartProps>
         {...props}
       >
         {/* Relative wrapper so the center label overlay can be positioned absolutely */}
-        <div className="relative mx-auto aspect-square max-h-[200px]">
+        <div className="relative mx-auto aspect-square max-h-[160px]">
           <ChartContainer config={chartConfig} className="size-full">
             <PieChart>
               <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
@@ -66,8 +66,8 @@ const StatusDonutChart = React.forwardRef<HTMLDivElement, StatusDonutChartProps>
                 data={chartData}
                 dataKey="count"
                 nameKey="status"
-                innerRadius={60}
-                outerRadius={85}
+                innerRadius={48}
+                outerRadius={68}
                 strokeWidth={5}
                 className="cursor-pointer"
                 onClick={handlePieClick}
@@ -88,7 +88,7 @@ const StatusDonutChart = React.forwardRef<HTMLDivElement, StatusDonutChartProps>
           {/* Center label — rendered as HTML so it is always in the DOM (recharts SVG labels are invisible in jsdom) */}
           <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-0.5">
             <span
-              className="text-3xl font-bold text-foreground"
+              className="text-2xl font-bold text-foreground"
               style={{ fontFamily: 'var(--font-clash)' }}
             >
               {total.toLocaleString()}

package/dist/examples/dashboard/StatusFilterLegend/StatusFilterLegend.tsx

@@ -43,7 +43,7 @@ const StatusFilterLegend = React.forwardRef<HTMLDivElement, StatusFilterLegendPr
               data-filter={filter}
               onClick={() => onFilterChange(filter)}
               className={cn(
-                'flex items-center justify-between w-full px-3 py-2 rounded-md border border-transparent transition-colors cursor-pointer text-sm outline-none focus-visible:bg-muted',
+                'flex items-center justify-between w-full px-3 py-1.5 rounded-md border border-transparent transition-colors cursor-pointer text-sm outline-none focus-visible:bg-muted',
                 isActive ? 'bg-muted border-border' : 'hover:bg-muted',
               )}
             >

package/dist/examples/dashboard/StatusOverview/StatusOverview.tsx

@@ -22,7 +22,7 @@ const StatusOverview = React.forwardRef<HTMLElement, StatusOverviewProps>(
         className={cn(className)}
         {...props}
       >
-        <Card>
+        <Card className="h-full py-4 gap-3">
           <CardHeader>
             <CardTitle
               className="text-2xl font-medium"

package/dist/examples/dashboard/constants.ts

@@ -21,12 +21,12 @@ export const MOCK_PROJECTS: Project[] = [
 
 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)  },
+  { id: '7',  name: 'Supply Chain Visibility & Tracking Platform',  client: 'Bayerische LogiTrans Handelsgesellschaft mbH', application: 'Next.js 14 / tRPC / PostgreSQL',         status: 'in-prufung',    isFavorite: true,  createdAt: '2024-12-03', updatedAt: d(2)  },
+  { id: '8',  name: 'HR Self-Service & Workforce Management Portal', client: 'Personalwerk Süddeutschland AG',               application: 'Angular 17 / .NET Core 8 / Azure AD',    status: 'offen',         isFavorite: false, createdAt: '2025-01-08', updatedAt: d(5)  },
+  { id: '9',  name: 'Echtzeit IoT Monitoring & Alerting Dashboard', client: 'SmartFactory Automatisierungstechnik SE',       application: 'Vue.js 3 / InfluxDB / Grafana',          status: 'validierung',   isFavorite: false, createdAt: '2024-10-14', updatedAt: d(9)  },
+  { id: '10', name: 'Digitales Dokumenten- & Archivierungssystem',  client: 'Kanzlei Bauer, Hoffmann & Partner GbR',        application: 'SharePoint Online / Power Automate',     status: 'abgeschlossen', isFavorite: false, createdAt: '2024-06-01', updatedAt: d(30) },
+  { id: '11', name: 'Multi-Channel Customer Loyalty & Rewards App', client: 'Retail Chain Deutschland GmbH & Co. KG',       application: 'React Native / Expo / Firebase',         status: 'neu',           isFavorite: false, createdAt: '2025-03-20', updatedAt: d(0)  },
+  { id: '12', name: 'KI-gestützte Predictive Maintenance Engine',   client: 'IndustrieWerk Maschinenbau KG',                application: 'Python 3.12 / FastAPI / PyTorch / MLflow',status: 'in-prufung',    isFavorite: true,  createdAt: '2024-09-17', updatedAt: d(4)  },
+  { id: '13', name: 'Automatisierte Compliance & Audit Reporting Suite', client: 'RegulaCorp Financial Services AG',        application: 'Power BI Embedded / Azure Synapse',      status: 'offen',         isFavorite: false, createdAt: '2025-02-25', updatedAt: d(11) },
+  { id: '14', name: 'Mobile Field Service & Wartungsmanagement',    client: 'TechService Außendienst GmbH',                 application: 'Salesforce Field Service / MuleSoft',    status: 'validierung',   isFavorite: true,  createdAt: '2024-07-30', updatedAt: d(6)  },
 ]

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ChevronDown, ArrowLeftRight, Sparkles } from 'lucide-react'
+import { ChevronDown, ArrowLeftRight, Sparkles, FolderPlus, BookmarkPlus, Trash2 } from 'lucide-react'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { ScoreBar } from '@/components/ScoreBar/ScoreBar'
@@ -10,10 +10,10 @@ 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',
-  nrnd: 'bg-[var(--lifecycle-nrnd-bg)] text-[var(--lifecycle-nrnd)] border-transparent',
-  eol: 'bg-[var(--lifecycle-eol-bg)] text-[var(--lifecycle-eol)] border-transparent',
-  production: 'bg-[var(--lifecycle-production-bg)] text-[var(--lifecycle-production)] border-transparent',
+  active:     'border-[var(--lifecycle-active)]',
+  nrnd:       'border-[var(--lifecycle-nrnd)]',
+  eol:        'border-[var(--lifecycle-eol)]',
+  production: 'border-[var(--lifecycle-production)]',
 }
 
 const INVENTORY_COLORS: Record<string, string> = {
@@ -33,7 +33,7 @@ export function renderCell(
   row: Record<string, unknown>,
   options: RenderCellOptions = {},
 ): React.ReactNode {
-  const { mode = 'default', isExpanded = false, isFavorite = false, onToggleExpand, onToggleFavorite } = options
+  const { mode = 'default', isExpanded = false, isFavorite = false, onToggleExpand, onToggleFavorite, onAddToProject, onAddToCollection, onDelete } = options
   const val = row[colKey]
 
   if (col.render) return col.render(val, row, options)
@@ -79,7 +79,7 @@ export function renderCell(
       if (val == null || !col.statusMap) return <span className="text-[13px]">{val != null ? String(val) : ''}</span>
       const status = col.statusMap[String(val)] ?? 'active'
       return (
-        <Badge className={STATUS_COLORS[status]}>
+        <Badge variant="outline" className={STATUS_COLORS[status]}>
           {String(val)}
         </Badge>
       )
@@ -164,6 +164,40 @@ export function renderCell(
       )
     }
 
+    case 'actions': {
+      return (
+        <div className="flex items-center justify-end gap-0.5">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-7 text-muted-foreground hover:text-foreground"
+            aria-label="Zu Projekt hinzufügen"
+            onClick={(e) => { e.stopPropagation(); onAddToProject?.() }}
+          >
+            <FolderPlus className="size-3.5" aria-hidden="true" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-7 text-muted-foreground hover:text-foreground"
+            aria-label="Zu Sammlung hinzufügen"
+            onClick={(e) => { e.stopPropagation(); onAddToCollection?.() }}
+          >
+            <BookmarkPlus className="size-3.5" aria-hidden="true" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-7 text-muted-foreground hover:text-destructive"
+            aria-label="Produkt löschen"
+            onClick={(e) => { e.stopPropagation(); onDelete?.() }}
+          >
+            <Trash2 className="size-3.5" aria-hidden="true" />
+          </Button>
+        </div>
+      )
+    }
+
     default: {
       return <span className="text-[13px]">{val != null ? String(val) : ''}</span>
     }

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

@@ -106,7 +106,7 @@ export function ColumnConfigPopover({
         >
           <SortableContext items={columnOrder} strategy={verticalListSortingStrategy}>
             <div className="p-1">
-              {columnOrder.map((key) => (
+              {columnOrder.filter((key) => columns[key]?.configurable !== false).map((key) => (
                 <SortableColumnItem
                   key={key}
                   colKey={key}

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

@@ -86,6 +86,7 @@ function DataCardView({
 }: DataCardViewProps) {
   const gridRef = useRef<HTMLDivElement>(null)
   const expandFields = getExpandFields(layout)
+  const actionsColKey = Object.keys(columns).find((k) => columns[k]?.type === 'actions')
 
   useLayoutEffect(() => {
     if (gridRef.current) {
@@ -172,22 +173,29 @@ function DataCardView({
                   </div>
                 )}
 
-                {/* Footer — expand buttons */}
-                {expandFields.length > 0 && (
+                {/* Footer — expand buttons + actions */}
+                {(expandFields.length > 0 || actionsColKey) && (
                   <div className="mt-auto p-4 pt-3 border-t border-border">
-                    <div className="flex gap-2">
-                      {expandFields.map((ef) => {
-                        const col = columns[ef]
-                        if (!col) return null
-                        const expansionKey = `${rowId}::${ef}`
-                        return (
-                          <React.Fragment key={ef}>
-                            {renderCell(ef, col, row, {
-                              isExpanded: expandedRows.has(expansionKey),
-                              onToggleExpand: () => onToggleExpansion(rowId, ef),
-                            })}
-                          </React.Fragment>
-                        )
+                    <div className="flex items-center justify-between gap-2">
+                      <div className="flex gap-2">
+                        {expandFields.map((ef) => {
+                          const col = columns[ef]
+                          if (!col) return null
+                          const expansionKey = `${rowId}::${ef}`
+                          return (
+                            <React.Fragment key={ef}>
+                              {renderCell(ef, col, row, {
+                                isExpanded: expandedRows.has(expansionKey),
+                                onToggleExpand: () => onToggleExpansion(rowId, ef),
+                              })}
+                            </React.Fragment>
+                          )
+                        })}
+                      </div>
+                      {actionsColKey && renderCell(actionsColKey, columns[actionsColKey], row, {
+                        onAddToProject: () => {},
+                        onAddToCollection: () => {},
+                        onDelete: () => {},
                       })}
                     </div>
                   </div>

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

@@ -140,22 +140,31 @@ function ListHeader({ columns, layout }: ListHeaderProps) {
     : (titleCol?.label ?? '')
 
   return (
-    <div className="flex items-center gap-3 px-4 py-2 border-b border-border">
+    <div className="flex items-center gap-3 px-4 py-3 border-b border-border bg-secondary">
       {/* 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">
+      <div className="flex-1 min-w-0 text-xs font-medium text-foreground uppercase tracking-[0.03em]">
         {titleLabel}
       </div>
       {layout.badgeFields.map((field) => (
-        <span key={field} className="shrink-0 text-xs font-medium text-muted-foreground">
+        <span
+          key={field}
+          style={{ minWidth: columns[field]?.badgeColumnWidth ?? 96 }}
+          className="shrink-0 text-xs font-medium text-foreground uppercase tracking-[0.03em] text-right"
+        >
           {columns[field]?.label ?? ''}
         </span>
       ))}
       {expandFields.map((field) => (
-        <span key={field} className="shrink-0 text-xs font-medium text-muted-foreground">
+        <span key={field} className="shrink-0 text-xs font-medium text-foreground uppercase tracking-[0.03em]">
           {columns[field]?.expandLabel ?? columns[field]?.label ?? ''}
         </span>
       ))}
+      {Object.values(columns).some((c) => c.type === 'actions') && (
+        <span className="shrink-0 text-xs font-medium text-foreground uppercase tracking-[0.03em]">
+          {Object.values(columns).find((c) => c.type === 'actions')?.label ?? 'Aktionen'}
+        </span>
+      )}
     </div>
   )
 }
@@ -174,6 +183,7 @@ function DataListView({
   const expandFields = layout.expandFields ?? (layout.expandField ? [layout.expandField] : [])
   const titleCol = columns[layout.titleField]
   const isDoubleText = titleCol?.type === 'double-text'
+  const actionsColKey = Object.keys(columns).find((k) => columns[k]?.type === 'actions')
 
   return (
     <div
@@ -190,9 +200,9 @@ function DataListView({
 
         return (
           <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">
+            {/* Row: Fav | Title + dot-meta | Fixed-width badge columns | Expand */}
+            <div className="flex items-start gap-3 px-4 py-3 hover:bg-accent transition-colors">
+              <div className="flex-none mt-0.5">
                 <FavoriteButton
                   pressed={favorites.has(rowId)}
                   itemName={titleValue != null ? String(titleValue) : ''}
@@ -200,45 +210,44 @@ function DataListView({
                 />
               </div>
 
-              {/* Title block grows to fill space — no fixed width */}
+              {/* Title block — grows, 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>
+                {/* Meta line: subtitle + metaFields, dot-separated, each segment truncated */}
+                {(subtitleValue != null || layout.metaFields.some(f => row[f] != null && row[f] !== '')) && (
+                  <p className="text-xs text-muted-foreground mt-0.5 flex min-w-0">
+                    {[
+                      ...(subtitleValue != null ? [String(subtitleValue)] : []),
+                      ...layout.metaFields
+                        .map(f => row[f])
+                        .filter(v => v != null && v !== '')
+                        .map(String),
+                    ].map((item, i) => (
+                      <React.Fragment key={i}>
+                        {i > 0 && <span className="shrink-0 px-1">·</span>}
+                        <span className="truncate max-w-[160px]">{item}</span>
+                      </React.Fragment>
+                    ))}
+                  </p>
                 )}
               </div>
 
-              {/* Badges — shrink-0, sizes to content, no fixed column */}
+              {/* Badge columns — fixed min-width per column for vertical alignment */}
               {layout.badgeFields.map((field) => {
                 const col = columns[field]
                 if (!col) return null
                 return (
-                  <React.Fragment key={field}>
+                  <div
+                    key={field}
+                    style={{ minWidth: col.badgeColumnWidth ?? 96 }}
+                    className="flex justify-end items-start"
+                  >
                     {renderCell(field, col, row, {
                       mode: col.type === 'inventory' ? 'inventory-label' : 'default',
                     })}
-                  </React.Fragment>
+                  </div>
                 )
               })}
 
@@ -257,6 +266,13 @@ function DataListView({
                   </React.Fragment>
                 )
               })}
+
+              {/* Actions */}
+              {actionsColKey && renderCell(actionsColKey, columns[actionsColKey], row, {
+                onAddToProject: () => {},
+                onAddToCollection: () => {},
+                onDelete: () => {},
+              })}
             </div>
 
             {/* Expansion panels — full width, below the row */}

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback } from 'react'
+import React, { useState, useRef, useCallback, useLayoutEffect } from 'react'
 import { ChevronUp, ChevronDown, ArrowLeftRight, Sparkles, Plus, Star } from 'lucide-react'
 import {
   Table,
@@ -36,6 +36,7 @@ const DEFAULT_MIN_WIDTHS: Partial<Record<string, number>> = {
   currency: 100,
   'double-text': 200,
   link: 140,
+  actions: 112,
 }
 
 // Column types that should wrap text (line-clamp handles truncation)
@@ -63,7 +64,7 @@ function ExpansionCell({ mainColKey, expandColKey, mainCol, mapLookup, item }: E
   if (mainColKey === expandColKey) {
     return (
       <Button
-        variant="ghost"
+        variant="outline"
         size="icon"
         className="size-7"
         aria-label="Hinzufügen"
@@ -84,7 +85,7 @@ function ExpansionCell({ mainColKey, expandColKey, mainCol, mapLookup, item }: E
     const sec = item[ec.secondaryKey]
     return (
       <>
-        <span className={cn('font-semibold text-[13px] line-clamp-2', ec.bold && 'font-bold')}>
+        <span className={cn('font-medium text-[13px] line-clamp-2', ec.bold && 'font-bold')}>
           {val != null ? String(val) : ''}
         </span>
         <span className="text-muted-foreground text-xs line-clamp-1">
@@ -111,17 +112,13 @@ function ExpansionCell({ mainColKey, expandColKey, mainCol, mapLookup, item }: E
   if (mainCol.type === 'status-badge' && mainCol.statusMap && val != null) {
     const status = mainCol.statusMap[String(val)] ?? 'active'
     const STATUS_COLORS: Record<string, string> = {
-      active: 'bg-[var(--lifecycle-active-bg)] text-[var(--lifecycle-active)] border-transparent',
-      nrnd: 'bg-[var(--lifecycle-nrnd-bg)] text-[var(--lifecycle-nrnd)] border-transparent',
-      eol: 'bg-[var(--lifecycle-eol-bg)] text-[var(--lifecycle-eol)] border-transparent',
-      production: 'bg-[var(--lifecycle-production-bg)] text-[var(--lifecycle-production)] border-transparent',
+      active:     'border-[var(--lifecycle-active)]',
+      nrnd:       'border-[var(--lifecycle-nrnd)]',
+      eol:        'border-[var(--lifecycle-eol)]',
+      production: 'border-[var(--lifecycle-production)]',
     }
     return (
-      <Badge className={cn('gap-1.5', STATUS_COLORS[status])}>
-        <span
-          className={cn('size-1.5 rounded-full', `bg-[var(--lifecycle-${status})]`)}
-          aria-hidden="true"
-        />
+      <Badge variant="outline" className={STATUS_COLORS[status]}>
         {String(val)}
       </Badge>
     )
@@ -155,9 +152,10 @@ interface ExpansionSectionProps {
   colKey: string
   visibleColumns: string[]
   columns: Record<string, ColumnDef>
+  columnWidths: Record<string, number>
 }
 
-function ExpansionSection({ row, colKey, visibleColumns, columns }: ExpansionSectionProps) {
+function ExpansionSection({ row, colKey, visibleColumns, columns, columnWidths }: ExpansionSectionProps) {
   const col = columns[colKey]
   const items = row[colKey] as Record<string, unknown>[] | undefined
   if (!items?.length || !col.expandColumns) return null
@@ -201,6 +199,7 @@ function ExpansionSection({ row, colKey, visibleColumns, columns }: ExpansionSec
                   mainCol.hideTablet && 'hidden lg:table-cell',
                   mainCol.hideMobile && 'hidden sm:table-cell',
                 )}
+                style={columnWidths[mainKey] != null ? { width: columnWidths[mainKey] } : undefined}
               >
                 <ExpansionCell
                   mainColKey={mainKey}
@@ -248,6 +247,12 @@ export function DataTableView({
   // Column widths: keyed by column key, value in px
   const [columnWidths, setColumnWidths] = useState<Record<string, number>>({})
 
+  // Ref to the header <tr> for snapshotting rendered column widths
+  const headerRowRef = useRef<HTMLTableRowElement>(null)
+
+  // Tracks the previous visibleColumns reference to detect changes
+  const prevVisibleRef = useRef<string[]>(visibleColumns)
+
   // Resize tracking ref (not state — no re-render during drag)
   const resizeRef = useRef<{
     colKey: string
@@ -255,6 +260,31 @@ export function DataTableView({
     startWidth: number
   } | null>(null)
 
+  // Measure-then-lock: snapshot <th> widths while table is still table-layout:auto,
+  // then switch to table-fixed via colgroup so expansion rows can never widen columns.
+  useLayoutEffect(() => {
+    const prev = prevVisibleRef.current
+    const changed =
+      prev.length !== visibleColumns.length || prev.some((k, i) => k !== visibleColumns[i])
+    if (changed) {
+      // Column set changed — clear all widths so the table re-snapshots with natural auto sizing
+      prevVisibleRef.current = visibleColumns
+      setColumnWidths({})
+      return
+    }
+    if (!headerRowRef.current) return
+    const ths = Array.from(headerRowRef.current.querySelectorAll('th')) as HTMLTableCellElement[]
+    setColumnWidths((prev) => {
+      const next = { ...prev }
+      visibleColumns.forEach((colKey, i) => {
+        if (next[colKey] == null && ths[i]) {
+          next[colKey] = ths[i].getBoundingClientRect().width
+        }
+      })
+      return next
+    })
+  }, [visibleColumns])
+
   const handleResizeMouseDown = useCallback(
     (e: React.MouseEvent, colKey: string) => {
       e.preventDefault()
@@ -288,6 +318,10 @@ export function DataTableView({
   // Collect expand column keys for the current domain
   const expandColKeys = visibleColumns.filter((k) => columns[k]?.type === 'expand')
 
+  // Switch to table-fixed only after all columns have been measured — prevents content in
+  // expansion rows from ever forcing a column to widen.
+  const isFixed = visibleColumns.every((k) => columnWidths[k] != null)
+
   return (
     <div className={cn('mx-4 mb-4 border border-border rounded-md overflow-hidden', className)}>
     <div
@@ -296,9 +330,18 @@ export function DataTableView({
         aria-label="Datentabelle"
         tabIndex={0}
       >
-        <Table>
+        <Table className={isFixed ? 'table-fixed' : undefined}>
+          {/* colgroup enforces widths on ALL rows (including expansion rows) */}
+          <colgroup>
+            {visibleColumns.map((colKey) => (
+              <col
+                key={colKey}
+                style={columnWidths[colKey] != null ? { width: columnWidths[colKey] } : undefined}
+              />
+            ))}
+          </colgroup>
           <TableHeader>
-            <TableRow className="bg-secondary hover:bg-secondary">
+            <TableRow ref={headerRowRef} className="bg-secondary hover:bg-secondary">
               {visibleColumns.map((colKey) => {
                 const col = columns[colKey]
                 if (!col) return null
@@ -427,6 +470,9 @@ export function DataTableView({
                             isFavorite,
                             onToggleExpand: () => onToggleExpansion(rowId, colKey),
                             onToggleFavorite: () => onToggleFavorite(rowId),
+                            onAddToProject: () => {},
+                            onAddToCollection: () => {},
+                            onDelete: () => {},
                           })}
                         </TableCell>
                       )
@@ -441,6 +487,7 @@ export function DataTableView({
                       colKey={expColKey}
                       visibleColumns={visibleColumns}
                       columns={columns}
+                      columnWidths={columnWidths}
                     />
                   ))}
                 </React.Fragment>

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

@@ -3,8 +3,8 @@ import type { ColumnDef, DomainConfig, DomainKey, DomainLayout } from './types'
 // ===== PRODUCT DOMAIN =====
 
 const PRODUCT_COLUMNS: Record<string, ColumnDef> = {
-  product_category: { label: 'Produktkategorie', type: 'text', sortable: true, filterable: true, primaryFilter: true, visible: true, searchable: true },
-  product_group: { label: 'Produktgruppe', type: 'text', sortable: true, filterable: true, primaryFilter: true, visible: true, searchable: true },
+  product_category: { label: 'Kategorie', type: 'text', sortable: true, filterable: true, primaryFilter: true, visible: true, searchable: true },
+  product_group: { label: 'Gruppe', type: 'text', sortable: true, filterable: true, primaryFilter: true, visible: true, searchable: true },
   part_number: { label: 'Produkt', type: 'double-text', sortable: true, filterable: false, visible: true, secondary: 'product_family_name', searchable: true },
   manufacturer_name: { label: 'Hersteller', type: 'link', sortable: true, filterable: true, primaryFilter: false, visible: true, searchable: true },
   description: { label: 'Beschreibung', type: 'text', sortable: false, filterable: false, visible: true, searchable: true, rowLines: 2 },
@@ -32,7 +32,7 @@ const PRODUCT_COLUMNS: Record<string, ColumnDef> = {
     expandColumns: [
       { key: 'alt_product_category', label: 'Kategorie', mapTo: 'product_category' },
       { key: 'alt_family_name', label: 'Familie', mapTo: 'product_group' },
-      { key: 'alt_part_number', label: 'Teilenummer', bold: true, mapTo: 'part_number', secondaryKey: 'alt_product_family_name' },
+      { key: 'alt_part_number', label: 'Teilenummer', mapTo: 'part_number', secondaryKey: 'alt_product_family_name' },
       { key: 'alt_manufacturer', label: 'Hersteller', mapTo: 'manufacturer_name' },
       { key: 'alt_description', label: 'Beschreibung', mapTo: 'description' },
       { key: 'alt_lifecycle', label: 'Status', mapTo: 'lifecycle' },
@@ -54,7 +54,7 @@ const PRODUCT_COLUMNS: Record<string, ColumnDef> = {
     expandColumns: [
       { key: 'cross_sell_product_category', label: 'Kategorie', mapTo: 'product_category' },
       { key: 'cross_sell_family_name', label: 'Familie', mapTo: 'product_group' },
-      { key: 'cross_sell_part_number', label: 'Teilenummer', bold: true, mapTo: 'part_number', secondaryKey: 'cross_sell_product_family_name' },
+      { key: 'cross_sell_part_number', label: 'Teilenummer', mapTo: 'part_number', secondaryKey: 'cross_sell_product_family_name' },
       { key: 'cross_sell_manufacturer', label: 'Hersteller', mapTo: 'manufacturer_name' },
       { key: 'cross_sell_description', label: 'Beschreibung', mapTo: 'description' },
       { key: 'recommendation_source', label: 'Quelle', muted: true, mapTo: 'lifecycle' },
@@ -83,6 +83,7 @@ const PRODUCT_COLUMNS: Record<string, ColumnDef> = {
       return v < 1000
     },
   },
+  actions: { label: 'Aktionen', type: 'actions', sortable: false, filterable: false, visible: true, configurable: false },
 }
 
 const PRODUCT_LAYOUT: DomainLayout = {

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

@@ -12,6 +12,7 @@ export type CellType =
   | 'favorite'
   | 'expand'
   | 'score-bar'
+  | 'actions'
 
 export type ViewMode = 'table' | 'list' | 'card'
 
@@ -40,6 +41,9 @@ export interface RenderCellOptions {
   isFavorite?: boolean
   onToggleExpand?: () => void
   onToggleFavorite?: () => void
+  onAddToProject?: () => void
+  onAddToCollection?: () => void
+  onDelete?: () => void
 }
 
 export interface ColumnDef {
@@ -49,6 +53,8 @@ export interface ColumnDef {
   filterable: boolean
   primaryFilter?: boolean
   visible: boolean
+  /** When false, column is excluded from the column-config popover (always visible, not reorderable) */
+  configurable?: boolean
   searchable?: boolean
   secondary?: string
   currencyField?: string
@@ -67,6 +73,8 @@ export interface ColumnDef {
   hideTablet?: boolean
   hideMobile?: boolean
   rowLines?: number
+  /** Min-width in px for badge column alignment in DataListView. Default: 96 */
+  badgeColumnWidth?: number
   render?: (val: unknown, row: Record<string, unknown>, opts: RenderCellOptions) => React.ReactNode
 }