@kreativa/ui 0.1.0 → 0.1.2

package/dist/index.d.mts

@@ -142,16 +142,18 @@ declare function FormButtonGroup({ cancelText, submitText, loadingText, isLoadin
 interface TableColumn<T> {
     /** Unique key for the column */
     key: string;
-    /** Column header text */
-    header: string;
+    /** Column header text or React element */
+    header: ReactNode;
     /** Function to render cell content */
     render: (item: T) => ReactNode;
     /** Whether this column is sortable */
     sortable?: boolean;
     /** Custom sort function */
     sortFn?: (a: T, b: T) => number;
-    /** Column width (e.g., '200px', '20%') */
+    /** Column width (e.g., '200px', '20%') - used as initial/min width */
     width?: string;
+    /** Minimum column width when resizing */
+    minWidth?: number;
     /** Text alignment */
     align?: 'left' | 'center' | 'right';
 }
@@ -170,11 +172,115 @@ interface TableProps<T> {
     emptyMessage?: string;
     /** Additional class names for the table container */
     className?: string;
+    /** Enable manual column resizing (default: false) */
+    resizable?: boolean;
+    /** Use fixed table layout for consistent column widths */
+    fixedLayout?: boolean;
 }
 /**
- * Table component for displaying tabular data with sorting support.
+ * Table component for displaying tabular data with sorting and optional resizing.
+ *
+ * Features:
+ * - Responsive by default - shrinks with container
+ * - Optional column resizing with drag handles
+ * - Sortable columns
+ * - Loading and empty states
+ */
+declare function Table<T>({ data, columns, getRowKey, onRowClick, loading, emptyMessage, className, resizable, fixedLayout, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+
+type FilterType = 'text' | 'select' | 'multiselect' | 'boolean' | 'date' | 'none';
+interface FilterOption {
+    value: string;
+    label: string;
+}
+interface DataTableColumn<T> extends Omit<TableColumn<T>, 'sortable' | 'header'> {
+    /** Column header text (must be string for filter placeholder) */
+    header: string;
+    /** Whether this column is sortable (default: true) */
+    sortable?: boolean;
+    /** Filter type for this column (default: 'text') */
+    filterType?: FilterType;
+    /** Options for select/multiselect filters */
+    filterOptions?: FilterOption[];
+    /** Function to get filterable value from item */
+    filterValue?: (item: T) => string | number | boolean | null | undefined;
+    /** Placeholder for filter input */
+    filterPlaceholder?: string;
+}
+interface DataTableProps<T> {
+    /** Array of data items to display */
+    data: T[];
+    /** Column definitions */
+    columns: DataTableColumn<T>[];
+    /** Function to get unique key for each row */
+    getRowKey: (item: T) => string | number;
+    /** Called when a row is clicked */
+    onRowClick?: (item: T) => void;
+    /** Whether the table is in a loading state */
+    loading?: boolean;
+    /** Message to show when data is empty */
+    emptyMessage?: string;
+    /** Additional class names for the table container */
+    className?: string;
+    /** Show filter row (default: true) */
+    showFilters?: boolean;
+    /** Initial sort column key */
+    initialSortKey?: string;
+    /** Initial sort direction */
+    initialSortDirection?: 'asc' | 'desc';
+    /** Called when filtered data changes (for external use, e.g., showing count) */
+    onFilteredDataChange?: (filteredData: T[]) => void;
+}
+/**
+ * DataTable component - an enhanced Table with built-in filtering and sorting.
+ *
+ * Features:
+ * - Text, select, multiselect, and boolean filters per column
+ * - Sortable columns (default: all columns are sortable)
+ * - Filter state management
+ * - Callback when filtered data changes
+ *
+ * @example
+ * ```tsx
+ * const columns: DataTableColumn<User>[] = [
+ *   {
+ *     key: 'name',
+ *     header: 'Name',
+ *     filterType: 'text',
+ *     filterValue: (user) => user.name,
+ *     render: (user) => <span>{user.name}</span>,
+ *   },
+ *   {
+ *     key: 'status',
+ *     header: 'Status',
+ *     filterType: 'select',
+ *     filterOptions: [
+ *       { value: 'active', label: 'Active' },
+ *       { value: 'inactive', label: 'Inactive' },
+ *     ],
+ *     filterValue: (user) => user.status,
+ *     render: (user) => <Badge>{user.status}</Badge>,
+ *   },
+ * ]
+ *
+ * <DataTable data={users} columns={columns} getRowKey={(u) => u.id} />
+ * ```
+ */
+declare function DataTable<T>({ data, columns, getRowKey, onRowClick, loading, emptyMessage, className, showFilters, initialSortKey, initialSortDirection, onFilteredDataChange, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+/**
+ * Create filter options from data array.
+ * Extracts unique values and creates option objects.
+ *
+ * @example
+ * ```tsx
+ * const statusOptions = createFilterOptions(
+ *   users,
+ *   (user) => user.status,
+ *   { active: 'Active', inactive: 'Inactive' }
+ * )
+ * ```
  */
-declare function Table<T>({ data, columns, getRowKey, onRowClick, loading, emptyMessage, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+declare function createFilterOptions<T>(data: T[], getValue: (item: T) => string | null | undefined, labelMap?: Record<string, string>): FilterOption[];
 
 interface SelectOption<T = string> {
     /** Unique value for the option */
@@ -313,4 +419,4 @@ declare function formatTime(totalSeconds: number): string;
  */
 declare function Timer({ initialSeconds, onStart, onStop, onReset, onTick, showReset, size, className, isRunning: controlledIsRunning, elapsedSeconds: controlledElapsedSeconds, }: TimerProps): react_jsx_runtime.JSX.Element;
 
-export { Button, Card, DatePicker, type DateRange, EmptyState, FormButtonGroup, FormInput, FormTextarea, Input, Layout, LoadingSpinner, Modal, Select, type SelectOption, ServiceSwitcher, Sidebar, type Tab, Table, type TableColumn, Tabs, Timer, type TimerState, formatTime };
+export { Button, Card, DataTable, type DataTableColumn, type DataTableProps, DatePicker, type DateRange, EmptyState, type FilterOption, type FilterType, FormButtonGroup, FormInput, FormTextarea, Input, Layout, LoadingSpinner, Modal, Select, type SelectOption, ServiceSwitcher, Sidebar, type Tab, Table, type TableColumn, Tabs, Timer, type TimerState, createFilterOptions, formatTime };

package/dist/index.d.ts

@@ -142,16 +142,18 @@ declare function FormButtonGroup({ cancelText, submitText, loadingText, isLoadin
 interface TableColumn<T> {
     /** Unique key for the column */
     key: string;
-    /** Column header text */
-    header: string;
+    /** Column header text or React element */
+    header: ReactNode;
     /** Function to render cell content */
     render: (item: T) => ReactNode;
     /** Whether this column is sortable */
     sortable?: boolean;
     /** Custom sort function */
     sortFn?: (a: T, b: T) => number;
-    /** Column width (e.g., '200px', '20%') */
+    /** Column width (e.g., '200px', '20%') - used as initial/min width */
     width?: string;
+    /** Minimum column width when resizing */
+    minWidth?: number;
     /** Text alignment */
     align?: 'left' | 'center' | 'right';
 }
@@ -170,11 +172,115 @@ interface TableProps<T> {
     emptyMessage?: string;
     /** Additional class names for the table container */
     className?: string;
+    /** Enable manual column resizing (default: false) */
+    resizable?: boolean;
+    /** Use fixed table layout for consistent column widths */
+    fixedLayout?: boolean;
 }
 /**
- * Table component for displaying tabular data with sorting support.
+ * Table component for displaying tabular data with sorting and optional resizing.
+ *
+ * Features:
+ * - Responsive by default - shrinks with container
+ * - Optional column resizing with drag handles
+ * - Sortable columns
+ * - Loading and empty states
+ */
+declare function Table<T>({ data, columns, getRowKey, onRowClick, loading, emptyMessage, className, resizable, fixedLayout, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+
+type FilterType = 'text' | 'select' | 'multiselect' | 'boolean' | 'date' | 'none';
+interface FilterOption {
+    value: string;
+    label: string;
+}
+interface DataTableColumn<T> extends Omit<TableColumn<T>, 'sortable' | 'header'> {
+    /** Column header text (must be string for filter placeholder) */
+    header: string;
+    /** Whether this column is sortable (default: true) */
+    sortable?: boolean;
+    /** Filter type for this column (default: 'text') */
+    filterType?: FilterType;
+    /** Options for select/multiselect filters */
+    filterOptions?: FilterOption[];
+    /** Function to get filterable value from item */
+    filterValue?: (item: T) => string | number | boolean | null | undefined;
+    /** Placeholder for filter input */
+    filterPlaceholder?: string;
+}
+interface DataTableProps<T> {
+    /** Array of data items to display */
+    data: T[];
+    /** Column definitions */
+    columns: DataTableColumn<T>[];
+    /** Function to get unique key for each row */
+    getRowKey: (item: T) => string | number;
+    /** Called when a row is clicked */
+    onRowClick?: (item: T) => void;
+    /** Whether the table is in a loading state */
+    loading?: boolean;
+    /** Message to show when data is empty */
+    emptyMessage?: string;
+    /** Additional class names for the table container */
+    className?: string;
+    /** Show filter row (default: true) */
+    showFilters?: boolean;
+    /** Initial sort column key */
+    initialSortKey?: string;
+    /** Initial sort direction */
+    initialSortDirection?: 'asc' | 'desc';
+    /** Called when filtered data changes (for external use, e.g., showing count) */
+    onFilteredDataChange?: (filteredData: T[]) => void;
+}
+/**
+ * DataTable component - an enhanced Table with built-in filtering and sorting.
+ *
+ * Features:
+ * - Text, select, multiselect, and boolean filters per column
+ * - Sortable columns (default: all columns are sortable)
+ * - Filter state management
+ * - Callback when filtered data changes
+ *
+ * @example
+ * ```tsx
+ * const columns: DataTableColumn<User>[] = [
+ *   {
+ *     key: 'name',
+ *     header: 'Name',
+ *     filterType: 'text',
+ *     filterValue: (user) => user.name,
+ *     render: (user) => <span>{user.name}</span>,
+ *   },
+ *   {
+ *     key: 'status',
+ *     header: 'Status',
+ *     filterType: 'select',
+ *     filterOptions: [
+ *       { value: 'active', label: 'Active' },
+ *       { value: 'inactive', label: 'Inactive' },
+ *     ],
+ *     filterValue: (user) => user.status,
+ *     render: (user) => <Badge>{user.status}</Badge>,
+ *   },
+ * ]
+ *
+ * <DataTable data={users} columns={columns} getRowKey={(u) => u.id} />
+ * ```
+ */
+declare function DataTable<T>({ data, columns, getRowKey, onRowClick, loading, emptyMessage, className, showFilters, initialSortKey, initialSortDirection, onFilteredDataChange, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+/**
+ * Create filter options from data array.
+ * Extracts unique values and creates option objects.
+ *
+ * @example
+ * ```tsx
+ * const statusOptions = createFilterOptions(
+ *   users,
+ *   (user) => user.status,
+ *   { active: 'Active', inactive: 'Inactive' }
+ * )
+ * ```
  */
-declare function Table<T>({ data, columns, getRowKey, onRowClick, loading, emptyMessage, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+declare function createFilterOptions<T>(data: T[], getValue: (item: T) => string | null | undefined, labelMap?: Record<string, string>): FilterOption[];
 
 interface SelectOption<T = string> {
     /** Unique value for the option */
@@ -313,4 +419,4 @@ declare function formatTime(totalSeconds: number): string;
  */
 declare function Timer({ initialSeconds, onStart, onStop, onReset, onTick, showReset, size, className, isRunning: controlledIsRunning, elapsedSeconds: controlledElapsedSeconds, }: TimerProps): react_jsx_runtime.JSX.Element;
 
-export { Button, Card, DatePicker, type DateRange, EmptyState, FormButtonGroup, FormInput, FormTextarea, Input, Layout, LoadingSpinner, Modal, Select, type SelectOption, ServiceSwitcher, Sidebar, type Tab, Table, type TableColumn, Tabs, Timer, type TimerState, formatTime };
+export { Button, Card, DataTable, type DataTableColumn, type DataTableProps, DatePicker, type DateRange, EmptyState, type FilterOption, type FilterType, FormButtonGroup, FormInput, FormTextarea, Input, Layout, LoadingSpinner, Modal, Select, type SelectOption, ServiceSwitcher, Sidebar, type Tab, Table, type TableColumn, Tabs, Timer, type TimerState, createFilterOptions, formatTime };