luxtable 0.2.2 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +125 -31
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,58 +1,152 @@
1
- 💎 LuxTable
2
- Enterprise-Grade Data Management. Minimalist Aesthetics.
3
- 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.
1
+ # 💎 LuxTable
4
2
 
5
- ✨ Key Features
6
- ⚡ High-Velocity Performance: Optimized virtualization engine capable of rendering massive datasets with 60fps fluidity.
3
+ **Enterprise-Grade Data Management. Minimalist Aesthetics.**
7
4
 
8
- 🎨 Shadcn-Native Design: Crafted with Tailwind CSS and Radix UI primitives. It doesn't just look like Shadcn; it feels like it.
5
+ [![npm version](https://img.shields.io/npm/v/luxtable.svg)](https://www.npmjs.com/package/luxtable)
6
+ [![npm downloads](https://img.shields.io/npm/dm/luxtable.svg)](https://www.npmjs.com/package/luxtable)
7
+ [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
9
8
 
10
- 🛠 Declarative API: A developer-friendly interface that makes complex features like grouping, pivoting, and column reordering intuitive.
9
+ 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.
11
10
 
12
- 🔒 Type-Safe Excellence: First-class TypeScript support ensures your data remains consistent and your DX remains seamless.
11
+ ## ✨ Key Features
13
12
 
14
- 🖱 Advanced Interaction: Out-of-the-box support for cell editing, multi-column sorting, advanced filtering, and drag-and-drop.
13
+ - ⚡ **High-Velocity Performance** - Optimized rendering engine capable of handling massive datasets with 60fps fluidity
14
+ - 🎨 **Shadcn-Native Design** - Crafted with Tailwind CSS and Radix UI primitives
15
+ - 🔍 **Advanced Filtering** - Column-level filters with multiple filter types (text, number, select)
16
+ - 🔄 **Smart Sorting** - Multi-column sorting with intuitive click interactions
17
+ - ✅ **Row Selection** - Single and multi-select with checkbox support
18
+ - 📄 **Pagination** - Built-in pagination with customizable page sizes
19
+ - 🛠️ **Column Actions** - Hide/show columns, sorting controls in a unified dropdown
20
+ - 🔎 **Global Search** - Search across all columns instantly
21
+ - 🔒 **Type-Safe Excellence** - First-class TypeScript support with full type inference
22
+ - 📱 **Fully Responsive** - Adaptive layouts from ultra-wide monitors to mobile screens
15
23
 
16
- 📱 Fully Responsive: Adaptive layouts that transition gracefully from ultra-wide monitors to mobile screens.
24
+ ## 🚀 Quick Start
17
25
 
18
- 🚀 Quick Start
19
- Installation
20
- Bash
26
+ ### Installation
21
27
 
28
+ ```bash
22
29
  npm install luxtable
23
- Basic Usage
24
- TypeScript
30
+ # or
31
+ pnpm add luxtable
32
+ # or
33
+ yarn add luxtable
34
+ ```
35
+
36
+ ### Basic Usage
37
+
38
+ ```tsx
39
+ import { LuxTable, createColumnHelper } from "luxtable";
40
+
41
+ type User = {
42
+ id: number;
43
+ name: string;
44
+ email: string;
45
+ status: "active" | "inactive";
46
+ };
25
47
 
26
- import { LuxTable } from "luxtable";
48
+ const columnHelper = createColumnHelper<User>();
27
49
 
28
50
  const columns = [
29
- { accessorKey: "id", header: "ID" },
30
- { accessorKey: "name", header: "Name", sortable: true },
31
- { accessorKey: "role", header: "Role", filterable: true },
51
+ columnHelper.accessor("id", {
52
+ header: "ID",
53
+ }),
54
+ columnHelper.accessor("name", {
55
+ header: "Name",
56
+ }),
57
+ columnHelper.accessor("email", {
58
+ header: "Email",
59
+ }),
60
+ columnHelper.accessor("status", {
61
+ header: "Status",
62
+ }),
63
+ ];
64
+
65
+ const data: User[] = [
66
+ { id: 1, name: "John Doe", email: "john@example.com", status: "active" },
67
+ { id: 2, name: "Jane Smith", email: "jane@example.com", status: "inactive" },
32
68
  ];
33
69
 
34
70
  export default function App() {
35
71
  return (
36
- <LuxTable
37
- data={users}
38
- columns={columns}
72
+ <LuxTable
73
+ data={data}
74
+ columns={columns}
39
75
  options={{
40
- pagination: true,
41
- selection: "multiple",
76
+ enablePagination: true,
77
+ enableColumnFilters: true,
78
+ enableRowSelection: true,
79
+ enableGlobalFilter: true,
42
80
  }}
43
81
  />
44
82
  );
45
83
  }
46
- 💡 Why LuxTable?
47
- 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.
84
+ ```
85
+
86
+ ## 📦 Cell Renderers
87
+
88
+ LuxTable comes with built-in cell renderers for common use cases:
89
+
90
+ ```tsx
91
+ import {
92
+ StatusCell,
93
+ ProgressCell,
94
+ DateCell,
95
+ CopyableCell
96
+ } from "luxtable";
97
+
98
+ // Status badges
99
+ columnHelper.accessor("status", {
100
+ header: "Status",
101
+ cell: (info) => <StatusCell value={info.getValue()} />,
102
+ });
103
+
104
+ // Progress bars
105
+ columnHelper.accessor("progress", {
106
+ header: "Progress",
107
+ cell: (info) => <ProgressCell value={info.getValue()} />,
108
+ });
109
+
110
+ // Formatted dates
111
+ columnHelper.accessor("createdAt", {
112
+ header: "Created",
113
+ cell: (info) => <DateCell value={info.getValue()} />,
114
+ });
115
+
116
+ // Copy to clipboard
117
+ columnHelper.accessor("id", {
118
+ header: "ID",
119
+ cell: (info) => <CopyableCell value={info.getValue()} />,
120
+ });
121
+ ```
122
+
123
+ ## 🎯 Options
124
+
125
+ | Option | Type | Default | Description |
126
+ |--------|------|---------|-------------|
127
+ | `enablePagination` | `boolean` | `true` | Enable/disable pagination |
128
+ | `enableColumnFilters` | `boolean` | `false` | Enable column-level filtering |
129
+ | `enableGlobalFilter` | `boolean` | `false` | Enable global search |
130
+ | `enableRowSelection` | `boolean` | `false` | Enable row selection with checkboxes |
131
+ | `enableSorting` | `boolean` | `true` | Enable column sorting |
132
+ | `showToolbar` | `boolean` | `false` | Show toolbar with search and column visibility |
133
+ | `pageSize` | `number` | `10` | Default rows per page |
134
+
135
+ ## 🛠 Tech Stack
136
+
137
+ - **Core**: React & TanStack Table
138
+ - **Styling**: Tailwind CSS
139
+ - **Primitives**: Radix UI
140
+ - **Icons**: Lucide React
48
141
 
49
- 🛠 Tech Stack
50
- Core: React & TanStack Table (Logical Layer)
142
+ ## 📖 Documentation
51
143
 
52
- Styling: Tailwind CSS
144
+ Visit our [documentation](https://luxtable.dev/docs) for detailed guides and examples.
53
145
 
54
- Primitives: Radix UI
146
+ ## 💡 Why LuxTable?
55
147
 
56
- Icons: Lucide React
148
+ 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.
57
149
 
150
+ ## 📄 License
58
151
 
152
+ MIT © [LuxTable](https://github.com/luxtable/luxtable)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "luxtable",
3
- "version": "0.2.2",
3
+ "version": "0.2.3",
4
4
  "private": false,
5
5
  "description": "Enterprise-Grade Data Management. Minimalist Aesthetics.",
6
6
  "keywords": [