@smallwebco/tinypivot-vue 1.0.0 → 1.0.9
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 +96 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
# @smallwebco/tinypivot-vue
|
|
2
|
+
|
|
3
|
+
A powerful Excel-like data grid and pivot table component for Vue 3.
|
|
4
|
+
|
|
5
|
+
**[Live Demo](https://tiny-pivot.com)** · **[Buy License](https://tiny-pivot.com/#pricing)**
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @smallwebco/tinypivot-vue
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Quick Start
|
|
14
|
+
|
|
15
|
+
```vue
|
|
16
|
+
<script setup lang="ts">
|
|
17
|
+
import { DataGrid } from '@smallwebco/tinypivot-vue'
|
|
18
|
+
import '@smallwebco/tinypivot-vue/style.css'
|
|
19
|
+
|
|
20
|
+
const data = [
|
|
21
|
+
{ id: 1, region: 'North', product: 'Widget A', sales: 12500, units: 150 },
|
|
22
|
+
{ id: 2, region: 'North', product: 'Widget B', sales: 8300, units: 95 },
|
|
23
|
+
{ id: 3, region: 'South', product: 'Widget A', sales: 15200, units: 180 },
|
|
24
|
+
{ id: 4, region: 'South', product: 'Widget B', sales: 9800, units: 110 },
|
|
25
|
+
]
|
|
26
|
+
</script>
|
|
27
|
+
|
|
28
|
+
<template>
|
|
29
|
+
<DataGrid
|
|
30
|
+
:data="data"
|
|
31
|
+
:enable-export="true"
|
|
32
|
+
:enable-search="true"
|
|
33
|
+
:enable-pagination="true"
|
|
34
|
+
:page-size="100"
|
|
35
|
+
theme="light"
|
|
36
|
+
/>
|
|
37
|
+
</template>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Features
|
|
41
|
+
|
|
42
|
+
| Feature | Free | Pro |
|
|
43
|
+
|---------|:----:|:---:|
|
|
44
|
+
| Excel-like data grid | ✅ | ✅ |
|
|
45
|
+
| Column filtering & sorting | ✅ | ✅ |
|
|
46
|
+
| Global search | ✅ | ✅ |
|
|
47
|
+
| CSV export | ✅ | ✅ |
|
|
48
|
+
| Pagination | ✅ | ✅ |
|
|
49
|
+
| Column resizing | ✅ | ✅ |
|
|
50
|
+
| Clipboard (Ctrl+C) | ✅ | ✅ |
|
|
51
|
+
| Dark mode | ✅ | ✅ |
|
|
52
|
+
| Pivot table | ❌ | ✅ |
|
|
53
|
+
| Aggregations (Sum, Avg, etc.) | ❌ | ✅ |
|
|
54
|
+
| Row/column totals | ❌ | ✅ |
|
|
55
|
+
| No watermark | ❌ | ✅ |
|
|
56
|
+
|
|
57
|
+
## Props
|
|
58
|
+
|
|
59
|
+
| Prop | Type | Default | Description |
|
|
60
|
+
|------|------|---------|-------------|
|
|
61
|
+
| `data` | `Record<string, unknown>[]` | **required** | Array of data objects |
|
|
62
|
+
| `loading` | `boolean` | `false` | Show loading spinner |
|
|
63
|
+
| `fontSize` | `'xs' \| 'sm' \| 'base'` | `'xs'` | Font size preset |
|
|
64
|
+
| `showPivot` | `boolean` | `true` | Show pivot toggle (Pro) |
|
|
65
|
+
| `enableExport` | `boolean` | `true` | Show CSV export button |
|
|
66
|
+
| `enableSearch` | `boolean` | `true` | Show global search |
|
|
67
|
+
| `enablePagination` | `boolean` | `false` | Enable pagination |
|
|
68
|
+
| `pageSize` | `number` | `50` | Rows per page |
|
|
69
|
+
| `enableColumnResize` | `boolean` | `true` | Drag to resize columns |
|
|
70
|
+
| `enableClipboard` | `boolean` | `true` | Ctrl+C to copy cells |
|
|
71
|
+
| `theme` | `'light' \| 'dark' \| 'auto'` | `'light'` | Color theme |
|
|
72
|
+
|
|
73
|
+
## Events
|
|
74
|
+
|
|
75
|
+
| Event | Payload | Description |
|
|
76
|
+
|-------|---------|-------------|
|
|
77
|
+
| `@cell-click` | `{ row, col, value, rowData }` | Cell clicked |
|
|
78
|
+
| `@selection-change` | `{ cells, values }` | Selection changed |
|
|
79
|
+
| `@export` | `{ rowCount, filename }` | CSV exported |
|
|
80
|
+
| `@copy` | `{ text, cellCount }` | Cells copied |
|
|
81
|
+
|
|
82
|
+
## Documentation
|
|
83
|
+
|
|
84
|
+
See the [full documentation](https://github.com/Small-Web-Co/tinypivot) for complete API reference, styling, and Pro license activation.
|
|
85
|
+
|
|
86
|
+
## License
|
|
87
|
+
|
|
88
|
+
- **Free Tier**: MIT License for basic grid features
|
|
89
|
+
- **Pro Features**: Commercial license required
|
|
90
|
+
|
|
91
|
+
**[Purchase at tiny-pivot.com/#pricing](https://tiny-pivot.com/#pricing)**
|
|
92
|
+
|
|
93
|
+
---
|
|
94
|
+
|
|
95
|
+
Built with ❤️ by [Small Web, LLC](https://thesmallweb.co)
|
|
96
|
+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@smallwebco/tinypivot-vue",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.9",
|
|
4
4
|
"description": "TinyPivot Vue 3 - Excel-like data grid and pivot table components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/tinypivot-vue.umd.cjs",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
27
|
"@tanstack/vue-table": "^8.20.0",
|
|
28
|
-
"@smallwebco/tinypivot-core": "1.0.
|
|
28
|
+
"@smallwebco/tinypivot-core": "1.0.9"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@vitejs/plugin-vue": "^4.5.0",
|