@pravinrd/awesome-grid 0.2.0
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 +164 -0
- package/dist-lib/awesome-grid.css +1 -0
- package/dist-lib/html2canvas.esm-CUkZERmf.cjs +22 -0
- package/dist-lib/html2canvas.esm-Dmi1NfiH.js +4871 -0
- package/dist-lib/index.cjs +25 -0
- package/dist-lib/index.es-DQYViHdZ.js +6682 -0
- package/dist-lib/index.es-DSWSDLnm.cjs +18 -0
- package/dist-lib/index.js +1467 -0
- package/dist-lib/jspdf.es.min-C0D3oDUy.cjs +193 -0
- package/dist-lib/jspdf.es.min-DVZuwoNv.js +9965 -0
- package/dist-lib/jspdf.plugin.autotable-A1eGW8GI.cjs +2 -0
- package/dist-lib/jspdf.plugin.autotable-D7eVZU2H.js +1084 -0
- package/dist-lib/purify.es-BpFm6ZGf.js +553 -0
- package/dist-lib/purify.es-Cv8QDpGd.cjs +2 -0
- package/dist-lib/vite.svg +1 -0
- package/package.json +46 -0
package/README.md
ADDED
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
# Awesome Grid React Component
|
|
2
|
+
|
|
3
|
+
Awesome Grid is a feature-rich, themeable React data grid/table with client-side sorting, filtering, grouping, totals, column visibility, drag-and-drop ordering, resizable columns, CSV/PDF export, and optional virtualization for large datasets. It also supports personalization stored in `localStorage`.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
- Client-side sorting, filtering, grouping, and totals
|
|
7
|
+
- Column visibility + Drag-and-Drop ordering
|
|
8
|
+
- Resizable columns with persistence
|
|
9
|
+
- CSV/PDF export
|
|
10
|
+
- Theme switcher (light/dark/purple)
|
|
11
|
+
- Virtualized rendering for large datasets (All rows mode)
|
|
12
|
+
- Date filtering with HTML5 date input
|
|
13
|
+
- Personalization stored in Web Storage (Local Storage)
|
|
14
|
+
|
|
15
|
+
## Install
|
|
16
|
+
```bash
|
|
17
|
+
npm install @pravinrd/awesome-grid
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Usage
|
|
21
|
+
```jsx
|
|
22
|
+
import { AwesomeGrid } from "@pravinrd/awesome-grid";
|
|
23
|
+
|
|
24
|
+
export default function App() {
|
|
25
|
+
return (
|
|
26
|
+
<AwesomeGrid
|
|
27
|
+
apiEndpoint="/api/orders"
|
|
28
|
+
rowKey="id"
|
|
29
|
+
theme="light"
|
|
30
|
+
currency="USD"
|
|
31
|
+
pageSizeOptions={[10, 25, 50, 100, 0]}
|
|
32
|
+
defaultPageSize={25}
|
|
33
|
+
dateFormat={{
|
|
34
|
+
locale: "en-US",
|
|
35
|
+
options: { year: "numeric", month: "2-digit", day: "2-digit" },
|
|
36
|
+
}}
|
|
37
|
+
dateSeparator="/"
|
|
38
|
+
computedColumns={[
|
|
39
|
+
{
|
|
40
|
+
key: "totalWithTax",
|
|
41
|
+
label: "Total + Tax",
|
|
42
|
+
formula: (row) => Number(row.total || 0) * 1.18,
|
|
43
|
+
},
|
|
44
|
+
]}
|
|
45
|
+
/>
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## Screenshots & GIFs
|
|
51
|
+
Theme selection
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
Filtering
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
Grouping drill-down
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
Column resizing
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
Drawer personalization
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
Virtualization
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
## API Contract (Expected Response Shape)
|
|
70
|
+
The component expects a JSON response with `data` and `columns`.
|
|
71
|
+
|
|
72
|
+
**Example response:**
|
|
73
|
+
```json
|
|
74
|
+
{
|
|
75
|
+
"columns": [
|
|
76
|
+
{
|
|
77
|
+
"key": "CustomerId",
|
|
78
|
+
"label": "Customer Id",
|
|
79
|
+
"format": null,
|
|
80
|
+
"type": "Int32"
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"key": "ContactName",
|
|
84
|
+
"label": "Contact Name",
|
|
85
|
+
"format": null,
|
|
86
|
+
"type": "String"
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"key": "City",
|
|
90
|
+
"label": "Living City",
|
|
91
|
+
"format": null,
|
|
92
|
+
"type": "String"
|
|
93
|
+
}
|
|
94
|
+
],
|
|
95
|
+
"data": [
|
|
96
|
+
{
|
|
97
|
+
"CustomerId": 1,
|
|
98
|
+
"ContactName": "Kiran Shah",
|
|
99
|
+
"City": "Patna",
|
|
100
|
+
"State": "Bihar",
|
|
101
|
+
"Country": "India",
|
|
102
|
+
"ZipCode": "800001",
|
|
103
|
+
"Approved": false,
|
|
104
|
+
"JoiningDate": "2024-07-01T14:33:39.8623856+05:30"
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"CustomerId": 2,
|
|
108
|
+
"ContactName": "Rohan Kulkarni",
|
|
109
|
+
"City": "Ahmedabad",
|
|
110
|
+
"State": "Gujarat",
|
|
111
|
+
"Country": "India",
|
|
112
|
+
"ZipCode": "380001",
|
|
113
|
+
"Approved": false,
|
|
114
|
+
"JoiningDate": "2022-06-06T14:33:39.8623899+05:30"
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"CustomerId": 3,
|
|
118
|
+
"ContactName": "Amit Mehta",
|
|
119
|
+
"City": "Jaipur",
|
|
120
|
+
"State": "Rajasthan",
|
|
121
|
+
"Country": "India",
|
|
122
|
+
"ZipCode": "302001",
|
|
123
|
+
"Approved": true,
|
|
124
|
+
"JoiningDate": "2021-07-24T14:33:39.8623901+05:30"
|
|
125
|
+
}
|
|
126
|
+
],
|
|
127
|
+
"totalCount": 200
|
|
128
|
+
}
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### Notes
|
|
132
|
+
- `columns` can be an array of strings or objects.
|
|
133
|
+
- String format: `["id", "customer_name", "order_date", "total"]`
|
|
134
|
+
- Object format: `{ key: "order_date", label: "Order Date" }`
|
|
135
|
+
- `data` is an array of objects; keys are normalized to `camelCase`.
|
|
136
|
+
- Date detection is automatic when values can be parsed as valid dates.
|
|
137
|
+
|
|
138
|
+
## Props
|
|
139
|
+
| Prop | Type | Default | Description |
|
|
140
|
+
| --- | --- | --- | --- |
|
|
141
|
+
| `apiEndpoint` | `string` | required | API URL that returns `data` + `columns`. |
|
|
142
|
+
| `rowKey` | `string` | required | Unique key field for each row (e.g., `id`). |
|
|
143
|
+
| `theme` | `"light" \| "dark" \| "purple"` | `"light"` | Theme for the table UI. |
|
|
144
|
+
| `currency` | `"INR" \| "USD"` | `"INR"` | Currency used for totals row formatting. |
|
|
145
|
+
| `computedColumns` | `Array<{ key, label, formula }>` | `[]` | Add computed columns from row data. |
|
|
146
|
+
| `pageSizeOptions` | `number[]` | `[50, 100, 500, 1000, 0]` | Page size choices; `0` means "All". |
|
|
147
|
+
| `defaultPageSize` | `number` | first option | Initial page size. Must exist in `pageSizeOptions`. |
|
|
148
|
+
| `dateFormat` | `{ locale, options }` | `en-US, {year,month,day}` | Intl date formatting options. |
|
|
149
|
+
| `dateSeparator` | `"/" \| "-"` | `"/"` | Separator between date parts. |
|
|
150
|
+
|
|
151
|
+
### `dateFormat.options.month` values
|
|
152
|
+
- `numeric` -> `1`
|
|
153
|
+
- `2-digit` -> `01`
|
|
154
|
+
- `short` -> `Jan`
|
|
155
|
+
- `long` -> `January`
|
|
156
|
+
- `narrow` -> `J`
|
|
157
|
+
|
|
158
|
+
## Export
|
|
159
|
+
```js
|
|
160
|
+
import { AwesomeGrid } from "@pravinrd/awesome-grid";
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
## License
|
|
164
|
+
MIT
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._container_dihwe_1{padding:12px;background:var(--gt-bg);border-radius:8px;position:relative;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--gt-text)}._themeLight_dihwe_10{--gt-bg: #f8f9fa;--gt-text: #212529;--gt-muted: #6c757d;--gt-border: #dee2e6;--gt-input-border: #ced4da;--gt-surface: #ffffff;--gt-surface-soft: #e9ecef;--gt-surface-soft-2: #f1f3f5;--gt-primary: #0d6efd;--gt-danger: #dc3545;--gt-success: #198754;--gt-warning: #fd7e14;--gt-overlay: rgba(255, 255, 255, .6);--gt-group-bg: #eef4ff;--gt-group-border: #cfe0ff;--gt-group-text: #244069}._themeDark_dihwe_29{--gt-bg: #111827;--gt-text: #e5e7eb;--gt-muted: #9ca3af;--gt-border: #374151;--gt-input-border: #4b5563;--gt-surface: #1f2937;--gt-surface-soft: #273346;--gt-surface-soft-2: #334155;--gt-primary: #60a5fa;--gt-danger: #f87171;--gt-success: #34d399;--gt-warning: #fbbf24;--gt-overlay: rgba(17, 24, 39, .55);--gt-group-bg: #1e293b;--gt-group-border: #334155;--gt-group-text: #bfdbfe}._themePurple_dihwe_48{--gt-bg: #f6f0ff;--gt-text: #2d1b4e;--gt-muted: #6f5c8f;--gt-border: #d4c5f6;--gt-input-border: #c8b3f1;--gt-surface: #ffffff;--gt-surface-soft: #efe6ff;--gt-surface-soft-2: #e7dbff;--gt-primary: #7c3aed;--gt-danger: #be185d;--gt-success: #0f766e;--gt-warning: #a16207;--gt-overlay: rgba(246, 240, 255, .6);--gt-group-bg: #ede2ff;--gt-group-border: #d7c3ff;--gt-group-text: #4c1d95}._headerRow_dihwe_67{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}._flexRow_dihwe_76{display:flex;align-items:center;gap:8px}._toolbarGroup_dihwe_82{width:100%}._dropdown_dihwe_86{position:relative}._buttonBase_dihwe_90{border:1px solid;border-radius:4px;font-size:14px;line-height:1.2;padding:10px 12px;cursor:pointer;background:var(--gt-surface);color:var(--gt-text)}._buttonPrimary_dihwe_101{color:var(--gt-primary);border-color:var(--gt-primary)}._buttonPrimary_dihwe_101:hover{background:var(--gt-primary);color:var(--gt-surface)}._buttonDanger_dihwe_111{color:var(--gt-danger);border-color:var(--gt-danger)}._buttonDanger_dihwe_111:hover{background:var(--gt-danger);color:var(--gt-surface)}._buttonMuted_dihwe_121{color:var(--gt-muted);border-color:var(--gt-muted)}._buttonMuted_dihwe_121:hover{background:var(--gt-muted);color:var(--gt-surface)}._buttonDelete_dihwe_131{color:#842029;background:#f8d7da;border-color:#f5c2c7}._buttonDelete_dihwe_131:disabled{opacity:.65;cursor:not-allowed}._dropdownToggle_dihwe_142:after{content:" ▾";font-size:10px}._dropdownMenu_dihwe_147{position:absolute;top:calc(100% + 4px);left:0;min-width:200px;list-style:none;margin:0;padding:4px 0;border:1px solid var(--gt-border);border-radius:4px;background:var(--gt-surface);box-shadow:0 4px 12px #0000001f;z-index:1200;display:none}._dropdownMenuOpen_dihwe_163{display:block}._menuItemButton_dihwe_167{width:100%;border:0;background:transparent;text-align:left;padding:12px 14px;cursor:pointer;font-size:14px}._themeDark_dihwe_29 ._menuItemButton_dihwe_167{color:#fff}._menuItemButton_dihwe_167:hover{background:var(--gt-surface-soft-2)}._labelMuted_dihwe_185{font-size:12px;color:var(--gt-muted)}._selectSmall_dihwe_190{border:1px solid var(--gt-input-border);border-radius:4px;padding:8px 10px;font-size:14px;background:var(--gt-surface);color:var(--gt-text)}._selectAuto_dihwe_199{width:auto}._switchRow_dihwe_203{display:inline-flex;align-items:center;gap:6px;margin-left:8px}._groupingSummary_dihwe_210{display:inline-flex;align-items:center;gap:8px;margin-left:8px}._relative_dihwe_217{position:relative}._overlay_dihwe_221{position:absolute;inset:0;background:var(--gt-overlay);z-index:10;pointer-events:none}._overlayInner_dihwe_229{position:absolute;left:50%;transform:translate(-50%);text-align:center}._spinner_dihwe_236{width:20px;height:20px;border:3px solid color-mix(in srgb,var(--gt-primary) 20%,transparent);border-top-color:var(--gt-primary);border-radius:50%;margin:0 auto 4px;animation:_spin_dihwe_236 1s linear infinite}@keyframes _spin_dihwe_236{to{transform:rotate(360deg)}}._tableWrap_dihwe_252{overflow-x:auto}._tableWrapAll_dihwe_256{max-height:70vh;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative;isolation:isolate}._table_dihwe_252{width:100%;border-collapse:collapse;table-layout:fixed;background:var(--gt-surface)}._table_dihwe_252 th,._table_dihwe_252 td{border:1px solid var(--gt-border);padding:6px 8px;font-size:14px}._tableHead_dihwe_278 th{background:var(--gt-surface-soft)}._thCellTop_dihwe_282{position:sticky;top:0;z-index:7;background:var(--gt-surface-soft);background-clip:padding-box}._thCellFilter_dihwe_290{position:sticky;z-index:6;background:var(--gt-surface-soft);background-clip:padding-box}._thInner_dihwe_297{display:flex;justify-content:space-between;align-items:center}._resizeHandle_dihwe_303{position:absolute;top:0;right:0;width:8px;height:100%;cursor:col-resize;touch-action:none}._resizeHandle_dihwe_303:after{content:"";position:absolute;right:2px;top:20%;width:2px;height:60%;border-radius:2px;background:color-mix(in srgb,var(--gt-muted) 40%,transparent)}._resizeHandle_dihwe_303:hover:after{background:var(--gt-primary)}._sortButton_dihwe_328{border:0;background:transparent;color:inherit;padding:0;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none}._iconMuted_dihwe_338{color:var(--gt-muted)}._inlineGroup_dihwe_342{display:flex;gap:4px;align-items:center;flex-wrap:nowrap;min-width:0}._input_dihwe_350{border:1px solid var(--gt-input-border);border-radius:4px;padding:8px 10px;font-size:14px;width:100%;box-sizing:border-box;background:var(--gt-surface);color:var(--gt-text);min-width:0}._rowInteractive_dihwe_362,._table_dihwe_252 tbody tr:hover{cursor:pointer}._rowInteractive_dihwe_362:focus-visible{outline:2px solid var(--gt-primary);outline-offset:-2px}._groupRow_dihwe_375 td{background:var(--gt-group-bg);border-color:var(--gt-group-border);padding:0;white-space:nowrap}._groupRowAnimated_dihwe_382{animation:_groupReveal_dihwe_1 .2s ease-out both}._groupChildRow_dihwe_386{animation:_rowReveal_dihwe_1 .22s ease-out both}._groupToggle_dihwe_390{width:100%;text-align:left;border:0;background:transparent;padding:8px 10px;font-weight:600;color:var(--gt-group-text);cursor:pointer;white-space:nowrap;overflow-x:auto;overflow-y:hidden}._groupToggle_dihwe_390:hover{background:color-mix(in srgb,var(--gt-group-bg) 88%,black 12%)}@keyframes _groupReveal_dihwe_1{0%{transform:translateY(-2px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes _rowReveal_dihwe_1{0%{transform:translateY(-4px);opacity:0}to{transform:translateY(0);opacity:1}}._groupMeta_dihwe_430{margin-left:12px;font-weight:700;color:var(--gt-muted);font-size:12px;white-space:nowrap}._checkbox_dihwe_438{width:14px;height:14px}._dangerText_dihwe_443{color:var(--gt-danger)}._tfoot_dihwe_447{font-weight:600}._tfoot_dihwe_447 td{background:var(--gt-surface-soft)}._textCenter_dihwe_455{text-align:center}._paginationWrap_dihwe_459{display:flex;justify-content:center;margin-top:12px}._pagination_dihwe_459{display:flex;list-style:none;margin:0;padding:0;gap:4px}._pageButton_dihwe_473{border:1px solid var(--gt-border);border-radius:4px;background:var(--gt-surface);color:var(--gt-text);padding:8px 10px;font-size:14px;cursor:pointer}._pageButton_dihwe_473:disabled{opacity:.6;cursor:not-allowed}._pageButtonActive_dihwe_488{background:var(--gt-primary);color:var(--gt-surface);border-color:var(--gt-primary)}._backdrop_dihwe_494{position:fixed;inset:0;z-index:1040}._drawer_dihwe_500{position:fixed;right:0;bottom:0;width:100%;height:78vh;background:var(--gt-surface);box-shadow:-6px 0 16px #00000026;z-index:1050;overflow-y:auto;padding:12px;border-top-left-radius:14px;border-top-right-radius:14px}._drawerTitle_dihwe_515{margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid var(--gt-border)}._drawerSection_dihwe_521{margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--gt-border)}._drawerSubtitle_dihwe_527{margin:0 0 8px;color:var(--gt-muted);font-size:13px;font-weight:600}._sectionToggle_dihwe_534{width:100%;border:0;background:transparent;padding:6px 0;display:flex;align-items:center;justify-content:space-between;font-weight:600;color:var(--gt-text);cursor:pointer}._sectionBody_dihwe_547{padding-top:4px}._drawerRow_dihwe_551{display:flex;align-items:center;gap:8px;padding:4px 0}._spacerAuto_dihwe_558{margin-left:auto}._successText_dihwe_562{color:var(--gt-success)}._warningText_dihwe_566{color:var(--gt-warning)}._srOnly_dihwe_570{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}@media (max-width: 767.98px){._headerRow_dihwe_67{align-items:stretch}._flexRow_dihwe_76{flex-wrap:wrap;width:100%}._switchRow_dihwe_203,._groupingSummary_dihwe_210{margin-left:0;width:100%}._dropdown_dihwe_86{width:100%}._dropdown_dihwe_86>._buttonBase_dihwe_90,._flexRow_dihwe_76>._buttonBase_dihwe_90,._flexRow_dihwe_76>._selectSmall_dihwe_190{width:100%}._table_dihwe_252 thead{display:none}._table_dihwe_252,._table_dihwe_252 tbody{display:block;width:100%}._table_dihwe_252 tbody tr:not(._groupRow_dihwe_375){display:block;margin-bottom:10px;border:1px solid var(--gt-border);border-radius:8px;overflow:hidden;background:var(--gt-surface)}._table_dihwe_252 tbody tr:not(._groupRow_dihwe_375) td{display:flex;justify-content:space-between;align-items:center;width:100%!important;border:0;border-bottom:1px solid var(--gt-border);padding:10px 12px;gap:10px}._table_dihwe_252 tbody tr:not(._groupRow_dihwe_375) td:last-child{border-bottom:0}._table_dihwe_252 tbody tr:not(._groupRow_dihwe_375) td:before{content:attr(data-label);font-weight:700;color:var(--gt-muted);flex:0 0 42%}._groupRow_dihwe_375 td:before{content:none}._pagination_dihwe_459{flex-wrap:wrap;justify-content:center}}@media (min-width: 768px){._toolbarGroup_dihwe_82{width:auto}._buttonBase_dihwe_90{font-size:12px;padding:6px 10px}._selectSmall_dihwe_190,._input_dihwe_350,._pageButton_dihwe_473{padding:4px 8px;font-size:12px}._drawer_dihwe_500{top:0;right:0;bottom:auto;width:280px;height:100%;border-top-left-radius:0;border-top-right-radius:0}}
|