@nccirtu/tablefy 0.6.0 → 0.6.2

package/README.md

@@ -39,11 +39,16 @@ npm install @tanstack/react-table lucide-react class-variance-authority clsx tai
 # 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)
+# 3. Configure Tailwind (see INSTALLATION.md for framework-specific instructions)
 
-# 4. Restart dev server
+# 4. For Laravel/Vite: Add alias configuration to vite.config.js
+# See INSTALLATION.md Step 6 for details
+
+# 5. Restart dev server
 ```
 
+**Laravel/Vite Users:** You must configure the `@` alias in your `vite.config.js` to resolve imports correctly. See [INSTALLATION.md](./INSTALLATION.md#step-6-configure-vite-laravelvite-projects) for details.
+
 ## Quick Start
 
 ```tsx

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

@@ -3,7 +3,7 @@
 // shadcn components - installed by user
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { EmptyStateConfig } from "@/lib/types";
+import { EmptyStateConfig } from "@nccirtu/tablefy";
 
 interface DataTableEmptyProps {
   config: EmptyStateConfig;

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

@@ -12,7 +12,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { ChevronDown, Search, X } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { HeaderAction, SearchConfig } from "@/lib/types";
+import { HeaderAction, SearchConfig } from "@nccirtu/tablefy";
 
 interface DataTableHeaderProps<TData> {
   title?: string;
@@ -176,7 +176,9 @@ export function DataTableHeader<TData>({
               <Input
                 placeholder={search.placeholder || "Suchen..."}
                 value={searchValue}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => onSearchChange?.(e.target.value)}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  onSearchChange?.(e.target.value)
+                }
                 className="pl-9 pr-9"
               />
               {searchValue && (

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

@@ -17,7 +17,7 @@ import {
   ChevronsRight,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { PaginationConfig } from "@/lib/types";
+import { PaginationConfig } from "@nccirtu/tablefy";
 
 interface DataTablePaginationProps<TData> {
   table: TanstackTable<TData>;
@@ -64,7 +64,9 @@ export function DataTablePagination<TData>({
             </span>
             <Select
               value={`${table.getState().pagination.pageSize}`}
-              onValueChange={(value: string) => table.setPageSize(Number(value))}
+              onValueChange={(value: string) =>
+                table.setPageSize(Number(value))
+              }
             >
               <SelectTrigger className="h-8 w-[70px]">
                 <SelectValue

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

@@ -23,11 +23,10 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { cn } from "@/lib/utils";
-import { DataTableConfig } from "@/lib/types";
+import { DataTableConfig, EmptyStateBuilder } from "@nccirtu/tablefy";
 import { DataTableHeader } from "./data-table-header";
 import { DataTableEmpty } from "./data-table-empty";
 import { DataTablePagination } from "./data-table-pagination";
-import { EmptyStateBuilder } from "@/lib/builders";
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];

package/dist/columns/index.esm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
+import { cn } from '@/lib/utils';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { ArrowUpDown, Calendar, ExternalLink, MoreHorizontal } from 'lucide-react';
@@ -15,10 +15,6 @@ const AvatarList = ({ items, maxVisible = 5, size = 32, ...props }) => {
     return (jsxs("div", { className: "avatar-list", style: { "--avatar-size": `${sizeValue}px` }, ...props, children: [items.slice(0, maxVisible).map((item) => (jsx("div", { className: "avatar-item", children: item.src ? (jsx("img", { src: item.src, alt: item.alt || "Avatar", style: { width: `${sizeValue}px`, height: `${sizeValue}px` } })) : (jsx("div", { className: "avatar-initials", style: { width: `${sizeValue}px`, height: `${sizeValue}px` }, children: item.initials || "?" })) }, item.id))), items.length > maxVisible && (jsxs("div", { className: "avatar-count", style: { width: `${sizeValue}px`, height: `${sizeValue}px` }, children: ["+", items.length - maxVisible] }))] }));
 };
 
-function cn(...inputs) {
-    return clsx(inputs.filter(Boolean));
-}
-
 class BaseColumn {
     config;
     constructor(accessor) {