@fastnd/components 1.0.32 → 1.0.34

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,52 @@ 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-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-foreground uppercase tracking-[0.03em]">
+        {titleLabel}
+      </div>
+      {layout.badgeFields.map((field) => (
+        <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-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>
+  )
+}
+
 function DataListView({
   data,
   columns,
@@ -130,82 +177,81 @@ function DataListView({
   onToggleExpansion,
   favorites,
   onToggleFavorite,
+  showHeader = false,
   className,
 }: DataListViewProps) {
   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
       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}>
+            {/* 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) : ''}
+                  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, no fixed width */}
+              <div className="flex-1 min-w-0">
+                <div className="font-semibold text-sm truncate">
+                  {titleValue != null ? String(titleValue) : ''}
+                </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>
                 )}
-                {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">
+              {/* 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>
                 )
               })}
-            </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
@@ -220,16 +266,23 @@ function DataListView({
                   </React.Fragment>
                 )
               })}
+
+              {/* Actions */}
+              {actionsColKey && renderCell(actionsColKey, columns[actionsColKey], row, {
+                onAddToProject: () => {},
+                onAddToCollection: () => {},
+                onDelete: () => {},
+              })}
             </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 React, { useState, useRef, useCallback, useLayoutEffect } from '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)
@@ -35,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)
@@ -62,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"
@@ -83,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">
@@ -110,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>
     )
@@ -154,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
@@ -200,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}
@@ -227,6 +227,7 @@ export interface DataTableViewProps {
   onToggleExpansion: (rowId: string, field: string) => void
   favorites: Set<string>
   onToggleFavorite: (id: string) => void
+  footer?: React.ReactNode
   className?: string
 }
 
@@ -240,11 +241,18 @@ export function DataTableView({
   onToggleExpansion,
   favorites,
   onToggleFavorite,
+  footer,
   className,
 }: DataTableViewProps) {
   // 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
@@ -252,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()
@@ -285,16 +318,30 @@ 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
-        className={cn('overflow-x-auto', className)}
+        className="overflow-x-auto"
         role="region"
         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
@@ -423,6 +470,9 @@ export function DataTableView({
                             isFavorite,
                             onToggleExpand: () => onToggleExpansion(rowId, colKey),
                             onToggleFavorite: () => onToggleFavorite(rowId),
+                            onAddToProject: () => {},
+                            onAddToCollection: () => {},
+                            onDelete: () => {},
                           })}
                         </TableCell>
                       )
@@ -437,6 +487,7 @@ export function DataTableView({
                       colKey={expColKey}
                       visibleColumns={visibleColumns}
                       columns={columns}
+                      columnWidths={columnWidths}
                     />
                   ))}
                 </React.Fragment>
@@ -445,5 +496,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

@@ -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 = {
@@ -283,7 +284,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 +355,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 +419,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 =
@@ -10,6 +12,7 @@ export type CellType =
   | 'favorite'
   | 'expand'
   | 'score-bar'
+  | 'actions'
 
 export type ViewMode = 'table' | 'list' | 'card'
 
@@ -32,6 +35,17 @@ export interface ExpandColumnDef {
   type?: CellType
 }
 
+export interface RenderCellOptions {
+  mode?: 'default' | 'compact' | 'inventory-label'
+  isExpanded?: boolean
+  isFavorite?: boolean
+  onToggleExpand?: () => void
+  onToggleFavorite?: () => void
+  onAddToProject?: () => void
+  onAddToCollection?: () => void
+  onDelete?: () => void
+}
+
 export interface ColumnDef {
   label: string
   type: CellType
@@ -39,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
@@ -57,6 +73,9 @@ 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
 }
 
 export interface ListLayout {