@ackplus/react-tanstack-data-table 1.0.19-beta-0.6 → 1.0.19-beta-0.7
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/package.json +3 -11
- package/LICENSE +0 -21
- package/README.md +0 -599
- package/index.d.ts.map +0 -1
- package/index.js +0 -42
- package/lib/components/droupdown/menu-dropdown.d.ts.map +0 -1
- package/lib/components/droupdown/menu-dropdown.js +0 -47
- package/lib/components/export-progress-dialog.d.ts.map +0 -1
- package/lib/components/export-progress-dialog.js +0 -30
- package/lib/components/filters/filter-value-input.d.ts.map +0 -1
- package/lib/components/filters/filter-value-input.js +0 -64
- package/lib/components/filters/index.d.ts.map +0 -1
- package/lib/components/filters/index.js +0 -125
- package/lib/components/headers/draggable-header.d.ts.map +0 -1
- package/lib/components/headers/draggable-header.js +0 -226
- package/lib/components/headers/index.d.ts.map +0 -1
- package/lib/components/headers/index.js +0 -5
- package/lib/components/headers/table-header.d.ts.map +0 -1
- package/lib/components/headers/table-header.js +0 -59
- package/lib/components/index.d.ts.map +0 -1
- package/lib/components/index.js +0 -18
- package/lib/components/pagination/data-table-pagination.d.ts.map +0 -1
- package/lib/components/pagination/data-table-pagination.js +0 -24
- package/lib/components/pagination/index.d.ts.map +0 -1
- package/lib/components/pagination/index.js +0 -4
- package/lib/components/rows/data-table-row.d.ts.map +0 -1
- package/lib/components/rows/data-table-row.js +0 -42
- package/lib/components/rows/empty-data-row.d.ts.map +0 -1
- package/lib/components/rows/empty-data-row.js +0 -8
- package/lib/components/rows/index.d.ts.map +0 -1
- package/lib/components/rows/index.js +0 -6
- package/lib/components/rows/loading-rows.d.ts.map +0 -1
- package/lib/components/rows/loading-rows.js +0 -46
- package/lib/components/table/data-table.d.ts.map +0 -1
- package/lib/components/table/data-table.js +0 -663
- package/lib/components/table/data-table.types.d.ts.map +0 -1
- package/lib/components/table/data-table.types.js +0 -6
- package/lib/components/table/index.d.ts.map +0 -1
- package/lib/components/table/index.js +0 -5
- package/lib/components/toolbar/bulk-actions-toolbar.d.ts.map +0 -1
- package/lib/components/toolbar/bulk-actions-toolbar.js +0 -31
- package/lib/components/toolbar/column-custom-filter-control.d.ts.map +0 -1
- package/lib/components/toolbar/column-custom-filter-control.js +0 -149
- package/lib/components/toolbar/column-custum-filter-control.d.ts.map +0 -1
- package/lib/components/toolbar/column-custum-filter-control.js +0 -150
- package/lib/components/toolbar/column-pinning-control.d.ts.map +0 -1
- package/lib/components/toolbar/column-pinning-control.js +0 -103
- package/lib/components/toolbar/column-reset-control.d.ts.map +0 -1
- package/lib/components/toolbar/column-reset-control.js +0 -13
- package/lib/components/toolbar/column-visibility-control.d.ts.map +0 -1
- package/lib/components/toolbar/column-visibility-control.js +0 -27
- package/lib/components/toolbar/data-table-toolbar.d.ts.map +0 -1
- package/lib/components/toolbar/data-table-toolbar.js +0 -23
- package/lib/components/toolbar/index.d.ts.map +0 -1
- package/lib/components/toolbar/index.js +0 -13
- package/lib/components/toolbar/table-export-control.d.ts.map +0 -1
- package/lib/components/toolbar/table-export-control.js +0 -94
- package/lib/components/toolbar/table-search-control.d.ts.map +0 -1
- package/lib/components/toolbar/table-search-control.js +0 -61
- package/lib/components/toolbar/table-size-control.d.ts.map +0 -1
- package/lib/components/toolbar/table-size-control.js +0 -33
- package/lib/contexts/data-table-context.d.ts.map +0 -1
- package/lib/contexts/data-table-context.js +0 -50
- package/lib/examples/advanced-features-example.d.ts.map +0 -1
- package/lib/examples/advanced-features-example.js +0 -282
- package/lib/examples/basic-example.d.ts.map +0 -1
- package/lib/examples/basic-example.js +0 -323
- package/lib/examples/bulk-actions-test.d.ts.map +0 -1
- package/lib/examples/bulk-actions-test.js +0 -47
- package/lib/examples/crud-api-example.d.ts.map +0 -1
- package/lib/examples/crud-api-example.js +0 -321
- package/lib/examples/custom-column-filter-example.d.ts.map +0 -1
- package/lib/examples/custom-column-filter-example.js +0 -60
- package/lib/examples/custom-selection-example.d.ts.map +0 -1
- package/lib/examples/custom-selection-example.js +0 -184
- package/lib/examples/export-callbacks-example.d.ts.map +0 -1
- package/lib/examples/export-callbacks-example.js +0 -155
- package/lib/examples/improved-export-example.d.ts.map +0 -1
- package/lib/examples/improved-export-example.js +0 -153
- package/lib/examples/improved-server-selection-example.d.ts.map +0 -1
- package/lib/examples/improved-server-selection-example.js +0 -118
- package/lib/examples/index.d.ts.map +0 -1
- package/lib/examples/index.js +0 -5
- package/lib/examples/selection-test-example.d.ts.map +0 -1
- package/lib/examples/selection-test-example.js +0 -111
- package/lib/examples/simple-local-example.d.ts.map +0 -1
- package/lib/examples/simple-local-example.js +0 -101
- package/lib/examples/simple-server-selection-example.d.ts.map +0 -1
- package/lib/examples/simple-server-selection-example.js +0 -178
- package/lib/examples/virtualized-example.d.ts.map +0 -1
- package/lib/examples/virtualized-example.js +0 -119
- package/lib/features/custom-column-filter.feature.d.ts.map +0 -1
- package/lib/features/custom-column-filter.feature.js +0 -306
- package/lib/features/custom-selection.feature.d.ts.map +0 -1
- package/lib/features/custom-selection.feature.js +0 -224
- package/lib/features/index.d.ts.map +0 -1
- package/lib/features/index.js +0 -9
- package/lib/hooks/index.d.ts.map +0 -1
- package/lib/hooks/index.js +0 -6
- package/lib/hooks/use-data-table-api.d.ts.map +0 -1
- package/lib/hooks/use-data-table-api.js +0 -673
- package/lib/hooks/use-table-state.d.ts.map +0 -1
- package/lib/hooks/use-table-state.js +0 -74
- package/lib/icons/add-icon.d.ts.map +0 -1
- package/lib/icons/add-icon.js +0 -5
- package/lib/icons/csv-icon.d.ts.map +0 -1
- package/lib/icons/csv-icon.js +0 -5
- package/lib/icons/delete-icon.d.ts.map +0 -1
- package/lib/icons/delete-icon.js +0 -5
- package/lib/icons/excel-icon.d.ts.map +0 -1
- package/lib/icons/excel-icon.js +0 -5
- package/lib/icons/index.d.ts.map +0 -1
- package/lib/icons/index.js +0 -7
- package/lib/icons/unpin-icon.d.ts.map +0 -1
- package/lib/icons/unpin-icon.js +0 -5
- package/lib/icons/view-comfortable-icon.d.ts.map +0 -1
- package/lib/icons/view-comfortable-icon.js +0 -5
- package/lib/icons/view-compact-icon.d.ts.map +0 -1
- package/lib/icons/view-compact-icon.js +0 -5
- package/lib/types/column.types.d.ts.map +0 -1
- package/lib/types/column.types.js +0 -2
- package/lib/types/data-table-api.d.ts.map +0 -1
- package/lib/types/data-table-api.js +0 -1
- package/lib/types/export.types.d.ts.map +0 -1
- package/lib/types/export.types.js +0 -5
- package/lib/types/hooks.types.d.ts.map +0 -1
- package/lib/types/hooks.types.js +0 -1
- package/lib/types/index.d.ts.map +0 -1
- package/lib/types/index.js +0 -14
- package/lib/types/slots.types.d.ts.map +0 -1
- package/lib/types/slots.types.js +0 -1
- package/lib/types/table.types.d.ts.map +0 -1
- package/lib/types/table.types.js +0 -1
- package/lib/utils/column-helpers.d.ts.map +0 -1
- package/lib/utils/column-helpers.js +0 -46
- package/lib/utils/debounced-fetch.utils.d.ts.map +0 -1
- package/lib/utils/debounced-fetch.utils.js +0 -51
- package/lib/utils/export-utils.d.ts.map +0 -1
- package/lib/utils/export-utils.js +0 -181
- package/lib/utils/index.d.ts.map +0 -1
- package/lib/utils/index.js +0 -17
- package/lib/utils/selection-helpers.d.ts.map +0 -1
- package/lib/utils/selection-helpers.js +0 -162
- package/lib/utils/slot-helpers.d.ts.map +0 -1
- package/lib/utils/slot-helpers.js +0 -27
- package/lib/utils/special-columns.utils.d.ts.map +0 -1
- package/lib/utils/special-columns.utils.js +0 -77
- package/lib/utils/styling-helpers.d.ts.map +0 -1
- package/lib/utils/styling-helpers.js +0 -97
- package/lib/utils/table-helpers.d.ts.map +0 -1
- package/lib/utils/table-helpers.js +0 -72
- package/lib/utils/value-helpers.d.ts.map +0 -1
- package/lib/utils/value-helpers.js +0 -48
- package/tsconfig.lib.tsbuildinfo +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ackplus/react-tanstack-data-table",
|
|
3
|
-
"
|
|
3
|
+
"type": "commonjs",
|
|
4
|
+
"version": "1.0.19-beta-0.7",
|
|
4
5
|
"description": "A powerful React data table component built with MUI and TanStack Table",
|
|
5
6
|
"keywords": [
|
|
6
7
|
"react",
|
|
@@ -44,14 +45,5 @@
|
|
|
44
45
|
"@types/react": "^19.0.0",
|
|
45
46
|
"@types/react-dom": "^19.0.0",
|
|
46
47
|
"typescript": "^5.8.2"
|
|
47
|
-
},
|
|
48
|
-
"exports": {
|
|
49
|
-
"./package.json": "./package.json",
|
|
50
|
-
".": {
|
|
51
|
-
"development": "./src/index.ts",
|
|
52
|
-
"types": "./dist/index.d.ts",
|
|
53
|
-
"import": "./dist/index.js",
|
|
54
|
-
"default": "./dist/index.js"
|
|
55
|
-
}
|
|
56
48
|
}
|
|
57
|
-
}
|
|
49
|
+
}
|
package/LICENSE
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2024 ACK Plus
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
package/README.md
DELETED
|
@@ -1,599 +0,0 @@
|
|
|
1
|
-
# @ackplus/react-tanstack-data-table
|
|
2
|
-
|
|
3
|
-
A powerful, feature-rich, and highly customizable React data table component built with Material-UI (MUI) and TanStack Table. Perfect for building modern data-intensive applications with advanced table functionality.
|
|
4
|
-
|
|
5
|
-
## ✨ Features
|
|
6
|
-
|
|
7
|
-
- 🚀 **High Performance**: Built on TanStack Table for excellent performance with large datasets
|
|
8
|
-
- 🎨 **Material Design**: Beautiful UI components using MUI with consistent design system
|
|
9
|
-
- 📱 **Responsive**: Mobile-friendly responsive design with adaptive layouts
|
|
10
|
-
- 🔍 **Advanced Filtering**: Global search, column filters, and custom filter components
|
|
11
|
-
- 📊 **Multi-Column Sorting**: Powerful sorting with multiple columns support
|
|
12
|
-
- 📄 **Flexible Pagination**: Client-side and server-side pagination options
|
|
13
|
-
- 🎯 **Column Management**: Show/hide, resize, reorder, and pin columns
|
|
14
|
-
- 📤 **Data Export**: Export to CSV/Excel with progress tracking and customization
|
|
15
|
-
- 🖱️ **Row Selection**: Single and multi-row selection with bulk actions
|
|
16
|
-
- ⚡ **Virtualization**: Handle large datasets efficiently with row virtualization
|
|
17
|
-
- 🔄 **Server Integration**: Built-in support for server-side operations
|
|
18
|
-
- 🎛️ **Highly Customizable**: Extensive customization through slots and props
|
|
19
|
-
- 📝 **TypeScript**: Full TypeScript support with comprehensive type definitions
|
|
20
|
-
- 🔌 **Extensible**: Plugin architecture with custom components and hooks
|
|
21
|
-
|
|
22
|
-
## 📦 Installation
|
|
23
|
-
|
|
24
|
-
```bash
|
|
25
|
-
npm install @ackplus/react-tanstack-data-table
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
```bash
|
|
29
|
-
yarn add @ackplus/react-tanstack-data-table
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
```bash
|
|
33
|
-
pnpm add @ackplus/react-tanstack-data-table
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
## 🔧 Peer Dependencies
|
|
37
|
-
|
|
38
|
-
Make sure you have the following peer dependencies installed:
|
|
39
|
-
|
|
40
|
-
```bash
|
|
41
|
-
npm install @emotion/react @emotion/styled @mui/icons-material @mui/material @tanstack/react-table @tanstack/react-virtual react react-dom
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
## 🚀 Quick Start
|
|
45
|
-
|
|
46
|
-
```tsx
|
|
47
|
-
import React from 'react';
|
|
48
|
-
import { DataTable } from '@ackplus/react-tanstack-data-table';
|
|
49
|
-
import { createColumnHelper } from '@tanstack/react-table';
|
|
50
|
-
|
|
51
|
-
interface User {
|
|
52
|
-
id: number;
|
|
53
|
-
name: string;
|
|
54
|
-
email: string;
|
|
55
|
-
status: 'active' | 'inactive';
|
|
56
|
-
role: string;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
const columnHelper = createColumnHelper<User>();
|
|
60
|
-
|
|
61
|
-
const columns = [
|
|
62
|
-
columnHelper.accessor('name', {
|
|
63
|
-
header: 'Name',
|
|
64
|
-
size: 150,
|
|
65
|
-
}),
|
|
66
|
-
columnHelper.accessor('email', {
|
|
67
|
-
header: 'Email',
|
|
68
|
-
size: 200,
|
|
69
|
-
}),
|
|
70
|
-
columnHelper.accessor('status', {
|
|
71
|
-
header: 'Status',
|
|
72
|
-
cell: ({ getValue }) => (
|
|
73
|
-
<Chip
|
|
74
|
-
label={getValue()}
|
|
75
|
-
color={getValue() === 'active' ? 'success' : 'default'}
|
|
76
|
-
/>
|
|
77
|
-
),
|
|
78
|
-
}),
|
|
79
|
-
columnHelper.accessor('role', {
|
|
80
|
-
header: 'Role',
|
|
81
|
-
size: 120,
|
|
82
|
-
}),
|
|
83
|
-
];
|
|
84
|
-
|
|
85
|
-
const data: User[] = [
|
|
86
|
-
{ id: 1, name: 'John Doe', email: 'john@example.com', status: 'active', role: 'Admin' },
|
|
87
|
-
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'inactive', role: 'User' },
|
|
88
|
-
// ... more data
|
|
89
|
-
];
|
|
90
|
-
|
|
91
|
-
function MyDataTable() {
|
|
92
|
-
return (
|
|
93
|
-
<DataTable
|
|
94
|
-
columns={columns}
|
|
95
|
-
data={data}
|
|
96
|
-
enableSorting
|
|
97
|
-
enableGlobalFilter
|
|
98
|
-
enablePagination
|
|
99
|
-
enableRowSelection
|
|
100
|
-
enableColumnVisibility
|
|
101
|
-
enableExport
|
|
102
|
-
/>
|
|
103
|
-
);
|
|
104
|
-
}
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
## 📋 Core Props
|
|
108
|
-
|
|
109
|
-
### Basic Props
|
|
110
|
-
|
|
111
|
-
| Prop | Type | Default | Description |
|
|
112
|
-
|------|------|---------|-------------|
|
|
113
|
-
| `columns` | `DataTableColumn<T>[]` | **Required** | Column definitions array |
|
|
114
|
-
| `data` | `T[]` | `[]` | Array of data objects |
|
|
115
|
-
| `idKey` | `keyof T` | `'id'` | Unique identifier key for rows |
|
|
116
|
-
| `loading` | `boolean` | `false` | Loading state indicator |
|
|
117
|
-
| `emptyMessage` | `string` | `'No data available'` | Message when no data |
|
|
118
|
-
|
|
119
|
-
### Data Management
|
|
120
|
-
|
|
121
|
-
| Prop | Type | Default | Description |
|
|
122
|
-
|------|------|---------|-------------|
|
|
123
|
-
| `dataMode` | `'client' \| 'server'` | `'client'` | Data management mode |
|
|
124
|
-
| `initialLoadData` | `boolean` | `true` | Load data on component mount |
|
|
125
|
-
| `onFetchData` | `(filters) => Promise<{data, total}>` | - | Server-side data fetching |
|
|
126
|
-
| `onDataStateChange` | `(state) => void` | - | Called when table state changes |
|
|
127
|
-
| `totalRow` | `number` | `0` | Total rows for server-side pagination |
|
|
128
|
-
|
|
129
|
-
### Selection & Interaction
|
|
130
|
-
|
|
131
|
-
| Prop | Type | Default | Description |
|
|
132
|
-
|------|------|---------|-------------|
|
|
133
|
-
| `enableRowSelection` | `boolean \| ((row) => boolean)` | `false` | Enable row selection |
|
|
134
|
-
| `enableMultiRowSelection` | `boolean` | `true` | Allow multiple row selection |
|
|
135
|
-
| `onRowSelectionChange` | `(selectedRows: T[]) => void` | - | Selection change callback |
|
|
136
|
-
| `enableBulkActions` | `boolean` | `false` | Enable bulk actions toolbar |
|
|
137
|
-
| `bulkActions` | `(selectionState: SelectionState) => ReactNode` | - | Custom bulk actions component |
|
|
138
|
-
|
|
139
|
-
### Selection State
|
|
140
|
-
|
|
141
|
-
The `SelectionState` interface provides detailed information about the current selection:
|
|
142
|
-
|
|
143
|
-
```typescript
|
|
144
|
-
interface SelectionState {
|
|
145
|
-
ids: string[]; // Array of selected/excluded row IDs
|
|
146
|
-
type: 'include' | 'exclude'; // Selection mode
|
|
147
|
-
}
|
|
148
|
-
```
|
|
149
|
-
|
|
150
|
-
- **Include mode**: `ids` contains the selected row IDs
|
|
151
|
-
- **Exclude mode**: `ids` contains the excluded row IDs (all others are selected)
|
|
152
|
-
|
|
153
|
-
This allows for efficient handling of large datasets where you might select "all except these few".
|
|
154
|
-
|
|
155
|
-
### Pagination
|
|
156
|
-
|
|
157
|
-
| Prop | Type | Default | Description |
|
|
158
|
-
|------|------|---------|-------------|
|
|
159
|
-
| `enablePagination` | `boolean` | `true` | Enable pagination |
|
|
160
|
-
| `paginationMode` | `'client' \| 'server'` | `'client'` | Pagination mode |
|
|
161
|
-
| `initialState.pagination` | `{pageIndex: number, pageSize: number}` | `{pageIndex: 0, pageSize: 50}` | Initial pagination state |
|
|
162
|
-
|
|
163
|
-
### Filtering & Search
|
|
164
|
-
|
|
165
|
-
| Prop | Type | Default | Description |
|
|
166
|
-
|------|------|---------|-------------|
|
|
167
|
-
| `enableGlobalFilter` | `boolean` | `true` | Enable global search |
|
|
168
|
-
| `enableColumnFilter` | `boolean` | `false` | Enable individual column filters |
|
|
169
|
-
| `filterMode` | `'client' \| 'server'` | `'client'` | Filtering mode |
|
|
170
|
-
| `onColumnFiltersChange` | `(filters) => void` | - | Column filters change callback |
|
|
171
|
-
| `extraFilter` | `ReactNode` | - | Additional filter components |
|
|
172
|
-
|
|
173
|
-
### Sorting
|
|
174
|
-
|
|
175
|
-
| Prop | Type | Default | Description |
|
|
176
|
-
|------|------|---------|-------------|
|
|
177
|
-
| `enableSorting` | `boolean` | `true` | Enable column sorting |
|
|
178
|
-
| `sortingMode` | `'client' \| 'server'` | `'client'` | Sorting mode |
|
|
179
|
-
| `onSortingChange` | `(sorting) => void` | - | Sorting change callback |
|
|
180
|
-
|
|
181
|
-
### Column Management
|
|
182
|
-
|
|
183
|
-
| Prop | Type | Default | Description |
|
|
184
|
-
|------|------|---------|-------------|
|
|
185
|
-
| `enableColumnVisibility` | `boolean` | `true` | Show/hide columns control |
|
|
186
|
-
| `enableColumnResizing` | `boolean` | `false` | Allow column resizing |
|
|
187
|
-
| `enableColumnPinning` | `boolean` | `false` | Allow column pinning |
|
|
188
|
-
| `draggable` | `boolean` | `false` | Enable column reordering |
|
|
189
|
-
| `onColumnDragEnd` | `(order: string[]) => void` | - | Column reorder callback |
|
|
190
|
-
| `onColumnPinningChange` | `(pinning) => void` | - | Column pinning callback |
|
|
191
|
-
|
|
192
|
-
### Export Features
|
|
193
|
-
|
|
194
|
-
| Prop | Type | Default | Description |
|
|
195
|
-
|------|------|---------|-------------|
|
|
196
|
-
| `enableExport` | `boolean` | `true` | Enable data export |
|
|
197
|
-
| `exportFilename` | `string` | `'export'` | Default export filename |
|
|
198
|
-
| `onExportProgress` | `(progress) => void` | - | Export progress callback |
|
|
199
|
-
| `onExportComplete` | `(result) => void` | - | Export completion callback |
|
|
200
|
-
| `onExportError` | `(error) => void` | - | Export error callback |
|
|
201
|
-
| `onServerExport` | `(filters) => Promise<{data, total}>` | - | Server-side export handler |
|
|
202
|
-
|
|
203
|
-
### Expandable Rows
|
|
204
|
-
|
|
205
|
-
| Prop | Type | Default | Description |
|
|
206
|
-
|------|------|---------|-------------|
|
|
207
|
-
| `enableExpanding` | `boolean` | `false` | Enable row expansion |
|
|
208
|
-
| `getRowCanExpand` | `(row) => boolean` | - | Determine if row can expand |
|
|
209
|
-
| `renderSubComponent` | `(row) => ReactNode` | - | Render expanded row content |
|
|
210
|
-
|
|
211
|
-
### Styling & Layout
|
|
212
|
-
|
|
213
|
-
| Prop | Type | Default | Description |
|
|
214
|
-
|------|------|---------|-------------|
|
|
215
|
-
| `tableSize` | `'small' \| 'medium'` | `'medium'` | Table size/density |
|
|
216
|
-
| `enableHover` | `boolean` | `true` | Row hover effects |
|
|
217
|
-
| `enableStripes` | `boolean` | `false` | Alternating row colors |
|
|
218
|
-
| `fitToScreen` | `boolean` | `true` | Fit table to container width |
|
|
219
|
-
| `enableStickyHeaderOrFooter` | `boolean` | `false` | Sticky header/footer |
|
|
220
|
-
| `maxHeight` | `string \| number` | `'400px'` | Max table height |
|
|
221
|
-
|
|
222
|
-
### Virtualization
|
|
223
|
-
|
|
224
|
-
| Prop | Type | Default | Description |
|
|
225
|
-
|------|------|---------|-------------|
|
|
226
|
-
| `enableVirtualization` | `boolean` | `false` | Enable row virtualization |
|
|
227
|
-
| `estimateRowHeight` | `number` | `52` | Estimated row height for virtualization |
|
|
228
|
-
|
|
229
|
-
### Advanced Customization
|
|
230
|
-
|
|
231
|
-
| Prop | Type | Default | Description |
|
|
232
|
-
|------|------|---------|-------------|
|
|
233
|
-
| `slots` | `Partial<DataTableSlots<T>>` | `{}` | Custom component slots |
|
|
234
|
-
| `slotProps` | `PartialSlotProps<T>` | `{}` | Props for slot components |
|
|
235
|
-
| `tableContainerProps` | `object` | `{}` | Props for table container |
|
|
236
|
-
| `tableProps` | `object` | `{}` | Props for table element |
|
|
237
|
-
|
|
238
|
-
## 🔥 Advanced Examples
|
|
239
|
-
|
|
240
|
-
### Server-Side Data Management
|
|
241
|
-
|
|
242
|
-
```tsx
|
|
243
|
-
import { DataTable } from '@ackplus/react-tanstack-data-table';
|
|
244
|
-
import { useState, useCallback } from 'react';
|
|
245
|
-
|
|
246
|
-
function ServerSideTable() {
|
|
247
|
-
const [loading, setLoading] = useState(false);
|
|
248
|
-
|
|
249
|
-
const fetchData = useCallback(async (filters) => {
|
|
250
|
-
setLoading(true);
|
|
251
|
-
try {
|
|
252
|
-
const response = await fetch('/api/users', {
|
|
253
|
-
method: 'POST',
|
|
254
|
-
headers: { 'Content-Type': 'application/json' },
|
|
255
|
-
body: JSON.stringify(filters),
|
|
256
|
-
});
|
|
257
|
-
const result = await response.json();
|
|
258
|
-
return { data: result.users, total: result.total };
|
|
259
|
-
} finally {
|
|
260
|
-
setLoading(false);
|
|
261
|
-
}
|
|
262
|
-
}, []);
|
|
263
|
-
|
|
264
|
-
return (
|
|
265
|
-
<DataTable
|
|
266
|
-
columns={columns}
|
|
267
|
-
dataMode="server"
|
|
268
|
-
loading={loading}
|
|
269
|
-
onFetchData={fetchData}
|
|
270
|
-
enablePagination
|
|
271
|
-
enableSorting
|
|
272
|
-
enableGlobalFilter
|
|
273
|
-
paginationMode="server"
|
|
274
|
-
sortingMode="server"
|
|
275
|
-
filterMode="server"
|
|
276
|
-
/>
|
|
277
|
-
);
|
|
278
|
-
}
|
|
279
|
-
```
|
|
280
|
-
|
|
281
|
-
### Row Selection with Bulk Actions
|
|
282
|
-
|
|
283
|
-
```tsx
|
|
284
|
-
function SelectableTable() {
|
|
285
|
-
const [selectedUsers, setSelectedUsers] = useState([]);
|
|
286
|
-
|
|
287
|
-
const bulkActions = (selectionState) => {
|
|
288
|
-
// Calculate selected count based on selection type
|
|
289
|
-
const selectedCount = selectionState.type === 'include'
|
|
290
|
-
? selectionState.ids.length
|
|
291
|
-
: data.length - selectionState.ids.length;
|
|
292
|
-
|
|
293
|
-
// Get actual selected data
|
|
294
|
-
const selectedRows = selectionState.type === 'include'
|
|
295
|
-
? data.filter(item => selectionState.ids.includes(item.id.toString()))
|
|
296
|
-
: data.filter(item => !selectionState.ids.includes(item.id.toString()));
|
|
297
|
-
|
|
298
|
-
return (
|
|
299
|
-
<Stack direction="row" spacing={1}>
|
|
300
|
-
<Button
|
|
301
|
-
variant="contained"
|
|
302
|
-
color="error"
|
|
303
|
-
onClick={() => deleteUsers(selectedRows)}
|
|
304
|
-
>
|
|
305
|
-
Delete ({selectedCount})
|
|
306
|
-
</Button>
|
|
307
|
-
<Button
|
|
308
|
-
variant="outlined"
|
|
309
|
-
onClick={() => exportUsers(selectedRows)}
|
|
310
|
-
>
|
|
311
|
-
Export Selected
|
|
312
|
-
</Button>
|
|
313
|
-
</Stack>
|
|
314
|
-
);
|
|
315
|
-
};
|
|
316
|
-
|
|
317
|
-
return (
|
|
318
|
-
<DataTable
|
|
319
|
-
columns={columns}
|
|
320
|
-
data={data}
|
|
321
|
-
enableRowSelection
|
|
322
|
-
enableMultiRowSelection
|
|
323
|
-
enableBulkActions
|
|
324
|
-
bulkActions={bulkActions}
|
|
325
|
-
onRowSelectionChange={setSelectedUsers}
|
|
326
|
-
/>
|
|
327
|
-
);
|
|
328
|
-
}
|
|
329
|
-
```
|
|
330
|
-
|
|
331
|
-
### Custom Column Filters
|
|
332
|
-
|
|
333
|
-
```tsx
|
|
334
|
-
const columns = [
|
|
335
|
-
{
|
|
336
|
-
accessorKey: 'status',
|
|
337
|
-
header: 'Status',
|
|
338
|
-
filterable: true,
|
|
339
|
-
type: 'select',
|
|
340
|
-
options: [
|
|
341
|
-
{ value: 'active', label: 'Active' },
|
|
342
|
-
{ value: 'inactive', label: 'Inactive' },
|
|
343
|
-
{ value: 'pending', label: 'Pending' },
|
|
344
|
-
],
|
|
345
|
-
},
|
|
346
|
-
{
|
|
347
|
-
accessorKey: 'priority',
|
|
348
|
-
header: 'Priority',
|
|
349
|
-
filterable: true,
|
|
350
|
-
type: 'number',
|
|
351
|
-
},
|
|
352
|
-
{
|
|
353
|
-
accessorKey: 'created',
|
|
354
|
-
header: 'Created Date',
|
|
355
|
-
filterable: true,
|
|
356
|
-
type: 'date',
|
|
357
|
-
},
|
|
358
|
-
];
|
|
359
|
-
|
|
360
|
-
function FilterableTable() {
|
|
361
|
-
return (
|
|
362
|
-
<DataTable
|
|
363
|
-
columns={columns}
|
|
364
|
-
data={data}
|
|
365
|
-
enableColumnFilter
|
|
366
|
-
enableGlobalFilter
|
|
367
|
-
/>
|
|
368
|
-
);
|
|
369
|
-
}
|
|
370
|
-
```
|
|
371
|
-
|
|
372
|
-
### Expandable Rows
|
|
373
|
-
|
|
374
|
-
```tsx
|
|
375
|
-
function ExpandableTable() {
|
|
376
|
-
const renderSubComponent = (row) => (
|
|
377
|
-
<Box p={2}>
|
|
378
|
-
<Typography variant="h6">User Details</Typography>
|
|
379
|
-
<Grid container spacing={2}>
|
|
380
|
-
<Grid item xs={6}>
|
|
381
|
-
<Typography><strong>ID:</strong> {row.original.id}</Typography>
|
|
382
|
-
<Typography><strong>Email:</strong> {row.original.email}</Typography>
|
|
383
|
-
</Grid>
|
|
384
|
-
<Grid item xs={6}>
|
|
385
|
-
<Typography><strong>Role:</strong> {row.original.role}</Typography>
|
|
386
|
-
<Typography><strong>Status:</strong> {row.original.status}</Typography>
|
|
387
|
-
</Grid>
|
|
388
|
-
</Grid>
|
|
389
|
-
</Box>
|
|
390
|
-
);
|
|
391
|
-
|
|
392
|
-
return (
|
|
393
|
-
<DataTable
|
|
394
|
-
columns={columns}
|
|
395
|
-
data={data}
|
|
396
|
-
enableExpanding
|
|
397
|
-
getRowCanExpand={(row) => row.original.details != null}
|
|
398
|
-
renderSubComponent={renderSubComponent}
|
|
399
|
-
/>
|
|
400
|
-
);
|
|
401
|
-
}
|
|
402
|
-
```
|
|
403
|
-
|
|
404
|
-
### Column Management
|
|
405
|
-
|
|
406
|
-
```tsx
|
|
407
|
-
function ManageableColumnsTable() {
|
|
408
|
-
const [columnOrder, setColumnOrder] = useState([]);
|
|
409
|
-
const [columnPinning, setColumnPinning] = useState({ left: [], right: [] });
|
|
410
|
-
|
|
411
|
-
return (
|
|
412
|
-
<DataTable
|
|
413
|
-
columns={columns}
|
|
414
|
-
data={data}
|
|
415
|
-
enableColumnVisibility
|
|
416
|
-
enableColumnResizing
|
|
417
|
-
enableColumnPinning
|
|
418
|
-
draggable
|
|
419
|
-
onColumnDragEnd={setColumnOrder}
|
|
420
|
-
onColumnPinningChange={setColumnPinning}
|
|
421
|
-
initialState={{
|
|
422
|
-
columnOrder,
|
|
423
|
-
columnPinning,
|
|
424
|
-
}}
|
|
425
|
-
/>
|
|
426
|
-
);
|
|
427
|
-
}
|
|
428
|
-
```
|
|
429
|
-
|
|
430
|
-
### Export with Progress Tracking
|
|
431
|
-
|
|
432
|
-
```tsx
|
|
433
|
-
function ExportableTable() {
|
|
434
|
-
const [exportProgress, setExportProgress] = useState(null);
|
|
435
|
-
|
|
436
|
-
const handleExportProgress = (progress) => {
|
|
437
|
-
setExportProgress(progress);
|
|
438
|
-
};
|
|
439
|
-
|
|
440
|
-
const handleExportComplete = (result) => {
|
|
441
|
-
setExportProgress(null);
|
|
442
|
-
};
|
|
443
|
-
|
|
444
|
-
return (
|
|
445
|
-
<DataTable
|
|
446
|
-
columns={columns}
|
|
447
|
-
data={data}
|
|
448
|
-
enableExport
|
|
449
|
-
exportFilename="users-export"
|
|
450
|
-
onExportProgress={handleExportProgress}
|
|
451
|
-
onExportComplete={handleExportComplete}
|
|
452
|
-
onExportError={(error) => console.error('Export failed:', error)}
|
|
453
|
-
/>
|
|
454
|
-
);
|
|
455
|
-
}
|
|
456
|
-
```
|
|
457
|
-
|
|
458
|
-
## 🎛️ API Reference
|
|
459
|
-
|
|
460
|
-
### DataTable Component
|
|
461
|
-
|
|
462
|
-
The main component that renders the data table with all features.
|
|
463
|
-
|
|
464
|
-
```tsx
|
|
465
|
-
<DataTable<T>
|
|
466
|
-
columns={DataTableColumn<T>[]}
|
|
467
|
-
data={T[]}
|
|
468
|
-
// ... other props
|
|
469
|
-
/>
|
|
470
|
-
```
|
|
471
|
-
|
|
472
|
-
### Column Definition
|
|
473
|
-
|
|
474
|
-
Columns are defined using TanStack Table's column definition format with additional properties:
|
|
475
|
-
|
|
476
|
-
```tsx
|
|
477
|
-
interface DataTableColumn<T> extends ColumnDef<T> {
|
|
478
|
-
// Display properties
|
|
479
|
-
align?: 'left' | 'center' | 'right';
|
|
480
|
-
// Filtering
|
|
481
|
-
filterable?: boolean;
|
|
482
|
-
type?: 'boolean' | 'number' | 'date' | 'select' | 'text';
|
|
483
|
-
options?: { label: string; value: string }[];
|
|
484
|
-
|
|
485
|
-
// Export
|
|
486
|
-
hideInExport?: boolean;
|
|
487
|
-
}
|
|
488
|
-
```
|
|
489
|
-
|
|
490
|
-
### useDataTableApi Hook
|
|
491
|
-
|
|
492
|
-
Access the table's imperative API:
|
|
493
|
-
|
|
494
|
-
```tsx
|
|
495
|
-
import { useRef } from 'react';
|
|
496
|
-
import { DataTable, DataTableApi } from '@ackplus/react-tanstack-data-table';
|
|
497
|
-
|
|
498
|
-
function MyComponent() {
|
|
499
|
-
const tableRef = useRef<DataTableApi<User>>(null);
|
|
500
|
-
|
|
501
|
-
const handleGetData = () => {
|
|
502
|
-
const allData = tableRef.current?.data.getAllData();
|
|
503
|
-
};
|
|
504
|
-
|
|
505
|
-
return (
|
|
506
|
-
<DataTable
|
|
507
|
-
ref={tableRef}
|
|
508
|
-
columns={columns}
|
|
509
|
-
data={data}
|
|
510
|
-
/>
|
|
511
|
-
);
|
|
512
|
-
}
|
|
513
|
-
```
|
|
514
|
-
|
|
515
|
-
## 🎨 Customization
|
|
516
|
-
|
|
517
|
-
### Slots System
|
|
518
|
-
|
|
519
|
-
Customize any part of the table using the slots system:
|
|
520
|
-
|
|
521
|
-
```tsx
|
|
522
|
-
const customSlots = {
|
|
523
|
-
toolbar: MyCustomToolbar,
|
|
524
|
-
pagination: MyCustomPagination,
|
|
525
|
-
loadingRow: MyCustomLoadingRow,
|
|
526
|
-
emptyRow: MyCustomEmptyRow,
|
|
527
|
-
};
|
|
528
|
-
|
|
529
|
-
<DataTable
|
|
530
|
-
columns={columns}
|
|
531
|
-
data={data}
|
|
532
|
-
slots={customSlots}
|
|
533
|
-
slotProps={{
|
|
534
|
-
toolbar: { customProp: 'value' },
|
|
535
|
-
pagination: { showFirstLastButtons: true },
|
|
536
|
-
}}
|
|
537
|
-
/>
|
|
538
|
-
```
|
|
539
|
-
|
|
540
|
-
### Available Slots
|
|
541
|
-
|
|
542
|
-
- `root` - Root container
|
|
543
|
-
- `toolbar` - Main toolbar
|
|
544
|
-
- `bulkActionsToolbar` - Bulk actions toolbar
|
|
545
|
-
- `tableContainer` - Table container
|
|
546
|
-
- `table` - Table element
|
|
547
|
-
- `header` - Table header
|
|
548
|
-
- `body` - Table body
|
|
549
|
-
- `row` - Table row
|
|
550
|
-
- `cell` - Table cell
|
|
551
|
-
- `footer` - Table footer
|
|
552
|
-
- `pagination` - Pagination component
|
|
553
|
-
- `loadingRow` - Loading state row
|
|
554
|
-
- `emptyRow` - Empty state row
|
|
555
|
-
|
|
556
|
-
## 🔧 Migration Guide
|
|
557
|
-
|
|
558
|
-
### From v0.x to v1.x
|
|
559
|
-
|
|
560
|
-
Key changes in v1.0:
|
|
561
|
-
- Updated to latest TanStack Table v8
|
|
562
|
-
- Improved TypeScript support
|
|
563
|
-
- Enhanced slot system
|
|
564
|
-
- Better server-side integration
|
|
565
|
-
|
|
566
|
-
## 🤝 Contributing
|
|
567
|
-
|
|
568
|
-
We welcome contributions! Please see our [Contributing Guide](https://github.com/ack-solutions/react-tanstack-data-table/blob/main/CONTRIBUTING.md) for details.
|
|
569
|
-
|
|
570
|
-
## 💖 Support the Project
|
|
571
|
-
|
|
572
|
-
If you find this package helpful and want to support its development, consider making a donation:
|
|
573
|
-
|
|
574
|
-
<div align="center">
|
|
575
|
-
|
|
576
|
-
[](https://www.paypal.com/paypalme/my/profile)
|
|
577
|
-
[](https://razorpay.me/@ackplus)
|
|
578
|
-
|
|
579
|
-
**[💳 PayPal](https://www.paypal.com/paypalme/my/profile)** • **[💳 Razorpay](https://razorpay.me/@ackplus)**
|
|
580
|
-
|
|
581
|
-
</div>
|
|
582
|
-
|
|
583
|
-
Your support helps us:
|
|
584
|
-
- 🛠️ Maintain and improve the library
|
|
585
|
-
- 🐛 Fix bugs and add new features
|
|
586
|
-
- 📚 Create better documentation
|
|
587
|
-
- 🚀 Keep the project active and up-to-date
|
|
588
|
-
|
|
589
|
-
## 📄 License
|
|
590
|
-
|
|
591
|
-
MIT © [ACK Solutions](https://github.com/ack-solutions)
|
|
592
|
-
|
|
593
|
-
## 🆘 Support
|
|
594
|
-
|
|
595
|
-
- 📖 [Documentation](https://github.com/ack-solutions/react-tanstack-data-table)
|
|
596
|
-
- 🐛 [Issue Tracker](https://github.com/ack-solutions/react-tanstack-data-table/issues)
|
|
597
|
-
- 💬 [Discussions](https://github.com/ack-solutions/react-tanstack-data-table/discussions)
|
|
598
|
-
|
|
599
|
-
If you find this package helpful, please consider giving it a ⭐ on [GitHub](https://github.com/ack-solutions/react-tanstack-data-table)!
|
package/index.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAGH,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAG7D,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0CAA0C,CAAC;AAGzD,OAAO,EACH,uBAAuB,EACvB,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,GACnB,MAAM,0BAA0B,CAAC;AAGlC,YAAY,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAGxE,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAG1C,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAG5B,YAAY,EACR,MAAM,EACN,SAAS,EACT,GAAG,EACH,KAAK,EACL,MAAM,EACN,IAAI,EACJ,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,GAClB,MAAM,uBAAuB,CAAC;AAG/B,cAAc,gBAAgB,CAAC;AAG/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,6CAA6C,CAAC;AACxF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,uBAAuB,EAAE,MAAM,0CAA0C,CAAC"}
|
package/index.js
DELETED
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* MUI TanStack DataTable
|
|
3
|
-
*
|
|
4
|
-
* A comprehensive, highly customizable data table component built with:
|
|
5
|
-
* - Material-UI (MUI) for styling
|
|
6
|
-
* - TanStack Table for table logic
|
|
7
|
-
* - TypeScript for type safety
|
|
8
|
-
*
|
|
9
|
-
* Features:
|
|
10
|
-
* - Column sorting, filtering, resizing, reordering, and pinning
|
|
11
|
-
* - Row selection, expansion, and virtualization
|
|
12
|
-
* - Pagination with customizable page sizes
|
|
13
|
-
* - Global and column-specific search/filtering
|
|
14
|
-
* - Export functionality (CSV, XLSX, JSON)
|
|
15
|
-
* - Responsive design with mobile support
|
|
16
|
-
* - Accessibility features
|
|
17
|
-
* - Customizable toolbar and actions
|
|
18
|
-
* - Loading states and empty data handling
|
|
19
|
-
*/
|
|
20
|
-
// Main components - be specific to avoid conflicts
|
|
21
|
-
export { DataTable } from './lib/components/table';
|
|
22
|
-
// Other component exports
|
|
23
|
-
export * from './lib/components/headers';
|
|
24
|
-
export * from './lib/components/rows';
|
|
25
|
-
export * from './lib/components/filters';
|
|
26
|
-
export * from './lib/components/pagination';
|
|
27
|
-
export * from './lib/components/droupdown/menu-dropdown';
|
|
28
|
-
// Individual toolbar components for custom toolbars
|
|
29
|
-
export { ColumnVisibilityControl, ColumnPinningControl, ColumnResetControl, TableExportControl, TableSizeControl, BulkActionsToolbar, DataTableToolbar, } from './lib/components/toolbar';
|
|
30
|
-
// Utilities and helpers
|
|
31
|
-
export * from './lib/utils/styling-helpers';
|
|
32
|
-
export * from './lib/utils/column-helpers';
|
|
33
|
-
export * from './lib/utils/table-helpers';
|
|
34
|
-
// Custom hooks
|
|
35
|
-
export * from './lib/hooks';
|
|
36
|
-
export * from './lib/types';
|
|
37
|
-
// Custom features (this includes SelectMode from features)
|
|
38
|
-
export * from './lib/features';
|
|
39
|
-
// Examples
|
|
40
|
-
export { CustomColumnFilterExample } from './lib/examples/custom-column-filter-example';
|
|
41
|
-
export { SimpleLocalExample } from './lib/examples/simple-local-example';
|
|
42
|
-
export { AdvancedFeaturesExample } from './lib/examples/advanced-features-example';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"menu-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/droupdown/menu-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAEH,YAAY,EACZ,SAAS,EAIZ,MAAM,OAAO,CAAC;AAGf,KAAK,aAAa,GAAG;IACjB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,IAAI,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,KAAK,WAAW,GAAG;IACf,MAAM,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,WAAW,iBACb,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,MAAM,CAAC;IAC5C,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,aAAa,KAAK,SAAS,CAAC,GAAG,SAAS,GAAG,GAAG,CAAC;IACnE,MAAM,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,WAAW,KAAK,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IACzE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,OAAO,GAAG,OAAO,IAAI,CAAC;CAC5C;AAED,wBAAgB,YAAY,CAAC,EACzB,QAAQ,EACR,MAAM,EACN,KAAK,EACL,SAAS,EACT,EAAE,EACF,GAAG,KAAK,EACX,EAAE,iBAAiB,2CA8DnB"}
|