@papernote/ui/dist/components/DataTableCardView.d.ts

A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive

import React from 'react';
import { BaseDataItem, DataTableColumn, DataTableAction } from './DataTable';
/**
 * Configuration for how data should display in card view
 */
export interface CardViewConfig<T> {
    /** Column key to use as the main title */
    titleKey: keyof T | string;
    /** Column key to use as subtitle (optional) */
    subtitleKey?: keyof T | string;
    /** Column keys to show as metadata rows */
    metadataKeys?: (keyof T | string)[];
    /** Column key to use for badge/status display */
    badgeKey?: keyof T | string;
    /** Column key for avatar/image (renders circular image) */
    avatarKey?: keyof T | string;
    /** Custom render function for entire card content */
    renderCard?: (item: T, columns: DataTableColumn<T>[]) => React.ReactNode;
    /** Show chevron indicator for clickable cards */
    showChevron?: boolean;
}
export interface DataTableCardViewProps<T extends BaseDataItem> {
    /** Data items to display */
    data: T[];
    /** Column definitions (used for rendering values and getting column info) */
    columns: DataTableColumn<T>[];
    /** Card view configuration */
    cardConfig?: CardViewConfig<T>;
    /** Loading state */
    loading?: boolean;
    /** Number of skeleton cards to show while loading */
    loadingRows?: number;
    /** Empty state message */
    emptyMessage?: string;
    /** Click handler for card tap */
    onCardClick?: (item: T) => void;
    /** Long press / context menu handler */
    onCardLongPress?: (item: T, event: React.TouchEvent | React.MouseEvent) => void;
    /** Enable selection mode */
    selectable?: boolean;
    /** Currently selected row keys */
    selectedRows?: Set<string>;
    /** Selection change handler */
    onSelectionChange?: (selectedRows: string[]) => void;
    /** Function to extract unique key from row */
    keyExtractor?: (row: T) => string;
    /** Row actions (shown in action menu) */
    actions?: DataTableAction<T>[];
    /** Built-in edit handler */
    onEdit?: (item: T) => void;
    /** Built-in delete handler */
    onDelete?: (item: T) => void;
    /** Additional CSS classes */
    className?: string;
    /** Custom card class name */
    cardClassName?: string;
    /** Gap between cards */
    gap?: 'sm' | 'md' | 'lg';
}
/**
 * DataTableCardView - Mobile-friendly card view for data tables
 *
 * Renders data as cards instead of table rows, optimized for touch interaction.
 * Automatically uses column render functions for consistent data display.
 *
 * @example Basic usage
 * ```tsx
 * <DataTableCardView
 *   data={users}
 *   columns={columns}
 *   cardConfig={{
 *     titleKey: 'name',
 *     subtitleKey: 'email',
 *     metadataKeys: ['department', 'role'],
 *     badgeKey: 'status',
 *   }}
 *   onCardClick={(user) => navigate(`/users/${user.id}`)}
 * />
 * ```
 *
 * @example With selection
 * ```tsx
 * <DataTableCardView
 *   data={orders}
 *   columns={columns}
 *   cardConfig={{
 *     titleKey: 'orderNumber',
 *     subtitleKey: 'customer',
 *     badgeKey: 'status',
 *   }}
 *   selectable
 *   selectedRows={selectedOrders}
 *   onSelectionChange={setSelectedOrders}
 * />
 * ```
 */
export declare function DataTableCardView<T extends BaseDataItem>({ data, columns, cardConfig, loading, loadingRows, emptyMessage, onCardClick, onCardLongPress, selectable, selectedRows, onSelectionChange, keyExtractor, actions, onEdit, onDelete, className, cardClassName, gap, }: DataTableCardViewProps<T>): import("react/jsx-runtime").JSX.Element;
export default DataTableCardView;
//# sourceMappingURL=DataTableCardView.d.ts.map