@nccirtu/tablefy 0.6.2 → 0.6.4

package/README.md

@@ -22,6 +22,40 @@ npm install @nccirtu/tablefy
 
 **⚠️ Important:** Tablefy requires additional setup steps to work correctly.
 
+### Two Ways to Use Tablefy
+
+Tablefy offers **two approaches** to fit your workflow:
+
+#### 🚀 **Quick Start (Direct Import)**
+
+Import components directly from the package - perfect for getting started quickly:
+
+```tsx
+import { DataTable, TableSchema, TextColumn } from "@nccirtu/tablefy";
+```
+
+✅ **Pros:** Zero setup, works immediately after installation  
+❌ **Cons:** Limited customization of internal components
+
+#### 🛠️ **Full Control (CLI Installation)**
+
+Copy components to your project for complete customization:
+
+```bash
+npx tablefy init
+```
+
+This copies all components to your `components/tablefy/` directory, allowing you to:
+
+- Customize styles and behavior
+- Modify internal components
+- Full control over the code
+
+✅ **Pros:** Complete customization freedom  
+❌ **Cons:** Requires CLI setup step
+
+**Choose the approach that fits your needs!** Most users start with direct imports and switch to CLI installation when they need customization.
+
 ### What you need to install
 
 1. **Peer dependencies** (required libraries)

package/cli/templates/tablefy/data-table-empty.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-// shadcn components - installed by user
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { EmptyStateConfig } from "@nccirtu/tablefy";

