@prediktif/ui 0.1.18 → 0.1.19

package/dist/index.d.mts

@@ -1,5 +1,8 @@
 import * as react from 'react';
 import { ReactNode, ComponentProps } from 'react';
+import * as _tanstack_react_table from '@tanstack/react-table';
+import { RowData, Table, ColumnDef, ColumnFiltersState, Row, SortingState, ColumnVisibilityState } from '@tanstack/react-table';
+export { ColumnDef, ColumnFiltersState, ColumnVisibilityState, FilterFn, Row, RowData, SortingState, Table, flexRender, useTable } from '@tanstack/react-table';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { Button as Button$1 } from '@base-ui/react/button';
 import { VariantProps } from 'class-variance-authority';
@@ -38,6 +41,273 @@ interface AppSidebarProps {
 }
 declare const AppSidebar: react.NamedExoticComponent<AppSidebarProps>;
 
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, ...props }: Button$1.Props & VariantProps<typeof buttonVariants>): react.JSX.Element;
+
+/**
+ * Configure TanStack Table features used by DataTable.
+ * Enables column/global filtering, visibility toggling, pagination, row selection, and sorting.
+ */
+declare const features: {
+    columnFilteringFeature: _tanstack_react_table.TableFeature;
+    globalFilteringFeature: _tanstack_react_table.TableFeature;
+    columnVisibilityFeature: _tanstack_react_table.TableFeature;
+    rowSelectionFeature: _tanstack_react_table.TableFeature;
+    rowPaginationFeature: _tanstack_react_table.TableFeature;
+    rowSortingFeature: _tanstack_react_table.TableFeature;
+    filteredRowModel: (table: _tanstack_react_table.Table<any, any>) => () => _tanstack_react_table.RowModel<any, any>;
+    paginatedRowModel: (table: _tanstack_react_table.Table<any, any>) => () => _tanstack_react_table.RowModel<any, any>;
+    sortedRowModel: (table: _tanstack_react_table.Table<any, any>) => () => _tanstack_react_table.RowModel<any, any>;
+    filterFns: {
+        includesString: _tanstack_react_table.CreatedFilterFn<any, any>;
+    };
+    sortFns: {
+        alphanumeric: _tanstack_react_table.CreatedSortFn<any, any>;
+        text: _tanstack_react_table.CreatedSortFn<any, any>;
+    };
+};
+type DataTableFeatures = typeof features;
+
+/**
+ * Item definition for row actions dropdown menu.
+ */
+interface RowActionItem {
+    /** Label text displayed in the menu item */
+    label: string;
+    /** Icon element displayed to the left of the label */
+    icon?: ReactNode;
+    /** Callback triggered on item click */
+    onClick?: () => void;
+    /** Variant for styling ('default' | 'destructive') */
+    variant?: "default" | "destructive";
+    /** Optional custom CSS classes */
+    className?: string;
+    /** Optional unique ID for key prop */
+    id?: string;
+    /** Disable the item if true */
+    disabled?: boolean;
+    /** Hide the item conditionally if true */
+    hidden?: boolean;
+    /** Render a separator line before this item */
+    separatorBefore?: boolean;
+    /** Render a separator line after this item */
+    separatorAfter?: boolean;
+}
+/**
+ * Props for the `RowActions` component.
+ */
+interface RowActionsProps {
+    /** Header label text shown inside the dropdown menu (default: "Actions") */
+    label?: string;
+    /** List of menu items to render */
+    items?: RowActionItem[];
+    /** Custom trigger icon element (defaults to <MoreHorizontal />) */
+    triggerIcon?: ReactNode;
+    /** Accessibility aria-label for the trigger button */
+    triggerLabel?: string;
+    /** Alignment of the dropdown menu content relative to trigger button */
+    align?: "start" | "center" | "end";
+    /** Custom class name for the wrapper div container */
+    containerClassName?: string;
+    /** Custom class name for the dropdown menu content */
+    contentClassName?: string;
+}
+/**
+ * Universal Action Menu component for table rows.
+ * Renders a compact trigger button that opens a customizable dropdown menu.
+ */
+declare function RowActions({ label, items, triggerIcon, triggerLabel, align, containerClassName, contentClassName, }: RowActionsProps): react.JSX.Element | null;
+
+type ExportRow = Record<string, unknown>;
+/**
+ * Export data as an XLSX file using SheetJS.
+ */
+declare function exportToXLSX(rows: ExportRow[], filename?: string): void;
+/**
+ * Export data as a CSV file using SheetJS with UTF-8 BOM.
+ */
+declare function exportToCSV(rows: ExportRow[], filename?: string): void;
+/**
+ * Print or export as PDF by opening a styled print window.
+ */
+declare function printTable(headers: string[], rows: string[][], title?: string): void;
+
+interface DataTableContentBodyProps<TData extends RowData> {
+    table: Table<DataTableFeatures, TData>;
+    columns: ColumnDef<DataTableFeatures, TData>[];
+    isLoading?: boolean;
+}
+declare function DataTableContentBody<TData extends RowData>({ table, columns, isLoading, }: DataTableContentBodyProps<TData>): react.JSX.Element;
+
+interface DataTableContentHeaderProps<TData extends RowData> {
+    table: Table<DataTableFeatures, TData>;
+}
+declare function DataTableContentHeader<TData extends RowData>({ table, }: DataTableContentHeaderProps<TData>): react.JSX.Element;
+
+interface DataTableFooterEntriesProps<TData extends RowData> {
+    table: Table<DataTableFeatures, TData>;
+}
+declare function DataTableFooterEntries<TData extends RowData>({ table, }: DataTableFooterEntriesProps<TData>): react.JSX.Element;
+
+interface DataTableFooterPaginationProps<TData extends RowData> {
+    table: Table<DataTableFeatures, TData>;
+}
+declare function DataTableFooterPagination<TData extends RowData>({ table, }: DataTableFooterPaginationProps<TData>): react.JSX.Element;
+
+interface DataTableHeaderAddProps {
+    onAdd: () => void;
+    addLabel?: string;
+}
+declare function DataTableHeaderAdd({ onAdd, addLabel, }: DataTableHeaderAddProps): react.JSX.Element;
+
+declare function getTableExportData<TData extends RowData>(table: Table<DataTableFeatures, TData>): {
+    headers: string[];
+    rows: string[][];
+    rowObjects: Record<string, string>[];
+};
+interface DataTableHeaderDownloadProps<TData extends RowData> {
+    table: Table<DataTableFeatures, TData>;
+    exportFilename: string;
+    onDownload?: () => void;
+}
+declare function DataTableHeaderDownload<TData extends RowData>({ table, exportFilename, onDownload, }: DataTableHeaderDownloadProps<TData>): react.JSX.Element;
+
+/**
+ * Supported filter variants for custom column filtering.
+ * - `text`: Standard substring text matching (default)
+ * - `boolean`: Dropdown select with True / False options
+ * - `date`: Calendar popover date picker (matches yyyy-MM-dd / ISO dates)
+ * - `select`: Dropdown select menu for categorical options (auto-detected if unique values <= 20)
+ */
+type FilterVariant = "text" | "boolean" | "date" | "select";
+/**
+ * Option item structure for select dropdown filters.
+ */
+interface FilterSelectOption {
+    label: string;
+    value: string;
+}
+/**
+ * Custom metadata interface attached to TanStack Table column definitions (`columnDef.meta`).
+ * Allows explicit configuration of column filter behavior.
+ *
+ * @example
+ * ```ts
+ * {
+ *   accessorKey: "role",
+ *   header: "Role",
+ *   meta: {
+ *     filterVariant: "select",
+ *     selectOptions: [
+ *       { label: "Admin", value: "admin" },
+ *       { label: "User", value: "user" },
+ *     ],
+ *   } satisfies ColumnMetaCustom,
+ * }
+ * ```
+ */
+interface ColumnMetaCustom {
+    filterVariant?: FilterVariant;
+    selectOptions?: FilterSelectOption[];
+}
+interface DataTableHeaderFilterProps<TData extends RowData> {
+    table: Table<DataTableFeatures, TData>;
+    columnFilters: ColumnFiltersState;
+}
+/**
+ * Universal smart filter function for TanStack Table.
+ * Seamlessly handles boolean, date (yyyy-MM-dd / ISO / Date objects), select options, arrays, objects, and text.
+ */
+declare function smartFilterFn<TData extends RowData>(row: Row<DataTableFeatures, TData>, columnId: string, filterValue: unknown): boolean;
+declare function DataTableHeaderFilter<TData extends RowData>({ table, columnFilters, }: DataTableHeaderFilterProps<TData>): react.JSX.Element | null;
+
+interface DataTableHeaderRefreshProps {
+    onRefresh?: () => void;
+}
+declare function DataTableHeaderRefresh({ onRefresh, }: DataTableHeaderRefreshProps): react.JSX.Element;
+
+interface DataTableHeaderSearchProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+}
+declare function DataTableHeaderSearch({ value, onChange, placeholder, }: DataTableHeaderSearchProps): react.JSX.Element;
+
+interface DataTableHeaderSortProps<TData extends RowData> {
+    table: Table<DataTableFeatures, TData>;
+    sorting: SortingState;
+}
+declare function DataTableHeaderSort<TData extends RowData>({ table, sorting, }: DataTableHeaderSortProps<TData>): react.JSX.Element;
+
+interface DataTableHeaderToggleProps<TData extends RowData> {
+    table: Table<DataTableFeatures, TData>;
+}
+declare function DataTableHeaderToggle<TData extends RowData>({ table, }: DataTableHeaderToggleProps<TData>): react.JSX.Element;
+
+interface DataTableProps<TData extends RowData> {
+    /** Column definitions for the table */
+    columns: ColumnDef<DataTableFeatures, TData>[];
+    /** Array of data rows to display */
+    data: TData[];
+    /** Initial column visibility state */
+    initialColumnVisibility?: ColumnVisibilityState;
+    /** Render function for custom create/add modal dialog */
+    renderCreateDialog?: (open: boolean, onOpenChange: (open: boolean) => void) => ReactNode;
+    /** Label text for the add button (defaults to "Add") */
+    addLabel?: string;
+    /** Callback triggered when user clicks the refresh button */
+    onRefresh?: () => void;
+    /** Callback triggered when user downloads data */
+    onDownload?: () => void;
+    /** Base filename used when exporting data (defaults to "data-export") */
+    exportFilename?: string;
+    /** Loading state indicator */
+    isLoading?: boolean;
+    /** Placeholder text for search bar (defaults to "Search...") */
+    searchPlaceholder?: string;
+    /** Toggle visibility of search input (default: true) */
+    showSearchInput?: boolean;
+    /** Toggle visibility of refresh button (default: true) */
+    showRefreshButton?: boolean;
+    /** Toggle visibility of sort button (default: true) */
+    showSortButton?: boolean;
+    /** Toggle visibility of filter button (default: true) */
+    showFilterButton?: boolean;
+    /** Toggle visibility of download/export button (default: true) */
+    showDownloadButton?: boolean;
+    /** Toggle visibility of column toggle button (default: true) */
+    showColumnToggleButton?: boolean;
+    /** Toggle visibility of add/create button (default: true) */
+    showAddButton?: boolean;
+    /** Custom icon for empty state */
+    emptyIcon?: React.ComponentType<{
+        className?: string;
+    }> | ReactNode;
+    /** Custom title for empty state */
+    emptyTitle?: ReactNode;
+    /** Custom description for empty state */
+    emptyDescription?: ReactNode;
+    /** Custom button text for empty state action */
+    emptyButtonText?: string;
+    /** Custom render prop for empty state action button */
+    emptyRender?: ComponentProps<typeof Button>["render"];
+    /** Callback for empty state action button click */
+    onEmptyAction?: () => void;
+    /** Custom render function to completely override the empty state */
+    renderEmptyState?: () => ReactNode;
+}
+/**
+ * Universal Data Table component built with TanStack Table and Shadcn UI.
+ * Provides out-of-the-box features: global search, smart multi-type column filtering,
+ * column sorting, column visibility toggle, data export (PDF, Excel, CSV, Print),
+ * data refresh, pagination, row actions, add/create modal dialog binding,
+ * loading skeletons, and integrated empty states via StateEmpty.
+ */
+declare function DataTable<TData extends RowData>({ columns, data, initialColumnVisibility, renderCreateDialog, addLabel, onRefresh, onDownload, exportFilename, isLoading, searchPlaceholder, showSearchInput, showRefreshButton, showSortButton, showFilterButton, showDownloadButton, showColumnToggleButton, showAddButton, emptyIcon, emptyTitle, emptyDescription, emptyButtonText, emptyRender, onEmptyAction, renderEmptyState, }: DataTableProps<TData>): react.JSX.Element;
+
 interface HeaderTabItem {
     title: string;
     url: string;
@@ -61,21 +331,16 @@ interface HeaderTitleProps {
 }
 declare const HeaderTitle: react.NamedExoticComponent<HeaderTitleProps>;
 
-declare const buttonVariants: (props?: ({
-    variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Button({ className, variant, size, ...props }: Button$1.Props & VariantProps<typeof buttonVariants>): react.JSX.Element;
-
 interface StateEmptyProps {
     icon: React.ComponentType<{
         className?: string;
     }> | ReactNode;
     title: ReactNode;
     description: ReactNode;
-    buttonText: string;
+    buttonText?: string;
+    onClick?: () => void;
     render?: ComponentProps<typeof Button>["render"];
 }
 declare const StateEmpty: react.NamedExoticComponent<StateEmptyProps>;
 
-export { AppSidebar, type AppSidebarProps, type HeaderTabItem, HeaderTabs, type HeaderTabsProps, HeaderTitle, type HeaderTitleProps, type NavItem, type OrganizationItem, StateEmpty, type StateEmptyProps };
+export { AppSidebar, type AppSidebarProps, type ColumnMetaCustom, DataTable, DataTableContentBody, type DataTableContentBodyProps, DataTableContentHeader, type DataTableContentHeaderProps, type DataTableFeatures, DataTableFooterEntries, type DataTableFooterEntriesProps, DataTableFooterPagination, type DataTableFooterPaginationProps, DataTableHeaderAdd, type DataTableHeaderAddProps, DataTableHeaderDownload, type DataTableHeaderDownloadProps, DataTableHeaderFilter, type DataTableHeaderFilterProps, DataTableHeaderRefresh, type DataTableHeaderRefreshProps, DataTableHeaderSearch, type DataTableHeaderSearchProps, DataTableHeaderSort, type DataTableHeaderSortProps, DataTableHeaderToggle, type DataTableHeaderToggleProps, type DataTableProps, type FilterSelectOption, type FilterVariant, type HeaderTabItem, HeaderTabs, type HeaderTabsProps, HeaderTitle, type HeaderTitleProps, type NavItem, type OrganizationItem, type RowActionItem, RowActions, type RowActionsProps, StateEmpty, type StateEmptyProps, exportToCSV, exportToXLSX, features, getTableExportData, printTable, smartFilterFn };

package/dist/index.d.ts

@@ -1,5 +1,8 @@
 import * as react from 'react';
 import { ReactNode, ComponentProps } from 'react';
+import * as _tanstack_react_table from '@tanstack/react-table';
+import { RowData, Table, ColumnDef, ColumnFiltersState, Row, SortingState, ColumnVisibilityState } from '@tanstack/react-table';
+export { ColumnDef, ColumnFiltersState, ColumnVisibilityState, FilterFn, Row, RowData, SortingState, Table, flexRender, useTable } from '@tanstack/react-table';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { Button as Button$1 } from '@base-ui/react/button';
 import { VariantProps } from 'class-variance-authority';
@@ -38,6 +41,273 @@ interface AppSidebarProps {
 }
 declare const AppSidebar: react.NamedExoticComponent<AppSidebarProps>;
 
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, ...props }: Button$1.Props & VariantProps<typeof buttonVariants>): react.JSX.Element;
+
+/**
+ * Configure TanStack Table features used by DataTable.
+ * Enables column/global filtering, visibility toggling, pagination, row selection, and sorting.
+ */
+declare const features: {
+    columnFilteringFeature: _tanstack_react_table.TableFeature;
+    globalFilteringFeature: _tanstack_react_table.TableFeature;
+    columnVisibilityFeature: _tanstack_react_table.TableFeature;
+    rowSelectionFeature: _tanstack_react_table.TableFeature;
+    rowPaginationFeature: _tanstack_react_table.TableFeature;
+    rowSortingFeature: _tanstack_react_table.TableFeature;
+    filteredRowModel: (table: _tanstack_react_table.Table<any, any>) => () => _tanstack_react_table.RowModel<any, any>;
+    paginatedRowModel: (table: _tanstack_react_table.Table<any, any>) => () => _tanstack_react_table.RowModel<any, any>;
+    sortedRowModel: (table: _tanstack_react_table.Table<any, any>) => () => _tanstack_react_table.RowModel<any, any>;
+    filterFns: {
+        includesString: _tanstack_react_table.CreatedFilterFn<any, any>;
+    };
+    sortFns: {
+        alphanumeric: _tanstack_react_table.CreatedSortFn<any, any>;
+        text: _tanstack_react_table.CreatedSortFn<any, any>;
+    };
+};
+type DataTableFeatures = typeof features;
+
+/**
+ * Item definition for row actions dropdown menu.
+ */
+interface RowActionItem {
+    /** Label text displayed in the menu item */
+    label: string;
+    /** Icon element displayed to the left of the label */
+    icon?: ReactNode;
+    /** Callback triggered on item click */
+    onClick?: () => void;
+    /** Variant for styling ('default' | 'destructive') */
+    variant?: "default" | "destructive";
+    /** Optional custom CSS classes */
+    className?: string;
+    /** Optional unique ID for key prop */
+    id?: string;
+    /** Disable the item if true */
+    disabled?: boolean;
+    /** Hide the item conditionally if true */
+    hidden?: boolean;
+    /** Render a separator line before this item */
+    separatorBefore?: boolean;
+    /** Render a separator line after this item */
+    separatorAfter?: boolean;
+}
+/**
+ * Props for the `RowActions` component.
+ */
+interface RowActionsProps {
+    /** Header label text shown inside the dropdown menu (default: "Actions") */
+    label?: string;
+    /** List of menu items to render */
+    items?: RowActionItem[];
+    /** Custom trigger icon element (defaults to <MoreHorizontal />) */
+    triggerIcon?: ReactNode;
+    /** Accessibility aria-label for the trigger button */
+    triggerLabel?: string;
+    /** Alignment of the dropdown menu content relative to trigger button */
+    align?: "start" | "center" | "end";
+    /** Custom class name for the wrapper div container */
+    containerClassName?: string;
+    /** Custom class name for the dropdown menu content */
+    contentClassName?: string;
+}
+/**
+ * Universal Action Menu component for table rows.
+ * Renders a compact trigger button that opens a customizable dropdown menu.
+ */
+declare function RowActions({ label, items, triggerIcon, triggerLabel, align, containerClassName, contentClassName, }: RowActionsProps): react.JSX.Element | null;
+
+type ExportRow = Record<string, unknown>;
+/**
+ * Export data as an XLSX file using SheetJS.
+ */
+declare function exportToXLSX(rows: ExportRow[], filename?: string): void;
+/**
+ * Export data as a CSV file using SheetJS with UTF-8 BOM.
+ */
+declare function exportToCSV(rows: ExportRow[], filename?: string): void;
+/**
+ * Print or export as PDF by opening a styled print window.
+ */
+declare function printTable(headers: string[], rows: string[][], title?: string): void;
+
+interface DataTableContentBodyProps<TData extends RowData> {
+    table: Table<DataTableFeatures, TData>;
+    columns: ColumnDef<DataTableFeatures, TData>[];
+    isLoading?: boolean;
+}
+declare function DataTableContentBody<TData extends RowData>({ table, columns, isLoading, }: DataTableContentBodyProps<TData>): react.JSX.Element;
+
+interface DataTableContentHeaderProps<TData extends RowData> {
+    table: Table<DataTableFeatures, TData>;
+}
+declare function DataTableContentHeader<TData extends RowData>({ table, }: DataTableContentHeaderProps<TData>): react.JSX.Element;
+
+interface DataTableFooterEntriesProps<TData extends RowData> {
+    table: Table<DataTableFeatures, TData>;
+}
+declare function DataTableFooterEntries<TData extends RowData>({ table, }: DataTableFooterEntriesProps<TData>): react.JSX.Element;
+
+interface DataTableFooterPaginationProps<TData extends RowData> {
+    table: Table<DataTableFeatures, TData>;
+}
+declare function DataTableFooterPagination<TData extends RowData>({ table, }: DataTableFooterPaginationProps<TData>): react.JSX.Element;
+
+interface DataTableHeaderAddProps {
+    onAdd: () => void;
+    addLabel?: string;
+}
+declare function DataTableHeaderAdd({ onAdd, addLabel, }: DataTableHeaderAddProps): react.JSX.Element;
+
+declare function getTableExportData<TData extends RowData>(table: Table<DataTableFeatures, TData>): {
+    headers: string[];
+    rows: string[][];
+    rowObjects: Record<string, string>[];
+};
+interface DataTableHeaderDownloadProps<TData extends RowData> {
+    table: Table<DataTableFeatures, TData>;
+    exportFilename: string;
+    onDownload?: () => void;
+}
+declare function DataTableHeaderDownload<TData extends RowData>({ table, exportFilename, onDownload, }: DataTableHeaderDownloadProps<TData>): react.JSX.Element;
+
+/**
+ * Supported filter variants for custom column filtering.
+ * - `text`: Standard substring text matching (default)
+ * - `boolean`: Dropdown select with True / False options
+ * - `date`: Calendar popover date picker (matches yyyy-MM-dd / ISO dates)
+ * - `select`: Dropdown select menu for categorical options (auto-detected if unique values <= 20)
+ */
+type FilterVariant = "text" | "boolean" | "date" | "select";
+/**
+ * Option item structure for select dropdown filters.
+ */
+interface FilterSelectOption {
+    label: string;
+    value: string;
+}
+/**
+ * Custom metadata interface attached to TanStack Table column definitions (`columnDef.meta`).
+ * Allows explicit configuration of column filter behavior.
+ *
+ * @example
+ * ```ts
+ * {
+ *   accessorKey: "role",
+ *   header: "Role",
+ *   meta: {
+ *     filterVariant: "select",
+ *     selectOptions: [
+ *       { label: "Admin", value: "admin" },
+ *       { label: "User", value: "user" },
+ *     ],
+ *   } satisfies ColumnMetaCustom,
+ * }
+ * ```
+ */
+interface ColumnMetaCustom {
+    filterVariant?: FilterVariant;
+    selectOptions?: FilterSelectOption[];
+}
+interface DataTableHeaderFilterProps<TData extends RowData> {
+    table: Table<DataTableFeatures, TData>;
+    columnFilters: ColumnFiltersState;
+}
+/**
+ * Universal smart filter function for TanStack Table.
+ * Seamlessly handles boolean, date (yyyy-MM-dd / ISO / Date objects), select options, arrays, objects, and text.
+ */
+declare function smartFilterFn<TData extends RowData>(row: Row<DataTableFeatures, TData>, columnId: string, filterValue: unknown): boolean;
+declare function DataTableHeaderFilter<TData extends RowData>({ table, columnFilters, }: DataTableHeaderFilterProps<TData>): react.JSX.Element | null;
+
+interface DataTableHeaderRefreshProps {
+    onRefresh?: () => void;
+}
+declare function DataTableHeaderRefresh({ onRefresh, }: DataTableHeaderRefreshProps): react.JSX.Element;
+
+interface DataTableHeaderSearchProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+}
+declare function DataTableHeaderSearch({ value, onChange, placeholder, }: DataTableHeaderSearchProps): react.JSX.Element;
+
+interface DataTableHeaderSortProps<TData extends RowData> {
+    table: Table<DataTableFeatures, TData>;
+    sorting: SortingState;
+}
+declare function DataTableHeaderSort<TData extends RowData>({ table, sorting, }: DataTableHeaderSortProps<TData>): react.JSX.Element;
+
+interface DataTableHeaderToggleProps<TData extends RowData> {
+    table: Table<DataTableFeatures, TData>;
+}
+declare function DataTableHeaderToggle<TData extends RowData>({ table, }: DataTableHeaderToggleProps<TData>): react.JSX.Element;
+
+interface DataTableProps<TData extends RowData> {
+    /** Column definitions for the table */
+    columns: ColumnDef<DataTableFeatures, TData>[];
+    /** Array of data rows to display */
+    data: TData[];
+    /** Initial column visibility state */
+    initialColumnVisibility?: ColumnVisibilityState;
+    /** Render function for custom create/add modal dialog */
+    renderCreateDialog?: (open: boolean, onOpenChange: (open: boolean) => void) => ReactNode;
+    /** Label text for the add button (defaults to "Add") */
+    addLabel?: string;
+    /** Callback triggered when user clicks the refresh button */
+    onRefresh?: () => void;
+    /** Callback triggered when user downloads data */
+    onDownload?: () => void;
+    /** Base filename used when exporting data (defaults to "data-export") */
+    exportFilename?: string;
+    /** Loading state indicator */
+    isLoading?: boolean;
+    /** Placeholder text for search bar (defaults to "Search...") */
+    searchPlaceholder?: string;
+    /** Toggle visibility of search input (default: true) */
+    showSearchInput?: boolean;
+    /** Toggle visibility of refresh button (default: true) */
+    showRefreshButton?: boolean;
+    /** Toggle visibility of sort button (default: true) */
+    showSortButton?: boolean;
+    /** Toggle visibility of filter button (default: true) */
+    showFilterButton?: boolean;
+    /** Toggle visibility of download/export button (default: true) */
+    showDownloadButton?: boolean;
+    /** Toggle visibility of column toggle button (default: true) */
+    showColumnToggleButton?: boolean;
+    /** Toggle visibility of add/create button (default: true) */
+    showAddButton?: boolean;
+    /** Custom icon for empty state */
+    emptyIcon?: React.ComponentType<{
+        className?: string;
+    }> | ReactNode;
+    /** Custom title for empty state */
+    emptyTitle?: ReactNode;
+    /** Custom description for empty state */
+    emptyDescription?: ReactNode;
+    /** Custom button text for empty state action */
+    emptyButtonText?: string;
+    /** Custom render prop for empty state action button */
+    emptyRender?: ComponentProps<typeof Button>["render"];
+    /** Callback for empty state action button click */
+    onEmptyAction?: () => void;
+    /** Custom render function to completely override the empty state */
+    renderEmptyState?: () => ReactNode;
+}
+/**
+ * Universal Data Table component built with TanStack Table and Shadcn UI.
+ * Provides out-of-the-box features: global search, smart multi-type column filtering,
+ * column sorting, column visibility toggle, data export (PDF, Excel, CSV, Print),
+ * data refresh, pagination, row actions, add/create modal dialog binding,
+ * loading skeletons, and integrated empty states via StateEmpty.
+ */
+declare function DataTable<TData extends RowData>({ columns, data, initialColumnVisibility, renderCreateDialog, addLabel, onRefresh, onDownload, exportFilename, isLoading, searchPlaceholder, showSearchInput, showRefreshButton, showSortButton, showFilterButton, showDownloadButton, showColumnToggleButton, showAddButton, emptyIcon, emptyTitle, emptyDescription, emptyButtonText, emptyRender, onEmptyAction, renderEmptyState, }: DataTableProps<TData>): react.JSX.Element;
+
 interface HeaderTabItem {
     title: string;
     url: string;
@@ -61,21 +331,16 @@ interface HeaderTitleProps {
 }
 declare const HeaderTitle: react.NamedExoticComponent<HeaderTitleProps>;
 
-declare const buttonVariants: (props?: ({
-    variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Button({ className, variant, size, ...props }: Button$1.Props & VariantProps<typeof buttonVariants>): react.JSX.Element;
-
 interface StateEmptyProps {
     icon: React.ComponentType<{
         className?: string;
     }> | ReactNode;
     title: ReactNode;
     description: ReactNode;
-    buttonText: string;
+    buttonText?: string;
+    onClick?: () => void;
     render?: ComponentProps<typeof Button>["render"];
 }
 declare const StateEmpty: react.NamedExoticComponent<StateEmptyProps>;
 
-export { AppSidebar, type AppSidebarProps, type HeaderTabItem, HeaderTabs, type HeaderTabsProps, HeaderTitle, type HeaderTitleProps, type NavItem, type OrganizationItem, StateEmpty, type StateEmptyProps };
+export { AppSidebar, type AppSidebarProps, type ColumnMetaCustom, DataTable, DataTableContentBody, type DataTableContentBodyProps, DataTableContentHeader, type DataTableContentHeaderProps, type DataTableFeatures, DataTableFooterEntries, type DataTableFooterEntriesProps, DataTableFooterPagination, type DataTableFooterPaginationProps, DataTableHeaderAdd, type DataTableHeaderAddProps, DataTableHeaderDownload, type DataTableHeaderDownloadProps, DataTableHeaderFilter, type DataTableHeaderFilterProps, DataTableHeaderRefresh, type DataTableHeaderRefreshProps, DataTableHeaderSearch, type DataTableHeaderSearchProps, DataTableHeaderSort, type DataTableHeaderSortProps, DataTableHeaderToggle, type DataTableHeaderToggleProps, type DataTableProps, type FilterSelectOption, type FilterVariant, type HeaderTabItem, HeaderTabs, type HeaderTabsProps, HeaderTitle, type HeaderTitleProps, type NavItem, type OrganizationItem, type RowActionItem, RowActions, type RowActionsProps, StateEmpty, type StateEmptyProps, exportToCSV, exportToXLSX, features, getTableExportData, printTable, smartFilterFn };