@mkt-loitd/react-table-grid-custom 1.0.0 → 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.
Files changed (6) hide show
  1. package/README.md +184 -184
  2. package/dist/index.d.mts +3 -3
  3. package/dist/index.d.ts +3 -3
  4. package/dist/index.js +2 -6
  5. package/dist/index.mjs +1 -5
  6. package/package.json +66 -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/dist/index.d.mts CHANGED
@@ -51,13 +51,13 @@ interface ICalculatorTotalPage extends IPaginationParams {
51
51
  }
52
52
  interface ISTTParams extends IPaginationParams {
53
53
  }
54
- interface useShowHideColumnParameter<T, SR = unknown> {
54
+ interface UseShowHideColumnParameter<T, SR = unknown> {
55
55
  nameLocal?: string;
56
56
  /** nếu đầu vào là columns: Functions() thì nên dùng useMemo thì sẽ tối ưu hơn */
57
57
  columns: TColumnsTable<T, SR>;
58
58
  ignoreColumns?: string[];
59
59
  }
60
- interface useShowHideColumnReturn<T, SR> {
60
+ interface UseShowHideColumnReturn<T, SR> {
61
61
  hiddenColumns: string[];
62
62
  setHiddenColumns: Dispatch<SetStateAction<string[]>>;
63
63
  columnsTable: TColumnsTable<T, SR>;
@@ -68,4 +68,4 @@ interface useShowHideColumnReturn<T, SR> {
68
68
  handleChangeLocation?: (arr: string[]) => void;
69
69
  }
70
70
 
71
- export { type ICalculatorTotalPage, type IPaginationParams, type IReactTableGridCustom, type ISTTParams, type Maybe, ReactTableGridCustom, ReactTableGridCustom as ReactTableGridCustomDefault, type TColumnsTable, type useShowHideColumnParameter, type useShowHideColumnReturn };
71
+ export { type ICalculatorTotalPage, type IPaginationParams, type IReactTableGridCustom, type ISTTParams, type Maybe, ReactTableGridCustom, type TColumnsTable, type UseShowHideColumnParameter, type UseShowHideColumnReturn };
package/dist/index.d.ts CHANGED
@@ -51,13 +51,13 @@ interface ICalculatorTotalPage extends IPaginationParams {
51
51
  }
52
52
  interface ISTTParams extends IPaginationParams {
53
53
  }
54
- interface useShowHideColumnParameter<T, SR = unknown> {
54
+ interface UseShowHideColumnParameter<T, SR = unknown> {
55
55
  nameLocal?: string;
56
56
  /** nếu đầu vào là columns: Functions() thì nên dùng useMemo thì sẽ tối ưu hơn */
57
57
  columns: TColumnsTable<T, SR>;
58
58
  ignoreColumns?: string[];
59
59
  }
60
- interface useShowHideColumnReturn<T, SR> {
60
+ interface UseShowHideColumnReturn<T, SR> {
61
61
  hiddenColumns: string[];
62
62
  setHiddenColumns: Dispatch<SetStateAction<string[]>>;
63
63
  columnsTable: TColumnsTable<T, SR>;
@@ -68,4 +68,4 @@ interface useShowHideColumnReturn<T, SR> {
68
68
  handleChangeLocation?: (arr: string[]) => void;
69
69
  }
70
70
 
71
- export { type ICalculatorTotalPage, type IPaginationParams, type IReactTableGridCustom, type ISTTParams, type Maybe, ReactTableGridCustom, ReactTableGridCustom as ReactTableGridCustomDefault, type TColumnsTable, type useShowHideColumnParameter, type useShowHideColumnReturn };
71
+ export { type ICalculatorTotalPage, type IPaginationParams, type IReactTableGridCustom, type ISTTParams, type Maybe, ReactTableGridCustom, type TColumnsTable, type UseShowHideColumnParameter, type UseShowHideColumnReturn };
package/dist/index.js CHANGED
@@ -1,5 +1,4 @@
1
1
  "use strict";
2
- "use client";
3
2
  var __defProp = Object.defineProperty;
4
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -21,8 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
21
20
  // src/index.ts
22
21
  var index_exports = {};
23
22
  __export(index_exports, {
24
- ReactTableGridCustom: () => ReactTableGridCustom,
25
- ReactTableGridCustomDefault: () => ReactTableGridCustom_default
23
+ ReactTableGridCustom: () => ReactTableGridCustom
26
24
  });
27
25
  module.exports = __toCommonJS(index_exports);
28
26
 
@@ -409,9 +407,7 @@ var ReactTableGridCustomInner = ({
409
407
  var ReactTableGridCustom = (0, import_react3.memo)(
410
408
  ReactTableGridCustomInner
411
409
  );
412
- var ReactTableGridCustom_default = ReactTableGridCustom;
413
410
  // Annotate the CommonJS export names for ESM import in node:
414
411
  0 && (module.exports = {
415
- ReactTableGridCustom,
416
- ReactTableGridCustomDefault
412
+ ReactTableGridCustom
417
413
  });
package/dist/index.mjs CHANGED
@@ -1,5 +1,3 @@
1
- "use client";
2
-
3
1
  // src/ReactTableGridCustom.tsx
4
2
  import { Checkbox, Pagination } from "@mantine/core";
5
3
 
@@ -383,8 +381,6 @@ var ReactTableGridCustomInner = ({
383
381
  var ReactTableGridCustom = memo(
384
382
  ReactTableGridCustomInner
385
383
  );
386
- var ReactTableGridCustom_default = ReactTableGridCustom;
387
384
  export {
388
- ReactTableGridCustom,
389
- ReactTableGridCustom_default as ReactTableGridCustomDefault
385
+ ReactTableGridCustom
390
386
  };
package/package.json CHANGED
@@ -1,67 +1,66 @@
1
- {
2
- "name": "@mkt-loitd/react-table-grid-custom",
3
- "version": "1.0.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.2",
4
+ "description": "React Table Grid Custom component",
5
+ "license": "ISC",
6
+ "private": false,
7
+ "publishConfig": {
8
+ "access": "public"
9
+ },
10
+ "main": "dist/index.cjs",
11
+ "module": "dist/index.js",
12
+ "types": "dist/index.d.ts",
13
+ "exports": {
14
+ ".": {
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
+ "repository": {
58
+ "type": "git",
59
+ "url": "git+ssh://git@github.com/loitd140201/react-table.git"
60
+ },
61
+ "bugs": {
62
+ "url": "https://github.com/loitd140201/react-table/issues"
63
+ },
64
+ "homepage": "https://github.com/loitd140201/react-table#readme",
65
+ "author": ""
66
+ }