@mkt-loitd/react-table-grid-custom 1.2.6 → 1.2.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 +37 -57
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,54 +1,42 @@
|
|
|
1
|
-
@mkt-loitd/react-table-grid-custom
|
|
1
|
+
# @mkt-loitd/react-table-grid-custom
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@mkt-loitd/react-table-grid-custom)
|
|
4
|
+
[](https://www.npmjs.com/package/@mkt-loitd/react-table-grid-custom)
|
|
5
|
+
[](https://opensource.org/licenses/MIT)
|
|
4
6
|
|
|
5
|
-
|
|
7
|
+
A **flexible and customizable React Table Grid component** built with **TypeScript**, designed for displaying tabular data with custom columns, layouts, and rendering logic.
|
|
6
8
|
|
|
7
|
-
|
|
9
|
+
---
|
|
8
10
|
|
|
9
|
-
|
|
11
|
+
## ✨ Features
|
|
10
12
|
|
|
11
|
-
|
|
13
|
+
- ⚛️ Built for React
|
|
14
|
+
- 🧩 Fully customizable columns
|
|
15
|
+
- 📝 Support for custom cell render
|
|
16
|
+
- 📦 Lightweight & easy to integrate
|
|
17
|
+
- 🛠 Written in TypeScript
|
|
18
|
+
- 🔁 Supports both ESM and CJS
|
|
12
19
|
|
|
13
|
-
|
|
20
|
+
---
|
|
14
21
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
🔁 Supports both ESM and CJS
|
|
18
|
-
|
|
19
|
-
📦 Installation
|
|
20
|
-
|
|
21
|
-
Using npm:
|
|
22
|
+
## 📦 Installation
|
|
22
23
|
|
|
24
|
+
```bash
|
|
23
25
|
npm install @mkt-loitd/react-table-grid-custom
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
Using yarn:
|
|
27
|
-
|
|
26
|
+
# or
|
|
28
27
|
yarn add @mkt-loitd/react-table-grid-custom
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
Using pnpm:
|
|
32
|
-
|
|
28
|
+
# or
|
|
33
29
|
pnpm add @mkt-loitd/react-table-grid-custom
|
|
34
|
-
|
|
35
30
|
🚀 Basic Usage
|
|
31
|
+
tsx
|
|
32
|
+
Copy code
|
|
36
33
|
import React from 'react'
|
|
37
34
|
import { ReactTableGridCustom } from '@mkt-loitd/react-table-grid-custom'
|
|
38
35
|
|
|
39
36
|
const columns = [
|
|
40
|
-
{
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
},
|
|
44
|
-
{
|
|
45
|
-
key: 'email',
|
|
46
|
-
title: 'Email',
|
|
47
|
-
},
|
|
48
|
-
{
|
|
49
|
-
key: 'age',
|
|
50
|
-
title: 'Age',
|
|
51
|
-
},
|
|
37
|
+
{ key: 'name', title: 'Name' },
|
|
38
|
+
{ key: 'email', title: 'Email' },
|
|
39
|
+
{ key: 'age', title: 'Age' },
|
|
52
40
|
]
|
|
53
41
|
|
|
54
42
|
const data = [
|
|
@@ -57,24 +45,20 @@ const data = [
|
|
|
57
45
|
]
|
|
58
46
|
|
|
59
47
|
export default function App() {
|
|
60
|
-
return
|
|
61
|
-
<ReactTableGridCustom
|
|
62
|
-
columns={columns}
|
|
63
|
-
data={data}
|
|
64
|
-
rowKey="id"
|
|
65
|
-
/>
|
|
66
|
-
)
|
|
48
|
+
return <ReactTableGridCustom columns={columns} data={data} rowKey="id" />
|
|
67
49
|
}
|
|
68
|
-
|
|
69
50
|
🧱 Column Definition
|
|
51
|
+
ts
|
|
52
|
+
Copy code
|
|
70
53
|
interface Column {
|
|
71
|
-
key: string
|
|
72
|
-
title: string
|
|
73
|
-
width?: number | string
|
|
74
|
-
render?: (value: any, row: any, rowIndex: number) => React.ReactNode
|
|
54
|
+
key: string // Column key (unique)
|
|
55
|
+
title: string // Column header title
|
|
56
|
+
width?: number | string // Optional column width
|
|
57
|
+
render?: (value: any, row: any, rowIndex: number) => React.ReactNode // Custom cell render
|
|
75
58
|
}
|
|
76
|
-
|
|
77
|
-
|
|
59
|
+
Example with custom render
|
|
60
|
+
ts
|
|
61
|
+
Copy code
|
|
78
62
|
const columns = [
|
|
79
63
|
{
|
|
80
64
|
key: 'name',
|
|
@@ -89,7 +73,6 @@ const columns = [
|
|
|
89
73
|
),
|
|
90
74
|
},
|
|
91
75
|
]
|
|
92
|
-
|
|
93
76
|
📌 Props
|
|
94
77
|
Prop Type Required Description
|
|
95
78
|
columns Column[] ✅ Table column configuration
|
|
@@ -97,10 +80,11 @@ data any[] ✅ Data source
|
|
|
97
80
|
rowKey string ✅ Unique key for each row
|
|
98
81
|
className string ❌ Custom CSS class
|
|
99
82
|
style CSSProperties ❌ Inline styles
|
|
100
|
-
🎨 Styling
|
|
101
83
|
|
|
102
84
|
You can fully customize the table using your own CSS:
|
|
103
85
|
|
|
86
|
+
css
|
|
87
|
+
Copy code
|
|
104
88
|
.react-table-grid {
|
|
105
89
|
border: 1px solid #e5e7eb;
|
|
106
90
|
}
|
|
@@ -108,12 +92,9 @@ You can fully customize the table using your own CSS:
|
|
|
108
92
|
.react-table-grid-row:hover {
|
|
109
93
|
background-color: #f9fafb;
|
|
110
94
|
}
|
|
111
|
-
|
|
112
|
-
|
|
113
95
|
Or wrap it inside your design system (Tailwind, AntD, MUI, etc).
|
|
114
96
|
|
|
115
97
|
📂 Build Output
|
|
116
|
-
|
|
117
98
|
This package is built using tsup:
|
|
118
99
|
|
|
119
100
|
dist/index.esm.js – ES Module
|
|
@@ -123,7 +104,6 @@ dist/index.cjs.js – CommonJS
|
|
|
123
104
|
dist/index.d.ts – Type definitions
|
|
124
105
|
|
|
125
106
|
🧪 Compatibility
|
|
126
|
-
|
|
127
107
|
React >= 17
|
|
128
108
|
|
|
129
109
|
React DOM >= 17
|
|
@@ -131,9 +111,9 @@ React DOM >= 17
|
|
|
131
111
|
Node >= 16
|
|
132
112
|
|
|
133
113
|
🛠 Development
|
|
114
|
+
bash
|
|
115
|
+
Copy code
|
|
134
116
|
npm install
|
|
135
117
|
npm run build
|
|
136
|
-
|
|
137
118
|
📄 License
|
|
138
|
-
|
|
139
119
|
MIT © mkt-loitd
|