luxtable 0.2.1 → 0.2.3

package/README.md

@@ -1,58 +1,152 @@
-💎 LuxTable
-Enterprise-Grade Data Management. Minimalist Aesthetics.
-LuxTable is a high-performance, feature-rich data grid library designed specifically for the modern React ecosystem. It bridges the gap between complex data manipulation and the clean, modular philosophy of Shadcn UI. Built for developers who refuse to choose between power and beauty.
+# 💎 LuxTable
 
-✨ Key Features
-⚡ High-Velocity Performance: Optimized virtualization engine capable of rendering massive datasets with 60fps fluidity.
+**Enterprise-Grade Data Management. Minimalist Aesthetics.**
 
-🎨 Shadcn-Native Design: Crafted with Tailwind CSS and Radix UI primitives. It doesn't just look like Shadcn; it feels like it.
+[![npm version](https://img.shields.io/npm/v/luxtable.svg)](https://www.npmjs.com/package/luxtable)
+[![npm downloads](https://img.shields.io/npm/dm/luxtable.svg)](https://www.npmjs.com/package/luxtable)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
-🛠 Declarative API: A developer-friendly interface that makes complex features like grouping, pivoting, and column reordering intuitive.
+LuxTable is a high-performance, feature-rich data grid library designed specifically for the modern React ecosystem. It bridges the gap between complex data manipulation and the clean, modular philosophy of Shadcn UI. Built for developers who refuse to choose between power and beauty.
 
-🔒 Type-Safe Excellence: First-class TypeScript support ensures your data remains consistent and your DX remains seamless.
+## ✨ Key Features
 
-🖱 Advanced Interaction: Out-of-the-box support for cell editing, multi-column sorting, advanced filtering, and drag-and-drop.
+- ⚡ **High-Velocity Performance** - Optimized rendering engine capable of handling massive datasets with 60fps fluidity
+- 🎨 **Shadcn-Native Design** - Crafted with Tailwind CSS and Radix UI primitives
+- 🔍 **Advanced Filtering** - Column-level filters with multiple filter types (text, number, select)
+- 🔄 **Smart Sorting** - Multi-column sorting with intuitive click interactions
+- ✅ **Row Selection** - Single and multi-select with checkbox support
+- 📄 **Pagination** - Built-in pagination with customizable page sizes
+- 🛠️ **Column Actions** - Hide/show columns, sorting controls in a unified dropdown
+- 🔎 **Global Search** - Search across all columns instantly
+- 🔒 **Type-Safe Excellence** - First-class TypeScript support with full type inference
+- 📱 **Fully Responsive** - Adaptive layouts from ultra-wide monitors to mobile screens
 
-📱 Fully Responsive: Adaptive layouts that transition gracefully from ultra-wide monitors to mobile screens.
+## 🚀 Quick Start
 
-🚀 Quick Start
-Installation
-Bash
+### Installation
 
+```bash
 npm install luxtable
-Basic Usage
-TypeScript
+# or
+pnpm add luxtable
+# or
+yarn add luxtable
+```
+
+### Basic Usage
+
+```tsx
+import { LuxTable, createColumnHelper } from "luxtable";
+
+type User = {
+  id: number;
+  name: string;
+  email: string;
+  status: "active" | "inactive";
+};
 
-import { LuxTable } from "luxtable";
+const columnHelper = createColumnHelper<User>();
 
 const columns = [
-  { accessorKey: "id", header: "ID" },
-  { accessorKey: "name", header: "Name", sortable: true },
-  { accessorKey: "role", header: "Role", filterable: true },
+  columnHelper.accessor("id", {
+    header: "ID",
+  }),
+  columnHelper.accessor("name", {
+    header: "Name",
+  }),
+  columnHelper.accessor("email", {
+    header: "Email",
+  }),
+  columnHelper.accessor("status", {
+    header: "Status",
+  }),
+];
+
+const data: User[] = [
+  { id: 1, name: "John Doe", email: "john@example.com", status: "active" },
+  { id: 2, name: "Jane Smith", email: "jane@example.com", status: "inactive" },
 ];
 
 export default function App() {
   return (
-    <LuxTable 
-      data={users} 
-      columns={columns} 
+    <LuxTable
+      data={data}
+      columns={columns}
       options={{
-        pagination: true,
-        selection: "multiple",
+        enablePagination: true,
+        enableColumnFilters: true,
+        enableRowSelection: true,
+        enableGlobalFilter: true,
       }}
     />
   );
 }
-💡 Why LuxTable?
-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.
+```
+
+## 📦 Cell Renderers
+
+LuxTable comes with built-in cell renderers for common use cases:
+
+```tsx
+import { 
+  StatusCell, 
+  ProgressCell, 
+  DateCell, 
+  CopyableCell 
+} from "luxtable";
+
+// Status badges
+columnHelper.accessor("status", {
+  header: "Status",
+  cell: (info) => <StatusCell value={info.getValue()} />,
+});
+
+// Progress bars
+columnHelper.accessor("progress", {
+  header: "Progress",
+  cell: (info) => <ProgressCell value={info.getValue()} />,
+});
+
+// Formatted dates
+columnHelper.accessor("createdAt", {
+  header: "Created",
+  cell: (info) => <DateCell value={info.getValue()} />,
+});
+
+// Copy to clipboard
+columnHelper.accessor("id", {
+  header: "ID",
+  cell: (info) => <CopyableCell value={info.getValue()} />,
+});
+```
+
+## 🎯 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 |
+| `pageSize` | `number` | `10` | Default rows per page |
+
+## 🛠 Tech Stack
+
+- **Core**: React & TanStack Table
+- **Styling**: Tailwind CSS
+- **Primitives**: Radix UI
+- **Icons**: Lucide React
 
-🛠 Tech Stack
-Core: React & TanStack Table (Logical Layer)
+## 📖 Documentation
 
-Styling: Tailwind CSS
+Visit our [documentation](https://luxtable.dev/docs) for detailed guides and examples.
 
-Primitives: Radix UI
+## 💡 Why LuxTable?
 
-Icons: Lucide React
+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.
 
+## 📄 License
 
+MIT © [LuxTable](https://github.com/luxtable/luxtable)