@nccirtu/tablefy 0.2.0 → 0.5.0

package/README.md

@@ -17,15 +17,31 @@ A powerful, type-safe React table package built with TanStack Table and shadcn/u
 ## Installation
 
 ```bash
-npm install tablefy
+npm install @nccirtu/tablefy
 ```
 
-### Prerequisites
+**⚠️ Important:** Tablefy requires additional setup steps to work correctly.
 
-Tablefy requires the following peer dependencies:
+### What you need to install
+
+1. **Peer dependencies** (required libraries)
+2. **shadcn/ui components** (UI building blocks)
+3. **Tailwind configuration** (for styling)
+
+👉 **[Follow the complete installation guide →](./INSTALLATION.md)**
+
+### Quick Overview
 
 ```bash
+# 1. Install dependencies
 npm install @tanstack/react-table lucide-react class-variance-authority clsx tailwind-merge
+
+# 2. Install shadcn components
+npx shadcn@latest add button table checkbox dropdown-menu input select badge progress tooltip
+
+# 3. Configure Tailwind (see [INSTALLATION.md](./INSTALLATION.md) for instructions for React, Next.js, Vue and Svelte)
+
+# 4. Restart dev server
 ```
 
 ## Quick Start
@@ -173,7 +189,7 @@ export const projectColumns = TableSchema.make<Project>()
 
 ## Documentation
 
