@kreativa/ui 0.1.0 → 0.1.1

package/dist/index.d.mts

@@ -176,6 +176,98 @@ interface TableProps<T> {
  */
 declare function Table<T>({ data, columns, getRowKey, onRowClick, loading, emptyMessage, className, }: 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'> {
+    /** 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 createFilterOptions<T>(data: T[], getValue: (item: T) => string | null | undefined, labelMap?: Record<string, string>): FilterOption[];
+
 interface SelectOption<T = string> {
     /** Unique value for the option */
     value: T;
@@ -313,4 +405,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

@@ -176,6 +176,98 @@ interface TableProps<T> {
  */
 declare function Table<T>({ data, columns, getRowKey, onRowClick, loading, emptyMessage, className, }: 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'> {
+    /** 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 createFilterOptions<T>(data: T[], getValue: (item: T) => string | null | undefined, labelMap?: Record<string, string>): FilterOption[];
+
 interface SelectOption<T = string> {
     /** Unique value for the option */
     value: T;
@@ -313,4 +405,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 };