@hyddenlabs/hydn-ui 0.3.0-alpha.188 → 0.3.0-alpha.189

package/dist/index.d.cts

@@ -2660,6 +2660,14 @@ type DataTableProps<T> = {
     pageSize?: number;
     /** Whether to show checkboxes for row selection */
     selectable?: boolean;
+    /** Whether to enable search/filter functionality */
+    searchable?: boolean;
+    /** Specific keys to search within. If not provided, searches all fields. */
+    searchKeys?: (keyof T)[];
+    /** Placeholder text for the search input */
+    searchPlaceholder?: string;
+    /** Callback when search query changes */
+    onSearchChange?: (query: string) => void;
     /** Action buttons, function returning actions based on row data, or custom render function for the actions column */
     actions?: DataTableActionItem<T>[] | ((row: T, index: number) => DataTableActionItem<T>[] | ReactNode);
     /** Label for the actions column header */
@@ -2776,7 +2784,7 @@ type HeaderAction = {
  * />
  * ```
  */
-declare function DataTable<T>({ data, columns, className, striped, bordered, hoverable, compact, stickyHeader, sortable, paginated, pageSize, selectable, actions, actionsLabel, actionsWidth, onRowClick, onSelectionChange, emptyMessage, emptyIcon, headerActions, title, initialSort }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function DataTable<T>({ data, columns, className, striped, bordered, hoverable, compact, stickyHeader, sortable, paginated, pageSize, selectable, searchable, searchKeys, searchPlaceholder, onSearchChange, actions, actionsLabel, actionsWidth, onRowClick, onSelectionChange, emptyMessage, emptyIcon, headerActions, title, initialSort }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 declare namespace DataTable {
     var displayName: string;
 }
@@ -2793,10 +2801,13 @@ type UseTableOptions<T> = {
         direction: 'asc' | 'desc';
     };
     pageSize?: number;
+    searchQuery?: string;
+    searchKeys?: (keyof T)[];
 };
 type UseTableReturn<T> = {
     currentData: T[];
     sortedData: T[];
+    filteredData: T[];
     sortConfig: SortConfig<T>;
     handleSort: (key: keyof T) => void;
     currentPage: number;
@@ -2815,9 +2826,9 @@ type UseTableReturn<T> = {
 };
 /**
  * useTable Hook - Client-side table state management
- * Handles sorting, pagination, and selection
+ * Handles filtering, sorting, pagination, and selection
  */
-declare function useTable<T>({ data, initialSort, pageSize }: UseTableOptions<T>): UseTableReturn<T>;
+declare function useTable<T>({ data, initialSort, pageSize, searchQuery, searchKeys }: UseTableOptions<T>): UseTableReturn<T>;
 
 type EmptyStateProps = {
     /** Main heading text for the empty state */

package/dist/index.d.ts

@@ -2660,6 +2660,14 @@ type DataTableProps<T> = {
     pageSize?: number;
     /** Whether to show checkboxes for row selection */
     selectable?: boolean;
+    /** Whether to enable search/filter functionality */
+    searchable?: boolean;
+    /** Specific keys to search within. If not provided, searches all fields. */
+    searchKeys?: (keyof T)[];
+    /** Placeholder text for the search input */
+    searchPlaceholder?: string;
+    /** Callback when search query changes */
+    onSearchChange?: (query: string) => void;
     /** Action buttons, function returning actions based on row data, or custom render function for the actions column */
     actions?: DataTableActionItem<T>[] | ((row: T, index: number) => DataTableActionItem<T>[] | ReactNode);
     /** Label for the actions column header */
@@ -2776,7 +2784,7 @@ type HeaderAction = {
  * />
  * ```
  */
-declare function DataTable<T>({ data, columns, className, striped, bordered, hoverable, compact, stickyHeader, sortable, paginated, pageSize, selectable, actions, actionsLabel, actionsWidth, onRowClick, onSelectionChange, emptyMessage, emptyIcon, headerActions, title, initialSort }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function DataTable<T>({ data, columns, className, striped, bordered, hoverable, compact, stickyHeader, sortable, paginated, pageSize, selectable, searchable, searchKeys, searchPlaceholder, onSearchChange, actions, actionsLabel, actionsWidth, onRowClick, onSelectionChange, emptyMessage, emptyIcon, headerActions, title, initialSort }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 declare namespace DataTable {
     var displayName: string;
 }
@@ -2793,10 +2801,13 @@ type UseTableOptions<T> = {
         direction: 'asc' | 'desc';
     };
     pageSize?: number;
+    searchQuery?: string;
+    searchKeys?: (keyof T)[];
 };
 type UseTableReturn<T> = {
     currentData: T[];
     sortedData: T[];
+    filteredData: T[];
     sortConfig: SortConfig<T>;
     handleSort: (key: keyof T) => void;
     currentPage: number;
@@ -2815,9 +2826,9 @@ type UseTableReturn<T> = {
 };
 /**
  * useTable Hook - Client-side table state management
- * Handles sorting, pagination, and selection
+ * Handles filtering, sorting, pagination, and selection
  */
-declare function useTable<T>({ data, initialSort, pageSize }: UseTableOptions<T>): UseTableReturn<T>;
+declare function useTable<T>({ data, initialSort, pageSize, searchQuery, searchKeys }: UseTableOptions<T>): UseTableReturn<T>;
 
 type EmptyStateProps = {
     /** Main heading text for the empty state */