@tablecraft/table 0.1.0 → 0.1.1

package/README.md

@@ -0,0 +1,140 @@
+# @tablecraft/table
+
+Schema-driven data table for React — built on TanStack Table + Shadcn UI with native TableCraft engine support.
+
+## Links
+
+- [GitHub](https://github.com/jacksonkasi1/TableCraft)
+- [Documentation](https://jacksonkasi.gitbook.io/tablecraft/)
+
+## Install
+
+```bash
+bun add @tablecraft/table
+# or
+npm install @tablecraft/table
+# or
+yarn add @tablecraft/table
+# or
+pnpm add @tablecraft/table
+```
+
+## Peer Dependencies
+
+```bash
+bun add @tanstack/react-table react react-dom
+```
+
+## Features
+
+- **Auto-generated columns** — Columns generated from your table config metadata
+- **Built-in filtering** — Advanced filter UI with date presets, multi-select, and custom operators
+- **Sorting & pagination** — Client-side or server-side with URL state sync
+- **Export** — CSV, JSON, and Excel export built-in
+- **Responsive** — Mobile-friendly with collapsible columns
+- **Accessible** — WCAG compliant with keyboard navigation
+- **Theming** — Dark mode support via Tailwind CSS
+
+## Quick Example
+
+```tsx
+import { DataTable, useTablecraftAdapter } from '@tablecraft/table';
+import { client } from './client';
+
+function UsersPage() {
+  const adapter = useTablecraftAdapter({
+    client,
+    table: 'users',
+  });
+
+  return (
+    <DataTable
+      adapter={adapter}
+      columns={[
+        { id: 'name', header: 'Name', sortable: true, searchable: true },
+        { id: 'email', header: 'Email', sortable: true },
+        { id: 'status', header: 'Status', filterable: true },
+        { id: 'createdAt', header: 'Created', sortable: true },
+      ]}
+      features={{
+        search: true,
+        filters: true,
+        sort: true,
+        pagination: true,
+        export: true,
+        columnVisibility: true,
+      }}
+    />
+  );
+}
+```
+
+## Static Data Example
+
+```tsx
+import { DataTable, useStaticAdapter } from '@tablecraft/table';
+
+function UsersTable({ users }: { users: User[] }) {
+  const adapter = useStaticAdapter({
+    data: users,
+    pageSize: 25,
+  });
+
+  return (
+    <DataTable
+      adapter={adapter}
+      columns={[
+        { id: 'name', header: 'Name' },
+        { id: 'email', header: 'Email' },
+        { id: 'status', header: 'Status', filterable: true },
+      ]}
+      features={{
+        search: true,
+        filters: true,
+        pagination: true,
+      }}
+    />
+  );
+}
+```
+
+## Column Renderers
+
+Built-in renderers for common data types:
+
+```tsx
+import { renderers } from '@tablecraft/table';
+
+const columns = [
+  { id: 'name', header: 'Name', cell: renderers.text() },
+  { id: 'avatar', header: 'Avatar', cell: renderers.image() },
+  { id: 'email', header: 'Email', cell: renderers.link({ href: (row) => `mailto:${row.email}` }) },
+  { id: 'status', header: 'Status', cell: renderers.badge({ variants: { active: 'success' } }) },
+  { id: 'progress', header: 'Progress', cell: renderers.progress() },
+  { id: 'createdAt', header: 'Created', cell: renderers.date({ format: 'MMM d, yyyy' }) },
+  { id: 'isActive', header: 'Active', cell: renderers.boolean() },
+];
+```
+
+## URL State Sync
+
+Automatic URL synchronization for filters, sorting, and pagination:
+
+```tsx
+import { DataTable, useTablecraftAdapter, useUrlState } from '@tablecraft/table';
+
+function UsersPage() {
+  const urlState = useUrlState();
+  const adapter = useTablecraftAdapter({
+    client,
+    table: 'users',
+    initialState: urlState,
+  });
+
+  return <DataTable adapter={adapter} />;
+}
+```
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tablecraft/table",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Schema-driven data table for React — built on TanStack Table + Shadcn UI with native TableCraft engine support",
   "type": "module",
   "main": "dist/index.js",
@@ -13,7 +13,8 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
   "scripts": {
     "build": "bun run --bun tsc",

package/dist/row-actions.d.ts

@@ -1,10 +0,0 @@
-import type { Row } from "@tanstack/react-table";
-interface DataTableRowActionsProps<TData> {
-    row: Row<TData>;
-    onEdit?: (data: TData) => void;
-    onCopy?: (data: TData) => void;
-    onDelete?: (data: TData) => void;
-}
-export declare function DataTableRowActions<TData>({ row, onEdit, onCopy, onDelete, }: DataTableRowActionsProps<TData>): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=row-actions.d.ts.map

package/dist/row-actions.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"row-actions.d.ts","sourceRoot":"","sources":["../src/row-actions.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAiBjD,UAAU,wBAAwB,CAAC,KAAK;IACtC,GAAG,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC;IAChB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;IAC/B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,EACzC,GAAG,EACH,MAAM,EACN,MAAM,EACN,QAAQ,GACT,EAAE,wBAAwB,CAAC,KAAK,CAAC,2CAyDjC"}

package/dist/row-actions.js

@@ -1,36 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// ** import core packages
-import { MoreHorizontal, Pencil, Copy, Trash2 } from "lucide-react";
-// ** import components
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "./components/table-dropdown";
-// ** import utils
-import { cn } from "./utils/cn";
-export function DataTableRowActions({ row, onEdit, onCopy, onDelete, }) {
-    const handleEdit = () => {
-        if (onEdit) {
-            onEdit(row.original);
-        }
-        else {
-            console.log("Edit:", row.original);
-        }
-    };
-    const handleCopy = () => {
-        if (onCopy) {
-            onCopy(row.original);
-        }
-        else {
-            console.log("Copy:", row.original);
-        }
-    };
-    const handleDelete = () => {
-        if (onDelete) {
-            onDelete(row.original);
-        }
-        else {
-            console.log("Delete:", row.original);
-        }
-    };
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { className: cn("inline-flex h-8 w-8 items-center justify-center rounded-md text-sm font-medium", "hover:bg-accent hover:text-accent-foreground transition-colors", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "data-[state=open]:bg-muted"), children: [_jsx(MoreHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Open menu" })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-[160px]", children: [_jsxs(DropdownMenuItem, { onClick: handleEdit, children: [_jsx(Pencil, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }), "Edit"] }), _jsxs(DropdownMenuItem, { onClick: handleCopy, children: [_jsx(Copy, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }), "Copy"] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: handleDelete, children: [_jsx(Trash2, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }), "Delete"] })] })] }));
-}
-//# sourceMappingURL=row-actions.js.map

