@mkt-loitd/react-table-grid-custom 1.0.2 → 1.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/README.md +95 -115
- package/dist/index.css +97 -0
- package/dist/index.d.mts +134 -5
- package/dist/index.d.ts +134 -5
- package/dist/index.js +385 -233
- package/dist/index.mjs +378 -227
- package/package.json +8 -4
package/README.md
CHANGED
|
@@ -1,64 +1,67 @@
|
|
|
1
|
-
|
|
1
|
+
📦 React Table Grid Custom
|
|
2
2
|
|
|
3
|
-
A powerful,
|
|
3
|
+
A powerful, flexible React Table component built on top of react-data-grid, designed for Next.js and TypeScript projects.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Supports pagination, sorting, row selection, context menu, column visibility, and Mantine UI.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
✨ Features
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
✅ Built on react-data-grid
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
* ✅ Fully written in **TypeScript**
|
|
13
|
-
* ✅ Pagination & sorting
|
|
14
|
-
* ✅ Row selection (checkbox)
|
|
15
|
-
* ✅ Internationalization (`react-i18next`)
|
|
16
|
-
* ✅ Mantine UI integration
|
|
17
|
-
* ✅ Optimized for **Next.js (App Router & Pages Router)**
|
|
18
|
-
* ✅ Tree-shakeable & ESM/CJS support
|
|
11
|
+
✅ 100% TypeScript
|
|
19
12
|
|
|
20
|
-
|
|
13
|
+
✅ Pagination & sorting
|
|
21
14
|
|
|
22
|
-
|
|
15
|
+
✅ Row selection (checkbox)
|
|
16
|
+
|
|
17
|
+
✅ Context menu (right click)
|
|
18
|
+
|
|
19
|
+
✅ Show / hide columns
|
|
20
|
+
|
|
21
|
+
✅ Mantine UI integration
|
|
22
|
+
|
|
23
|
+
✅ Optimized for Next.js 13+ (App Router & Pages Router)
|
|
24
|
+
|
|
25
|
+
✅ ESM + CJS support
|
|
26
|
+
|
|
27
|
+
✅ Tree-shakeable (sideEffects: false)
|
|
28
|
+
|
|
29
|
+
📦 Installation
|
|
30
|
+
npm install @mkt-loitd/react-table-grid-custom
|
|
23
31
|
|
|
24
|
-
```bash
|
|
25
|
-
npm install @loitd/react-table-grid-custom
|
|
26
|
-
```
|
|
27
32
|
|
|
28
33
|
or
|
|
29
34
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
```
|
|
35
|
+
yarn add @mkt-loitd/react-table-grid-custom
|
|
36
|
+
|
|
33
37
|
|
|
34
38
|
or
|
|
35
39
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
40
|
+
pnpm add @mkt-loitd/react-table-grid-custom
|
|
41
|
+
|
|
42
|
+
🔗 Repository
|
|
39
43
|
|
|
40
|
-
|
|
44
|
+
👉 GitHub:
|
|
45
|
+
https://github.com/loitd140201/react-table
|
|
41
46
|
|
|
42
|
-
|
|
47
|
+
⚠️ Peer Dependencies
|
|
43
48
|
|
|
44
49
|
Make sure your project already has:
|
|
45
50
|
|
|
46
|
-
```bash
|
|
47
51
|
react >= 18
|
|
48
52
|
react-dom >= 18
|
|
49
53
|
next >= 13
|
|
50
|
-
```
|
|
51
54
|
|
|
52
|
-
These are required but **not bundled** with the library.
|
|
53
55
|
|
|
54
|
-
|
|
56
|
+
These packages are required but not bundled.
|
|
55
57
|
|
|
56
|
-
|
|
58
|
+
🚀 Basic Usage
|
|
59
|
+
'use client'
|
|
57
60
|
|
|
58
|
-
|
|
59
|
-
import
|
|
61
|
+
import { ReactTableGridCustom } from '@mkt-loitd/react-table-grid-custom'
|
|
62
|
+
import type { TColumnsTable } from '@mkt-loitd/react-table-grid-custom'
|
|
60
63
|
|
|
61
|
-
const columns = [
|
|
64
|
+
const columns: TColumnsTable<any> = [
|
|
62
65
|
{ key: 'id', name: 'ID' },
|
|
63
66
|
{ key: 'name', name: 'Name' },
|
|
64
67
|
{ key: 'email', name: 'Email' }
|
|
@@ -82,103 +85,80 @@ export default function Example() {
|
|
|
82
85
|
</div>
|
|
83
86
|
)
|
|
84
87
|
}
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
---
|
|
88
|
-
|
|
89
|
-
## 🧩 Props
|
|
90
|
-
|
|
91
|
-
### `ReactTableGridCustom<T>`
|
|
92
|
-
|
|
93
|
-
| Prop | Type | Description |
|
|
94
|
-
| -------------------------- | ------------------------ | ------------------------ |
|
|
95
|
-
| `columns` | `TColumnsTable<T>` | Column definitions |
|
|
96
|
-
| `data` | `T[]` | Table data |
|
|
97
|
-
| `page` | `number` | Current page |
|
|
98
|
-
| `pageSize` | `number` | Items per page |
|
|
99
|
-
| `total` | `number` | Total records |
|
|
100
|
-
| `onChange` | `(page: number) => void` | Page change callback |
|
|
101
|
-
| `selectedRows` | `ReadonlySet<Key>` | Selected rows |
|
|
102
|
-
| `fetching` | `boolean` | Show loading overlay |
|
|
103
|
-
| `hiddenPagination` | `boolean` | Hide pagination |
|
|
104
|
-
| `hiddenSTT` | `boolean` | Hide index column |
|
|
105
|
-
| `classNameWapperTable` | `string` | Custom wrapper class |
|
|
106
|
-
| `classNamePaginationTable` | `string` | Pagination wrapper class |
|
|
107
|
-
|
|
108
|
-
---
|
|
109
|
-
|
|
110
|
-
## 🌍 Internationalization (i18n)
|
|
111
|
-
|
|
112
|
-
This component supports `react-i18next`.
|
|
113
|
-
|
|
114
|
-
Make sure you have:
|
|
115
|
-
|
|
116
|
-
```bash
|
|
117
|
-
npm install react-i18next i18next
|
|
118
|
-
```
|
|
119
88
|
|
|
120
|
-
|
|
89
|
+
🧩 Main Component
|
|
90
|
+
ReactTableGridCustom<T>
|
|
91
|
+
import type { IReactTableGridCustom } from '@mkt-loitd/react-table-grid-custom'
|
|
92
|
+
|
|
93
|
+
Props
|
|
94
|
+
Prop Type Description
|
|
95
|
+
columns TColumnsTable<T> Column definitions
|
|
96
|
+
data T[] Table data
|
|
97
|
+
page number Current page
|
|
98
|
+
pageSize number Records per page
|
|
99
|
+
total number Total records
|
|
100
|
+
onChange (page: number) => void Page change callback
|
|
101
|
+
selectedRows ReadonlySet<Key> Selected rows
|
|
102
|
+
fetching boolean Show loading overlay
|
|
103
|
+
hiddenPagination boolean Hide pagination
|
|
104
|
+
hiddenSTT boolean Hide index (STT) column
|
|
105
|
+
classNameWapperTable string Wrapper table class
|
|
106
|
+
classNamePaginationTable string Pagination wrapper class
|
|
107
|
+
🧩 Context Menu Wrapper
|
|
108
|
+
TableStyleContextWapper
|
|
109
|
+
import {
|
|
110
|
+
TableStyleContextWapper,
|
|
111
|
+
type TableStyleWapperProps
|
|
112
|
+
} from '@mkt-loitd/react-table-grid-custom'
|
|
113
|
+
|
|
114
|
+
Example
|
|
115
|
+
<TableStyleContextWapper
|
|
116
|
+
clsTablecustom="h-full"
|
|
117
|
+
renderContext={{
|
|
118
|
+
renderData: true,
|
|
119
|
+
onClick: (key, row) => {
|
|
120
|
+
console.log(key, row)
|
|
121
|
+
}
|
|
122
|
+
}}
|
|
123
|
+
>
|
|
124
|
+
<ReactTableGridCustom {...props} />
|
|
125
|
+
</TableStyleContextWapper>
|
|
126
|
+
|
|
127
|
+
🎨 Styling
|
|
128
|
+
|
|
129
|
+
Built with Mantine UI
|
|
130
|
+
|
|
131
|
+
Fully compatible with Tailwind CSS
|
|
132
|
+
|
|
133
|
+
Uses default styles from react-data-grid
|
|
121
134
|
|
|
122
|
-
```json
|
|
123
|
-
{
|
|
124
|
-
"display": "Display",
|
|
125
|
-
"to": "to",
|
|
126
|
-
"in": "in",
|
|
127
|
-
"data": "records"
|
|
128
|
-
}
|
|
129
|
-
```
|
|
130
|
-
|
|
131
|
-
---
|
|
132
|
-
|
|
133
|
-
## 🎨 Styling
|
|
134
|
-
|
|
135
|
-
* Uses **Mantine** components
|
|
136
|
-
* Fully compatible with **Tailwind CSS**
|
|
137
|
-
* Includes default styles from `react-data-grid`
|
|
138
|
-
|
|
139
|
-
```ts
|
|
140
135
|
import 'react-data-grid/lib/styles.css'
|
|
141
|
-
```
|
|
142
136
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
137
|
+
📁 Package Structure
|
|
138
|
+
dist/
|
|
139
|
+
README.md
|
|
146
140
|
|
|
147
|
-
|
|
141
|
+
🛠 Development
|
|
148
142
|
npm run dev
|
|
149
|
-
|
|
143
|
+
|
|
150
144
|
|
|
151
145
|
Build package:
|
|
152
146
|
|
|
153
|
-
```bash
|
|
154
147
|
npm run build
|
|
155
|
-
```
|
|
156
148
|
|
|
157
|
-
Test publish locally:
|
|
158
149
|
|
|
159
|
-
|
|
160
|
-
npm pack
|
|
161
|
-
```
|
|
162
|
-
|
|
163
|
-
---
|
|
164
|
-
|
|
165
|
-
## 📁 Package Output
|
|
166
|
-
|
|
167
|
-
When published, the package includes only:
|
|
150
|
+
Test locally:
|
|
168
151
|
|
|
169
|
-
|
|
170
|
-
dist/
|
|
171
|
-
README.md
|
|
172
|
-
```
|
|
173
|
-
|
|
174
|
-
---
|
|
152
|
+
npm pack
|
|
175
153
|
|
|
176
|
-
|
|
154
|
+
📄 License
|
|
177
155
|
|
|
178
156
|
ISC © LoiTD
|
|
179
157
|
|
|
180
|
-
|
|
158
|
+
💬 Support
|
|
181
159
|
|
|
182
|
-
|
|
160
|
+
🐞 Issues:
|
|
161
|
+
https://github.com/loitd140201/react-table/issues
|
|
183
162
|
|
|
184
|
-
|
|
163
|
+
📦 Repository:
|
|
164
|
+
https://github.com/loitd140201/react-table
|
package/dist/index.css
CHANGED
|
@@ -55,3 +55,100 @@ div[aria-sort] > span {
|
|
|
55
55
|
position: sticky !important;
|
|
56
56
|
right: 0 !important;
|
|
57
57
|
}
|
|
58
|
+
|
|
59
|
+
/* src/component/ui/ContextMenu/ContextMenu.css */
|
|
60
|
+
.shadow-menu {
|
|
61
|
+
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
|
|
62
|
+
animation: open 0.3s;
|
|
63
|
+
transform-origin: top left;
|
|
64
|
+
}
|
|
65
|
+
.shadow-submenu {
|
|
66
|
+
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
|
|
67
|
+
}
|
|
68
|
+
@keyframes open {
|
|
69
|
+
from {
|
|
70
|
+
transform: scale(0);
|
|
71
|
+
}
|
|
72
|
+
to {
|
|
73
|
+
transform: scale(1);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* node_modules/tippy.js/dist/tippy.css */
|
|
78
|
+
.tippy-box[data-animation=fade][data-state=hidden] {
|
|
79
|
+
opacity: 0;
|
|
80
|
+
}
|
|
81
|
+
[data-tippy-root] {
|
|
82
|
+
max-width: calc(100vw - 10px);
|
|
83
|
+
}
|
|
84
|
+
.tippy-box {
|
|
85
|
+
position: relative;
|
|
86
|
+
background-color: #333;
|
|
87
|
+
color: #fff;
|
|
88
|
+
border-radius: 4px;
|
|
89
|
+
font-size: 14px;
|
|
90
|
+
line-height: 1.4;
|
|
91
|
+
white-space: normal;
|
|
92
|
+
outline: 0;
|
|
93
|
+
transition-property:
|
|
94
|
+
transform,
|
|
95
|
+
visibility,
|
|
96
|
+
opacity;
|
|
97
|
+
}
|
|
98
|
+
.tippy-box[data-placement^=top] > .tippy-arrow {
|
|
99
|
+
bottom: 0;
|
|
100
|
+
}
|
|
101
|
+
.tippy-box[data-placement^=top] > .tippy-arrow:before {
|
|
102
|
+
bottom: -7px;
|
|
103
|
+
left: 0;
|
|
104
|
+
border-width: 8px 8px 0;
|
|
105
|
+
border-top-color: initial;
|
|
106
|
+
transform-origin: center top;
|
|
107
|
+
}
|
|
108
|
+
.tippy-box[data-placement^=bottom] > .tippy-arrow {
|
|
109
|
+
top: 0;
|
|
110
|
+
}
|
|
111
|
+
.tippy-box[data-placement^=bottom] > .tippy-arrow:before {
|
|
112
|
+
top: -7px;
|
|
113
|
+
left: 0;
|
|
114
|
+
border-width: 0 8px 8px;
|
|
115
|
+
border-bottom-color: initial;
|
|
116
|
+
transform-origin: center bottom;
|
|
117
|
+
}
|
|
118
|
+
.tippy-box[data-placement^=left] > .tippy-arrow {
|
|
119
|
+
right: 0;
|
|
120
|
+
}
|
|
121
|
+
.tippy-box[data-placement^=left] > .tippy-arrow:before {
|
|
122
|
+
border-width: 8px 0 8px 8px;
|
|
123
|
+
border-left-color: initial;
|
|
124
|
+
right: -7px;
|
|
125
|
+
transform-origin: center left;
|
|
126
|
+
}
|
|
127
|
+
.tippy-box[data-placement^=right] > .tippy-arrow {
|
|
128
|
+
left: 0;
|
|
129
|
+
}
|
|
130
|
+
.tippy-box[data-placement^=right] > .tippy-arrow:before {
|
|
131
|
+
left: -7px;
|
|
132
|
+
border-width: 8px 8px 8px 0;
|
|
133
|
+
border-right-color: initial;
|
|
134
|
+
transform-origin: center right;
|
|
135
|
+
}
|
|
136
|
+
.tippy-box[data-inertia][data-state=visible] {
|
|
137
|
+
transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11);
|
|
138
|
+
}
|
|
139
|
+
.tippy-arrow {
|
|
140
|
+
width: 16px;
|
|
141
|
+
height: 16px;
|
|
142
|
+
color: #333;
|
|
143
|
+
}
|
|
144
|
+
.tippy-arrow:before {
|
|
145
|
+
content: "";
|
|
146
|
+
position: absolute;
|
|
147
|
+
border-color: transparent;
|
|
148
|
+
border-style: solid;
|
|
149
|
+
}
|
|
150
|
+
.tippy-content {
|
|
151
|
+
position: relative;
|
|
152
|
+
padding: 5px 9px;
|
|
153
|
+
z-index: 1;
|
|
154
|
+
}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
1
2
|
import { Key, Dispatch, SetStateAction, ReactNode, JSX } from 'react';
|
|
2
3
|
import { ColumnOrColumnGroup, DataGridProps } from 'react-data-grid';
|
|
3
4
|
import { PaginationRootProps } from '@mantine/core';
|
|
5
|
+
import { TFunction } from 'i18next';
|
|
6
|
+
import { UseMutateFunction } from '@tanstack/react-query';
|
|
4
7
|
|
|
5
8
|
type TColumnsTable<T = unknown, SR = unknown> = readonly ColumnOrColumnGroup<NoInfer<T>, NoInfer<SR>>[];
|
|
6
9
|
interface IPaginationParams$1 {
|
|
@@ -10,7 +13,7 @@ interface IPaginationParams$1 {
|
|
|
10
13
|
interface IObjectDynamic {
|
|
11
14
|
[key: string]: any;
|
|
12
15
|
}
|
|
13
|
-
interface ISetConfigPagination extends IPaginationParams$1, IObjectDynamic {
|
|
16
|
+
interface ISetConfigPagination$1 extends IPaginationParams$1, IObjectDynamic {
|
|
14
17
|
}
|
|
15
18
|
|
|
16
19
|
interface IPaginationText {
|
|
@@ -27,7 +30,7 @@ interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key>
|
|
|
27
30
|
data?: T[];
|
|
28
31
|
/** Nếu hàm onChange nên dùng useCallback */
|
|
29
32
|
onChange?: Pick<PaginationRootProps, 'onChange'>['onChange'];
|
|
30
|
-
setConfigPagination?: Dispatch<SetStateAction<ISetConfigPagination>>;
|
|
33
|
+
setConfigPagination?: Dispatch<SetStateAction<ISetConfigPagination$1>>;
|
|
31
34
|
/** Nếu hàm rowKeyGetter nên dùng useCallback*/
|
|
32
35
|
rowKeyGetter?: string | Maybe<(row: NoInfer<T>) => K>;
|
|
33
36
|
hiddenPaginationText?: boolean;
|
|
@@ -38,8 +41,134 @@ interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key>
|
|
|
38
41
|
TableLogo?: string;
|
|
39
42
|
}
|
|
40
43
|
|
|
41
|
-
|
|
42
|
-
declare const ReactTableGridCustom:
|
|
44
|
+
type ReactTableGridCustomComponent = <T, SR = unknown, K extends Key = Key>(props: IReactTableGridCustom<T, SR, K>) => JSX.Element;
|
|
45
|
+
declare const ReactTableGridCustom: ReactTableGridCustomComponent;
|
|
46
|
+
|
|
47
|
+
interface ContextMenuProps {
|
|
48
|
+
selector: string;
|
|
49
|
+
children?: ReactNode;
|
|
50
|
+
zIndex?: number;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
interface IMainResponse<T = any> {
|
|
54
|
+
success?: boolean;
|
|
55
|
+
status?: 'success' | 'error' | 'warning';
|
|
56
|
+
data?: T;
|
|
57
|
+
payload?: {
|
|
58
|
+
data?: T;
|
|
59
|
+
[key: string]: any;
|
|
60
|
+
};
|
|
61
|
+
message?: {
|
|
62
|
+
key: string;
|
|
63
|
+
[key: string]: any;
|
|
64
|
+
};
|
|
65
|
+
error?: any;
|
|
66
|
+
}
|
|
67
|
+
interface IFieldUpdateAndCheck<T = any, F = any, V = any> {
|
|
68
|
+
id?: string | number;
|
|
69
|
+
field?: F;
|
|
70
|
+
value?: V;
|
|
71
|
+
data?: T;
|
|
72
|
+
[key: string]: any;
|
|
73
|
+
}
|
|
74
|
+
interface Account {
|
|
75
|
+
id?: string | number;
|
|
76
|
+
username?: string;
|
|
77
|
+
password?: string;
|
|
78
|
+
email?: string;
|
|
79
|
+
status?: string;
|
|
80
|
+
[key: string]: any;
|
|
81
|
+
}
|
|
82
|
+
interface Post {
|
|
83
|
+
id?: string | number;
|
|
84
|
+
title?: string;
|
|
85
|
+
content?: string;
|
|
86
|
+
createdAt?: number;
|
|
87
|
+
[key: string]: any;
|
|
88
|
+
}
|
|
89
|
+
interface AppSettings {
|
|
90
|
+
[key: string]: any;
|
|
91
|
+
}
|
|
92
|
+
interface ISetConfigPagination {
|
|
93
|
+
page?: number;
|
|
94
|
+
limit?: number;
|
|
95
|
+
total?: number;
|
|
96
|
+
[key: string]: any;
|
|
97
|
+
}
|
|
98
|
+
type ITaskName = string;
|
|
99
|
+
|
|
100
|
+
interface IActionUiUtilBy {
|
|
101
|
+
action?: string;
|
|
102
|
+
[key: string]: any;
|
|
103
|
+
}
|
|
104
|
+
interface IPayloadStartAction {
|
|
105
|
+
action?: string;
|
|
106
|
+
[key: string]: any;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
interface Proxy {
|
|
110
|
+
id?: string;
|
|
111
|
+
host?: string;
|
|
112
|
+
port?: number;
|
|
113
|
+
username?: string;
|
|
114
|
+
password?: string;
|
|
115
|
+
protocol?: string;
|
|
116
|
+
provider?: string;
|
|
117
|
+
[key: string]: any;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
interface IPayloadRemoveProxy {
|
|
121
|
+
ids: string[];
|
|
122
|
+
}
|
|
123
|
+
interface IPayloadService {
|
|
124
|
+
updateByClipboard?: UseMutateFunction<IMainResponse<string[]>, Error, IFieldUpdateAndCheck<Account, string[], keyof Account>, unknown>;
|
|
125
|
+
removeFieldBy?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Account, Array<keyof Account>, string[]>, unknown>;
|
|
126
|
+
copyByField?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Account, string, string[]>, unknown>;
|
|
127
|
+
actionBy?: UseMutateFunction<IMainResponse<string[]>, Error, IFieldUpdateAndCheck<Account, IActionUiUtilBy, string[]>, unknown>;
|
|
128
|
+
updateAccountByField?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Account, Partial<Account>, string[]>, unknown>;
|
|
129
|
+
deleteProxy?: UseMutateFunction<IMainResponse<boolean>, Error, IPayloadRemoveProxy, unknown>;
|
|
130
|
+
removePostByField?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Post, undefined, string[]>, unknown>;
|
|
131
|
+
startAction?: UseMutateFunction<IMainResponse<boolean>, Error, IPayloadStartAction, unknown>;
|
|
132
|
+
updateSettings?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<AppSettings, object, boolean>, unknown>;
|
|
133
|
+
useCopyProxyByField?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Proxy, string, string[]>[], unknown>;
|
|
134
|
+
exportLinkSuccess?: UseMutateFunction<IMainResponse<boolean>, Error, ITaskName, unknown>;
|
|
135
|
+
setAction?: Dispatch<SetStateAction<ITaskName>>;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
type IDispatchState<T> = Dispatch<SetStateAction<T>>;
|
|
139
|
+
|
|
140
|
+
interface IExpandValue extends IPayloadService {
|
|
141
|
+
t?: TFunction<'translation', undefined>;
|
|
142
|
+
setConfigSearch?: IDispatchState<ISetConfigPagination>;
|
|
143
|
+
setSelectedRecords?: Dispatch<ReadonlySet<string>>;
|
|
144
|
+
setIsShowEdit?: Dispatch<SetStateAction<boolean>>;
|
|
145
|
+
setIsOpenEditContent?: Dispatch<SetStateAction<boolean>>;
|
|
146
|
+
setIsCopy?: Dispatch<SetStateAction<boolean>>;
|
|
147
|
+
setIsChangeCate?: Dispatch<SetStateAction<boolean>>;
|
|
148
|
+
setIsBackup?: Dispatch<SetStateAction<boolean>>;
|
|
149
|
+
}
|
|
150
|
+
type configContextMenuType = {
|
|
151
|
+
Icon: (prop?: any) => ReactNode;
|
|
152
|
+
action: string;
|
|
153
|
+
onClick?: (value: string[], expandValue: IExpandValue) => void;
|
|
154
|
+
children?: configContextMenuType[];
|
|
155
|
+
};
|
|
156
|
+
interface RenderContextMenuProps {
|
|
157
|
+
renderData?: configContextMenuType[];
|
|
158
|
+
valueClickItem?: any;
|
|
159
|
+
expandValue?: IExpandValue;
|
|
160
|
+
classWapper?: boolean;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
interface TableStyleWapperProps {
|
|
164
|
+
children?: ReactNode;
|
|
165
|
+
contextMenuProps?: Omit<ContextMenuProps, 'selector' | 'children'> & {
|
|
166
|
+
selector?: string;
|
|
167
|
+
};
|
|
168
|
+
renderContext?: RenderContextMenuProps;
|
|
169
|
+
clsTablecustom?: string;
|
|
170
|
+
}
|
|
171
|
+
declare const TableStyleContextWapper: react.NamedExoticComponent<TableStyleWapperProps>;
|
|
43
172
|
|
|
44
173
|
interface IPaginationParams {
|
|
45
174
|
pageSize?: number;
|
|
@@ -68,4 +197,4 @@ interface UseShowHideColumnReturn<T, SR> {
|
|
|
68
197
|
handleChangeLocation?: (arr: string[]) => void;
|
|
69
198
|
}
|
|
70
199
|
|
|
71
|
-
export { type ICalculatorTotalPage, type IPaginationParams, type IReactTableGridCustom, type ISTTParams, type Maybe, ReactTableGridCustom, type TColumnsTable, type UseShowHideColumnParameter, type UseShowHideColumnReturn };
|
|
200
|
+
export { type ICalculatorTotalPage, type IPaginationParams, type IReactTableGridCustom, type ISTTParams, type Maybe, ReactTableGridCustom, type TColumnsTable, TableStyleContextWapper, type TableStyleWapperProps, type UseShowHideColumnParameter, type UseShowHideColumnReturn };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
1
2
|
import { Key, Dispatch, SetStateAction, ReactNode, JSX } from 'react';
|
|
2
3
|
import { ColumnOrColumnGroup, DataGridProps } from 'react-data-grid';
|
|
3
4
|
import { PaginationRootProps } from '@mantine/core';
|
|
5
|
+
import { TFunction } from 'i18next';
|
|
6
|
+
import { UseMutateFunction } from '@tanstack/react-query';
|
|
4
7
|
|
|
5
8
|
type TColumnsTable<T = unknown, SR = unknown> = readonly ColumnOrColumnGroup<NoInfer<T>, NoInfer<SR>>[];
|
|
6
9
|
interface IPaginationParams$1 {
|
|
@@ -10,7 +13,7 @@ interface IPaginationParams$1 {
|
|
|
10
13
|
interface IObjectDynamic {
|
|
11
14
|
[key: string]: any;
|
|
12
15
|
}
|
|
13
|
-
interface ISetConfigPagination extends IPaginationParams$1, IObjectDynamic {
|
|
16
|
+
interface ISetConfigPagination$1 extends IPaginationParams$1, IObjectDynamic {
|
|
14
17
|
}
|
|
15
18
|
|
|
16
19
|
interface IPaginationText {
|
|
@@ -27,7 +30,7 @@ interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key>
|
|
|
27
30
|
data?: T[];
|
|
28
31
|
/** Nếu hàm onChange nên dùng useCallback */
|
|
29
32
|
onChange?: Pick<PaginationRootProps, 'onChange'>['onChange'];
|
|
30
|
-
setConfigPagination?: Dispatch<SetStateAction<ISetConfigPagination>>;
|
|
33
|
+
setConfigPagination?: Dispatch<SetStateAction<ISetConfigPagination$1>>;
|
|
31
34
|
/** Nếu hàm rowKeyGetter nên dùng useCallback*/
|
|
32
35
|
rowKeyGetter?: string | Maybe<(row: NoInfer<T>) => K>;
|
|
33
36
|
hiddenPaginationText?: boolean;
|
|
@@ -38,8 +41,134 @@ interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key>
|
|
|
38
41
|
TableLogo?: string;
|
|
39
42
|
}
|
|
40
43
|
|
|
41
|
-
|
|
42
|
-
declare const ReactTableGridCustom:
|
|
44
|
+
type ReactTableGridCustomComponent = <T, SR = unknown, K extends Key = Key>(props: IReactTableGridCustom<T, SR, K>) => JSX.Element;
|
|
45
|
+
declare const ReactTableGridCustom: ReactTableGridCustomComponent;
|
|
46
|
+
|
|
47
|
+
interface ContextMenuProps {
|
|
48
|
+
selector: string;
|
|
49
|
+
children?: ReactNode;
|
|
50
|
+
zIndex?: number;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
interface IMainResponse<T = any> {
|
|
54
|
+
success?: boolean;
|
|
55
|
+
status?: 'success' | 'error' | 'warning';
|
|
56
|
+
data?: T;
|
|
57
|
+
payload?: {
|
|
58
|
+
data?: T;
|
|
59
|
+
[key: string]: any;
|
|
60
|
+
};
|
|
61
|
+
message?: {
|
|
62
|
+
key: string;
|
|
63
|
+
[key: string]: any;
|
|
64
|
+
};
|
|
65
|
+
error?: any;
|
|
66
|
+
}
|
|
67
|
+
interface IFieldUpdateAndCheck<T = any, F = any, V = any> {
|
|
68
|
+
id?: string | number;
|
|
69
|
+
field?: F;
|
|
70
|
+
value?: V;
|
|
71
|
+
data?: T;
|
|
72
|
+
[key: string]: any;
|
|
73
|
+
}
|
|
74
|
+
interface Account {
|
|
75
|
+
id?: string | number;
|
|
76
|
+
username?: string;
|
|
77
|
+
password?: string;
|
|
78
|
+
email?: string;
|
|
79
|
+
status?: string;
|
|
80
|
+
[key: string]: any;
|
|
81
|
+
}
|
|
82
|
+
interface Post {
|
|
83
|
+
id?: string | number;
|
|
84
|
+
title?: string;
|
|
85
|
+
content?: string;
|
|
86
|
+
createdAt?: number;
|
|
87
|
+
[key: string]: any;
|
|
88
|
+
}
|
|
89
|
+
interface AppSettings {
|
|
90
|
+
[key: string]: any;
|
|
91
|
+
}
|
|
92
|
+
interface ISetConfigPagination {
|
|
93
|
+
page?: number;
|
|
94
|
+
limit?: number;
|
|
95
|
+
total?: number;
|
|
96
|
+
[key: string]: any;
|
|
97
|
+
}
|
|
98
|
+
type ITaskName = string;
|
|
99
|
+
|
|
100
|
+
interface IActionUiUtilBy {
|
|
101
|
+
action?: string;
|
|
102
|
+
[key: string]: any;
|
|
103
|
+
}
|
|
104
|
+
interface IPayloadStartAction {
|
|
105
|
+
action?: string;
|
|
106
|
+
[key: string]: any;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
interface Proxy {
|
|
110
|
+
id?: string;
|
|
111
|
+
host?: string;
|
|
112
|
+
port?: number;
|
|
113
|
+
username?: string;
|
|
114
|
+
password?: string;
|
|
115
|
+
protocol?: string;
|
|
116
|
+
provider?: string;
|
|
117
|
+
[key: string]: any;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
interface IPayloadRemoveProxy {
|
|
121
|
+
ids: string[];
|
|
122
|
+
}
|
|
123
|
+
interface IPayloadService {
|
|
124
|
+
updateByClipboard?: UseMutateFunction<IMainResponse<string[]>, Error, IFieldUpdateAndCheck<Account, string[], keyof Account>, unknown>;
|
|
125
|
+
removeFieldBy?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Account, Array<keyof Account>, string[]>, unknown>;
|
|
126
|
+
copyByField?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Account, string, string[]>, unknown>;
|
|
127
|
+
actionBy?: UseMutateFunction<IMainResponse<string[]>, Error, IFieldUpdateAndCheck<Account, IActionUiUtilBy, string[]>, unknown>;
|
|
128
|
+
updateAccountByField?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Account, Partial<Account>, string[]>, unknown>;
|
|
129
|
+
deleteProxy?: UseMutateFunction<IMainResponse<boolean>, Error, IPayloadRemoveProxy, unknown>;
|
|
130
|
+
removePostByField?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Post, undefined, string[]>, unknown>;
|
|
131
|
+
startAction?: UseMutateFunction<IMainResponse<boolean>, Error, IPayloadStartAction, unknown>;
|
|
132
|
+
updateSettings?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<AppSettings, object, boolean>, unknown>;
|
|
133
|
+
useCopyProxyByField?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Proxy, string, string[]>[], unknown>;
|
|
134
|
+
exportLinkSuccess?: UseMutateFunction<IMainResponse<boolean>, Error, ITaskName, unknown>;
|
|
135
|
+
setAction?: Dispatch<SetStateAction<ITaskName>>;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
type IDispatchState<T> = Dispatch<SetStateAction<T>>;
|
|
139
|
+
|
|
140
|
+
interface IExpandValue extends IPayloadService {
|
|
141
|
+
t?: TFunction<'translation', undefined>;
|
|
142
|
+
setConfigSearch?: IDispatchState<ISetConfigPagination>;
|
|
143
|
+
setSelectedRecords?: Dispatch<ReadonlySet<string>>;
|
|
144
|
+
setIsShowEdit?: Dispatch<SetStateAction<boolean>>;
|
|
145
|
+
setIsOpenEditContent?: Dispatch<SetStateAction<boolean>>;
|
|
146
|
+
setIsCopy?: Dispatch<SetStateAction<boolean>>;
|
|
147
|
+
setIsChangeCate?: Dispatch<SetStateAction<boolean>>;
|
|
148
|
+
setIsBackup?: Dispatch<SetStateAction<boolean>>;
|
|
149
|
+
}
|
|
150
|
+
type configContextMenuType = {
|
|
151
|
+
Icon: (prop?: any) => ReactNode;
|
|
152
|
+
action: string;
|
|
153
|
+
onClick?: (value: string[], expandValue: IExpandValue) => void;
|
|
154
|
+
children?: configContextMenuType[];
|
|
155
|
+
};
|
|
156
|
+
interface RenderContextMenuProps {
|
|
157
|
+
renderData?: configContextMenuType[];
|
|
158
|
+
valueClickItem?: any;
|
|
159
|
+
expandValue?: IExpandValue;
|
|
160
|
+
classWapper?: boolean;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
interface TableStyleWapperProps {
|
|
164
|
+
children?: ReactNode;
|
|
165
|
+
contextMenuProps?: Omit<ContextMenuProps, 'selector' | 'children'> & {
|
|
166
|
+
selector?: string;
|
|
167
|
+
};
|
|
168
|
+
renderContext?: RenderContextMenuProps;
|
|
169
|
+
clsTablecustom?: string;
|
|
170
|
+
}
|
|
171
|
+
declare const TableStyleContextWapper: react.NamedExoticComponent<TableStyleWapperProps>;
|
|
43
172
|
|
|
44
173
|
interface IPaginationParams {
|
|
45
174
|
pageSize?: number;
|
|
@@ -68,4 +197,4 @@ interface UseShowHideColumnReturn<T, SR> {
|
|
|
68
197
|
handleChangeLocation?: (arr: string[]) => void;
|
|
69
198
|
}
|
|
70
199
|
|
|
71
|
-
export { type ICalculatorTotalPage, type IPaginationParams, type IReactTableGridCustom, type ISTTParams, type Maybe, ReactTableGridCustom, type TColumnsTable, type UseShowHideColumnParameter, type UseShowHideColumnReturn };
|
|
200
|
+
export { type ICalculatorTotalPage, type IPaginationParams, type IReactTableGridCustom, type ISTTParams, type Maybe, ReactTableGridCustom, type TColumnsTable, TableStyleContextWapper, type TableStyleWapperProps, type UseShowHideColumnParameter, type UseShowHideColumnReturn };
|