@ttianqii/takaui 0.0.4 → 0.0.5
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.
- package/README.md +62 -1
- package/dist/takaui.cjs +18 -21
- package/dist/takaui.css +1 -1
- package/dist/takaui.js +6962 -7829
- package/package.json +5 -2
package/README.md
CHANGED
|
@@ -5,7 +5,17 @@ A modern, customizable React UI component library built with TypeScript, Tailwin
|
|
|
5
5
|
## 📦 Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
+
# npm
|
|
8
9
|
npm install @ttianqii/takaui
|
|
10
|
+
|
|
11
|
+
# yarn
|
|
12
|
+
yarn add @ttianqii/takaui
|
|
13
|
+
|
|
14
|
+
# pnpm
|
|
15
|
+
pnpm add @ttianqii/takaui
|
|
16
|
+
|
|
17
|
+
# bun
|
|
18
|
+
bun add @ttianqii/takaui
|
|
9
19
|
```
|
|
10
20
|
|
|
11
21
|
### Peer Dependencies
|
|
@@ -13,7 +23,17 @@ npm install @ttianqii/takaui
|
|
|
13
23
|
TakaUI requires React 18+ or React 19+:
|
|
14
24
|
|
|
15
25
|
```bash
|
|
26
|
+
# npm
|
|
16
27
|
npm install react react-dom
|
|
28
|
+
|
|
29
|
+
# yarn
|
|
30
|
+
yarn add react react-dom
|
|
31
|
+
|
|
32
|
+
# pnpm
|
|
33
|
+
pnpm add react react-dom
|
|
34
|
+
|
|
35
|
+
# bun
|
|
36
|
+
bun add react react-dom
|
|
17
37
|
```
|
|
18
38
|
|
|
19
39
|
### Tailwind CSS Setup
|
|
@@ -53,6 +73,26 @@ import { useState } from 'react'
|
|
|
53
73
|
function App() {
|
|
54
74
|
const [date, setDate] = useState<Date | undefined>(new Date())
|
|
55
75
|
|
|
76
|
+
// DataTable example - No TanStack required!
|
|
77
|
+
const columns = [
|
|
78
|
+
{ key: 'name', header: 'Name', sortable: true },
|
|
79
|
+
{ key: 'email', header: 'Email' },
|
|
80
|
+
{
|
|
81
|
+
key: 'status',
|
|
82
|
+
header: 'Status',
|
|
83
|
+
cell: (value) => (
|
|
84
|
+
<span className="px-2 py-1 bg-green-100 text-green-800 rounded">
|
|
85
|
+
{value}
|
|
86
|
+
</span>
|
|
87
|
+
)
|
|
88
|
+
},
|
|
89
|
+
]
|
|
90
|
+
|
|
91
|
+
const data = [
|
|
92
|
+
{ id: 1, name: 'John', email: 'john@example.com', status: 'Active' },
|
|
93
|
+
{ id: 2, name: 'Jane', email: 'jane@example.com', status: 'Active' },
|
|
94
|
+
]
|
|
95
|
+
|
|
56
96
|
return (
|
|
57
97
|
<div>
|
|
58
98
|
<Calendar
|
|
@@ -60,6 +100,13 @@ function App() {
|
|
|
60
100
|
selected={date}
|
|
61
101
|
onSelect={setDate}
|
|
62
102
|
/>
|
|
103
|
+
|
|
104
|
+
<DataTable
|
|
105
|
+
data={data}
|
|
106
|
+
columns={columns}
|
|
107
|
+
showSearch
|
|
108
|
+
searchPlaceholder="Search users..."
|
|
109
|
+
/>
|
|
63
110
|
</div>
|
|
64
111
|
)
|
|
65
112
|
}
|
|
@@ -78,10 +125,24 @@ TakaUI includes the following components:
|
|
|
78
125
|
|
|
79
126
|
### Data Display Components
|
|
80
127
|
|
|
81
|
-
- **[DataTable](./docs/
|
|
128
|
+
- **[DataTable](./docs/DATATABLE_NEW.md)** - **NEW!** Independent table with sorting, filtering, and pagination (No TanStack!)
|
|
129
|
+
- ✅ Zero external dependencies (except icons)
|
|
130
|
+
- ✅ Built-in sorting, pagination, search
|
|
131
|
+
- ✅ Custom cell rendering
|
|
132
|
+
- ✅ Loading states
|
|
133
|
+
- [Quick Reference](./DATATABLE_QUICKREF.md) - Cheat sheet
|
|
82
134
|
- **[Schedule](./docs/SCHEDULE.md)** - Weekly schedule component with custom fields
|
|
83
135
|
- **[WeekNavigator](./docs/WEEKNAVIGATOR.md)** - Week navigation with date range display
|
|
84
136
|
|
|
137
|
+
### Advanced Table System (Optional)
|
|
138
|
+
|
|
139
|
+
For advanced users who need TanStack Table features:
|
|
140
|
+
|
|
141
|
+
- **[TableRoot, TableContent, TableNavigator](./docs/DATATABLE.md)** - Modular table components
|
|
142
|
+
- Requires: `npm install @tanstack/react-table`
|
|
143
|
+
- [Modular Structure](./docs/DATATABLE_MODULAR.md)
|
|
144
|
+
- [Architecture](./DATATABLE_ARCHITECTURE.md)
|
|
145
|
+
|
|
85
146
|
### Base UI Components
|
|
86
147
|
|
|
87
148
|
All components are built on top of shadcn/ui primitives:
|