package/dist/row-actions.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"row-actions.js","sourceRoot":"","sources":["../src/row-actions.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAKb,0BAA0B;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAEpE,uBAAuB;AACvB,OAAO,EACL,YAAY,EACZ,mBAAmB,EACnB,gBAAgB,EAChB,qBAAqB,EACrB,mBAAmB,GACpB,MAAM,6BAA6B,CAAC;AAErC,kBAAkB;AAClB,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAShC,MAAM,UAAU,mBAAmB,CAAQ,EACzC,GAAG,EACH,MAAM,EACN,MAAM,EACN,QAAQ,GACwB;IAChC,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACvB,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACvB,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACzB,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC;QACvC,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,YAAY,eACX,KAAC,mBAAmB,IAAC,OAAO,kBAC1B,kBACE,SAAS,EAAE,EAAE,CACX,gFAAgF,EAChF,gEAAgE,EAChE,yEAAyE,EACzE,4BAA4B,CAC7B,aAED,KAAC,cAAc,IAAC,SAAS,EAAC,SAAS,GAAG,EACtC,eAAM,SAAS,EAAC,SAAS,0BAAiB,IACnC,GACW,EACtB,MAAC,mBAAmB,IAAC,KAAK,EAAC,KAAK,EAAC,SAAS,EAAC,WAAW,aACpD,MAAC,gBAAgB,IAAC,OAAO,EAAE,UAAU,aACnC,KAAC,MAAM,IAAC,SAAS,EAAC,2CAA2C,GAAG,YAE/C,EACnB,MAAC,gBAAgB,IAAC,OAAO,EAAE,UAAU,aACnC,KAAC,IAAI,IAAC,SAAS,EAAC,2CAA2C,GAAG,YAE7C,EACnB,KAAC,qBAAqB,KAAG,EACzB,MAAC,gBAAgB,IAAC,OAAO,EAAE,YAAY,aACrC,KAAC,MAAM,IAAC,SAAS,EAAC,2CAA2C,GAAG,cAE/C,IACC,IACT,CAChB,CAAC;AACJ,CAAC"}

