trio-tanstack-table 1.0.1 → 1.0.2
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 +135 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
# trio-tanstack-table
|
|
2
|
+
|
|
3
|
+
A high-performance, feature-rich React data table component built on top of **@tanstack/react-table** (v8) and styled with **Ant Design (AntD)** tokens.
|
|
4
|
+
|
|
5
|
+
It provides powerful features out-of-the-box like virtualization, live URL synchronization, inline cell editing, server-side group summaries, and customizable view settings.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Features
|
|
10
|
+
|
|
11
|
+
* ⚡ **High Performance Virtualization**: Row virtualization via `@tanstack/react-virtual` lets you render tens of thousands of rows smoothly.
|
|
12
|
+
* 🔗 **Live URL State Sync**: Sync paging, sorting, filtering, and searches with the browser URL. [Read the URL Sync Guide](docs/url_sync.md).
|
|
13
|
+
* ✏️ **Inline Cell Editing**: Enable editing on any column with text fields, selectors, date pickers, and more. [Read the Editable Cells Guide](docs/editable_cells.md).
|
|
14
|
+
* 📊 **Grouping & Group Summaries**: Support collapsing group headers with accurate server-side sums. [Read the Grouping & Summaries Guide](docs/grouping_and_summaries.md).
|
|
15
|
+
* 🔄 **Flexible Pagination Modes**: Supports virtual scroll, cursor-based pagination, and traditional paging.
|
|
16
|
+
* 💾 **Saved Views**: Allow users to save their customized column orders, visibility settings, and filters.
|
|
17
|
+
* 📤 **Server-side Exports**: Built-in toolbar export button for generating CSV/Excel reports from the server.
|
|
18
|
+
* 📐 **Density Controls**: Toggles between Standard, Comfortable, and Compact layouts.
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## Installation
|
|
23
|
+
|
|
24
|
+
Install the package and its peer dependencies in your project:
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
pnpm add trio-tanstack-table
|
|
28
|
+
# or
|
|
29
|
+
npm install trio-tanstack-table
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Make sure you also have the following peer dependencies installed:
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
pnpm add react react-dom antd react-router-dom
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
---
|
|
39
|
+
|
|
40
|
+
## Quick Start
|
|
41
|
+
|
|
42
|
+
1. **Import the CSS styles** in your main entry file (e.g., `main.tsx` or `App.tsx`):
|
|
43
|
+
|
|
44
|
+
```typescript
|
|
45
|
+
import "trio-tanstack-table/dist/index.css";
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
2. **Add the Component** to your page:
|
|
49
|
+
|
|
50
|
+
```tsx
|
|
51
|
+
import React from "react";
|
|
52
|
+
import { NoobTanstackTable } from "trio-tanstack-table";
|
|
53
|
+
import { ColumnDef } from "@tanstack/react-table";
|
|
54
|
+
|
|
55
|
+
interface Transaction {
|
|
56
|
+
id: string;
|
|
57
|
+
amount: number;
|
|
58
|
+
status: string;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
const columns: ColumnDef<Transaction>[] = [
|
|
62
|
+
{
|
|
63
|
+
accessorKey: "id",
|
|
64
|
+
header: "Transaction ID",
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
accessorKey: "amount",
|
|
68
|
+
header: "Amount ($)",
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
accessorKey: "status",
|
|
72
|
+
header: "Status",
|
|
73
|
+
},
|
|
74
|
+
];
|
|
75
|
+
|
|
76
|
+
function MyTable() {
|
|
77
|
+
return (
|
|
78
|
+
<NoobTanstackTable
|
|
79
|
+
columns={columns}
|
|
80
|
+
request={async (params) => {
|
|
81
|
+
// Fetch data from your backend API
|
|
82
|
+
const response = await fetch(`/api/transactions?page=${params.page}`);
|
|
83
|
+
const result = await response.json();
|
|
84
|
+
return {
|
|
85
|
+
data: result.data,
|
|
86
|
+
total: result.total,
|
|
87
|
+
success: true,
|
|
88
|
+
};
|
|
89
|
+
}}
|
|
90
|
+
paginationType="pagination"
|
|
91
|
+
bordered
|
|
92
|
+
/>
|
|
93
|
+
);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
export default MyTable;
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
---
|
|
100
|
+
|
|
101
|
+
## Raising Issues
|
|
102
|
+
|
|
103
|
+
If you find a bug or have a feature request, please open an issue on our GitHub repository:
|
|
104
|
+
|
|
105
|
+
1. Go to the [Issues page](https://github.com/trieon-technosolutions/trio-tanstack-table/issues).
|
|
106
|
+
2. Check if a similar issue already exists.
|
|
107
|
+
3. If not, click **New Issue**.
|
|
108
|
+
4. Provide a clear description, steps to reproduce, and any error logs or screenshots.
|
|
109
|
+
|
|
110
|
+
---
|
|
111
|
+
|
|
112
|
+
## Contributing
|
|
113
|
+
|
|
114
|
+
We welcome contributions from the community! To contribute:
|
|
115
|
+
|
|
116
|
+
1. **Fork** the repository on GitHub.
|
|
117
|
+
2. **Clone** your fork locally:
|
|
118
|
+
```bash
|
|
119
|
+
git clone https://github.com/your-username/trio-tanstack-table.git
|
|
120
|
+
```
|
|
121
|
+
3. Create a **feature branch**:
|
|
122
|
+
```bash
|
|
123
|
+
git checkout -b feature/my-new-feature
|
|
124
|
+
```
|
|
125
|
+
4. Install dependencies:
|
|
126
|
+
```bash
|
|
127
|
+
pnpm install
|
|
128
|
+
```
|
|
129
|
+
5. Run the **typecheck** and **build** locally to verify your setup:
|
|
130
|
+
```bash
|
|
131
|
+
pnpm typecheck
|
|
132
|
+
pnpm build
|
|
133
|
+
```
|
|
134
|
+
6. Make your changes and commit them with descriptive commit messages.
|
|
135
|
+
7. Push your branch and open a **Pull Request** against the `main` branch.
|