luxtable 0.2.3 → 0.3.0

package/README.md

@@ -23,7 +23,39 @@ LuxTable is a high-performance, feature-rich data grid library designed specific
 
 ## 🚀 Quick Start
 
-### Installation
+### Installation (Recommended: shadcn CLI)
+
+LuxTable uses the **shadcn registry** approach - components are copied directly into your project, giving you full control over the code.
+
+#### Prerequisites
+
+Make sure you have shadcn/ui set up in your project:
+
+```bash
+pnpm dlx shadcn@latest init
+```
+
+#### Install LuxTable
+
+```bash
+# Install the main LuxTable component
+pnpm dlx shadcn@latest add "https://luxtable.dev/r/lux-table.json"
+
+# Optional: Install pre-built cell renderers
+pnpm dlx shadcn@latest add "https://luxtable.dev/r/lux-table-cell-renderers.json"
+
+# Optional: Install column helper utilities
+pnpm dlx shadcn@latest add "https://luxtable.dev/r/lux-table-column-helper.json"
+```
+
+This will:
+- Copy LuxTable components to your `components/lux-table` folder
+- Install required dependencies (`@tanstack/react-table`, `lucide-react`)
+- Install required shadcn/ui components (button, checkbox, dropdown-menu, input, select)
+
+### Alternative: npm Package
+
+If you prefer using LuxTable as an npm package:
 
 ```bash
 npm install luxtable
@@ -33,10 +65,21 @@ pnpm add luxtable
 yarn add luxtable
 ```
 
+> **Note:** When using the npm package, you need to configure your `tailwind.config.js` to include LuxTable:
+> ```js
+> module.exports = {
+>   content: [
+>     "./src/**/*.{js,ts,jsx,tsx}",
+>     "./node_modules/luxtable/dist/**/*.{js,mjs}",
+>   ],
+> };
+> ```
+
 ### Basic Usage
 
 ```tsx
-import { LuxTable, createColumnHelper } from "luxtable";
+import { LuxTable } from "@/components/lux-table/lux-table";
+import { ColumnDef } from "@tanstack/react-table";
 
 type User = {
   id: number;
@@ -45,21 +88,23 @@ type User = {
   status: "active" | "inactive";
 };
 
-const columnHelper = createColumnHelper<User>();
-
-const columns = [
-  columnHelper.accessor("id", {
+const columns: ColumnDef<User>[] = [
+  {
+    accessorKey: "id",
     header: "ID",
-  }),
-  columnHelper.accessor("name", {
+  },
+  {
+    accessorKey: "name",
     header: "Name",
-  }),
-  columnHelper.accessor("email", {
+  },
+  {
+    accessorKey: "email",
     header: "Email",
-  }),
-  columnHelper.accessor("status", {
+  },
+  {
+    accessorKey: "status",
     header: "Status",
-  }),
+  },
 ];
 
 const data: User[] = [
@@ -73,10 +118,10 @@ export default function App() {
       data={data}
       columns={columns}
       options={{
-        enablePagination: true,
-        enableColumnFilters: true,
-        enableRowSelection: true,
-        enableGlobalFilter: true,
+        pagination: true,
+        filtering: true,
+        selection: "multiple",
+        showToolbar: true,
       }}
     />
   );
@@ -88,49 +133,48 @@ export default function App() {
 LuxTable comes with built-in cell renderers for common use cases:
 
 ```tsx
-import { 
-  StatusCell, 
-  ProgressCell, 
-  DateCell, 
-  CopyableCell 
-} from "luxtable";
+import { StatusCell, ProgressCell, DateCell, CopyableCell } from "@/components/lux-table/cell-renderers";
 
 // Status badges
-columnHelper.accessor("status", {
+{
+  accessorKey: "status",
   header: "Status",
-  cell: (info) => <StatusCell value={info.getValue()} />,
-});
+  cell: ({ row }) => <StatusCell value={row.getValue("status")} />,
+}
 
 // Progress bars
-columnHelper.accessor("progress", {
+{
+  accessorKey: "progress",
   header: "Progress",
-  cell: (info) => <ProgressCell value={info.getValue()} />,
-});
+  cell: ({ row }) => <ProgressCell value={row.getValue("progress")} />,
+}
 
 // Formatted dates
-columnHelper.accessor("createdAt", {
+{
+  accessorKey: "createdAt",
   header: "Created",
-  cell: (info) => <DateCell value={info.getValue()} />,
-});
+  cell: ({ row }) => <DateCell value={row.getValue("createdAt")} />,
+}
 
 // Copy to clipboard
-columnHelper.accessor("id", {
+{
+  accessorKey: "id",
   header: "ID",
-  cell: (info) => <CopyableCell value={info.getValue()} />,
-});
+  cell: ({ row }) => <CopyableCell value={row.getValue("id")} />,
+}
 ```
 
 ## 🎯 Options
 
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
-| `enablePagination` | `boolean` | `true` | Enable/disable pagination |
-| `enableColumnFilters` | `boolean` | `false` | Enable column-level filtering |
-| `enableGlobalFilter` | `boolean` | `false` | Enable global search |
-| `enableRowSelection` | `boolean` | `false` | Enable row selection with checkboxes |
-| `enableSorting` | `boolean` | `true` | Enable column sorting |
-| `showToolbar` | `boolean` | `false` | Show toolbar with search and column visibility |
+| `pagination` | `boolean` | `false` | Enable/disable pagination |
 | `pageSize` | `number` | `10` | Default rows per page |
+| `filtering` | `boolean` | `false` | Enable column-level filtering |
+| `selection` | `"single" \| "multiple" \| "none"` | `"none"` | Row selection mode |
+| `showToolbar` | `boolean` | `false` | Show toolbar with search and column visibility |
+| `showGlobalSearch` | `boolean` | `true` | Show global search in toolbar |
+| `showColumnVisibility` | `boolean` | `true` | Show column visibility controls |
 
 ## 🛠 Tech Stack
 
@@ -147,6 +191,16 @@ Visit our [documentation](https://luxtable.dev/docs) for detailed guides and exa
 
 Most data grids are either too lightweight for complex tasks or too bloated with legacy styles. LuxTable is built from the ground up to be **headless-first but styled-ready**. It provides the engine you need for heavy data work, wrapped in the minimalist aesthetic that modern users expect.
 
+### Why shadcn Registry?
+
+By using the shadcn registry approach instead of a traditional npm package:
+
+- ✅ **Full Control** - Components are in your codebase, customize freely
+- ✅ **No CSS Conflicts** - Uses your project's Tailwind configuration
+- ✅ **Smaller Bundle** - Only include what you need
+- ✅ **Easy Updates** - Re-run the add command to update
+- ✅ **Matches Your Stack** - Works seamlessly with your existing shadcn/ui components
+
 ## 📄 License
 
 MIT © [LuxTable](https://github.com/luxtable/luxtable)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luxtable",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "private": false,
   "description": "Enterprise-Grade Data Management. Minimalist Aesthetics.",
   "keywords": [