package/dist/utils/size-variants.d.ts

@@ -1,15 +0,0 @@
-/**
- * Size variant utility functions for consistent component sizing across the table package
- */
-export type SizeVariant = 'sm' | 'default' | 'lg';
-/**
- * Get the appropriate height class for input elements based on size variant
- */
-export declare const getInputSizeClass: (size: SizeVariant) => string;
-/**
- * Get the appropriate size classes for button elements
- * @param size - The size variant to apply
- * @param isIcon - Whether this is an icon-only button (affects width)
- */
-export declare const getButtonSizeClass: (size: SizeVariant, isIcon?: boolean) => string;
-//# sourceMappingURL=size-variants.d.ts.map

package/dist/utils/size-variants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"size-variants.d.ts","sourceRoot":"","sources":["../../src/utils/size-variants.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;AAElD;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,MAAM,WAAW,KAAG,MASrD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,MAAM,WAAW,EAAE,gBAAc,KAAG,MAmBtE,CAAC"}

package/dist/utils/size-variants.js

@@ -1,42 +0,0 @@
-/**
- * Size variant utility functions for consistent component sizing across the table package
- */
-/**
- * Get the appropriate height class for input elements based on size variant
- */
-export const getInputSizeClass = (size) => {
-    switch (size) {
-        case 'sm':
-            return 'h-8';
-        case 'lg':
-            return 'h-11';
-        default:
-            return '';
-    }
-};
-/**
- * Get the appropriate size classes for button elements
- * @param size - The size variant to apply
- * @param isIcon - Whether this is an icon-only button (affects width)
- */
-export const getButtonSizeClass = (size, isIcon = false) => {
-    if (isIcon) {
-        switch (size) {
-            case 'sm':
-                return 'h-8 w-8';
-            case 'lg':
-                return 'h-11 w-11';
-            default:
-                return '';
-        }
-    }
-    switch (size) {
-        case 'sm':
-            return 'h-8 px-3';
-        case 'lg':
-            return 'h-11 px-5';
-        default:
-            return '';
-    }
-};
-//# sourceMappingURL=size-variants.js.map

package/dist/utils/size-variants.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"size-variants.js","sourceRoot":"","sources":["../../src/utils/size-variants.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,IAAiB,EAAU,EAAE;IAC7D,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,IAAI;YACP,OAAO,KAAK,CAAC;QACf,KAAK,IAAI;YACP,OAAO,MAAM,CAAC;QAChB;YACE,OAAO,EAAE,CAAC;IACd,CAAC;AACH,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,IAAiB,EAAE,MAAM,GAAG,KAAK,EAAU,EAAE;IAC9E,IAAI,MAAM,EAAE,CAAC;QACX,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,IAAI;gBACP,OAAO,SAAS,CAAC;YACnB,KAAK,IAAI;gBACP,OAAO,WAAW,CAAC;YACrB;gBACE,OAAO,EAAE,CAAC;QACd,CAAC;IACH,CAAC;IACD,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,IAAI;YACP,OAAO,UAAU,CAAC;QACpB,KAAK,IAAI;YACP,OAAO,WAAW,CAAC;QACrB;YACE,OAAO,EAAE,CAAC;IACd,CAAC;AACH,CAAC,CAAC"}