package/cli/templates/tablefy/data-table-header.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { Table as TanstackTable } from "@tanstack/react-table";
-// shadcn components - installed by user
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {

package/cli/templates/tablefy/data-table-pagination.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { Table as TanstackTable } from "@tanstack/react-table";
-// shadcn components - installed by user
 import { Button } from "@/components/ui/button";
 import {
   Select,

package/dist/builders/empty-state.d.ts

@@ -0,0 +1,46 @@
+import { EmptyStateConfig } from "../types/empty-state";
+import React from "react";
+/**
+ * Empty State Builder
+ * Fluent API for building empty state configurations
+ */
+export declare class EmptyStateBuilder {
+    private config;
+    static make(): EmptyStateBuilder;
+    title(title: string): this;
+    description(description: string): this;
+    icon(icon: React.ReactNode): this;
+    imageUrl(imageUrl: string): this;
+    action(label: string, onClick?: () => void, href?: string, icon?: React.ReactNode): this;
+    variant(variant: "default" | "search" | "filter" | "error" | "custom"): this;
+    error(params?: {
+        onRetry?: () => void;
+    }): this;
+    noSearchResults(params?: {
+        onClear?: () => void;
+    }): this;
+    noFilterResults(params?: {
+        onReset?: () => void;
+    }): this;
+    noData(): this;
+    build(): EmptyStateConfig;
+    static noData(config: {
+        title: string;
+        description: string;
+        createLabel?: string;
+        createHref?: string;
+        createOnClick?: () => void;
+    }): EmptyStateConfig;
+    static noSearchResults(config: {
+        title: string;
+        description: string;
+        clearLabel?: string;
+        onClear?: () => void;
+    }): EmptyStateConfig;
+    static noFilterResults(config: {
+        title: string;
+        description: string;
+        resetLabel?: string;
+        onReset?: () => void;
+    }): EmptyStateConfig;
+}

package/dist/builders/index.d.ts

@@ -0,0 +1,2 @@
+export { TableSchema } from "./table-schema";
+export { EmptyStateBuilder } from "./empty-state";

package/dist/builders/table-schema.d.ts

@@ -0,0 +1,84 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { DataTableConfig } from "../types/table";
+import { HeaderAction } from "../types/actions";
+import { EmptyStateConfig } from "../types/empty-state";
+import React from "react";
+type ColumnBuilder<TData> = {
+    build(): ColumnDef<TData, unknown>;
+};
+/**
+ * Header Actions Builder
+ * Fluent API for building header actions
+ */
+declare class HeaderActionsBuilder<TData> {
+    private actions;
+    create(config: {
+        label: string;
+        href?: string;
+        onClick?: () => void;
+        icon?: React.ReactNode;
+    }): this;
+    export(config: {
+        label: string;
+        icon?: React.ReactNode;
+        formats?: Array<{
+            label: string;
+            onClick: () => void;
+        }>;
+    }): this;
+    import(config: {
+        label: string;
+        icon?: React.ReactNode;
+        onClick?: () => void;
+    }): this;
+    bulkExport(config: {
+        label: string;
+        icon?: React.ReactNode;
+        onExport: (rows: TData[]) => void;
+    }): this;
+    bulkDelete(config: {
+        label: string;
+        icon?: React.ReactNode;
+        onDelete: (rows: TData[]) => void;
+    }): this;
+    custom(action: HeaderAction<TData>): this;
+    build(): HeaderAction<TData>[];
+}
+/**
+ * Table Schema Builder
+ * Fluent API for building complete table configurations
+ */
+export declare class TableSchema<TData> {
+    private columnBuilders;
+    private config;
+    static make<TData>(): TableSchema<TData>;
+    description(text: string): this;
+    title(text: string): this;
+    headerActions(builder: (b: HeaderActionsBuilder<TData>) => HeaderActionsBuilder<TData>): this;
+    emptyState(config: EmptyStateConfig): this;
+    searchEmptyState(config: EmptyStateConfig): this;
+    filterEmptyState(config: EmptyStateConfig): this;
+    searchable(config?: {
+        placeholder?: string;
+    } | boolean): this;
+    paginated(config?: {
+        pageSize?: number;
+        pageSizeOptions?: number[];
+    } | boolean): this;
+    selectable(multiSelect?: boolean): this;
+    sortable(defaultSort?: {
+        id: string;
+        desc: boolean;
+    }): this;
+    columnVisibility(enabled?: boolean): this;
+    bordered(enabled?: boolean): this;
+    striped(enabled?: boolean): this;
+    hoverable(enabled?: boolean): this;
+    density(density: "compact" | "default" | "comfortable"): this;
+    columns(...builders: ColumnBuilder<TData>[]): this;
+    build(): {
+        columns: ColumnDef<TData, unknown>[];
+        config: DataTableConfig<TData>;
+    };
+}
+export {};

package/dist/columns/actions-column.d.ts

@@ -1,11 +1,11 @@
-import { ColumnDef } from '@tanstack/react-table';
-import { ReactNode } from 'react';
+import { ColumnDef } from "@tanstack/react-table";
+import { ReactNode } from "react";
 interface ActionItem<TData> {
     label: string;
     icon?: ReactNode;
     onClick?: (row: TData) => void;
     href?: (row: TData) => string;
-    variant?: 'default' | 'destructive';
+    variant?: "default" | "destructive";
     separator?: boolean;
     hidden?: (row: TData) => boolean;
     disabled?: (row: TData) => boolean;

package/dist/columns/base-column.d.ts

@@ -1,5 +1,5 @@
-import { ColumnDef } from '@tanstack/react-table';
-import { BaseColumnConfig } from './types';
+import { ColumnDef } from "@tanstack/react-table";
+import { BaseColumnConfig } from "./types";
 export declare abstract class BaseColumn<TData, TConfig extends BaseColumnConfig<TData>> {
     protected config: TConfig;
     constructor(accessor: keyof TData | string);

package/dist/columns/builders/empty-state.d.ts

@@ -0,0 +1,46 @@
+import { EmptyStateConfig } from "../types/empty-state";
+import React from "react";
+/**
+ * Empty State Builder
+ * Fluent API for building empty state configurations
+ */
+export declare class EmptyStateBuilder {
+    private config;
+    static make(): EmptyStateBuilder;
+    title(title: string): this;
+    description(description: string): this;
+    icon(icon: React.ReactNode): this;
+    imageUrl(imageUrl: string): this;
+    action(label: string, onClick?: () => void, href?: string, icon?: React.ReactNode): this;
+    variant(variant: "default" | "search" | "filter" | "error" | "custom"): this;
+    error(params?: {
+        onRetry?: () => void;
+    }): this;
+    noSearchResults(params?: {
+        onClear?: () => void;
+    }): this;
+    noFilterResults(params?: {
+        onReset?: () => void;
+    }): this;
+    noData(): this;
+    build(): EmptyStateConfig;
+    static noData(config: {
+        title: string;
+        description: string;
+        createLabel?: string;
+        createHref?: string;
+        createOnClick?: () => void;
+    }): EmptyStateConfig;
+    static noSearchResults(config: {
+        title: string;
+        description: string;
+        clearLabel?: string;
+        onClear?: () => void;
+    }): EmptyStateConfig;
+    static noFilterResults(config: {
+        title: string;
+        description: string;
+        resetLabel?: string;
+        onReset?: () => void;
+    }): EmptyStateConfig;
+}

package/dist/columns/builders/index.d.ts

@@ -0,0 +1,2 @@
+export { TableSchema } from "./table-schema";
+export { EmptyStateBuilder } from "./empty-state";

package/dist/columns/builders/table-schema.d.ts

@@ -0,0 +1,84 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { DataTableConfig } from "../types/table";
+import { HeaderAction } from "../types/actions";
+import { EmptyStateConfig } from "../types/empty-state";
+import React from "react";
+type ColumnBuilder<TData> = {
+    build(): ColumnDef<TData, unknown>;
+};
+/**
+ * Header Actions Builder
+ * Fluent API for building header actions
+ */
+declare class HeaderActionsBuilder<TData> {
+    private actions;
+    create(config: {
+        label: string;
+        href?: string;
+        onClick?: () => void;
+        icon?: React.ReactNode;
+    }): this;
+    export(config: {
+        label: string;
+        icon?: React.ReactNode;
+        formats?: Array<{
+            label: string;
+            onClick: () => void;
+        }>;
+    }): this;
+    import(config: {
+        label: string;
+        icon?: React.ReactNode;
+        onClick?: () => void;
+    }): this;
+    bulkExport(config: {
+        label: string;
+        icon?: React.ReactNode;
+        onExport: (rows: TData[]) => void;
+    }): this;
+    bulkDelete(config: {
+        label: string;
+        icon?: React.ReactNode;
+        onDelete: (rows: TData[]) => void;
+    }): this;
+    custom(action: HeaderAction<TData>): this;
+    build(): HeaderAction<TData>[];
+}
+/**
+ * Table Schema Builder
+ * Fluent API for building complete table configurations
+ */
+export declare class TableSchema<TData> {
+    private columnBuilders;
+    private config;
+    static make<TData>(): TableSchema<TData>;
+    description(text: string): this;
+    title(text: string): this;
+    headerActions(builder: (b: HeaderActionsBuilder<TData>) => HeaderActionsBuilder<TData>): this;
+    emptyState(config: EmptyStateConfig): this;
+    searchEmptyState(config: EmptyStateConfig): this;
+    filterEmptyState(config: EmptyStateConfig): this;
+    searchable(config?: {
+        placeholder?: string;
+    } | boolean): this;
+    paginated(config?: {
+        pageSize?: number;
+        pageSizeOptions?: number[];
+    } | boolean): this;
+    selectable(multiSelect?: boolean): this;
+    sortable(defaultSort?: {
+        id: string;
+        desc: boolean;
+    }): this;
+    columnVisibility(enabled?: boolean): this;
+    bordered(enabled?: boolean): this;
+    striped(enabled?: boolean): this;
+    hoverable(enabled?: boolean): this;
+    density(density: "compact" | "default" | "comfortable"): this;
+    columns(...builders: ColumnBuilder<TData>[]): this;
+    build(): {
+        columns: ColumnDef<TData, unknown>[];
+        config: DataTableConfig<TData>;
+    };
+}
+export {};

package/dist/columns/checkbox-column.d.ts

@@ -1,4 +1,4 @@
-import { ColumnDef } from '@tanstack/react-table';
+import { ColumnDef } from "@tanstack/react-table";
 export declare class CheckboxColumn<TData> {
     static make<TData>(): CheckboxColumn<TData>;
     build(): ColumnDef<TData, unknown>;

package/dist/columns/columns/actions-column.d.ts

@@ -1,11 +1,11 @@
-import { ColumnDef } from '@tanstack/react-table';
-import { ReactNode } from 'react';
+import { ColumnDef } from "@tanstack/react-table";
+import { ReactNode } from "react";
 interface ActionItem<TData> {
     label: string;
     icon?: ReactNode;
     onClick?: (row: TData) => void;
     href?: (row: TData) => string;
-    variant?: 'default' | 'destructive';
+    variant?: "default" | "destructive";
     separator?: boolean;
     hidden?: (row: TData) => boolean;
     disabled?: (row: TData) => boolean;

package/dist/columns/columns/base-column.d.ts

@@ -1,5 +1,5 @@
-import { ColumnDef } from '@tanstack/react-table';
-import { BaseColumnConfig } from './types';
+import { ColumnDef } from "@tanstack/react-table";
+import { BaseColumnConfig } from "./types";
 export declare abstract class BaseColumn<TData, TConfig extends BaseColumnConfig<TData>> {
     protected config: TConfig;
     constructor(accessor: keyof TData | string);

package/dist/columns/columns/checkbox-column.d.ts

@@ -1,4 +1,4 @@
-import { ColumnDef } from '@tanstack/react-table';
+import { ColumnDef } from "@tanstack/react-table";
 export declare class CheckboxColumn<TData> {
     static make<TData>(): CheckboxColumn<TData>;
     build(): ColumnDef<TData, unknown>;

package/dist/columns/columns/date-column.d.ts

@@ -1,15 +1,15 @@
-import { ColumnDef } from '@tanstack/react-table';
-import { BaseColumn } from './base-column';
-import { BaseColumnConfig } from './types';
+import { ColumnDef } from "@tanstack/react-table";
+import { BaseColumn } from "./base-column";
+import { BaseColumnConfig } from "./types";
 interface DateColumnConfig<TData> extends BaseColumnConfig<TData> {
-    format?: 'short' | 'long' | 'relative' | 'time' | 'datetime' | string;
+    format?: "short" | "long" | "relative" | "time" | "datetime" | string;
     locale?: string;
     showIcon?: boolean;
 }
 export declare class DateColumn<TData> extends BaseColumn<TData, DateColumnConfig<TData>> {
     constructor(accessor: keyof TData | string);
     static make<TData>(accessor: keyof TData | string): DateColumn<TData>;
-    format(format: 'short' | 'long' | 'relative' | 'time' | 'datetime'): this;
+    format(format: "short" | "long" | "relative" | "time" | "datetime"): this;
     locale(locale: string): this;
     withIcon(show?: boolean): this;
     short(): this;

package/dist/columns/columns/icon-column.d.ts

@@ -1,8 +1,8 @@
-import { ColumnDef } from '@tanstack/react-table';
-import { LucideIcon } from 'lucide-react';
-import { ReactNode } from 'react';
-import { BaseColumn } from './base-column';
-import { BaseColumnConfig } from './types';
+import { ColumnDef } from "@tanstack/react-table";
+import { LucideIcon } from "lucide-react";
+import { ReactNode } from "react";
+import { BaseColumn } from "./base-column";
+import { BaseColumnConfig } from "./types";
 interface IconState {
     icon: ReactNode | LucideIcon;
     label?: string;
@@ -12,7 +12,7 @@ interface IconState {
 }
 interface IconColumnConfig<TData> extends BaseColumnConfig<TData> {
     states?: Record<string, IconState>;
-    size?: 'xs' | 'sm' | 'md' | 'lg';
+    size?: "xs" | "sm" | "md" | "lg";
     showLabel?: boolean;
     showTooltip?: boolean;
     withBackground?: boolean;
@@ -24,7 +24,7 @@ export declare class IconColumn<TData> extends BaseColumn<TData, IconColumnConfi
     static make<TData>(accessor: keyof TData | string): IconColumn<TData>;
     state(value: string, config: IconState): this;
     states(states: Record<string, IconState>): this;
-    size(size: 'xs' | 'sm' | 'md' | 'lg'): this;
+    size(size: "xs" | "sm" | "md" | "lg"): this;
     showLabel(show?: boolean): this;
     hideTooltip(): this;
     withBackground(show?: boolean): this;

package/dist/columns/columns/image-column.d.ts

@@ -1,17 +1,17 @@
-import { ColumnDef } from '@tanstack/react-table';
-import { BaseColumn } from './base-column';
-import { BaseColumnConfig } from './types';
+import { ColumnDef } from "@tanstack/react-table";
+import { BaseColumn } from "./base-column";
+import { BaseColumnConfig } from "./types";
 interface ImageColumnConfig<TData> extends BaseColumnConfig<TData> {
-    size?: 'sm' | 'md' | 'lg';
-    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    size?: "sm" | "md" | "lg";
+    rounded?: "none" | "sm" | "md" | "lg" | "full";
     fallback?: string;
     alt?: (row: TData) => string;
 }
 export declare class ImageColumn<TData> extends BaseColumn<TData, ImageColumnConfig<TData>> {
     constructor(accessor: keyof TData | string);
     static make<TData>(accessor: keyof TData | string): ImageColumn<TData>;
-    size(size: 'sm' | 'md' | 'lg'): this;
-    rounded(rounded: 'none' | 'sm' | 'md' | 'lg' | 'full'): this;
+    size(size: "sm" | "md" | "lg"): this;
+    rounded(rounded: "none" | "sm" | "md" | "lg" | "full"): this;
     circular(): this;
     square(): this;
     fallback(url: string): this;

package/dist/columns/columns/link-column.d.ts

@@ -1,13 +1,13 @@
-import { ColumnDef } from '@tanstack/react-table';
-import { ReactNode } from 'react';
-import { BaseColumn } from './base-column';
-import { BaseColumnConfig } from './types';
+import { ColumnDef } from "@tanstack/react-table";
+import { ReactNode } from "react";
+import { BaseColumn } from "./base-column";
+import { BaseColumnConfig } from "./types";
 interface LinkColumnConfig<TData> extends BaseColumnConfig<TData> {
     href?: string | ((row: TData) => string);
     external?: boolean;
     icon?: ReactNode;
     showExternalIcon?: boolean;
-    underline?: 'always' | 'hover' | 'never';
+    underline?: "always" | "hover" | "never";
     openInNewTab?: boolean;
     onClick?: (row: TData) => void;
 }
@@ -19,7 +19,7 @@ export declare class LinkColumn<TData> extends BaseColumn<TData, LinkColumnConfi
     external(external?: boolean): this;
     icon(icon: ReactNode): this;
     showExternalIcon(show?: boolean): this;
-    underline(style: 'always' | 'hover' | 'never'): this;
+    underline(style: "always" | "hover" | "never"): this;
     openInNewTab(open?: boolean): this;
     onClick(handler: (row: TData) => void): this;
     build(): ColumnDef<TData, unknown>;

package/dist/columns/columns/number-column.d.ts

@@ -1,6 +1,6 @@
-import { ColumnDef } from '@tanstack/react-table';
-import { BaseColumn } from './base-column';
-import { BaseColumnConfig } from './types';
+import { ColumnDef } from "@tanstack/react-table";
+import { BaseColumn } from "./base-column";
+import { BaseColumnConfig } from "./types";
 interface NumberColumnConfig<TData> extends BaseColumnConfig<TData> {
     decimals?: number;
     locale?: string;

package/dist/columns/columns/progress-column.d.ts

@@ -1,12 +1,12 @@
-import { ColumnDef } from '@tanstack/react-table';
-import { BaseColumn } from './base-column';
-import { BaseColumnConfig } from './types';
+import { ColumnDef } from "@tanstack/react-table";
+import { BaseColumn } from "./base-column";
+import { BaseColumnConfig } from "./types";
 interface ProgressColumnConfig<TData> extends BaseColumnConfig<TData> {
     max?: number;
     showValue?: boolean;
     showPercentage?: boolean;
-    size?: 'sm' | 'md' | 'lg';
-    color?: 'default' | 'success' | 'warning' | 'danger' | ((value: number, max: number) => string);
+    size?: "sm" | "md" | "lg";
+    color?: "default" | "success" | "warning" | "danger" | ((value: number, max: number) => string);
     thresholds?: {
         warning?: number;
         danger?: number;
@@ -20,8 +20,8 @@ export declare class ProgressColumn<TData> extends BaseColumn<TData, ProgressCol
     showValue(show?: boolean): this;
     showPercentage(show?: boolean): this;
     hideLabel(): this;
-    size(size: 'sm' | 'md' | 'lg'): this;
-    color(color: 'default' | 'success' | 'warning' | 'danger'): this;
+    size(size: "sm" | "md" | "lg"): this;
+    color(color: "default" | "success" | "warning" | "danger"): this;
     colorByThreshold(warning?: number, danger?: number): this;
     colorByThresholdInverse(warning?: number, danger?: number): this;
     format(fn: (value: number, max: number) => string): this;

package/dist/columns/columns/text-column.d.ts

@@ -1,6 +1,6 @@
-import { ColumnDef, Row } from '@tanstack/react-table';
-import { BaseColumn } from './base-column';
-import { FormattedColumnConfig } from './types';
+import { ColumnDef, Row } from "@tanstack/react-table";
+import { BaseColumn } from "./base-column";
+import { FormattedColumnConfig } from "./types";
 export declare class TextColumn<TData> extends BaseColumn<TData, FormattedColumnConfig<TData>> {
     static make<TData>(accessor: keyof TData | string): TextColumn<TData>;
     formatter(fn: (value: unknown, row: Row<TData>) => React.ReactNode): this;

package/dist/columns/columns/types.d.ts

@@ -1,12 +1,12 @@
-import { Row } from '@tanstack/react-table';
-import { ReactNode } from 'react';
+import { Row } from "@tanstack/react-table";
+import { ReactNode } from "react";
 export interface BaseColumnConfig<TData> {
     accessor: keyof TData | string;
     label?: string;
     sortable?: boolean;
     searchable?: boolean;
     hidden?: boolean;
-    align?: 'left' | 'center' | 'right';
+    align?: "left" | "center" | "right";
     width?: string | number;
     className?: string;
     headerClassName?: string;
@@ -21,7 +21,7 @@ export interface FormattedColumnConfig<TData> extends BaseColumnConfig<TData> {
 export interface BadgeColumnConfig<TData> extends BaseColumnConfig<TData> {
     variants?: Record<string, {
         label?: string;
-        variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'info' | 'muted';
+        variant?: "default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "info" | "muted";
         className?: string;
         icon?: ReactNode;
     }>;
@@ -31,7 +31,7 @@ export interface ActionConfig<TData> {
     icon?: ReactNode;
     onClick?: (row: TData) => void;
     href?: (row: TData) => string;
-    variant?: 'default' | 'destructive' | 'ghost';
+    variant?: "default" | "destructive" | "ghost";
     hidden?: (row: TData) => boolean;
     disabled?: (row: TData) => boolean;
 }

package/dist/columns/date-column.d.ts

@@ -1,15 +1,15 @@
-import { ColumnDef } from '@tanstack/react-table';
-import { BaseColumn } from './base-column';
-import { BaseColumnConfig } from './types';
+import { ColumnDef } from "@tanstack/react-table";
+import { BaseColumn } from "./base-column";
+import { BaseColumnConfig } from "./types";
 interface DateColumnConfig<TData> extends BaseColumnConfig<TData> {
-    format?: 'short' | 'long' | 'relative' | 'time' | 'datetime' | string;
+    format?: "short" | "long" | "relative" | "time" | "datetime" | string;
     locale?: string;
     showIcon?: boolean;
 }
 export declare class DateColumn<TData> extends BaseColumn<TData, DateColumnConfig<TData>> {
     constructor(accessor: keyof TData | string);
     static make<TData>(accessor: keyof TData | string): DateColumn<TData>;
-    format(format: 'short' | 'long' | 'relative' | 'time' | 'datetime'): this;
+    format(format: "short" | "long" | "relative" | "time" | "datetime"): this;
     locale(locale: string): this;
     withIcon(show?: boolean): this;
     short(): this;