react-auto-smart-table 1.0.0 โ 1.0.3
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 +68 -92
- package/dist/index.css +4 -2
- package/dist/index.css.map +1 -1
- package/dist/index.js +90 -68
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +95 -73
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -5
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Sunildas S
|
|
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,130 +1,106 @@
|
|
|
1
|
-
#
|
|
1
|
+
# react-auto-smart-table
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/react-auto-smart-table)
|
|
4
|
+
[](https://opensource.org/licenses/MIT)
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
A zero-configuration, intelligent React data table that automatically analyzes your data to provide a premium, production-ready dashboard experience out of the box.
|
|
6
7
|
|
|
7
|
-
|
|
8
|
+
|
|
8
9
|
|
|
9
|
-
|
|
10
|
+
## ๐ Why react-auto-smart-table?
|
|
10
11
|
|
|
11
|
-
|
|
12
|
+
Most data tables require extensive configurationโdefining columns, types, filters, and sorters manually. **react-auto-smart-table** flips the script. Just pass your JSON array, and it handles the heavy lifting.
|
|
12
13
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
-
|
|
16
|
-
-
|
|
17
|
-
-
|
|
18
|
-
- ๐๏ธ **Intelligent Filtering & Sorting:** Deep filtering built-in. Strings get fuzzy search, numbers get min/max range sliders, dates get calendar pickers.
|
|
19
|
-
- ๐ **Extreme Performance:** Built on `react-virtual`, instantly renders lists with thousands of objects without freezing the DOM.
|
|
20
|
-
- ๐ **Plugin SDK:** Inject your own custom Type Detectors and Cell Renderers. Want to render a bespoke Jira Ticket tag? Register a plugin in 3 lines of code.
|
|
21
|
-
|
|
22
|
-
---
|
|
14
|
+
- **๐ง Intelligent Schema Inference**: Automatically detects types (dates, currency, percentage, booleans, etc.) and formats them beautifully.
|
|
15
|
+
- **โก High Performance**: Built-in virtualization via `react-virtual` for handling thousands of records with zero lag.
|
|
16
|
+
- **๐จ Modern Dashboard UI**: A premium SaaS-ready design with adaptive column widths, card-based layouts, and rich visual hierarchy.
|
|
17
|
+
- **๐ Automatic Insights**: Generates meaningful charts and aggregations based on your data patterns.
|
|
18
|
+
- **๐ Extensible Plugin SDK**: Add custom cell renderers and detectors using a simple plugin system.
|
|
23
19
|
|
|
24
20
|
## ๐ฆ Installation
|
|
25
|
-
```bash
|
|
26
|
-
npm install react-smart-table
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
*(Note: Ensure you have `react`, `react-dom`, and `recharts` installed as peer dependencies)*
|
|
30
|
-
|
|
31
|
-
```bash
|
|
32
|
-
npm install react react-dom recharts
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
---
|
|
36
|
-
|
|
37
|
-
## ๐ฎ Interactive Playing (Demo)
|
|
38
|
-
|
|
39
|
-
Want to see `<SmartTable />` in action immediately? We have provided a live React playground.
|
|
40
21
|
|
|
41
22
|
```bash
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
23
|
+
npm install react-auto-smart-table
|
|
24
|
+
# or
|
|
25
|
+
yarn add react-auto-smart-table
|
|
45
26
|
```
|
|
46
27
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
## ๐ Basic Usage
|
|
50
|
-
|
|
51
|
-
The design philosophy is that one line of code builds a functional dashboard.
|
|
28
|
+
## ๐ ๏ธ Quick Start
|
|
52
29
|
|
|
53
30
|
```tsx
|
|
54
|
-
import
|
|
55
|
-
import { SmartTable } from 'react-smart-table';
|
|
31
|
+
import { SmartTable } from 'react-auto-smart-table';
|
|
56
32
|
|
|
57
|
-
const
|
|
58
|
-
{ id: 1, name: "
|
|
59
|
-
{ id: 2, name: "
|
|
60
|
-
// ...
|
|
33
|
+
const data = [
|
|
34
|
+
{ id: 1, name: "John Smith", amount: 1200.50, status: "Active", joined: "2024-01-15" },
|
|
35
|
+
{ id: 2, name: "Maria Garcia", amount: 450.00, status: "Pending", joined: "2024-02-10" },
|
|
36
|
+
// ...
|
|
61
37
|
];
|
|
62
38
|
|
|
63
|
-
|
|
39
|
+
function App() {
|
|
64
40
|
return (
|
|
65
41
|
<div style={{ height: '600px' }}>
|
|
66
|
-
|
|
67
|
-
|
|
42
|
+
<SmartTable
|
|
43
|
+
data={data}
|
|
44
|
+
sortable
|
|
45
|
+
filterable
|
|
46
|
+
insights
|
|
47
|
+
/>
|
|
68
48
|
</div>
|
|
69
49
|
);
|
|
70
50
|
}
|
|
71
51
|
```
|
|
72
52
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
## ๐ฅ Advanced Usage
|
|
53
|
+
## โจ Features
|
|
76
54
|
|
|
77
|
-
|
|
55
|
+
### 1. Intelligent Data Analytics
|
|
56
|
+
The table doesn't just display data; it understands it.
|
|
57
|
+
- **Auto-Formatting**: Recognizes "USD", "$", or large numbers and applies appropriate formatting.
|
|
58
|
+
- **Smart Labels**: Automatically transforms `camelCase` or `snake_case` keys into `Title Case` labels (e.g., `order_id` becomes `Order ID`).
|
|
59
|
+
- **Date Normalization**: Sophisticated detection for ISO strings, timestamps, and various date formats.
|
|
78
60
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
filterable={true}
|
|
84
|
-
pagination={true}
|
|
85
|
-
insights={true} // Triggers the Recharts visualizer
|
|
86
|
-
/>
|
|
87
|
-
```
|
|
61
|
+
### 2. Built-in Interactivity
|
|
62
|
+
- **Multi-column Sorting**: Interaction-rich headers with visual sort indicators (โ, โ, โ
).
|
|
63
|
+
- **Responsive Filtering**: Automatic generation of filter panels based on column types (text search for strings, toggles for booleans).
|
|
64
|
+
- **Pagination**: Smooth client-side pagination for manageable data chunks.
|
|
88
65
|
|
|
89
|
-
###
|
|
66
|
+
### 3. Insights Panel
|
|
67
|
+
The `insights` prop enables an analytics dashboard above the table that automatically visualizes:
|
|
68
|
+
- Distribution of categorical data (Bar charts).
|
|
69
|
+
- Trends over time (Time-series charts).
|
|
70
|
+
- Histograms for numeric value distributions.
|
|
90
71
|
|
|
91
|
-
|
|
72
|
+
### 4. Plugin System
|
|
73
|
+
Extend the table with your own logic:
|
|
92
74
|
|
|
93
75
|
```tsx
|
|
94
|
-
import {
|
|
95
|
-
|
|
96
|
-
const customStatusPlugin: SmartTablePlugin = {
|
|
97
|
-
detect: (key, sample) => {
|
|
98
|
-
// If column name has 'status', take it over.
|
|
99
|
-
if (key.toLowerCase() === 'status') return 'custom-status';
|
|
100
|
-
return null;
|
|
101
|
-
},
|
|
102
|
-
render: ({ value }) => {
|
|
103
|
-
const color = value === 'Failed' ? 'red' : 'green';
|
|
104
|
-
return <span style={{ color }}>{value}</span>;
|
|
105
|
-
}
|
|
106
|
-
}
|
|
76
|
+
import { currencyPlugin, percentagePlugin } from 'react-auto-smart-table';
|
|
107
77
|
|
|
108
|
-
|
|
109
|
-
|
|
78
|
+
<SmartTable
|
|
79
|
+
data={data}
|
|
80
|
+
plugins={[currencyPlugin, percentagePlugin]}
|
|
81
|
+
/>
|
|
110
82
|
```
|
|
111
83
|
|
|
112
|
-
|
|
84
|
+
## โ๏ธ Props
|
|
113
85
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
86
|
+
| Prop | Type | Default | Description |
|
|
87
|
+
| :--- | :--- | :--- | :--- |
|
|
88
|
+
| `data` | `any[]` | `[]` | The array of objects to display. |
|
|
89
|
+
| `sortable` | `boolean` | `false` | Enable/disable column sorting. |
|
|
90
|
+
| `filterable` | `boolean` | `false` | Enable/disable the interactive filter panel. |
|
|
91
|
+
| `insights` | `boolean` | `false` | Show auto-generated analytic charts. |
|
|
92
|
+
| `pagination`| `boolean` | `false` | Enable client-side pagination. |
|
|
93
|
+
| `pageSize` | `number` | `10` | Number of rows per page. |
|
|
94
|
+
| `plugins` | `Plugin[]` | `[]` | Array of plugins to extend detection/rendering. |
|
|
95
|
+
| `title` | `string` | `undefined`| Optional table header title. |
|
|
120
96
|
|
|
121
|
-
##
|
|
97
|
+
## ๐๏ธ Architecture
|
|
122
98
|
|
|
123
|
-
|
|
99
|
+
`react-auto-smart-table` is built with modern React patterns:
|
|
100
|
+
- **Virtualization**: Uses `react-virtual` for windowing long lists.
|
|
101
|
+
- **Styles**: Zero-dependency CSS-in-JS/External CSS for maximum compatibility.
|
|
102
|
+
- **Inference**: A custom analysis engine that samples data for high accuracy and performance.
|
|
124
103
|
|
|
125
|
-
|
|
126
|
-
2. Run `npm install`
|
|
127
|
-
3. Run Vitest Unit/Integration testing suit `npm run test`
|
|
104
|
+
## ๐ License
|
|
128
105
|
|
|
129
|
-
|
|
130
|
-
*Created carefully using rigorous step-based execution.*
|
|
106
|
+
MIT ยฉ [Sunildass](https://github.com/Sunildass)
|
package/dist/index.css
CHANGED
|
@@ -191,10 +191,12 @@
|
|
|
191
191
|
border-color: #cbd5e1;
|
|
192
192
|
}
|
|
193
193
|
.rst-table-container {
|
|
194
|
-
overflow
|
|
194
|
+
overflow: auto;
|
|
195
195
|
width: 100%;
|
|
196
196
|
max-width: 100%;
|
|
197
197
|
min-width: 0;
|
|
198
|
+
max-height: 600px;
|
|
199
|
+
position: relative;
|
|
198
200
|
}
|
|
199
201
|
.rst-table {
|
|
200
202
|
width: 100%;
|
|
@@ -203,7 +205,7 @@
|
|
|
203
205
|
border-spacing: 0;
|
|
204
206
|
background-color: var(--rst-card-bg);
|
|
205
207
|
text-align: left;
|
|
206
|
-
table-layout:
|
|
208
|
+
table-layout: fixed;
|
|
207
209
|
}
|
|
208
210
|
.rst-table thead,
|
|
209
211
|
.rst-table tbody {
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/styles.css"],"sourcesContent":["/* SmartTable Modern Premium Dashboard UI */\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');\n\n:root {\n --rst-primary: #6366f1;\n --rst-primary-soft: rgba(99, 102, 241, 0.1);\n --rst-bg: #f8fafc;\n --rst-card-bg: #ffffff;\n --rst-border: #e2e8f0;\n --rst-text-main: #1e293b;\n --rst-text-muted: #64748b;\n --rst-text-title: #0f172a;\n --rst-radius: 12px;\n --rst-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --rst-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n}\n\n.rst-container {\n font-family: 'Inter', system-ui, -apple-system, sans-serif;\n color: var(--rst-text-main);\n background-color: transparent;\n width: 100%;\n max-width: 1400px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n gap: 24px;\n min-width: 0;\n}\n\n/* Layout Sections */\n.rst-main-header {\n margin-bottom: 8px;\n}\n\n.rst-main-header h2 {\n font-size: 24px;\n font-weight: 700;\n color: var(--rst-text-title);\n margin: 0 0 4px 0;\n}\n\n.rst-main-header p {\n font-size: 14px;\n color: var(--rst-text-muted);\n margin: 0;\n}\n\n.rst-toggle-filters-btn {\n background: transparent;\n border: 1px solid var(--rst-border);\n color: var(--rst-text-muted);\n padding: 6px 12px;\n border-radius: 8px;\n font-size: 12px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.rst-toggle-filters-btn:hover {\n background: #f1f5f9;\n color: var(--rst-primary);\n border-color: var(--rst-primary);\n}\n\n.rst-summary-strip {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 4px;\n font-size: 13px;\n color: var(--rst-text-muted);\n font-weight: 500;\n}\n\n.rst-dot {\n color: #cbd5e1;\n}\n\n.rst-card {\n background: var(--rst-card-bg);\n border-radius: var(--rst-radius);\n border: 1px solid var(--rst-border);\n box-shadow: var(--rst-shadow);\n overflow: hidden;\n}\n\n/* Insights Panel Styles */\n.rst-insights-panel {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.rst-insights-panel h3 {\n font-size: 18px;\n font-weight: 600;\n color: var(--rst-text-title);\n margin: 0;\n}\n\n.rst-insights-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 24px;\n}\n\n.rst-insight-card {\n background: var(--rst-card-bg) !important;\n border: 1px solid var(--rst-border) !important;\n border-radius: var(--rst-radius) !important;\n padding: 16px !important;\n box-shadow: var(--rst-shadow) !important;\n transition: transform 0.2s ease, box-shadow 0.2s ease !important;\n max-width: 100%;\n box-sizing: border-box;\n}\n\n.rst-insight-card:hover {\n transform: translateY(-2px);\n box-shadow: var(--rst-shadow-lg) !important;\n}\n\n.rst-insight-card h4.rst-insight-title {\n font-size: 14px;\n font-weight: 600;\n color: var(--rst-text-title) !important;\n margin: 0 0 20px 0 !important;\n display: block;\n border-bottom: 1px solid #f1f5f9;\n padding-bottom: 12px;\n}\n\n/* Filter Panel Styles */\n.rst-filter-panel {\n padding: 24px;\n display: grid !important;\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n gap: 16px;\n}\n\n.rst-filter-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.rst-filter-group label {\n font-size: 13px;\n font-weight: 600;\n color: var(--rst-text-muted);\n}\n\n.rst-filter-group input {\n width: 100%;\n padding: 10px 12px;\n border: 1px solid var(--rst-border);\n border-radius: 8px;\n font-size: 14px;\n color: var(--rst-text-title);\n background: #fff;\n transition: all 0.2s ease;\n outline: none;\n}\n\n.rst-filter-group input:hover {\n border-color: #cbd5e1;\n}\n\n.rst-filter-group input:focus {\n border-color: var(--rst-primary);\n box-shadow: 0 0 0 3px var(--rst-primary-soft);\n}\n\n.rst-filter-clear-btn {\n grid-column: 1 / -1;\n justify-self: start;\n padding: 8px 16px;\n background-color: #f1f5f9;\n color: #475569;\n border: 1px solid var(--rst-border);\n border-radius: 8px;\n font-size: 13px;\n font-weight: 600;\n cursor: pointer;\n transition: background-color 0.15s;\n}\n\n.rst-filter-clear-btn:hover {\n background-color: #e2e8f0;\n}\n\n.rst-filter-range {\n display: flex;\n gap: 8px;\n}\n\n.rst-filter-range input {\n flex: 1;\n min-width: 0;\n}\n\n.rst-filter-toggle {\n padding: 10px 12px;\n border: 1px solid var(--rst-border);\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s;\n text-align: center;\n}\n\n.rst-filter-toggle:hover {\n border-color: #cbd5e1;\n}\n\n/* Table Container & Table Styles */\n.rst-table-container {\n overflow-x: auto;\n width: 100%;\n max-width: 100%;\n min-width: 0;\n}\n\n.rst-table {\n width: 100%;\n min-width: 800px; /* Reduced from 900px to be slightly more mobile-friendly */\n border-collapse: separate;\n border-spacing: 0;\n background-color: var(--rst-card-bg);\n text-align: left;\n table-layout: auto;\n}\n\n.rst-table thead, .rst-table tbody {\n width: 100%;\n}\n\n.rst-table thead {\n position: sticky;\n top: 0;\n z-index: 10;\n}\n\n.rst-table th {\n background-color: #f8fafc;\n color: var(--rst-text-muted);\n font-weight: 600;\n font-size: 12px;\n letter-spacing: 0.05em;\n padding: 12px 14px;\n border-bottom: 1px solid var(--rst-border);\n text-transform: uppercase;\n white-space: nowrap;\n}\n\n.rst-table td {\n padding: 12px 14px;\n border-bottom: 1px solid #f1f5f9;\n color: var(--rst-text-main);\n font-size: 14px;\n line-height: 1.5;\n transition: background-color 0.15s ease;\n}\n\n/* Adaptive Width Classes */\n.rst-col-xs { width: 60px; min-width: 60px; }\n.rst-col-sm { width: 120px; min-width: 120px; }\n.rst-col-md { width: 160px; min-width: 160px; }\n.rst-col-lg { width: 220px; min-width: 220px; }\n.rst-col-flex { min-width: 200px; }\n\n/* Content Control */\n.rst-td {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.rst-td-type-email, .rst-td-type-url, .rst-td-col-description {\n white-space: normal;\n word-break: break-word;\n}\n\n/* Numeric Columns Alignment */\n.rst-td-type-number, .rst-th-type-number,\n.rst-td-type-currency, .rst-th-type-currency,\n.rst-td-type-percentage, .rst-th-type-percentage,\n.rst-td-col-revenue, .rst-th-col-revenue,\n.rst-td-col-amount, .rst-th-col-amount,\n.rst-td-col-price, .rst-th-col-price,\n.rst-td-col-score, .rst-th-col-score {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n\n.rst-th-type-number .rst-header-content,\n.rst-th-type-currency .rst-header-content,\n.rst-th-type-percentage .rst-header-content,\n.rst-th-col-revenue .rst-header-content,\n.rst-th-col-amount .rst-header-content,\n.rst-th-col-price .rst-header-content,\n.rst-th-col-score .rst-header-content {\n justify-content: flex-end;\n}\n\n/* Status Badges */\n.rst-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 48px;\n padding: 4px 10px;\n border-radius: 999px;\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n}\n\n.rst-badge-yes {\n background: #dcfce7;\n color: #166534;\n}\n\n.rst-badge-no {\n background: #fee2e2;\n color: #991b1b;\n}\n\n.rst-table tbody tr {\n transition: background-color 0.2s ease;\n}\n\n.rst-table tbody tr:nth-child(even) {\n background-color: #fafafa;\n}\n\n.rst-table tbody tr:hover {\n background-color: #f1f5f9;\n}\n\n/* Sort & Column Helpers */\n.rst-sortable {\n cursor: pointer;\n}\n\n.rst-sortable:hover {\n background-color: #f1f5f9;\n color: var(--rst-primary);\n}\n\n.rst-sort-icon {\n font-size: 10px;\n margin-left: 6px;\n opacity: 0.5;\n transition: opacity 0.2s, color 0.2s;\n}\n\n.rst-sort-active .rst-sort-icon {\n opacity: 1;\n color: var(--rst-primary);\n}\n\n/* Pagination Styles */\n.rst-pagination {\n padding: 16px 24px;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: 16px;\n background-color: #fff;\n border-top: 1px solid var(--rst-border);\n}\n\n.rst-pagination button {\n background-color: #ffffff;\n border: 1px solid var(--rst-border);\n color: #475569;\n font-weight: 500;\n padding: 8px 14px;\n border-radius: 8px;\n font-size: 13px;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.rst-pagination button:hover:not(:disabled) {\n background-color: #f1f5f9;\n border-color: #cbd5e1;\n}\n\n.rst-pagination button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: #f8fafc;\n}\n\n.rst-pagination span {\n font-size: 13px;\n font-weight: 500;\n color: var(--rst-text-muted);\n}\n\n/* Mobile/Desktop Stacking Rules */\n@media (max-width: 800px) {\n .rst-container {\n padding: 0;\n max-width: 100%;\n overflow: hidden;\n }\n \n .rst-insights-grid {\n grid-template-columns: 1fr;\n gap: 16px;\n width: 100%;\n }\n \n .rst-insight-card {\n padding: 12px !important;\n }\n \n .rst-filter-panel {\n padding: 12px;\n grid-template-columns: 1fr;\n }\n \n .rst-summary-strip {\n font-size: 11px;\n gap: 4px;\n }\n}\n\n/* Empty State */\n.rst-empty {\n padding: 64px;\n text-align: center;\n color: var(--rst-text-muted);\n background-color: var(--rst-card-bg);\n border-radius: var(--rst-radius);\n border: 2px dashed var(--rst-border);\n font-size: 15px;\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../src/styles.css"],"sourcesContent":["/* SmartTable Modern Premium Dashboard UI */\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');\n\n:root {\n --rst-primary: #6366f1;\n --rst-primary-soft: rgba(99, 102, 241, 0.1);\n --rst-bg: #f8fafc;\n --rst-card-bg: #ffffff;\n --rst-border: #e2e8f0;\n --rst-text-main: #1e293b;\n --rst-text-muted: #64748b;\n --rst-text-title: #0f172a;\n --rst-radius: 12px;\n --rst-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --rst-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n}\n\n.rst-container {\n font-family: 'Inter', system-ui, -apple-system, sans-serif;\n color: var(--rst-text-main);\n background-color: transparent;\n width: 100%;\n max-width: 1400px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n gap: 24px;\n min-width: 0;\n}\n\n/* Layout Sections */\n.rst-main-header {\n margin-bottom: 8px;\n}\n\n.rst-main-header h2 {\n font-size: 24px;\n font-weight: 700;\n color: var(--rst-text-title);\n margin: 0 0 4px 0;\n}\n\n.rst-main-header p {\n font-size: 14px;\n color: var(--rst-text-muted);\n margin: 0;\n}\n\n.rst-toggle-filters-btn {\n background: transparent;\n border: 1px solid var(--rst-border);\n color: var(--rst-text-muted);\n padding: 6px 12px;\n border-radius: 8px;\n font-size: 12px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.rst-toggle-filters-btn:hover {\n background: #f1f5f9;\n color: var(--rst-primary);\n border-color: var(--rst-primary);\n}\n\n.rst-summary-strip {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 4px;\n font-size: 13px;\n color: var(--rst-text-muted);\n font-weight: 500;\n}\n\n.rst-dot {\n color: #cbd5e1;\n}\n\n.rst-card {\n background: var(--rst-card-bg);\n border-radius: var(--rst-radius);\n border: 1px solid var(--rst-border);\n box-shadow: var(--rst-shadow);\n overflow: hidden;\n}\n\n/* Insights Panel Styles */\n.rst-insights-panel {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.rst-insights-panel h3 {\n font-size: 18px;\n font-weight: 600;\n color: var(--rst-text-title);\n margin: 0;\n}\n\n.rst-insights-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 24px;\n}\n\n.rst-insight-card {\n background: var(--rst-card-bg) !important;\n border: 1px solid var(--rst-border) !important;\n border-radius: var(--rst-radius) !important;\n padding: 16px !important;\n box-shadow: var(--rst-shadow) !important;\n transition: transform 0.2s ease, box-shadow 0.2s ease !important;\n max-width: 100%;\n box-sizing: border-box;\n}\n\n.rst-insight-card:hover {\n transform: translateY(-2px);\n box-shadow: var(--rst-shadow-lg) !important;\n}\n\n.rst-insight-card h4.rst-insight-title {\n font-size: 14px;\n font-weight: 600;\n color: var(--rst-text-title) !important;\n margin: 0 0 20px 0 !important;\n display: block;\n border-bottom: 1px solid #f1f5f9;\n padding-bottom: 12px;\n}\n\n/* Filter Panel Styles */\n.rst-filter-panel {\n padding: 24px;\n display: grid !important;\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n gap: 16px;\n}\n\n.rst-filter-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.rst-filter-group label {\n font-size: 13px;\n font-weight: 600;\n color: var(--rst-text-muted);\n}\n\n.rst-filter-group input {\n width: 100%;\n padding: 10px 12px;\n border: 1px solid var(--rst-border);\n border-radius: 8px;\n font-size: 14px;\n color: var(--rst-text-title);\n background: #fff;\n transition: all 0.2s ease;\n outline: none;\n}\n\n.rst-filter-group input:hover {\n border-color: #cbd5e1;\n}\n\n.rst-filter-group input:focus {\n border-color: var(--rst-primary);\n box-shadow: 0 0 0 3px var(--rst-primary-soft);\n}\n\n.rst-filter-clear-btn {\n grid-column: 1 / -1;\n justify-self: start;\n padding: 8px 16px;\n background-color: #f1f5f9;\n color: #475569;\n border: 1px solid var(--rst-border);\n border-radius: 8px;\n font-size: 13px;\n font-weight: 600;\n cursor: pointer;\n transition: background-color 0.15s;\n}\n\n.rst-filter-clear-btn:hover {\n background-color: #e2e8f0;\n}\n\n.rst-filter-range {\n display: flex;\n gap: 8px;\n}\n\n.rst-filter-range input {\n flex: 1;\n min-width: 0;\n}\n\n.rst-filter-toggle {\n padding: 10px 12px;\n border: 1px solid var(--rst-border);\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s;\n text-align: center;\n}\n\n.rst-filter-toggle:hover {\n border-color: #cbd5e1;\n}\n\n/* Table Container & Table Styles */\n.rst-table-container {\n overflow: auto;\n width: 100%;\n max-width: 100%;\n min-width: 0;\n max-height: 600px; /* Height for virtualization to kick in */\n position: relative;\n}\n\n.rst-table {\n width: 100%;\n min-width: 800px;\n border-collapse: separate;\n border-spacing: 0;\n background-color: var(--rst-card-bg);\n text-align: left;\n table-layout: fixed; /* Fixed layout is more predictable for virtualization */\n}\n\n.rst-table thead, .rst-table tbody {\n width: 100%;\n}\n\n.rst-table thead {\n position: sticky;\n top: 0;\n z-index: 10;\n}\n\n.rst-table th {\n background-color: #f8fafc;\n color: var(--rst-text-muted);\n font-weight: 600;\n font-size: 12px;\n letter-spacing: 0.05em;\n padding: 12px 14px;\n border-bottom: 1px solid var(--rst-border);\n text-transform: uppercase;\n white-space: nowrap;\n}\n\n.rst-table td {\n padding: 12px 14px;\n border-bottom: 1px solid #f1f5f9;\n color: var(--rst-text-main);\n font-size: 14px;\n line-height: 1.5;\n transition: background-color 0.15s ease;\n}\n\n/* Adaptive Width Classes */\n.rst-col-xs { width: 60px; min-width: 60px; }\n.rst-col-sm { width: 120px; min-width: 120px; }\n.rst-col-md { width: 160px; min-width: 160px; }\n.rst-col-lg { width: 220px; min-width: 220px; }\n.rst-col-flex { min-width: 200px; }\n\n/* Content Control */\n.rst-td {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.rst-td-type-email, .rst-td-type-url, .rst-td-col-description {\n white-space: normal;\n word-break: break-word;\n}\n\n/* Numeric Columns Alignment */\n.rst-td-type-number, .rst-th-type-number,\n.rst-td-type-currency, .rst-th-type-currency,\n.rst-td-type-percentage, .rst-th-type-percentage,\n.rst-td-col-revenue, .rst-th-col-revenue,\n.rst-td-col-amount, .rst-th-col-amount,\n.rst-td-col-price, .rst-th-col-price,\n.rst-td-col-score, .rst-th-col-score {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n\n.rst-th-type-number .rst-header-content,\n.rst-th-type-currency .rst-header-content,\n.rst-th-type-percentage .rst-header-content,\n.rst-th-col-revenue .rst-header-content,\n.rst-th-col-amount .rst-header-content,\n.rst-th-col-price .rst-header-content,\n.rst-th-col-score .rst-header-content {\n justify-content: flex-end;\n}\n\n/* Status Badges */\n.rst-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 48px;\n padding: 4px 10px;\n border-radius: 999px;\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n}\n\n.rst-badge-yes {\n background: #dcfce7;\n color: #166534;\n}\n\n.rst-badge-no {\n background: #fee2e2;\n color: #991b1b;\n}\n\n.rst-table tbody tr {\n transition: background-color 0.2s ease;\n}\n\n.rst-table tbody tr:nth-child(even) {\n background-color: #fafafa;\n}\n\n.rst-table tbody tr:hover {\n background-color: #f1f5f9;\n}\n\n/* Sort & Column Helpers */\n.rst-sortable {\n cursor: pointer;\n}\n\n.rst-sortable:hover {\n background-color: #f1f5f9;\n color: var(--rst-primary);\n}\n\n.rst-sort-icon {\n font-size: 10px;\n margin-left: 6px;\n opacity: 0.5;\n transition: opacity 0.2s, color 0.2s;\n}\n\n.rst-sort-active .rst-sort-icon {\n opacity: 1;\n color: var(--rst-primary);\n}\n\n/* Pagination Styles */\n.rst-pagination {\n padding: 16px 24px;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: 16px;\n background-color: #fff;\n border-top: 1px solid var(--rst-border);\n}\n\n.rst-pagination button {\n background-color: #ffffff;\n border: 1px solid var(--rst-border);\n color: #475569;\n font-weight: 500;\n padding: 8px 14px;\n border-radius: 8px;\n font-size: 13px;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.rst-pagination button:hover:not(:disabled) {\n background-color: #f1f5f9;\n border-color: #cbd5e1;\n}\n\n.rst-pagination button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: #f8fafc;\n}\n\n.rst-pagination span {\n font-size: 13px;\n font-weight: 500;\n color: var(--rst-text-muted);\n}\n\n/* Mobile/Desktop Stacking Rules */\n@media (max-width: 800px) {\n .rst-container {\n padding: 0;\n max-width: 100%;\n overflow: hidden;\n }\n \n .rst-insights-grid {\n grid-template-columns: 1fr;\n gap: 16px;\n width: 100%;\n }\n \n .rst-insight-card {\n padding: 12px !important;\n }\n \n .rst-filter-panel {\n padding: 12px;\n grid-template-columns: 1fr;\n }\n \n .rst-summary-strip {\n font-size: 11px;\n gap: 4px;\n }\n}\n\n/* Empty State */\n.rst-empty {\n padding: 64px;\n text-align: center;\n color: var(--rst-text-muted);\n background-color: var(--rst-card-bg);\n border-radius: var(--rst-radius);\n border: 2px dashed var(--rst-border);\n font-size: 15px;\n}\n"],"mappings":"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","names":[]}
|
package/dist/index.js
CHANGED
|
@@ -585,7 +585,7 @@ var TableHeader = ({
|
|
|
585
585
|
};
|
|
586
586
|
|
|
587
587
|
// src/components/TableBody.tsx
|
|
588
|
-
var import_react4 =
|
|
588
|
+
var import_react4 = require("react");
|
|
589
589
|
|
|
590
590
|
// src/renderers/numberRenderer.tsx
|
|
591
591
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
@@ -719,7 +719,7 @@ var DefaultRenderer = ({ value }) => {
|
|
|
719
719
|
// src/plugins/currencyPlugin.tsx
|
|
720
720
|
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
721
721
|
var currencyPlugin = {
|
|
722
|
-
detect: (columnKey,
|
|
722
|
+
detect: (columnKey, _sample) => {
|
|
723
723
|
const lowerKey = columnKey.toLowerCase();
|
|
724
724
|
if (lowerKey.includes("amount") || lowerKey.includes("price") || lowerKey.includes("revenue")) {
|
|
725
725
|
return "currency";
|
|
@@ -743,7 +743,7 @@ var currencyPlugin = {
|
|
|
743
743
|
// src/plugins/percentagePlugin.tsx
|
|
744
744
|
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
745
745
|
var percentagePlugin = {
|
|
746
|
-
detect: (columnKey,
|
|
746
|
+
detect: (columnKey, _sample) => {
|
|
747
747
|
const lowerKey = columnKey.toLowerCase();
|
|
748
748
|
if (lowerKey.includes("percent") || lowerKey.includes("rate")) {
|
|
749
749
|
return "percentage";
|
|
@@ -813,76 +813,91 @@ var getCellRenderer = (type, registry) => {
|
|
|
813
813
|
};
|
|
814
814
|
|
|
815
815
|
// src/components/TableBody.tsx
|
|
816
|
-
var import_react_virtual = require("react-virtual");
|
|
816
|
+
var import_react_virtual = require("@tanstack/react-virtual");
|
|
817
817
|
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
818
|
-
var
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
818
|
+
var TableRow = ({ row, index, columns, schema, registry, style }) => {
|
|
819
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { className: "rst-row", style, children: columns.map((colKey) => {
|
|
820
|
+
const colInfo = schema[colKey];
|
|
821
|
+
const Renderer = getCellRenderer(colInfo.type, registry);
|
|
822
|
+
const widthClass = getColumnWidthClass(colKey, colInfo.type);
|
|
823
|
+
const val = row[colKey];
|
|
824
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
825
|
+
"td",
|
|
826
|
+
{
|
|
827
|
+
className: `rst-td rst-td-col-${colKey} rst-td-type-${colInfo.type} ${widthClass}`,
|
|
828
|
+
children: colInfo.type === "boolean" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
829
|
+
"span",
|
|
830
|
+
{
|
|
831
|
+
className: `rst-badge ${val ? "rst-badge-yes" : "rst-badge-no"}`,
|
|
832
|
+
children: val ? "Yes" : "No"
|
|
833
|
+
}
|
|
834
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Renderer, { value: val })
|
|
835
|
+
},
|
|
836
|
+
colKey
|
|
837
|
+
);
|
|
838
|
+
}) });
|
|
839
|
+
};
|
|
840
|
+
var TableBody = ({
|
|
841
|
+
data,
|
|
842
|
+
schema,
|
|
843
|
+
registry,
|
|
844
|
+
scrollRef
|
|
845
|
+
}) => {
|
|
846
|
+
const columns = (0, import_react4.useMemo)(() => Object.keys(schema), [schema]);
|
|
827
847
|
const isVirtualized = data.length > 20;
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
848
|
+
const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
|
|
849
|
+
count: data.length,
|
|
850
|
+
getScrollElement: () => scrollRef?.current || null,
|
|
851
|
+
estimateSize: (0, import_react4.useCallback)(() => 45, []),
|
|
852
|
+
overscan: 5,
|
|
853
|
+
enabled: isVirtualized
|
|
854
|
+
});
|
|
855
|
+
if (!isVirtualized || !scrollRef) {
|
|
856
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { className: "rst-body", children: data.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
857
|
+
TableRow,
|
|
858
|
+
{
|
|
859
|
+
row,
|
|
860
|
+
index,
|
|
861
|
+
columns,
|
|
862
|
+
schema,
|
|
863
|
+
registry
|
|
864
|
+
},
|
|
865
|
+
index
|
|
866
|
+
)) });
|
|
843
867
|
}
|
|
868
|
+
const virtualRows = rowVirtualizer.getVirtualItems();
|
|
869
|
+
const totalSize = rowVirtualizer.getTotalSize();
|
|
844
870
|
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
845
871
|
"tbody",
|
|
846
872
|
{
|
|
847
|
-
className: "rst-body",
|
|
848
|
-
ref: parentRef,
|
|
873
|
+
className: "rst-body rst-body-virtualized",
|
|
849
874
|
style: {
|
|
850
|
-
height: `${
|
|
875
|
+
height: `${totalSize}px`,
|
|
851
876
|
width: "100%",
|
|
852
877
|
position: "relative"
|
|
853
878
|
},
|
|
854
|
-
children:
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
}
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
className: `rst-td rst-td-col-${colKey} rst-td-type-${colInfo.type} ${widthClass}`,
|
|
877
|
-
children: colInfo.type === "boolean" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `rst-badge ${val ? "rst-badge-yes" : "rst-badge-no"}`, children: val ? "Yes" : "No" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Renderer, { value: val })
|
|
878
|
-
},
|
|
879
|
-
colKey
|
|
880
|
-
);
|
|
881
|
-
})
|
|
882
|
-
},
|
|
883
|
-
virtualRow.index
|
|
884
|
-
);
|
|
885
|
-
})
|
|
879
|
+
children: virtualRows.length > 0 ? virtualRows.map((virtualRow) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
880
|
+
TableRow,
|
|
881
|
+
{
|
|
882
|
+
row: data[virtualRow.index],
|
|
883
|
+
index: virtualRow.index,
|
|
884
|
+
columns,
|
|
885
|
+
schema,
|
|
886
|
+
registry,
|
|
887
|
+
style: {
|
|
888
|
+
position: "absolute",
|
|
889
|
+
top: 0,
|
|
890
|
+
left: 0,
|
|
891
|
+
width: "100%",
|
|
892
|
+
height: `${virtualRow.size}px`,
|
|
893
|
+
transform: `translateY(${virtualRow.start}px)`
|
|
894
|
+
}
|
|
895
|
+
},
|
|
896
|
+
virtualRow.key
|
|
897
|
+
)) : (
|
|
898
|
+
// Fallback for edge cases where virtualizer might be settling
|
|
899
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { style: { height: `${totalSize}px` }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { colSpan: columns.length }) })
|
|
900
|
+
)
|
|
886
901
|
}
|
|
887
902
|
);
|
|
888
903
|
};
|
|
@@ -1066,7 +1081,7 @@ var InsightsPanel = ({ data, schema }) => {
|
|
|
1066
1081
|
dataKey: widget.yAxisKeys[0],
|
|
1067
1082
|
nameKey: widget.xAxisKey,
|
|
1068
1083
|
label: false,
|
|
1069
|
-
children: widget.data.map((
|
|
1084
|
+
children: widget.data.map((_entry, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_recharts.Cell, { fill: COLORS[index % COLORS.length] }, `cell-${index}`))
|
|
1070
1085
|
}
|
|
1071
1086
|
)
|
|
1072
1087
|
] }) }) })
|
|
@@ -1102,8 +1117,6 @@ var PluginRegistry = class {
|
|
|
1102
1117
|
}
|
|
1103
1118
|
getRenderers() {
|
|
1104
1119
|
const renderers = {};
|
|
1105
|
-
for (const plugin of this.plugins) {
|
|
1106
|
-
}
|
|
1107
1120
|
return renderers;
|
|
1108
1121
|
}
|
|
1109
1122
|
getPlugins() {
|
|
@@ -1139,6 +1152,7 @@ var SmartTable = ({
|
|
|
1139
1152
|
const { paginatedData, currentPage, totalPages, setPage } = usePagination(dataToRenderOrPaginate, 10);
|
|
1140
1153
|
const finalData = pagination ? paginatedData : dataToRenderOrPaginate;
|
|
1141
1154
|
const [showFilters, setShowFilters] = import_react6.default.useState(true);
|
|
1155
|
+
const scrollRef = import_react6.default.useRef(null);
|
|
1142
1156
|
if (!data || data.length === 0) {
|
|
1143
1157
|
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "rst-container", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "rst-empty", children: "No data to display." }) });
|
|
1144
1158
|
}
|
|
@@ -1194,7 +1208,7 @@ var SmartTable = ({
|
|
|
1194
1208
|
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { className: "btn btn-primary", onClick: clearFilters, children: "Clear All Filters" })
|
|
1195
1209
|
] }),
|
|
1196
1210
|
data.length > 0 && finalData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("section", { className: "rst-card", children: [
|
|
1197
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "rst-table-container", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("table", { className: "rst-table", children: [
|
|
1211
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "rst-table-container", ref: scrollRef, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("table", { className: "rst-table", children: [
|
|
1198
1212
|
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1199
1213
|
TableHeader,
|
|
1200
1214
|
{
|
|
@@ -1205,7 +1219,15 @@ var SmartTable = ({
|
|
|
1205
1219
|
onSort: handleSort
|
|
1206
1220
|
}
|
|
1207
1221
|
),
|
|
1208
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1222
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1223
|
+
TableBody,
|
|
1224
|
+
{
|
|
1225
|
+
data: finalData,
|
|
1226
|
+
schema,
|
|
1227
|
+
registry,
|
|
1228
|
+
scrollRef
|
|
1229
|
+
}
|
|
1230
|
+
)
|
|
1209
1231
|
] }) }),
|
|
1210
1232
|
pagination && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "rst-pagination", children: [
|
|
1211
1233
|
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|