react-flexi-datatable 1.0.3 → 1.0.6
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/LICENSE +21 -0
- package/README.md +373 -143
- package/dist/index.cjs +3 -4
- package/dist/index.js +685 -878
- package/package.json +56 -56
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Shubham Maurya
|
|
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
CHANGED
|
@@ -1,143 +1,373 @@
|
|
|
1
|
-
# react-flexi-datatable 🚀
|
|
2
|
-
|
|
3
|
-
A feature-rich, interactive, highly configurable, and responsive React data table component built with Tailwind CSS and Lucide icons.
|
|
4
|
-
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
## 📦 Installation
|
|
8
|
-
|
|
9
|
-
Install `react-flexi-datatable` in your React application:
|
|
10
|
-
|
|
11
|
-
```bash
|
|
12
|
-
# Using npm
|
|
13
|
-
npm install react-flexi-datatable
|
|
14
|
-
|
|
15
|
-
# OR using yarn
|
|
16
|
-
yarn add react-flexi-datatable
|
|
17
|
-
|
|
18
|
-
# OR using pnpm
|
|
19
|
-
pnpm add react-flexi-datatable
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
---
|
|
23
|
-
|
|
24
|
-
## 💻 Quick Start & Usage
|
|
25
|
-
|
|
26
|
-
Import `DataTable` and the bundled CSS file in your React application:
|
|
27
|
-
|
|
28
|
-
```jsx
|
|
29
|
-
import React, { useState } from "react";
|
|
30
|
-
import DataTable from "react-flexi-datatable";
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
searchable: true, // Enable global search bar
|
|
36
|
-
filterable: true, // Enable dropdown filter menu
|
|
37
|
-
sortable: true, // Enable column header sorting
|
|
38
|
-
pagination: true, // Enable pagination footer
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
],
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
1
|
+
# react-flexi-datatable 🚀
|
|
2
|
+
|
|
3
|
+
A feature-rich, interactive, highly configurable, and responsive React data table component built with Tailwind CSS and Lucide icons.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## 📦 Installation
|
|
8
|
+
|
|
9
|
+
Install `react-flexi-datatable` in your React application:
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
# Using npm
|
|
13
|
+
npm install react-flexi-datatable
|
|
14
|
+
|
|
15
|
+
# OR using yarn
|
|
16
|
+
yarn add react-flexi-datatable
|
|
17
|
+
|
|
18
|
+
# OR using pnpm
|
|
19
|
+
pnpm add react-flexi-datatable
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## 💻 Quick Start & Usage
|
|
25
|
+
|
|
26
|
+
Import `DataTable` and the bundled CSS file in your React application:
|
|
27
|
+
|
|
28
|
+
```jsx
|
|
29
|
+
import React, { useState } from "react";
|
|
30
|
+
import DataTable from "react-flexi-datatable";
|
|
31
|
+
|
|
32
|
+
const tableConfig = {
|
|
33
|
+
title: "User Directory",
|
|
34
|
+
theme: "default", // Options: "default", "dark", "indigo", "emerald", "slate", "blue", OR custom object: { header: "...", footer: "...", toolbar: "..." },
|
|
35
|
+
searchable: true, // Enable global search bar
|
|
36
|
+
filterable: true, // Enable dropdown filter menu
|
|
37
|
+
sortable: true, // Enable column header sorting
|
|
38
|
+
pagination: true, // Enable pagination footer
|
|
39
|
+
topPagination: false, // Enable both top & bottom pagination
|
|
40
|
+
columnVisibility: true, // Enable column visibility toggle menu
|
|
41
|
+
selectable: true, // Enable row checkboxes
|
|
42
|
+
keyboardNavigation: true,// Enable arrow key grid navigation
|
|
43
|
+
exportable: true, // Enable CSV export button
|
|
44
|
+
bulkEditable: true, // Enable bulk edit mode
|
|
45
|
+
dropcolumn: true, // Enable drag column header to hide drop zone
|
|
46
|
+
columnordering: true, // Enable drag & drop column reordering
|
|
47
|
+
columnwidth: true, // Enable column with changes
|
|
48
|
+
tableWidth: "100%", // Enable table width changes
|
|
49
|
+
tableHeight: "auto", // Enable table height changes
|
|
50
|
+
tabledatavertivallscroll: true, // Enable table vertically scroll
|
|
51
|
+
tabledatahorizontalscroll: true, // Enable table hozizontally scroll
|
|
52
|
+
pageSize: 5,
|
|
53
|
+
pageSizeOptions: [5, 10, 20],
|
|
54
|
+
filters: [
|
|
55
|
+
{
|
|
56
|
+
key: "status",
|
|
57
|
+
label: "Status",
|
|
58
|
+
type: "select",
|
|
59
|
+
options: [
|
|
60
|
+
{ label: "All", value: "all" },
|
|
61
|
+
{ label: "Active", value: "Active" },
|
|
62
|
+
{ label: "Inactive", value: "Inactive" },
|
|
63
|
+
],
|
|
64
|
+
},
|
|
65
|
+
],
|
|
66
|
+
columns: [
|
|
67
|
+
{
|
|
68
|
+
key: "name",
|
|
69
|
+
label: "Name",
|
|
70
|
+
visible: true,
|
|
71
|
+
sortable: true,
|
|
72
|
+
searchable: true,
|
|
73
|
+
editable: true,
|
|
74
|
+
width: 260,
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
key: "email",
|
|
78
|
+
label: "Email",
|
|
79
|
+
visible: true,
|
|
80
|
+
sortable: true,
|
|
81
|
+
searchable: true,
|
|
82
|
+
editable: true,
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
key: "role",
|
|
86
|
+
label: "Role",
|
|
87
|
+
visible: true,
|
|
88
|
+
sortable: true,
|
|
89
|
+
searchable: true,
|
|
90
|
+
editable: true,
|
|
91
|
+
type: "select",
|
|
92
|
+
options: ["Admin", "Editor", "User"],
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
key: "status",
|
|
96
|
+
label: "Status",
|
|
97
|
+
visible: true,
|
|
98
|
+
sortable: true,
|
|
99
|
+
searchable: true,
|
|
100
|
+
editable: true,
|
|
101
|
+
type: "select",
|
|
102
|
+
options: ["Active", "Inactive"],
|
|
103
|
+
},
|
|
104
|
+
],
|
|
105
|
+
actions: { view: true, edit: true, delete: true },
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
export default function App() {
|
|
109
|
+
const [data, setData] = useState([
|
|
110
|
+
{
|
|
111
|
+
id: 1,
|
|
112
|
+
name: "Aarav Sharma",
|
|
113
|
+
email: "aarav@example.com",
|
|
114
|
+
role: "Admin",
|
|
115
|
+
status: "Active",
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
id: 2,
|
|
119
|
+
name: "Priya Singh",
|
|
120
|
+
email: "priya@example.com",
|
|
121
|
+
role: "Editor",
|
|
122
|
+
status: "Active",
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
id: 3,
|
|
126
|
+
name: "Rahul Verma",
|
|
127
|
+
email: "rahul@example.com",
|
|
128
|
+
role: "User",
|
|
129
|
+
status: "Inactive",
|
|
130
|
+
},
|
|
131
|
+
]);
|
|
132
|
+
|
|
133
|
+
return (
|
|
134
|
+
<main className="p-6 max-w-7xl mx-auto">
|
|
135
|
+
<DataTable
|
|
136
|
+
config={tableConfig}
|
|
137
|
+
data={data}
|
|
138
|
+
onView={(row) => alert(`Viewing: ${row.name}`)}
|
|
139
|
+
onEdit={(updatedRow) => {
|
|
140
|
+
setData((prev) =>
|
|
141
|
+
prev.map((item) => (item.id === updatedRow.id ? updatedRow : item)),
|
|
142
|
+
);
|
|
143
|
+
}}
|
|
144
|
+
onBulkEdit={(ids, changes) =>
|
|
145
|
+
console.log("Bulk updated IDs:", ids, changes)
|
|
146
|
+
}
|
|
147
|
+
onDelete={(deletedRow) => {
|
|
148
|
+
setData((prev) => prev.filter((item) => item.id !== deletedRow.id));
|
|
149
|
+
}}
|
|
150
|
+
/>
|
|
151
|
+
</main>
|
|
152
|
+
);
|
|
153
|
+
}
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
---
|
|
157
|
+
|
|
158
|
+
## ✨ Complete Feature Breakdown
|
|
159
|
+
|
|
160
|
+
### 🪟 1. Drag & Drop Column Reordering (`columnordering: true`)
|
|
161
|
+
|
|
162
|
+
- **Header Dragging**: Click and drag column headers left or right to reorder columns.
|
|
163
|
+
- **Menu Reordering**: Drag columns inside the **Columns** dropdown menu to reorder.
|
|
164
|
+
|
|
165
|
+
### 📐 2. Column Resizing (`width: number`)
|
|
166
|
+
|
|
167
|
+
- **Resizer Handle**: Hover over column borders and drag to resize column width.
|
|
168
|
+
- **Double-Click Reset**: Double-click resizer border to reset back to custom default width.
|
|
169
|
+
|
|
170
|
+
### 🗑️ 3. Drop Column to Hide (`dropcolumn: true`)
|
|
171
|
+
|
|
172
|
+
- **Dropzone**: Dragging a column header reveals a dropzone above the table. Drop to hide the column instantly.
|
|
173
|
+
|
|
174
|
+
### ✂️ 4. Character Truncation & Hover Tooltip
|
|
175
|
+
|
|
176
|
+
- **25-Character Truncation**: Text longer than 25 characters automatically truncates with `...`.
|
|
177
|
+
- **Hover Full Text**: Hovering over truncated text displays full text in a tooltip.
|
|
178
|
+
|
|
179
|
+
### ✏️ 5. Bulk Editing Mode (`bulkEditable: true`)
|
|
180
|
+
|
|
181
|
+
- **Multi-Row Selection**: Select rows via checkboxes and choose specific columns to bulk update simultaneously.
|
|
182
|
+
|
|
183
|
+
### 📝 6. Inline Row Editing
|
|
184
|
+
|
|
185
|
+
- **In-Place Editing**: Edit row data directly inside the table with input or select controls (`Enter` to save, `Escape` to cancel).
|
|
186
|
+
|
|
187
|
+
### 👁️ 7. Column Visibility & LocalStorage Persistence
|
|
188
|
+
|
|
189
|
+
- Toggle column visibility on/off. Layout order, widths, and visibility automatically persist in `localStorage`.
|
|
190
|
+
|
|
191
|
+
### 🔍 8. Global Search, Filtering & Sorting
|
|
192
|
+
|
|
193
|
+
- Real-time multi-column search, dynamic select dropdown filters, and multi-state column header sorting.
|
|
194
|
+
|
|
195
|
+
### ⌨️ 9. Keyboard Grid Navigation (`keyboardNavigation: true`)
|
|
196
|
+
|
|
197
|
+
- Navigate cells with `↑` `↓` `←` `→` arrow keys and activate controls with `Enter` / `Space`.
|
|
198
|
+
|
|
199
|
+
### 📥 10. CSV Export (`exportable: true`)
|
|
200
|
+
|
|
201
|
+
- Export active filtered and sorted table data to CSV with a single click.
|
|
202
|
+
|
|
203
|
+
---
|
|
204
|
+
|
|
205
|
+
## 🎨 Theme & Layout Configuration Scenarios
|
|
206
|
+
|
|
207
|
+
The table supports flexible configurations for dimensions (`tableWidth`, `tableHeight`), scrolling (`tabledatavertivallscroll`, `tabledatahorizontalscroll`), themes (`theme`, `headerTheme`, `footerTheme`), top pagination (`topPagination`), and component controls (`searchable`, `checkbox`, `columnwidth`).
|
|
208
|
+
|
|
209
|
+
### 🛠️ Complete Configuration Reference Table
|
|
210
|
+
|
|
211
|
+
#### 🔹 General & Theme Properties
|
|
212
|
+
|
|
213
|
+
| Option | Type | Default | Description |
|
|
214
|
+
| :------------- | :------------------ | :---------- | :------------------------------------------------------------------------------------------------------------------- |
|
|
215
|
+
| `title` | `string` | `""` | Table title text in top toolbar |
|
|
216
|
+
| `theme` | `string` / `Object` | `"default"` | Preset (`"default"`, `"dark"`, `"indigo"`, `"emerald"`, `"slate"`, `"blue"`) or custom `{ header, footer, toolbar }` |
|
|
217
|
+
| `headerTheme` | `string` | `undefined` | Custom Tailwind classes for table header `<thead>` |
|
|
218
|
+
| `footerTheme` | `string` | `undefined` | Custom Tailwind classes for footer pagination bar |
|
|
219
|
+
| `toolbarTheme` | `string` | `undefined` | Custom Tailwind classes for top toolbar container |
|
|
220
|
+
|
|
221
|
+
#### 🔹 Layout Dimensions & Scrolling
|
|
222
|
+
|
|
223
|
+
| Option | Type | Default | Description |
|
|
224
|
+
| :-------------------------- | :------------------ | :------- | :---------------------------------------------------------------- |
|
|
225
|
+
| `tableWidth` | `string` / `number` | `"100%"` | Custom table width (e.g., `"100%"`, `"900px"`, `900`) |
|
|
226
|
+
| `tableHeight` | `string` / `number` | `"auto"` | Custom table viewport height (e.g., `"350px"`, `350`, `"auto"`) |
|
|
227
|
+
| `tabledatavertivallscroll` | `boolean` | `true` | Enable vertical scrolling with sticky header inside height window |
|
|
228
|
+
| `tabledatahorizontalscroll` | `boolean` | `true` | Enable horizontal scrolling for wide columns |
|
|
229
|
+
|
|
230
|
+
#### 🔹 Search, Filtering & Sorting
|
|
231
|
+
|
|
232
|
+
| Option | Type | Default | Description |
|
|
233
|
+
| :----------- | :-------- | :---------- | :---------------------------------------------------------------------------------------------------- |
|
|
234
|
+
| `searchable` | `boolean` | `true` | Show / hide global search input box |
|
|
235
|
+
| `filterable` | `boolean` | `true` | Show / hide Filter button menu |
|
|
236
|
+
| `filters` | `Array` | `undefined` | Filter array (`[{ key, label, type, options }]`). If commented out/undefined, Filter button is hidden |
|
|
237
|
+
| `sortable` | `boolean` | `true` | Enable / disable column header sorting |
|
|
238
|
+
|
|
239
|
+
#### 🔹 Pagination Controls
|
|
240
|
+
|
|
241
|
+
| Option | Type | Default | Description |
|
|
242
|
+
| :----------------- | :-------- | :------------ | :------------------------------------------------------- |
|
|
243
|
+
| `pagination` | `boolean` | `true` | Enable / disable table pagination |
|
|
244
|
+
| `topPagination` | `boolean` | `false` | Show top pagination bar in addition to bottom pagination |
|
|
245
|
+
| `bottomPagination` | `boolean` | `true` | Show bottom pagination bar |
|
|
246
|
+
| `pageSize` | `number` | `10` | Initial number of records shown per page |
|
|
247
|
+
| `pageSizeOptions` | `Array` | `[5, 10, 20]` | Page size select dropdown options |
|
|
248
|
+
|
|
249
|
+
#### 🔹 Selection, Bulk Actions & Export
|
|
250
|
+
|
|
251
|
+
| Option | Type | Default | Description |
|
|
252
|
+
| :------------------------ | :-------- | :------ | :----------------------------------------------------------- |
|
|
253
|
+
| `checkbox` / `selectable` | `boolean` | `true` | Show / hide row selection checkboxes column |
|
|
254
|
+
| `bulkEditable` | `boolean` | `true` | Enable / disable Bulk Edit mode button and selection toolbar |
|
|
255
|
+
| `keyboardNavigation` | `boolean` | `true` | Enable grid navigation with `↑` `↓` `←` `→` arrow keys |
|
|
256
|
+
| `exportable` | `boolean` | `true` | Enable / disable CSV export button |
|
|
257
|
+
|
|
258
|
+
#### 🔹 Column Drag, Order & Resizing
|
|
259
|
+
|
|
260
|
+
| Option | Type | Default | Description |
|
|
261
|
+
| :----------------- | :-------- | :------ | :---------------------------------------------------------------- |
|
|
262
|
+
| `columnVisibility` | `boolean` | `true` | Show / hide Columns dropdown menu (visibility & reorder controls) |
|
|
263
|
+
| `columnordering` | `boolean` | `true` | Enable / disable drag & drop column header reordering |
|
|
264
|
+
| `dropcolumn` | `boolean` | `true` | Enable / disable dropzone to hide dragged columns |
|
|
265
|
+
| `columnwidth` | `boolean` | `true` | Enable / disable column header width drag resizers |
|
|
266
|
+
|
|
267
|
+
#### 🔹 Column Definition Schema (`columns[]`)
|
|
268
|
+
|
|
269
|
+
| Field | Type | Description |
|
|
270
|
+
| :----------- | :--------- | :----------------------------------------------------------- |
|
|
271
|
+
| `key` | `string` | Data field key in row object |
|
|
272
|
+
| `label` | `string` | Display column header text |
|
|
273
|
+
| `visible` | `boolean` | Show or hide column initially |
|
|
274
|
+
| `sortable` | `boolean` | Enable sorting for this specific column |
|
|
275
|
+
| `searchable` | `boolean` | Include this column in global search |
|
|
276
|
+
| `editable` | `boolean` | Allow inline and bulk editing for this column |
|
|
277
|
+
| `width` | `number` | Initial default column width in pixels (e.g. `200`) |
|
|
278
|
+
| `type` | `string` | Form input type (`"text"`, `"select"`) |
|
|
279
|
+
| `options` | `Array` | Options array for select input type |
|
|
280
|
+
| `render` | `Function` | Custom cell render function `(val, row, index) => ReactNode` |
|
|
281
|
+
|
|
282
|
+
#### 🔹 Actions Column (`actions`)
|
|
283
|
+
|
|
284
|
+
| Field | Type | Description |
|
|
285
|
+
| :------- | :-------- | :-------------------------------------------------------- |
|
|
286
|
+
| `view` | `boolean` | Show View button (`Eye` icon) in actions column |
|
|
287
|
+
| `edit` | `boolean` | Show Inline Edit button (`Pencil` icon) in actions column |
|
|
288
|
+
| `delete` | `boolean` | Show Delete button (`Trash2` icon) in actions column |
|
|
289
|
+
|
|
290
|
+
---
|
|
291
|
+
|
|
292
|
+
### 📋 4 Configuration Scenario Examples
|
|
293
|
+
|
|
294
|
+
#### 1️⃣ Scenario 1: Fixed Height with Vertical Scroll & Sticky Header (Recommended for 10/20 Page Sizes)
|
|
295
|
+
|
|
296
|
+
Use this when you want a fixed container height (e.g. `350px`). When increasing page size, the table header stays pinned at the top while data rows scroll vertically inside.
|
|
297
|
+
|
|
298
|
+
```javascript
|
|
299
|
+
const config = {
|
|
300
|
+
title: "Users",
|
|
301
|
+
theme: "default",
|
|
302
|
+
tableWidth: "100%",
|
|
303
|
+
tableHeight: "350px", // Fixed viewport height
|
|
304
|
+
tabledatavertivallscroll: true, // Vertical scroll inside 350px
|
|
305
|
+
tabledatahorizontalscroll: true, // Horizontal scroll
|
|
306
|
+
pageSize: 5,
|
|
307
|
+
pageSizeOptions: [5, 10, 20],
|
|
308
|
+
// ...
|
|
309
|
+
};
|
|
310
|
+
```
|
|
311
|
+
|
|
312
|
+
#### 2️⃣ Scenario 2: Auto Height (Table Expands Naturally with Data)
|
|
313
|
+
|
|
314
|
+
Use this when you want the table height to grow dynamically with the number of rows (no vertical scrollbar inside card).
|
|
315
|
+
|
|
316
|
+
```javascript
|
|
317
|
+
const config = {
|
|
318
|
+
title: "Users",
|
|
319
|
+
theme: "default",
|
|
320
|
+
tableWidth: "100%",
|
|
321
|
+
tableHeight: "auto", // Grows automatically with rows
|
|
322
|
+
tabledatavertivallscroll: false, // Disables inner vertical scroll
|
|
323
|
+
tabledatahorizontalscroll: true,
|
|
324
|
+
pageSize: 5,
|
|
325
|
+
pageSizeOptions: [5, 10, 20],
|
|
326
|
+
// ...
|
|
327
|
+
};
|
|
328
|
+
```
|
|
329
|
+
|
|
330
|
+
#### 3️⃣ Scenario 3: Fixed Width & Fixed Height Container
|
|
331
|
+
|
|
332
|
+
Use this when you want to restrict both width and height (e.g. `800px` width and `300px` height).
|
|
333
|
+
|
|
334
|
+
```javascript
|
|
335
|
+
const config = {
|
|
336
|
+
title: "Users",
|
|
337
|
+
theme: "indigo", // Preset theme
|
|
338
|
+
tableWidth: "800px", // Fixed width
|
|
339
|
+
tableHeight: "300px", // Fixed height
|
|
340
|
+
tabledatavertivallscroll: true, // Vertical scroll inside 300px
|
|
341
|
+
tabledatahorizontalscroll: true, // Horizontal scroll inside 800px
|
|
342
|
+
pageSize: 5,
|
|
343
|
+
pageSizeOptions: [5, 10, 20],
|
|
344
|
+
// ...
|
|
345
|
+
};
|
|
346
|
+
```
|
|
347
|
+
|
|
348
|
+
#### 4️⃣ Scenario 4: Dark Mode / Custom Theme with Top & Bottom Pagination
|
|
349
|
+
|
|
350
|
+
Use this for dark mode styling with dual top and bottom pagination controls.
|
|
351
|
+
|
|
352
|
+
```javascript
|
|
353
|
+
const config = {
|
|
354
|
+
title: "Users",
|
|
355
|
+
theme: "dark", // Dark mode preset
|
|
356
|
+
topPagination: true, // Enable both top & bottom pagination
|
|
357
|
+
tableWidth: "100%",
|
|
358
|
+
tableHeight: "350px",
|
|
359
|
+
tabledatavertivallscroll: true,
|
|
360
|
+
tabledatahorizontalscroll: true,
|
|
361
|
+
pageSize: 5,
|
|
362
|
+
pageSizeOptions: [5, 10, 20],
|
|
363
|
+
// ...
|
|
364
|
+
};
|
|
365
|
+
```
|
|
366
|
+
|
|
367
|
+
---
|
|
368
|
+
|
|
369
|
+
## 📄 License
|
|
370
|
+
|
|
371
|
+
This project is open-source and available under the [MIT License](LICENSE).
|
|
372
|
+
Copyright (c) 2026 Shubham Maurya.
|
|
373
|
+
|