@mkt-loitd/react-table-grid-custom 1.0.0 → 1.0.1
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 +184 -184
- package/package.json +67 -67
package/README.md
CHANGED
|
@@ -1,184 +1,184 @@
|
|
|
1
|
-
# 📦 React Table Grid Custom
|
|
2
|
-
|
|
3
|
-
A powerful, customizable React table component built on top of **react-data-grid**, optimized for **Next.js** and **TypeScript** projects.
|
|
4
|
-
|
|
5
|
-
> Supports pagination, sorting, row selection, i18n, Mantine UI, and flexible column configuration.
|
|
6
|
-
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
## ✨ Features
|
|
10
|
-
|
|
11
|
-
* ✅ Built on **react-data-grid**
|
|
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
|
|
19
|
-
|
|
20
|
-
---
|
|
21
|
-
|
|
22
|
-
## 📦 Installation
|
|
23
|
-
|
|
24
|
-
```bash
|
|
25
|
-
npm install @loitd/react-table-grid-custom
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
or
|
|
29
|
-
|
|
30
|
-
```bash
|
|
31
|
-
yarn add @loitd/react-table-grid-custom
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
or
|
|
35
|
-
|
|
36
|
-
```bash
|
|
37
|
-
pnpm add @loitd/react-table-grid-custom
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
---
|
|
41
|
-
|
|
42
|
-
## ⚠️ Peer Dependencies
|
|
43
|
-
|
|
44
|
-
Make sure your project already has:
|
|
45
|
-
|
|
46
|
-
```bash
|
|
47
|
-
react >= 18
|
|
48
|
-
react-dom >= 18
|
|
49
|
-
next >= 13
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
These are required but **not bundled** with the library.
|
|
53
|
-
|
|
54
|
-
---
|
|
55
|
-
|
|
56
|
-
## 🚀 Basic Usage
|
|
57
|
-
|
|
58
|
-
```tsx
|
|
59
|
-
import ReactTableGridCustom from '@loitd/react-table-grid-custom'
|
|
60
|
-
|
|
61
|
-
const columns = [
|
|
62
|
-
{ key: 'id', name: 'ID' },
|
|
63
|
-
{ key: 'name', name: 'Name' },
|
|
64
|
-
{ key: 'email', name: 'Email' }
|
|
65
|
-
]
|
|
66
|
-
|
|
67
|
-
const data = [
|
|
68
|
-
{ id: 1, name: 'John', email: 'john@gmail.com' },
|
|
69
|
-
{ id: 2, name: 'Jane', email: 'jane@gmail.com' }
|
|
70
|
-
]
|
|
71
|
-
|
|
72
|
-
export default function Example() {
|
|
73
|
-
return (
|
|
74
|
-
<div style={{ height: 400 }}>
|
|
75
|
-
<ReactTableGridCustom
|
|
76
|
-
columns={columns}
|
|
77
|
-
data={data}
|
|
78
|
-
page={1}
|
|
79
|
-
pageSize={10}
|
|
80
|
-
total={data.length}
|
|
81
|
-
/>
|
|
82
|
-
</div>
|
|
83
|
-
)
|
|
84
|
-
}
|
|
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
|
-
|
|
120
|
-
Example translation keys:
|
|
121
|
-
|
|
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
|
-
import 'react-data-grid/lib/styles.css'
|
|
141
|
-
```
|
|
142
|
-
|
|
143
|
-
---
|
|
144
|
-
|
|
145
|
-
## 🛠 Development
|
|
146
|
-
|
|
147
|
-
```bash
|
|
148
|
-
npm run dev
|
|
149
|
-
```
|
|
150
|
-
|
|
151
|
-
Build package:
|
|
152
|
-
|
|
153
|
-
```bash
|
|
154
|
-
npm run build
|
|
155
|
-
```
|
|
156
|
-
|
|
157
|
-
Test publish locally:
|
|
158
|
-
|
|
159
|
-
```bash
|
|
160
|
-
npm pack
|
|
161
|
-
```
|
|
162
|
-
|
|
163
|
-
---
|
|
164
|
-
|
|
165
|
-
## 📁 Package Output
|
|
166
|
-
|
|
167
|
-
When published, the package includes only:
|
|
168
|
-
|
|
169
|
-
```
|
|
170
|
-
dist/
|
|
171
|
-
README.md
|
|
172
|
-
```
|
|
173
|
-
|
|
174
|
-
---
|
|
175
|
-
|
|
176
|
-
## 📄 License
|
|
177
|
-
|
|
178
|
-
ISC © LoiTD
|
|
179
|
-
|
|
180
|
-
---
|
|
181
|
-
|
|
182
|
-
## 💬 Support
|
|
183
|
-
|
|
184
|
-
If you find a bug or want to request a feature, feel free to open an issue or contribute.
|
|
1
|
+
# 📦 React Table Grid Custom
|
|
2
|
+
|
|
3
|
+
A powerful, customizable React table component built on top of **react-data-grid**, optimized for **Next.js** and **TypeScript** projects.
|
|
4
|
+
|
|
5
|
+
> Supports pagination, sorting, row selection, i18n, Mantine UI, and flexible column configuration.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## ✨ Features
|
|
10
|
+
|
|
11
|
+
* ✅ Built on **react-data-grid**
|
|
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
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## 📦 Installation
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
npm install @loitd/react-table-grid-custom
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
or
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
yarn add @loitd/react-table-grid-custom
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
or
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
pnpm add @loitd/react-table-grid-custom
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
## ⚠️ Peer Dependencies
|
|
43
|
+
|
|
44
|
+
Make sure your project already has:
|
|
45
|
+
|
|
46
|
+
```bash
|
|
47
|
+
react >= 18
|
|
48
|
+
react-dom >= 18
|
|
49
|
+
next >= 13
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
These are required but **not bundled** with the library.
|
|
53
|
+
|
|
54
|
+
---
|
|
55
|
+
|
|
56
|
+
## 🚀 Basic Usage
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
import ReactTableGridCustom from '@loitd/react-table-grid-custom'
|
|
60
|
+
|
|
61
|
+
const columns = [
|
|
62
|
+
{ key: 'id', name: 'ID' },
|
|
63
|
+
{ key: 'name', name: 'Name' },
|
|
64
|
+
{ key: 'email', name: 'Email' }
|
|
65
|
+
]
|
|
66
|
+
|
|
67
|
+
const data = [
|
|
68
|
+
{ id: 1, name: 'John', email: 'john@gmail.com' },
|
|
69
|
+
{ id: 2, name: 'Jane', email: 'jane@gmail.com' }
|
|
70
|
+
]
|
|
71
|
+
|
|
72
|
+
export default function Example() {
|
|
73
|
+
return (
|
|
74
|
+
<div style={{ height: 400 }}>
|
|
75
|
+
<ReactTableGridCustom
|
|
76
|
+
columns={columns}
|
|
77
|
+
data={data}
|
|
78
|
+
page={1}
|
|
79
|
+
pageSize={10}
|
|
80
|
+
total={data.length}
|
|
81
|
+
/>
|
|
82
|
+
</div>
|
|
83
|
+
)
|
|
84
|
+
}
|
|
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
|
+
|
|
120
|
+
Example translation keys:
|
|
121
|
+
|
|
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
|
+
import 'react-data-grid/lib/styles.css'
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
---
|
|
144
|
+
|
|
145
|
+
## 🛠 Development
|
|
146
|
+
|
|
147
|
+
```bash
|
|
148
|
+
npm run dev
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
Build package:
|
|
152
|
+
|
|
153
|
+
```bash
|
|
154
|
+
npm run build
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
Test publish locally:
|
|
158
|
+
|
|
159
|
+
```bash
|
|
160
|
+
npm pack
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
---
|
|
164
|
+
|
|
165
|
+
## 📁 Package Output
|
|
166
|
+
|
|
167
|
+
When published, the package includes only:
|
|
168
|
+
|
|
169
|
+
```
|
|
170
|
+
dist/
|
|
171
|
+
README.md
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
---
|
|
175
|
+
|
|
176
|
+
## 📄 License
|
|
177
|
+
|
|
178
|
+
ISC © LoiTD
|
|
179
|
+
|
|
180
|
+
---
|
|
181
|
+
|
|
182
|
+
## 💬 Support
|
|
183
|
+
|
|
184
|
+
If you find a bug or want to request a feature, feel free to open an issue or contribute.
|
package/package.json
CHANGED
|
@@ -1,67 +1,67 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@mkt-loitd/react-table-grid-custom",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"publishConfig": {
|
|
5
|
-
"access": "public"
|
|
6
|
-
},
|
|
7
|
-
"private": false,
|
|
8
|
-
"description": "React Table Grid Custom component",
|
|
9
|
-
"main": "dist/index.cjs",
|
|
10
|
-
"module": "dist/index.js",
|
|
11
|
-
"types": "dist/index.d.ts",
|
|
12
|
-
"exports": {
|
|
13
|
-
".": {
|
|
14
|
-
"types": "./dist/index.d.ts",
|
|
15
|
-
"import": "./dist/index.js",
|
|
16
|
-
"require": "./dist/index.cjs"
|
|
17
|
-
}
|
|
18
|
-
},
|
|
19
|
-
"files": [
|
|
20
|
-
"dist",
|
|
21
|
-
"README.md"
|
|
22
|
-
],
|
|
23
|
-
"sideEffects": false,
|
|
24
|
-
"scripts": {
|
|
25
|
-
"dev": "tsup src/index.ts --watch --format esm,cjs --dts",
|
|
26
|
-
"build": "tsup src/index.ts --format esm,cjs --dts",
|
|
27
|
-
"prepublishOnly": "npm run build",
|
|
28
|
-
"release:patch": "npm version patch --no-git-tag-version"
|
|
29
|
-
},
|
|
30
|
-
"peerDependencies": {
|
|
31
|
-
"react": ">=18",
|
|
32
|
-
"react-dom": ">=18",
|
|
33
|
-
"next": ">=13"
|
|
34
|
-
},
|
|
35
|
-
"dependencies": {
|
|
36
|
-
"@mantine/core": "^8.3.10",
|
|
37
|
-
"@tanstack/react-query": "^5.90.12",
|
|
38
|
-
"clsx": "^2.1.1",
|
|
39
|
-
"formik": "^2.4.9",
|
|
40
|
-
"i18next": "^25.7.3",
|
|
41
|
-
"idb": "^8.0.3",
|
|
42
|
-
"lodash": "^4.17.21",
|
|
43
|
-
"moment": "^2.30.1",
|
|
44
|
-
"react-data-grid": "^7.0.0-beta.59",
|
|
45
|
-
"react-i18next": "^16.5.0",
|
|
46
|
-
"react-select": "^5.10.2",
|
|
47
|
-
"tailwind-merge": "^3.4.0",
|
|
48
|
-
"typeorm": "^0.3.28"
|
|
49
|
-
},
|
|
50
|
-
"devDependencies": {
|
|
51
|
-
"@types/lodash": "^4.17.21",
|
|
52
|
-
"@types/react": "^18.2.66",
|
|
53
|
-
"tslib": "^2.8.1",
|
|
54
|
-
"tsup": "^8.5.1",
|
|
55
|
-
"typescript": "^5.9.3"
|
|
56
|
-
},
|
|
57
|
-
"license": "ISC",
|
|
58
|
-
"repository": {
|
|
59
|
-
"type": "git",
|
|
60
|
-
"url": "git+ssh://git@github.com/loitd140201/react-table.git"
|
|
61
|
-
},
|
|
62
|
-
"author": "",
|
|
63
|
-
"bugs": {
|
|
64
|
-
"url": "https://github.com/loitd140201/react-table/issues"
|
|
65
|
-
},
|
|
66
|
-
"homepage": "https://github.com/loitd140201/react-table#readme"
|
|
67
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@mkt-loitd/react-table-grid-custom",
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"publishConfig": {
|
|
5
|
+
"access": "public"
|
|
6
|
+
},
|
|
7
|
+
"private": false,
|
|
8
|
+
"description": "React Table Grid Custom component",
|
|
9
|
+
"main": "dist/index.cjs",
|
|
10
|
+
"module": "dist/index.js",
|
|
11
|
+
"types": "dist/index.d.ts",
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"types": "./dist/index.d.ts",
|
|
15
|
+
"import": "./dist/index.js",
|
|
16
|
+
"require": "./dist/index.cjs"
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
"files": [
|
|
20
|
+
"dist",
|
|
21
|
+
"README.md"
|
|
22
|
+
],
|
|
23
|
+
"sideEffects": false,
|
|
24
|
+
"scripts": {
|
|
25
|
+
"dev": "tsup src/index.ts --watch --format esm,cjs --dts",
|
|
26
|
+
"build": "tsup src/index.ts --format esm,cjs --dts",
|
|
27
|
+
"prepublishOnly": "npm run build",
|
|
28
|
+
"release:patch": "npm version patch --no-git-tag-version"
|
|
29
|
+
},
|
|
30
|
+
"peerDependencies": {
|
|
31
|
+
"react": ">=18",
|
|
32
|
+
"react-dom": ">=18",
|
|
33
|
+
"next": ">=13"
|
|
34
|
+
},
|
|
35
|
+
"dependencies": {
|
|
36
|
+
"@mantine/core": "^8.3.10",
|
|
37
|
+
"@tanstack/react-query": "^5.90.12",
|
|
38
|
+
"clsx": "^2.1.1",
|
|
39
|
+
"formik": "^2.4.9",
|
|
40
|
+
"i18next": "^25.7.3",
|
|
41
|
+
"idb": "^8.0.3",
|
|
42
|
+
"lodash": "^4.17.21",
|
|
43
|
+
"moment": "^2.30.1",
|
|
44
|
+
"react-data-grid": "^7.0.0-beta.59",
|
|
45
|
+
"react-i18next": "^16.5.0",
|
|
46
|
+
"react-select": "^5.10.2",
|
|
47
|
+
"tailwind-merge": "^3.4.0",
|
|
48
|
+
"typeorm": "^0.3.28"
|
|
49
|
+
},
|
|
50
|
+
"devDependencies": {
|
|
51
|
+
"@types/lodash": "^4.17.21",
|
|
52
|
+
"@types/react": "^18.2.66",
|
|
53
|
+
"tslib": "^2.8.1",
|
|
54
|
+
"tsup": "^8.5.1",
|
|
55
|
+
"typescript": "^5.9.3"
|
|
56
|
+
},
|
|
57
|
+
"license": "ISC",
|
|
58
|
+
"repository": {
|
|
59
|
+
"type": "git",
|
|
60
|
+
"url": "git+ssh://git@github.com/loitd140201/react-table.git"
|
|
61
|
+
},
|
|
62
|
+
"author": "",
|
|
63
|
+
"bugs": {
|
|
64
|
+
"url": "https://github.com/loitd140201/react-table/issues"
|
|
65
|
+
},
|
|
66
|
+
"homepage": "https://github.com/loitd140201/react-table#readme"
|
|
67
|
+
}
|