-- [Installation Guide](./docs/INSTALLATION.md) - Detailed installation instructions
+- [Installation Guide](./INSTALLATION.md) - Detailed installation instructions
 - [Usage Guide](./docs/USAGE.md) - Complete API reference and examples
 - [Column Types](./docs/USAGE.md#column-types) - All column types and their methods
 

package/cli/templates/tablefy/avatar-list.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+
+export const AvatarList = ({
+  items,
+  maxVisible = 5,
+  size = 32,
+  ...props
+}: {
+  items: Array<{ id: string; src?: string; alt?: string; initials?: string }>;
+  maxVisible?: number;
+  size?: number | string;
+  [key: string]: any;
+}) => {
+  const sizeValue = typeof size === "string" ? parseInt(size, 10) || 32 : size;
+  return (
+    <div
+      className="avatar-list"
+      style={{ "--avatar-size": `${sizeValue}px` } as React.CSSProperties}
+      {...props}
+    >
+      {items.slice(0, maxVisible).map((item) => (
+        <div key={item.id} className="avatar-item">
+          {item.src ? (
+            <img
+              src={item.src}
+              alt={item.alt || "Avatar"}
+              style={{ width: `${sizeValue}px`, height: `${sizeValue}px` }}
+            />
+          ) : (
+            <div
+              className="avatar-initials"
+              style={{ width: `${sizeValue}px`, height: `${sizeValue}px` }}
+            >
+              {item.initials || "?"}
+            </div>
+          )}
+        </div>
+      ))}
+      {items.length > maxVisible && (
+        <div
+          className="avatar-count"
+          style={{ width: `${sizeValue}px`, height: `${sizeValue}px` }}
+        >
+          +{items.length - maxVisible}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AvatarList;

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

@@ -0,0 +1,77 @@
+"use client";
+
+// shadcn components - installed by user
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { EmptyStateConfig } from "@/lib/types";
+
+interface DataTableEmptyProps {
+  config: EmptyStateConfig;
+  colSpan: number;
+  className?: string;
+}
+
+export function DataTableEmpty({
+  config,
+  colSpan,
+  className,
+}: DataTableEmptyProps) {
+  const { icon, imageUrl, title, description, action, variant } = config;
+
+  return (
+    <tr>
+      <td colSpan={colSpan} className={cn("h-[400px]", className)}>
+        <div className="flex h-full flex-col items-center justify-center gap-4 text-center p-8">
+          {imageUrl ? (
+            <img className="w-24 h-24" src={imageUrl} alt="Empty State" />
+          ) : icon ? (
+            <div
+              className={cn(
+                "rounded-full p-4",
+                variant === "error" ? "bg-destructive/10" : "bg-muted",
+              )}
+            >
+              {icon}
+            </div>
+          ) : null}
+
+          <div className="w-full flex flex-col items-center justify-center gap-2">
+            <h3 className="text-sm font-semibold text-foreground whitespace-normal break-words">
+              {title}
+            </h3>
+            {description && (
+              <p className="text-xs text-muted-foreground font-normal whitespace-normal break-words leading-relaxed">
+                {description}
+              </p>
+            )}
+          </div>
+
+          {action && (
+            <Button
+              variant={variant === "error" ? "outline" : "default"}
+              onClick={action.onClick}
+              asChild={!!action.href}
+              className="mt-2"
+            >
+              {action.href ? (
+                <a href={action.href}>
+                  {action.icon}
+                  <span className={cn(action.icon ? "ml-2" : "")}>
+                    {action.label}
+                  </span>
+                </a>
+              ) : (
+                <>
+                  {action.icon}
+                  <span className={cn(action.icon ? "ml-2" : "")}>
+                    {action.label}
+                  </span>
+                </>
+              )}
+            </Button>
+          )}
+        </div>
+      </td>
+    </tr>
+  );
+}

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

@@ -0,0 +1,208 @@
+"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 {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ChevronDown, Search, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { HeaderAction, SearchConfig } from "@/lib/types";
+
+interface DataTableHeaderProps<TData> {
+  title?: string;
+  description?: string;
+  actions?: HeaderAction<TData>[];
+  search?: SearchConfig;
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+  table?: TanstackTable<TData>;
+  selectedCount?: number;
+  className?: string;
+}
+
+export function DataTableHeader<TData>({
+  title,
+  description,
+  actions = [],
+  search,
+  searchValue = "",
+  onSearchChange,
+  table,
+  selectedCount = 0,
+  className,
+}: DataTableHeaderProps<TData>) {
+  const normalActions = actions.filter((a) => !a.bulk && !a.hidden);
+  const bulkActions = actions.filter((a) => a.bulk && !a.hidden);
+  const showBulkActions = selectedCount > 0 && bulkActions.length > 0;
+
+  const getSelectedRows = (): TData[] => {
+    if (!table) return [];
+    return table.getFilteredSelectedRowModel().rows.map((row) => row.original);
+  };
+
+  const renderAction = (action: HeaderAction<TData>, index: number) => {
+    if (action.children && action.children.length > 0) {
+      return (
+        <DropdownMenu key={action.id || index}>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant={action.variant || "outline"}
+              size={action.size || "default"}
+              disabled={action.disabled || action.loading}
+            >
+              {action.icon}
+              <span className={cn(action.icon ? "ml-2" : "")}>
+                {action.label}
+              </span>
+              <ChevronDown className="ml-2 h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {action.children.map((child, childIndex) => (
+              <DropdownMenuItem
+                key={child.id || childIndex}
+                onClick={child.onClick}
+                className={cn(
+                  child.variant === "destructive" &&
+                    "text-destructive focus:text-destructive",
+                )}
+              >
+                {child.icon && <span className="mr-2">{child.icon}</span>}
+                {child.label}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    }
+
+    if (action.href) {
+      return (
+        <Button
+          key={action.id || index}
+          variant={action.variant || "outline"}
+          size={action.size || "default"}
+          disabled={action.disabled || action.loading}
+          asChild
+        >
+          <a href={action.href}>
+            {action.icon}
+            {action.size !== "icon" && (
+              <span className={cn(action.icon ? "ml-2" : "")}>
+                {action.label}
+              </span>
+            )}
+          </a>
+        </Button>
+      );
+    }
+
+    return (
+      <Button
+        key={action.id || index}
+        variant={action.variant || "outline"}
+        size={action.size || "default"}
+        disabled={action.disabled || action.loading}
+        onClick={() => {
+          if (action.bulk && action.bulkOnClick) {
+            action.bulkOnClick(getSelectedRows());
+          } else if (action.onClick) {
+            action.onClick();
+          }
+        }}
+      >
+        {action.loading ? (
+          <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+              fill="none"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+            />
+          </svg>
+        ) : (
+          action.icon
+        )}
+        {action.size !== "icon" && (
+          <span className={cn(action.icon || action.loading ? "ml-2" : "")}>
+            {action.label}
+          </span>
+        )}
+      </Button>
+    );
+  };
+
+  if (
+    !title &&
+    !description &&
+    normalActions.length === 0 &&
+    !search?.enabled
+  ) {
+    return null;
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-4", className)}>
+      {(title || description) && (
+        <div className="space-y-1">
+          {title && (
+            <h2 className="text-xl font-semibold tracking-tight">{title}</h2>
+          )}
+          {description && (
+            <p className="text-sm text-muted-foreground">{description}</p>
+          )}
+        </div>
+      )}
+
+      {(search?.enabled || normalActions.length > 0 || showBulkActions) && (
+        <div className="flex items-center justify-between gap-4 mb-4">
+          {search?.enabled && (
+            <div className="relative max-w-sm flex-1">
+              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                placeholder={search.placeholder || "Suchen..."}
+                value={searchValue}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => onSearchChange?.(e.target.value)}
+                className="pl-9 pr-9"
+              />
+              {searchValue && (
+                <button
+                  onClick={() => onSearchChange?.("")}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                >
+                  <X className="h-4 w-4" />
+                </button>
+              )}
+            </div>
+          )}
+
+          <div className="flex items-center gap-2">
+            {showBulkActions && (
+              <span className="text-sm text-muted-foreground">
+                {selectedCount} ausgewählt
+              </span>
+            )}
+            {showBulkActions &&
+              bulkActions.map((action, index) => renderAction(action, index))}
+            {normalActions.length > 0 &&
+              normalActions.map((action, index) => renderAction(action, index))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,137 @@
+"use client";
+
+import { Table as TanstackTable } from "@tanstack/react-table";
+// shadcn components - installed by user
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { PaginationConfig } from "@/lib/types";
+
+interface DataTablePaginationProps<TData> {
+  table: TanstackTable<TData>;
+  config?: PaginationConfig;
+  className?: string;
+}
+
+export function DataTablePagination<TData>({
+  table,
+  config,
+  className,
+}: DataTablePaginationProps<TData>) {
+  if (!config?.enabled) return null;
+
+  const {
+    showPageInfo = true,
+    showPageSizeSelector = true,
+    pageSizeOptions = [10, 20, 30, 50, 100],
+  } = config;
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-4 px-4 py-4 sm:flex-row sm:items-center sm:justify-between",
+        className,
+      )}
+    >
+      <div className="text-sm text-muted-foreground">
+        {table.getFilteredSelectedRowModel().rows.length > 0 ? (
+          <span>
+            {table.getFilteredSelectedRowModel().rows.length} von{" "}
+            {table.getFilteredRowModel().rows.length} Zeile(n) ausgewählt
+          </span>
+        ) : showPageInfo ? (
+          <span>{table.getFilteredRowModel().rows.length} Einträge</span>
+        ) : null}
+      </div>
+
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:gap-6">
+        {showPageSizeSelector && (
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-muted-foreground whitespace-nowrap">
+              Zeilen pro Seite
+            </span>
+            <Select
+              value={`${table.getState().pagination.pageSize}`}
+              onValueChange={(value: string) => table.setPageSize(Number(value))}
+            >
+              <SelectTrigger className="h-8 w-[70px]">
+                <SelectValue
+                  placeholder={table.getState().pagination.pageSize}
+                />
+              </SelectTrigger>
+              <SelectContent side="top">
+                {pageSizeOptions.map((pageSize) => (
+                  <SelectItem key={pageSize} value={`${pageSize}`}>
+                    {pageSize}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+
+        {showPageInfo && (
+          <div className="text-sm text-muted-foreground whitespace-nowrap">
+            Seite {table.getState().pagination.pageIndex + 1} von{" "}
+            {table.getPageCount()}
+          </div>
+        )}
+
+        <div className="flex items-center gap-1">
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={() => table.setPageIndex(0)}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <ChevronsLeft className="h-4 w-4" />
+            <span className="sr-only">Erste Seite</span>
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <ChevronLeft className="h-4 w-4" />
+            <span className="sr-only">Vorherige Seite</span>
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            <ChevronRight className="h-4 w-4" />
+            <span className="sr-only">Nächste Seite</span>
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+            disabled={!table.getCanNextPage()}
+          >
+            <ChevronsRight className="h-4 w-4" />
+            <span className="sr-only">Letzte Seite</span>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,13 @@
+"use client";
+
+interface DataTableSchemaProps {
+  [key: string]: any;
+}
+
+export const DataTableSchema = (props: DataTableSchemaProps) => {
+  return (
+    <div className="data-table-schema">
+      <p>TableSchema Placeholder</p>
+    </div>
+  );
+};