flexi-datagrid 1.2.1 → 1.2.4
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 +68 -11
- package/dist/DataTable.d.ts +8 -3
- package/dist/flexi-datagrid.css +1 -1
- package/dist/index.es.js +320 -237
- package/dist/index.umd.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,9 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
A modern, highly customizable, and feature-rich React data grid component designed for speed and flexibility.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Features
|
|
6
6
|
|
|
7
|
-
- **Column Pinning:**
|
|
7
|
+
- **Column Pinning (Left & Right):** Pin important columns to either the left or right edge of the grid. Clicking the pin icon cycles a column through unpinned → pinned left → pinned right.
|
|
8
|
+
- **Pinned Bottom Rows (AG Grid-style):** Pass `pinnedBottomRowData` to render summary/total rows in a section fixed to the bottom of the grid, independent of your main `data` — no per-row pin buttons required.
|
|
9
|
+
- **Sticky Header:** The header row stays fixed in place while the body scrolls vertically — give the grid a bounded height via `containerStyle` to enable vertical scrolling.
|
|
10
|
+
- **Table Borders:** Optional full grid borders via the `bordered` prop for a classic spreadsheet look.
|
|
8
11
|
- **Multi-State Sorting:** Clickable column headers that support Ascending (asc), Descending (desc), and Unsorted states.
|
|
9
12
|
- **Built-in Filtering:** Filter rows instantly with a clean popup search and multi-select dropdown for unique column values. The popup renders through a portal so it always floats above your grid content instead of being clipped by the table's scroll container.
|
|
10
13
|
- **Row Grouping (Drag-and-Drop):** Drag column headers into the grouping zone to group your dataset hierarchically with expand/collapse support.
|
|
@@ -15,7 +18,7 @@ A modern, highly customizable, and feature-rich React data grid component design
|
|
|
15
18
|
|
|
16
19
|
---
|
|
17
20
|
|
|
18
|
-
##
|
|
21
|
+
## Installation
|
|
19
22
|
|
|
20
23
|
Install the package via npm:
|
|
21
24
|
|
|
@@ -33,7 +36,7 @@ import 'flexi-datagrid/dist/flexi-datagrid.css';
|
|
|
33
36
|
|
|
34
37
|
---
|
|
35
38
|
|
|
36
|
-
##
|
|
39
|
+
## Quick Start
|
|
37
40
|
|
|
38
41
|
```tsx
|
|
39
42
|
import { DataTable, type ColumnConfig } from 'flexi-datagrid';
|
|
@@ -55,13 +58,15 @@ const data: Employee[] = [
|
|
|
55
58
|
];
|
|
56
59
|
|
|
57
60
|
const columns: ColumnConfig<Employee>[] = [
|
|
58
|
-
{ key: 'name', header: 'Name', sortable: true, filterable: true, pinned:
|
|
61
|
+
{ key: 'name', header: 'Name', sortable: true, filterable: true, pinned: 'left',style: { width: "400px", backgroundColor: "#f9f9f9" },
|
|
62
|
+
headerStyle: { fontWeight: "bold", color: "#333" } },
|
|
59
63
|
{ key: 'department', header: 'Department', sortable: true, filterable: true },
|
|
60
64
|
{ key: 'role', header: 'Role', sortable: true, filterable: true },
|
|
61
65
|
{
|
|
62
66
|
key: 'salary',
|
|
63
67
|
header: 'Salary',
|
|
64
68
|
sortable: true,
|
|
69
|
+
pinned: 'right',
|
|
65
70
|
render: (value) => `$${value.toLocaleString()}`,
|
|
66
71
|
},
|
|
67
72
|
];
|
|
@@ -74,6 +79,11 @@ export default function EmployeeTable() {
|
|
|
74
79
|
rowKey="id"
|
|
75
80
|
groupBy
|
|
76
81
|
defaultGroupBy={['department']}
|
|
82
|
+
bordered
|
|
83
|
+
pinnedBottomRowData={[
|
|
84
|
+
{ id: -1, name: '', department: '', role: 'Total', salary: data.reduce((sum, r) => sum + r.salary, 0) },
|
|
85
|
+
]}
|
|
86
|
+
containerStyle={{ maxHeight: 480 }}
|
|
77
87
|
actions={(record) => (
|
|
78
88
|
<button onClick={() => console.log('Edit', record.id)}>Edit</button>
|
|
79
89
|
)}
|
|
@@ -84,7 +94,7 @@ export default function EmployeeTable() {
|
|
|
84
94
|
|
|
85
95
|
---
|
|
86
96
|
|
|
87
|
-
##
|
|
97
|
+
## How It Works
|
|
88
98
|
|
|
89
99
|
`DataTable` is a single, self-contained component: pass it `columns` and `data`, and it manages sorting, filtering, pinning, and grouping state internally.
|
|
90
100
|
|
|
@@ -102,7 +112,8 @@ Each entry in `columns` describes one column (or a group of columns, via `childr
|
|
|
102
112
|
| `getValue` | `(record) => any` | Custom accessor used for sorting, filtering, and grouping when the value isn't a simple `record[key]` lookup. |
|
|
103
113
|
| `filterable` | `boolean` | Shows a filter icon in the header that opens a multi-select popup of unique column values. |
|
|
104
114
|
| `sortable` | `boolean` | Makes the header clickable, cycling through ascending → descending → unsorted. |
|
|
105
|
-
| `pinned` | `boolean` | Pins the column to
|
|
115
|
+
| `pinned` | `boolean \| 'left' \| 'right'` | Pins the column to an edge by default (`true` is shorthand for `'left'`). Still toggleable per-column from the UI. |
|
|
116
|
+
| `pinnedRender` | `(value, record) => ReactNode` | Overrides `render` specifically for rows supplied via `pinnedBottomRowData` (e.g. render a "Total" label or bold sum). Falls back to `render` when omitted. |
|
|
106
117
|
| `children` | `ColumnConfig<T>[]` | Nest columns to render a grouped, multi-row header. Only leaf columns are sortable/filterable/pinnable. |
|
|
107
118
|
|
|
108
119
|
### Grid props (`DataTableProps<T>`)
|
|
@@ -116,10 +127,13 @@ Each entry in `columns` describes one column (or a group of columns, via `childr
|
|
|
116
127
|
| `isLoading` | `boolean` | Shows a loading state in place of rows. |
|
|
117
128
|
| `groupBy` | `boolean` | Enables drag-and-drop row grouping — drag a column header into the grouping zone above the grid. |
|
|
118
129
|
| `defaultGroupBy` | `string[]` | Column keys the grid is grouped by on initial render (requires `groupBy`). |
|
|
119
|
-
| `onPinChange` | `(columnKey, isPinned) => void` | Called whenever a column is pinned/unpinned. |
|
|
130
|
+
| `onPinChange` | `(columnKey, isPinned, side?) => void` | Called whenever a column is pinned/unpinned, with the side (`'left'` \| `'right'`) it was pinned to. |
|
|
120
131
|
| `onGroupChange` | `(groupedKeys: string[]) => void` | Called whenever the set of grouped columns changes. |
|
|
121
|
-
| `containerStyle` | `CSSProperties` | Inline styles for the scrollable table container. |
|
|
132
|
+
| `containerStyle` | `CSSProperties` | Inline styles for the scrollable table container. Set a `maxHeight` here to enable vertical scrolling with a sticky header and sticky bottom-pinned rows. |
|
|
122
133
|
| `tableStyle` | `CSSProperties` | Inline styles for the `<table>` element itself. |
|
|
134
|
+
| `bordered` | `boolean` | Draws full grid borders (all four sides of every cell) instead of the default minimal row/column dividers. |
|
|
135
|
+
| `pinnedBottomRowData` | `T[]` | Rows rendered in a section fixed to the bottom of the grid (e.g. totals/summary rows). Independent of `data` — not affected by sorting, filtering, or grouping. |
|
|
136
|
+
| `pinnedRowClassName` | `string \| (record: T, index: number) => string` | Extra class name(s) applied to each pinned-bottom row, for styling a totals/summary template. |
|
|
123
137
|
|
|
124
138
|
### Filtering
|
|
125
139
|
|
|
@@ -135,7 +149,50 @@ Set `groupBy` to enable a drop zone above the table. Dragging a sortable/leaf co
|
|
|
135
149
|
|
|
136
150
|
### Column Pinning
|
|
137
151
|
|
|
138
|
-
Hovering a header reveals a pin icon
|
|
152
|
+
Hovering a header reveals a pin icon. Clicking it cycles the column through unpinned → pinned left → pinned right → unpinned, locking it to the corresponding edge with a sticky position and shadow so it stays visible while scrolling horizontally. Columns marked `pinned: true` (or `pinned: 'left'`) start pinned left; `pinned: 'right'` starts pinned right.
|
|
153
|
+
|
|
154
|
+
### Pinned Bottom Rows
|
|
155
|
+
|
|
156
|
+
Pass `pinnedBottomRowData` — a separate array of rows (e.g. one or more totals rows) — and they're rendered in a section sticky-pinned to the bottom of the scrollable body, always visible while the main rows scroll past. This mirrors AG Grid's `pinnedBottomRowData`: it's plain data, not part of `data`/sorting/filtering/grouping, and there's no per-row pin button to manage.
|
|
157
|
+
|
|
158
|
+
Use `pinnedRowClassName` (a string, or a `(record, index) => string` function) to style the template — e.g. bold text or a tinted background for a totals row — and `pinnedRender` on a `ColumnConfig` to override how a specific column renders for these rows only (falling back to `render` otherwise):
|
|
159
|
+
|
|
160
|
+
```tsx
|
|
161
|
+
const columns: ColumnConfig<Employee>[] = [
|
|
162
|
+
{ key: 'name', header: 'Name', pinnedRender: () => <strong>Total</strong> },
|
|
163
|
+
{
|
|
164
|
+
key: 'salary',
|
|
165
|
+
header: 'Salary',
|
|
166
|
+
render: (value) => `$${value.toLocaleString()}`,
|
|
167
|
+
pinnedRender: (value) => <strong>${value.toLocaleString()}</strong>,
|
|
168
|
+
},
|
|
169
|
+
];
|
|
170
|
+
|
|
171
|
+
const totalsRow = {
|
|
172
|
+
name: '',
|
|
173
|
+
salary: data.reduce((sum, row) => sum + row.salary, 0),
|
|
174
|
+
};
|
|
175
|
+
|
|
176
|
+
<DataTable
|
|
177
|
+
columns={columns}
|
|
178
|
+
data={data}
|
|
179
|
+
rowKey="id"
|
|
180
|
+
pinnedBottomRowData={[totalsRow]}
|
|
181
|
+
pinnedRowClassName="my-totals-row"
|
|
182
|
+
/>
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
### Many Columns
|
|
186
|
+
|
|
187
|
+
Header labels truncate with an ellipsis instead of overflowing into neighboring headers once a column becomes narrow (e.g. many columns, or an explicit small `style.width`) — no configuration needed.
|
|
188
|
+
|
|
189
|
+
### Sticky Header
|
|
190
|
+
|
|
191
|
+
The header row is always fixed in place (`position: sticky; top: 0`) relative to the table's scroll container. To see it in action, give the grid a bounded height — e.g. `containerStyle={{ maxHeight: 480 }}` — so the body scrolls vertically while the header (and any bottom-pinned rows) stay put.
|
|
192
|
+
|
|
193
|
+
### Table Borders
|
|
194
|
+
|
|
195
|
+
Pass `bordered` to draw full borders around every cell instead of the default minimal row/column dividers, for a classic spreadsheet look.
|
|
139
196
|
|
|
140
197
|
---
|
|
141
198
|
|
|
@@ -143,7 +200,7 @@ Hovering a header reveals a pin icon; pinning locks that column to the left with
|
|
|
143
200
|
|
|
144
201
|
```bash
|
|
145
202
|
npm install
|
|
146
|
-
npm run build
|
|
203
|
+
npm run build
|
|
147
204
|
```
|
|
148
205
|
|
|
149
206
|
## 📄 License
|
package/dist/DataTable.d.ts
CHANGED
|
@@ -8,12 +8,14 @@ export interface ColumnConfig<T> {
|
|
|
8
8
|
style?: CSSProperties;
|
|
9
9
|
headerStyle?: CSSProperties;
|
|
10
10
|
render?: (value: any, record: T) => ReactNode;
|
|
11
|
+
pinnedRender?: (value: any, record: T) => ReactNode;
|
|
11
12
|
filterable?: boolean;
|
|
12
13
|
sortable?: boolean;
|
|
13
|
-
pinned?: boolean;
|
|
14
|
+
pinned?: boolean | 'left' | 'right';
|
|
14
15
|
children?: ColumnConfig<T>[];
|
|
15
16
|
getValue?: (record: T) => any;
|
|
16
17
|
}
|
|
18
|
+
type PinSide = 'left' | 'right';
|
|
17
19
|
interface DataTableProps<T> {
|
|
18
20
|
columns: ColumnConfig<T>[];
|
|
19
21
|
data: T[];
|
|
@@ -22,10 +24,13 @@ interface DataTableProps<T> {
|
|
|
22
24
|
isLoading?: boolean;
|
|
23
25
|
groupBy?: boolean;
|
|
24
26
|
defaultGroupBy?: string[];
|
|
25
|
-
onPinChange?: (columnKey: string, isPinned: boolean) => void;
|
|
27
|
+
onPinChange?: (columnKey: string, isPinned: boolean, side?: PinSide) => void;
|
|
26
28
|
onGroupChange?: (groupedKeys: string[]) => void;
|
|
27
29
|
containerStyle?: CSSProperties;
|
|
28
30
|
tableStyle?: CSSProperties;
|
|
31
|
+
bordered?: boolean;
|
|
32
|
+
pinnedBottomRowData?: T[];
|
|
33
|
+
pinnedRowClassName?: string | ((record: T, index: number) => string);
|
|
29
34
|
}
|
|
30
|
-
export declare function DataTable<T>({ columns, data, rowKey, actions, isLoading, groupBy, defaultGroupBy, onPinChange, onGroupChange, containerStyle, tableStyle, }: DataTableProps<T>): React.JSX.Element;
|
|
35
|
+
export declare function DataTable<T>({ columns, data, rowKey, actions, isLoading, groupBy, defaultGroupBy, onPinChange, onGroupChange, containerStyle, tableStyle, bordered, pinnedBottomRowData, pinnedRowClassName, }: DataTableProps<T>): React.JSX.Element;
|
|
31
36
|
export {};
|
package/dist/flexi-datagrid.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.flexi-root{width:100%;position:relative}.flexi-root>*+*{margin-top:.75rem}.flexi-groupzone{box-sizing:border-box;background-color:#f8fafc80;border:1px dashed #e2e8f0;border-radius:.75rem;align-items:center;gap:.5rem;width:100%;min-height:52px;padding:.5rem 1rem;transition:all .2s;display:flex}.flexi-groupzone--dragover{background-color:#eff6ff80;border:1px solid #3b82f6;transform:scale(.99)}.flexi-groupzone-hint{color:#64748b;-webkit-user-select:none;user-select:none;font-size:12px;font-weight:500}.flexi-groupzone-chips{flex-wrap:wrap;align-items:center;gap:.375rem;display:flex}.flexi-groupzone-label{text-transform:uppercase;letter-spacing:.05em;color:#64748b;margin-right:.25rem;font-size:11px;font-weight:700}.flexi-chip{color:#64748b;background-color:#fff;border:1px solid #e2e8f0;border-radius:.5rem;align-items:center;gap:.375rem;padding:.25rem .25rem .25rem .5rem;font-size:12px;font-weight:600;display:flex;box-shadow:0 1px 2px #0000000d}.flexi-chip-remove{border-radius:5px;width:18px;height:18px}.flexi-table-wrap{box-sizing:border-box;background-color:#fff;border:1px solid #f1f5f9;border-radius:.75rem;width:100%;overflow
|
|
1
|
+
.flexi-root{width:100%;position:relative}.flexi-root>*+*{margin-top:.75rem}.flexi-groupzone{box-sizing:border-box;background-color:#f8fafc80;border:1px dashed #e2e8f0;border-radius:.75rem;align-items:center;gap:.5rem;width:100%;min-height:52px;padding:.5rem 1rem;transition:all .2s;display:flex}.flexi-groupzone--dragover{background-color:#eff6ff80;border:1px solid #3b82f6;transform:scale(.99)}.flexi-groupzone-hint{color:#64748b;-webkit-user-select:none;user-select:none;font-size:12px;font-weight:500}.flexi-groupzone-chips{flex-wrap:wrap;align-items:center;gap:.375rem;display:flex}.flexi-groupzone-label{text-transform:uppercase;letter-spacing:.05em;color:#64748b;margin-right:.25rem;font-size:11px;font-weight:700}.flexi-chip{color:#64748b;background-color:#fff;border:1px solid #e2e8f0;border-radius:.5rem;align-items:center;gap:.375rem;padding:.25rem .25rem .25rem .5rem;font-size:12px;font-weight:600;display:flex;box-shadow:0 1px 2px #0000000d}.flexi-chip-remove{border-radius:5px;width:18px;height:18px}.flexi-table-wrap{box-sizing:border-box;background-color:#fff;border:1px solid #f1f5f9;border-radius:.75rem;width:100%;overflow:auto;box-shadow:0 1px 2px #0000000d}.flexi-table{caption-side:bottom;border-collapse:collapse;border-spacing:0;table-layout:fixed;width:100%;font-size:.875rem;position:relative}.flexi-table--bordered th,.flexi-table--bordered td{border:1px solid #e2e8f0}.flexi-thead{-webkit-user-select:none;user-select:none;z-index:40;position:sticky}.flexi-header-row{border-bottom:1px solid #f1f5f9}.flexi-group-spacer-th{border-right:1px solid #f1f5f9;width:48px}.flexi-th{text-align:center;vertical-align:middle;z-index:25;background-color:#f8fafc;border-bottom:1px solid #f1f5f9;border-right:1px solid #f1f5f9;height:48px;padding:0 1rem;font-size:12px;font-weight:700;position:sticky;top:0}.flexi-th--draggable{cursor:grab}.flexi-th--draggable:active{cursor:grabbing}.flexi-th--pinned{background-color:#f8fafc}.flexi-th-inner{justify-content:space-between;align-items:center;gap:.25rem;width:100%;min-width:0;display:flex}.flexi-th-label{white-space:nowrap;text-overflow:ellipsis;flex:auto;align-items:center;gap:.375rem;min-width:0;display:flex;overflow:hidden}.flexi-th-label--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.flexi-th-label--sortable:hover{color:#2563eb}.flexi-th-text{white-space:nowrap;text-overflow:ellipsis;flex:auto;min-width:0;overflow:hidden}.flexi-sort-icon{color:#94a3b8;opacity:0;transition:color .15s,opacity .15s}.flexi-sort-icon--active{color:#2563eb;opacity:1}.flexi-th-inner:hover .flexi-sort-icon{opacity:1}.flexi-th-actions{flex:none;align-items:center;gap:2px;display:flex}.flexi-icon-btn{color:#64748b;background-color:#0000;border-radius:6px;justify-content:center;align-items:center;width:22px;height:22px;margin:0;padding:0;transition:background-color .15s,color .15s,transform .1s;display:inline-flex}.flexi-icon-btn:hover{color:#334155;background-color:#e2e8f0}.flexi-icon-btn:active{background-color:#cbd5e1;transform:scale(.92)}.flexi-icon-btn:focus-visible{outline-offset:1px;outline:2px solid #93c5fd}.flexi-filter-btn{color:#64748b;opacity:0}.flexi-filter-btn--active{color:#2563eb;opacity:1}.flexi-filter-btn--active:hover{color:#2563eb;background-color:#dbeafe}.flexi-pin-btn{color:#cbd5e1;opacity:0}.flexi-pin-btn--pinned{color:#3b82f6;opacity:1}.flexi-pin-btn--pinned:hover{color:#2563eb;background-color:#dbeafe}.flexi-th-inner:hover .flexi-filter-btn,.flexi-th-inner:hover .flexi-pin-btn{opacity:1}.flexi-actions-th{vertical-align:middle;text-align:right;height:48px;padding:0 1rem;font-size:12px;font-weight:700;box-shadow:-1px 0 #e2e8f0}.flexi-filter-dropdown{color:#334155;text-align:left;pointer-events:auto;background-color:#fff;border:1px solid #e2e8f0;border-radius:.5rem;flex-direction:column;width:13rem;padding:.5rem 0;font-weight:400;display:flex;position:absolute;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.flexi-filter-search{border-bottom:1px solid #f1f5f9;margin-bottom:.25rem;padding:0 .5rem .5rem}.flexi-input{color:#475569;box-sizing:border-box;border:1px solid #e2e8f0;border-radius:.25rem;width:100%;padding:.25rem .5rem;font-size:12px;font-weight:500}.flexi-input:focus{border-color:#3b82f6;outline:none}.flexi-filter-list{flex-direction:column;gap:.25rem;max-height:10rem;padding:0 .5rem;display:flex;overflow-y:auto}.flexi-filter-empty{color:#64748b;text-align:center;padding:.5rem;font-size:11px}.flexi-filter-option{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:.25rem;align-items:center;gap:.5rem;padding:.375rem .5rem;font-size:12px;display:flex}.flexi-filter-option:hover{background-color:#f8fafc}.flexi-filter-option-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.flexi-checkbox{accent-color:#2563eb;border:1px solid #cbd5e1;border-radius:.25rem;width:.875rem;height:.875rem}.flexi-checkbox:focus{outline-offset:1px;outline:2px solid #3b82f6}.flexi-filter-footer{border-top:1px solid #f1f5f9;justify-content:flex-end;margin-top:.5rem;padding:.25rem .5rem 0;display:flex}.flexi-filter-clear{color:#ef4444;padding:.125rem .5rem;font-size:11px;font-weight:500}.flexi-filter-clear:hover{text-decoration:underline}.flexi-tbody{display:table-row-group}.flexi-tbody tr+tr{border-top:1px solid #f1f5f9}.flexi-empty-cell{text-align:center;color:#64748b;padding:2rem;font-size:12px;font-weight:500}.flexi-group-row{-webkit-user-select:none;user-select:none;background-color:#f8fafc99;transition:background-color .15s}.flexi-group-row:hover{background-color:#f1f5f9cc}.flexi-group-cell{color:#334155;border-right:1px solid #f1f5f9;padding:.75rem 1rem;font-size:12px;font-weight:600}.flexi-group-toggle{text-align:left;border-radius:6px;align-items:center;gap:.375rem;margin:-4px -8px -4px -4px;padding:4px 8px 4px 4px;transition:background-color .15s;display:flex}.flexi-group-toggle:hover{background-color:#e2e8f099}.flexi-group-toggle:focus-visible{outline-offset:1px;outline:2px solid #93c5fd}.flexi-icon-muted{color:#64748b}.flexi-group-value{color:#1e293b;white-space:nowrap;text-overflow:ellipsis;width:10rem;font-weight:700;overflow:hidden}.flexi-group-count{color:#64748b;background-color:#e2e8f0b3;border-radius:9999px;margin-left:.25rem;padding:.05rem .375rem;font-size:10px;font-weight:500}.flexi-group-filler{background-color:#f8fafc4d}.flexi-row{border-bottom:1px solid #f1f5f9;height:48px;transition:background-color .15s}.flexi-row:hover{background-color:#f8fafccc}.flexi-row-indent-cell{background-color:#fff;border-right:1px solid #f1f5f9;width:48px}.flexi-cell{vertical-align:middle;padding:.25rem 1rem;transition:background-color .15s}.flexi-row:hover .flexi-cell--pinned{background-color:#f1f5f9}.flexi-cell-text{color:#64748b;white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:500;display:block;overflow:hidden}.flexi-actions-cell{vertical-align:middle;text-align:right;background-color:#fff;padding:.25rem 1rem;box-shadow:-1px 0 #e2e8f0}.flexi-row:hover .flexi-actions-cell{background-color:#f8fafccc}.flexi-tbody--pinned-bottom{box-shadow:0 -2px 5px -2px #0000001a}.flexi-row--pinned-bottom{background-color:#f8fafc;font-weight:600}.flexi-row--pinned-bottom:hover,.flexi-row--pinned-bottom .flexi-cell,.flexi-row--pinned-bottom .flexi-actions-cell{background-color:#f8fafc}.flexi-row--pinned-bottom .flexi-cell-text{color:#334155}.flexi-actions-inner{opacity:0;justify-content:flex-end;gap:.25rem;transition:opacity .15s;display:flex}.flexi-row:hover .flexi-actions-inner{opacity:1}.flexi-icon-xs{width:.75rem;height:.75rem}.flexi-icon-sm{width:.875rem;height:.875rem}.flexi-icon-md{width:1rem;height:1rem}.flexi-root button{appearance:none;cursor:pointer;font:inherit;color:inherit;background:0 0;border:none;margin:0;padding:0;line-height:normal}.flexi-root input{font:inherit}.flexi-root table{border-collapse:collapse;border-spacing:0}
|
|
2
2
|
/*$vite$:1*/
|
package/dist/index.es.js
CHANGED
|
@@ -1,48 +1,60 @@
|
|
|
1
1
|
import { ArrowDown as e, ArrowUp as t, ArrowUpDown as n, ChevronDown as r, ChevronRight as i, Filter as a, Pin as o, PinOff as s, X as c } from "lucide-react";
|
|
2
2
|
import { useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
|
|
3
|
-
import { createPortal as
|
|
4
|
-
import { jsx as
|
|
3
|
+
import { createPortal as ee } from "react-dom";
|
|
4
|
+
import { jsx as p, jsxs as m } from "react/jsx-runtime";
|
|
5
5
|
//#region src/DataTable.tsx
|
|
6
|
-
var
|
|
6
|
+
var h = (e) => {
|
|
7
7
|
let t = [];
|
|
8
8
|
return e.forEach((e) => {
|
|
9
|
-
e.children && e.children.length > 0 ? t.push(...
|
|
9
|
+
e.children && e.children.length > 0 ? t.push(...h(e.children)) : t.push(e);
|
|
10
10
|
}), t;
|
|
11
|
-
},
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
}, g = (...e) => e.filter(Boolean).join(" "), _ = (e) => {
|
|
12
|
+
if (e === !0) return "left";
|
|
13
|
+
if (e === "left" || e === "right") return e;
|
|
14
|
+
};
|
|
15
|
+
function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy: S = !1, defaultGroupBy: ne = [], onPinChange: C, onGroupChange: w, containerStyle: re, tableStyle: ie, bordered: ae = !1, pinnedBottomRowData: T = [], pinnedRowClassName: E }) {
|
|
16
|
+
let [D, O] = f(null), [k, A] = f({}), [j, M] = f(""), [N, oe] = f(null), P = d(/* @__PURE__ */ new Map()), [F, I] = f(ne), [L, se] = f({}), [ce, R] = f(!1), [z, le] = f({
|
|
14
17
|
key: null,
|
|
15
18
|
direction: null
|
|
16
|
-
}),
|
|
17
|
-
let e =
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
19
|
+
}), B = u(() => h(v), [v]), [V, ue] = f(() => {
|
|
20
|
+
let e = {};
|
|
21
|
+
return B.forEach((t) => {
|
|
22
|
+
let n = _(t.pinned);
|
|
23
|
+
n && (e[t.key] = n);
|
|
24
|
+
}), e;
|
|
25
|
+
}), H = u(() => {
|
|
26
|
+
let e = (t) => {
|
|
27
|
+
let n = (e) => {
|
|
28
|
+
let t = V[e];
|
|
29
|
+
return t === "left" ? 0 : t === "right" ? 2 : 1;
|
|
30
|
+
};
|
|
31
|
+
return [...t].sort((e, t) => n(e.key) - n(t.key)).map((t) => t.children && t.children.length > 0 ? {
|
|
32
|
+
...t,
|
|
33
|
+
children: e(t.children)
|
|
34
|
+
} : t);
|
|
35
|
+
};
|
|
24
36
|
return e(v);
|
|
25
|
-
}, [v,
|
|
26
|
-
let e =
|
|
37
|
+
}, [v, V]), U = u(() => {
|
|
38
|
+
let e = h(H), t = S ? F : [];
|
|
27
39
|
return e.filter((e) => !t.includes(e.key));
|
|
28
40
|
}, [
|
|
29
|
-
|
|
30
|
-
|
|
41
|
+
H,
|
|
42
|
+
F,
|
|
31
43
|
S
|
|
32
|
-
]),
|
|
44
|
+
]), W = d(null), G = d(null);
|
|
33
45
|
l(() => {
|
|
34
46
|
function e(e) {
|
|
35
|
-
let t = e.target, n =
|
|
36
|
-
|
|
47
|
+
let t = e.target, n = D ? P.current.get(D) : null;
|
|
48
|
+
G.current && !G.current.contains(t) && !(n && n.contains(t)) && (O(null), M(""));
|
|
37
49
|
}
|
|
38
50
|
return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
|
|
39
|
-
}, [
|
|
40
|
-
if (!
|
|
51
|
+
}, [D]), l(() => {
|
|
52
|
+
if (!D) return;
|
|
41
53
|
let e = () => {
|
|
42
|
-
let e =
|
|
54
|
+
let e = P.current.get(D), t = W.current;
|
|
43
55
|
if (!e || !t) return;
|
|
44
56
|
let n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
|
|
45
|
-
|
|
57
|
+
oe({
|
|
46
58
|
top: n.bottom - r.top + 4,
|
|
47
59
|
left: n.left - r.left
|
|
48
60
|
});
|
|
@@ -50,35 +62,37 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: ee, groupBy:
|
|
|
50
62
|
return e(), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
|
|
51
63
|
window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
|
|
52
64
|
};
|
|
53
|
-
}, [
|
|
54
|
-
let
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
65
|
+
}, [D]);
|
|
66
|
+
let de = (e) => typeof b == "function" ? b(e) : String(e[b]), fe = (e) => {
|
|
67
|
+
ue((t) => {
|
|
68
|
+
let n = t[e], r = n ? n === "left" ? "right" : void 0 : "left", i = { ...t };
|
|
69
|
+
return r ? i[e] = r : delete i[e], C && C(e, !!r, r), i;
|
|
70
|
+
});
|
|
71
|
+
}, pe = (e) => {
|
|
58
72
|
let t = "asc";
|
|
59
|
-
z.key === e && (t = z.direction === "asc" ? "desc" : z.direction === "desc" ? null : "asc"),
|
|
73
|
+
z.key === e && (t = z.direction === "asc" ? "desc" : z.direction === "desc" ? null : "asc"), le({
|
|
60
74
|
key: t ? e : null,
|
|
61
75
|
direction: t
|
|
62
76
|
});
|
|
63
|
-
},
|
|
77
|
+
}, me = (e, t) => {
|
|
64
78
|
S && (e.dataTransfer.setData("text/plain", t), e.dataTransfer.effectAllowed = "move");
|
|
65
|
-
},
|
|
79
|
+
}, he = (e) => {
|
|
66
80
|
e.preventDefault(), R(!1);
|
|
67
81
|
let t = e.dataTransfer.getData("text/plain");
|
|
68
|
-
if (t && !
|
|
69
|
-
let e = [...
|
|
70
|
-
|
|
82
|
+
if (t && !F.includes(t)) {
|
|
83
|
+
let e = [...F, t];
|
|
84
|
+
I(e), w && w(e);
|
|
71
85
|
}
|
|
72
|
-
},
|
|
73
|
-
let t =
|
|
74
|
-
|
|
75
|
-
},
|
|
86
|
+
}, ge = (e) => {
|
|
87
|
+
let t = F.filter((t) => t !== e);
|
|
88
|
+
I(t), se({}), w && w(t);
|
|
89
|
+
}, K = u(() => {
|
|
76
90
|
let e = (t) => {
|
|
77
91
|
let n = 0;
|
|
78
92
|
return t.forEach((t) => {
|
|
79
93
|
n = t.children && t.children.length > 0 ? Math.max(n, 1 + e(t.children)) : Math.max(n, 1);
|
|
80
94
|
}), n;
|
|
81
|
-
}, t = e(
|
|
95
|
+
}, t = e(H), n = Array.from({ length: t }, () => []), r = (e) => !e.children || e.children.length === 0 ? F.includes(e.key) && S ? 0 : 1 : e.children.reduce((e, t) => e + r(t), 0), i = S ? F : [], a = (e, o) => {
|
|
82
96
|
e.forEach((e) => {
|
|
83
97
|
if (i.includes(e.key)) return;
|
|
84
98
|
let s = r(e);
|
|
@@ -93,55 +107,67 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: ee, groupBy:
|
|
|
93
107
|
}));
|
|
94
108
|
});
|
|
95
109
|
};
|
|
96
|
-
return a(
|
|
110
|
+
return a(H, 0), n.filter((e) => e.length > 0);
|
|
97
111
|
}, [
|
|
98
|
-
|
|
99
|
-
|
|
112
|
+
H,
|
|
113
|
+
F,
|
|
100
114
|
S
|
|
101
|
-
]),
|
|
115
|
+
]), q = (e) => {
|
|
116
|
+
let t = e.style?.width || e.headerStyle?.width || "150px";
|
|
117
|
+
return typeof t == "number" ? t : parseInt(String(t), 10) || 150;
|
|
118
|
+
}, _e = u(() => {
|
|
102
119
|
let e = {}, t = 0;
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
120
|
+
S && F.length > 0 && (t += 48), U.forEach((n) => {
|
|
121
|
+
V[n.key] === "left" && (e[n.key] = {
|
|
122
|
+
side: "left",
|
|
123
|
+
offset: t
|
|
124
|
+
}, t += q(n));
|
|
125
|
+
});
|
|
126
|
+
let n = x ? 100 : 0;
|
|
127
|
+
for (let t = U.length - 1; t >= 0; t--) {
|
|
128
|
+
let r = U[t];
|
|
129
|
+
V[r.key] === "right" && (e[r.key] = {
|
|
130
|
+
side: "right",
|
|
131
|
+
offset: n
|
|
132
|
+
}, n += q(r));
|
|
133
|
+
}
|
|
134
|
+
return e;
|
|
110
135
|
}, [
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
S
|
|
115
|
-
|
|
116
|
-
|
|
136
|
+
U,
|
|
137
|
+
V,
|
|
138
|
+
F,
|
|
139
|
+
S,
|
|
140
|
+
x
|
|
141
|
+
]), ve = (e, t) => {
|
|
142
|
+
A((n) => {
|
|
117
143
|
let r = n[e] || [], i = r.includes(t) ? r.filter((e) => e !== t) : [...r, t], a = {
|
|
118
144
|
...n,
|
|
119
145
|
[e]: i
|
|
120
146
|
};
|
|
121
147
|
return a[e].length === 0 && delete a[e], a;
|
|
122
148
|
});
|
|
123
|
-
},
|
|
124
|
-
|
|
149
|
+
}, ye = (e) => {
|
|
150
|
+
A((t) => {
|
|
125
151
|
let n = { ...t };
|
|
126
152
|
return delete n[e], n;
|
|
127
153
|
});
|
|
128
154
|
}, J = u(() => {
|
|
129
|
-
if (!
|
|
130
|
-
let e =
|
|
131
|
-
return
|
|
155
|
+
if (!D) return [];
|
|
156
|
+
let e = B.find((e) => e.key === D), t = y.map((t) => e?.getValue ? e.getValue(t) : t[D]), n = Array.from(new Set(t)).filter((e) => e != null);
|
|
157
|
+
return j.trim() ? n.filter((e) => String(e).toLowerCase().includes(j.toLowerCase())) : n;
|
|
132
158
|
}, [
|
|
133
159
|
y,
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
160
|
+
D,
|
|
161
|
+
j,
|
|
162
|
+
B
|
|
137
163
|
]), Y = u(() => {
|
|
138
|
-
let e = y.filter((e) => Object.entries(
|
|
164
|
+
let e = y.filter((e) => Object.entries(k).every(([t, n]) => {
|
|
139
165
|
if (!n || n.length === 0) return !0;
|
|
140
|
-
let r =
|
|
166
|
+
let r = B.find((e) => e.key === t), i = r?.getValue ? r.getValue(e) : e[t];
|
|
141
167
|
return n.includes(i);
|
|
142
168
|
}));
|
|
143
169
|
if (z.key && z.direction) {
|
|
144
|
-
let { key: t, direction: n } = z, r =
|
|
170
|
+
let { key: t, direction: n } = z, r = B.find((e) => e.key === t);
|
|
145
171
|
e = [...e].sort((e, i) => {
|
|
146
172
|
let a = r?.getValue ? r.getValue(e) : e[t], o = r?.getValue ? r.getValue(i) : i[t];
|
|
147
173
|
if (a === o) return 0;
|
|
@@ -157,14 +183,14 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: ee, groupBy:
|
|
|
157
183
|
return e;
|
|
158
184
|
}, [
|
|
159
185
|
y,
|
|
160
|
-
|
|
186
|
+
k,
|
|
161
187
|
z,
|
|
162
|
-
|
|
188
|
+
B
|
|
163
189
|
]), X = u(() => {
|
|
164
|
-
if (!S ||
|
|
190
|
+
if (!S || F.length === 0) return Y;
|
|
165
191
|
let e = (t, n, r = "") => {
|
|
166
|
-
if (n >=
|
|
167
|
-
let i =
|
|
192
|
+
if (n >= F.length) return t;
|
|
193
|
+
let i = F[n], a = B.find((e) => e.key === i), o = {};
|
|
168
194
|
return t.forEach((e) => {
|
|
169
195
|
let t = a?.getValue ? a.getValue(e) : e[i], n = String(t ?? "N/A");
|
|
170
196
|
o[n] || (o[n] = []), o[n].push(e);
|
|
@@ -184,11 +210,11 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: ee, groupBy:
|
|
|
184
210
|
return e(Y, 0);
|
|
185
211
|
}, [
|
|
186
212
|
Y,
|
|
187
|
-
|
|
213
|
+
F,
|
|
188
214
|
S,
|
|
189
|
-
|
|
190
|
-
]),
|
|
191
|
-
|
|
215
|
+
B
|
|
216
|
+
]), be = (e) => {
|
|
217
|
+
se((t) => {
|
|
192
218
|
let n = t[e] !== !1;
|
|
193
219
|
return {
|
|
194
220
|
...t,
|
|
@@ -196,186 +222,194 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: ee, groupBy:
|
|
|
196
222
|
};
|
|
197
223
|
});
|
|
198
224
|
}, Z = u(() => {
|
|
199
|
-
if (!S ||
|
|
225
|
+
if (!S || F.length === 0) return X;
|
|
200
226
|
let e = [], t = (n) => {
|
|
201
227
|
n.forEach((n) => {
|
|
202
|
-
n.isGroupRow ? (e.push(n),
|
|
228
|
+
n.isGroupRow ? (e.push(n), L[n.path] !== !1 && t(n.children)) : e.push(n);
|
|
203
229
|
});
|
|
204
230
|
};
|
|
205
231
|
return t(X), e;
|
|
206
232
|
}, [
|
|
207
233
|
X,
|
|
208
|
-
|
|
209
|
-
|
|
234
|
+
L,
|
|
235
|
+
F,
|
|
210
236
|
S
|
|
211
|
-
]), Q = (e, t = !1, n) =>
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
237
|
+
]), Q = (e, t = !1, n) => {
|
|
238
|
+
let r = _e[e];
|
|
239
|
+
if (!r) return n || {};
|
|
240
|
+
let i = r.side === "right";
|
|
241
|
+
return {
|
|
242
|
+
position: "sticky",
|
|
243
|
+
[i ? "right" : "left"]: `${r.offset}px`,
|
|
244
|
+
...t ? { top: 0 } : {},
|
|
245
|
+
zIndex: t ? 30 : 20,
|
|
246
|
+
background: "#f8fafc",
|
|
247
|
+
boxShadow: i ? "-2px 0 5px -2px rgba(0,0,0,0.1)" : "2px 0 5px -2px rgba(0,0,0,0.1)",
|
|
248
|
+
...n
|
|
249
|
+
};
|
|
250
|
+
}, xe = u(() => T.map((e, t) => (T.length - 1 - t) * 48), [T]), $ = U.length + +!!x + (S && F.length > 0 ? 1 : 0);
|
|
251
|
+
return /* @__PURE__ */ m("div", {
|
|
252
|
+
ref: W,
|
|
221
253
|
className: "flexi-root",
|
|
222
|
-
children: [S && /* @__PURE__ */
|
|
254
|
+
children: [S && /* @__PURE__ */ p("div", {
|
|
223
255
|
onDragOver: (e) => {
|
|
224
256
|
e.preventDefault(), R(!0);
|
|
225
257
|
},
|
|
226
258
|
onDragLeave: () => R(!1),
|
|
227
|
-
onDrop:
|
|
228
|
-
className:
|
|
229
|
-
children:
|
|
259
|
+
onDrop: he,
|
|
260
|
+
className: g("flexi-groupzone", ce && "flexi-groupzone--dragover"),
|
|
261
|
+
children: F.length === 0 ? /* @__PURE__ */ p("span", {
|
|
230
262
|
className: "flexi-groupzone-hint",
|
|
231
263
|
children: "Drag a column header here to group your records by that field"
|
|
232
|
-
}) : /* @__PURE__ */
|
|
264
|
+
}) : /* @__PURE__ */ m("div", {
|
|
233
265
|
className: "flexi-groupzone-chips",
|
|
234
|
-
children: [/* @__PURE__ */
|
|
266
|
+
children: [/* @__PURE__ */ p("span", {
|
|
235
267
|
className: "flexi-groupzone-label",
|
|
236
268
|
children: "Grouped By:"
|
|
237
|
-
}),
|
|
269
|
+
}), F.map((e) => /* @__PURE__ */ m("div", {
|
|
238
270
|
className: "flexi-chip",
|
|
239
|
-
children: [/* @__PURE__ */
|
|
271
|
+
children: [/* @__PURE__ */ p("span", { children: B.find((t) => t.key === e)?.header || e }), /* @__PURE__ */ p("button", {
|
|
240
272
|
type: "button",
|
|
241
|
-
onClick: () =>
|
|
273
|
+
onClick: () => ge(e),
|
|
242
274
|
className: "flexi-icon-btn flexi-chip-remove",
|
|
243
|
-
children: /* @__PURE__ */
|
|
275
|
+
children: /* @__PURE__ */ p(c, { className: "flexi-icon-xs" })
|
|
244
276
|
})]
|
|
245
277
|
}, e))]
|
|
246
278
|
})
|
|
247
|
-
}), /* @__PURE__ */
|
|
279
|
+
}), /* @__PURE__ */ p("div", {
|
|
248
280
|
className: "flexi-table-wrap",
|
|
249
|
-
style:
|
|
250
|
-
children: /* @__PURE__ */
|
|
251
|
-
className: "flexi-table",
|
|
252
|
-
style:
|
|
281
|
+
style: re,
|
|
282
|
+
children: /* @__PURE__ */ m("table", {
|
|
283
|
+
className: g("flexi-table", ae && "flexi-table--bordered"),
|
|
284
|
+
style: ie,
|
|
253
285
|
children: [
|
|
254
|
-
/* @__PURE__ */
|
|
255
|
-
S &&
|
|
256
|
-
|
|
257
|
-
x && /* @__PURE__ */
|
|
286
|
+
/* @__PURE__ */ m("colgroup", { children: [
|
|
287
|
+
S && F.length > 0 && /* @__PURE__ */ p("col", { style: { width: "48px" } }),
|
|
288
|
+
U.map((e) => /* @__PURE__ */ p("col", { style: e.style }, e.key)),
|
|
289
|
+
x && /* @__PURE__ */ p("col", { style: { width: "100px" } })
|
|
258
290
|
] }),
|
|
259
|
-
/* @__PURE__ */
|
|
291
|
+
/* @__PURE__ */ p("thead", {
|
|
260
292
|
className: "flexi-thead",
|
|
261
|
-
children:
|
|
293
|
+
children: K.map((r, i) => /* @__PURE__ */ m("tr", {
|
|
262
294
|
className: "flexi-header-row",
|
|
263
295
|
children: [
|
|
264
|
-
i === 0 && S &&
|
|
265
|
-
rowSpan:
|
|
296
|
+
i === 0 && S && F.length > 0 && /* @__PURE__ */ p("th", {
|
|
297
|
+
rowSpan: K.length,
|
|
266
298
|
className: "flexi-group-spacer-th",
|
|
267
299
|
style: {
|
|
268
300
|
position: "sticky",
|
|
301
|
+
top: 0,
|
|
269
302
|
left: 0,
|
|
270
303
|
zIndex: 35,
|
|
271
304
|
backgroundColor: "rgb(248, 250, 252)"
|
|
272
305
|
}
|
|
273
306
|
}),
|
|
274
307
|
r.map(({ col: r, rowSpan: i, colSpan: c }) => {
|
|
275
|
-
let l = (
|
|
276
|
-
return /* @__PURE__ */
|
|
308
|
+
let l = (k[r.key]?.length || 0) > 0, u = !!V[r.key], d = Q(r.key, !0, r.headerStyle), f = !r.children || r.children.length === 0, h = z.key === r.key, _ = !!(S && f);
|
|
309
|
+
return /* @__PURE__ */ p("th", {
|
|
277
310
|
rowSpan: i,
|
|
278
311
|
colSpan: c,
|
|
279
|
-
...
|
|
312
|
+
..._ ? {
|
|
280
313
|
draggable: !0,
|
|
281
|
-
onDragStart: (e) =>
|
|
314
|
+
onDragStart: (e) => me(e, r.key)
|
|
282
315
|
} : {},
|
|
283
|
-
className:
|
|
316
|
+
className: g("flexi-th", _ && "flexi-th--draggable", u && "flexi-th--pinned", r.className),
|
|
284
317
|
style: d,
|
|
285
|
-
children: /* @__PURE__ */
|
|
318
|
+
children: /* @__PURE__ */ m("div", {
|
|
286
319
|
className: "flexi-th-inner",
|
|
287
320
|
children: [
|
|
288
|
-
/* @__PURE__ */
|
|
289
|
-
className:
|
|
290
|
-
onClick: () => r.sortable && f &&
|
|
291
|
-
children: [/* @__PURE__ */
|
|
321
|
+
/* @__PURE__ */ m("div", {
|
|
322
|
+
className: g("flexi-th-label", r.sortable && f && "flexi-th-label--sortable"),
|
|
323
|
+
onClick: () => r.sortable && f && pe(r.key),
|
|
324
|
+
children: [/* @__PURE__ */ p("span", {
|
|
292
325
|
className: "flexi-th-text",
|
|
293
326
|
children: r.header
|
|
294
|
-
}), f && r.sortable && /* @__PURE__ */
|
|
295
|
-
className:
|
|
296
|
-
children:
|
|
327
|
+
}), f && r.sortable && /* @__PURE__ */ p("span", {
|
|
328
|
+
className: g("flexi-sort-icon", h && "flexi-sort-icon--active"),
|
|
329
|
+
children: h && z.direction === "asc" ? /* @__PURE__ */ p(t, { className: "flexi-icon-sm" }) : h && z.direction === "desc" ? /* @__PURE__ */ p(e, { className: "flexi-icon-sm" }) : /* @__PURE__ */ p(n, { className: "flexi-icon-sm" })
|
|
297
330
|
})]
|
|
298
331
|
}),
|
|
299
|
-
/* @__PURE__ */
|
|
332
|
+
/* @__PURE__ */ m("div", {
|
|
300
333
|
className: "flexi-th-actions",
|
|
301
|
-
children: [f && r.filterable && /* @__PURE__ */
|
|
334
|
+
children: [f && r.filterable && /* @__PURE__ */ p("button", {
|
|
302
335
|
type: "button",
|
|
303
336
|
ref: (e) => {
|
|
304
|
-
e ?
|
|
337
|
+
e ? P.current.set(r.key, e) : P.current.delete(r.key);
|
|
305
338
|
},
|
|
306
339
|
onClick: (e) => {
|
|
307
|
-
e.stopPropagation(),
|
|
340
|
+
e.stopPropagation(), M(""), O(D === r.key ? null : r.key);
|
|
308
341
|
},
|
|
309
|
-
className:
|
|
310
|
-
children: /* @__PURE__ */
|
|
311
|
-
}), f && /* @__PURE__ */
|
|
342
|
+
className: g("flexi-icon-btn", "flexi-filter-btn", l && "flexi-filter-btn--active"),
|
|
343
|
+
children: /* @__PURE__ */ p(a, { className: "flexi-icon-sm" })
|
|
344
|
+
}), f && /* @__PURE__ */ p("button", {
|
|
312
345
|
type: "button",
|
|
313
346
|
onClick: (e) => {
|
|
314
|
-
e.stopPropagation(),
|
|
347
|
+
e.stopPropagation(), fe(r.key);
|
|
315
348
|
},
|
|
316
|
-
className:
|
|
317
|
-
title:
|
|
318
|
-
children:
|
|
349
|
+
className: g("flexi-icon-btn", "flexi-pin-btn", u && "flexi-pin-btn--pinned"),
|
|
350
|
+
title: V[r.key] === "left" ? "Pinned left (click to pin right)" : V[r.key] === "right" ? "Pinned right (click to unpin)" : "Pin column left",
|
|
351
|
+
children: p(u ? s : o, { className: "flexi-icon-sm" })
|
|
319
352
|
})]
|
|
320
353
|
}),
|
|
321
|
-
|
|
322
|
-
ref:
|
|
354
|
+
D === r.key && f && N && W.current && ee(/* @__PURE__ */ m("div", {
|
|
355
|
+
ref: G,
|
|
323
356
|
className: "flexi-filter-dropdown",
|
|
324
357
|
style: {
|
|
325
|
-
top:
|
|
326
|
-
left:
|
|
358
|
+
top: N.top,
|
|
359
|
+
left: N.left,
|
|
327
360
|
zIndex: 9999
|
|
328
361
|
},
|
|
329
362
|
children: [
|
|
330
|
-
/* @__PURE__ */
|
|
363
|
+
/* @__PURE__ */ p("div", {
|
|
331
364
|
className: "flexi-filter-search",
|
|
332
|
-
children: /* @__PURE__ */
|
|
365
|
+
children: /* @__PURE__ */ p("input", {
|
|
333
366
|
type: "text",
|
|
334
367
|
placeholder: "Search values...",
|
|
335
|
-
value:
|
|
336
|
-
onChange: (e) =>
|
|
368
|
+
value: j,
|
|
369
|
+
onChange: (e) => M(e.target.value),
|
|
337
370
|
className: "flexi-input",
|
|
338
371
|
onClick: (e) => e.stopPropagation()
|
|
339
372
|
})
|
|
340
373
|
}),
|
|
341
|
-
/* @__PURE__ */
|
|
374
|
+
/* @__PURE__ */ p("div", {
|
|
342
375
|
className: "flexi-filter-list",
|
|
343
|
-
children: J.length === 0 ? /* @__PURE__ */
|
|
376
|
+
children: J.length === 0 ? /* @__PURE__ */ p("div", {
|
|
344
377
|
className: "flexi-filter-empty",
|
|
345
378
|
children: "No results found"
|
|
346
|
-
}) : J.map((e, t) => /* @__PURE__ */
|
|
379
|
+
}) : J.map((e, t) => /* @__PURE__ */ m("label", {
|
|
347
380
|
className: "flexi-filter-option",
|
|
348
|
-
children: [/* @__PURE__ */
|
|
381
|
+
children: [/* @__PURE__ */ p("input", {
|
|
349
382
|
type: "checkbox",
|
|
350
383
|
className: "flexi-checkbox",
|
|
351
|
-
checked:
|
|
352
|
-
onChange: () =>
|
|
353
|
-
}), /* @__PURE__ */
|
|
384
|
+
checked: k[r.key]?.includes(e) || !1,
|
|
385
|
+
onChange: () => ve(r.key, e)
|
|
386
|
+
}), /* @__PURE__ */ p("span", {
|
|
354
387
|
className: "flexi-filter-option-text",
|
|
355
388
|
children: String(e)
|
|
356
389
|
})]
|
|
357
390
|
}, t))
|
|
358
391
|
}),
|
|
359
|
-
l && /* @__PURE__ */
|
|
392
|
+
l && /* @__PURE__ */ p("div", {
|
|
360
393
|
className: "flexi-filter-footer",
|
|
361
|
-
children: /* @__PURE__ */
|
|
394
|
+
children: /* @__PURE__ */ p("button", {
|
|
362
395
|
type: "button",
|
|
363
|
-
onClick: () =>
|
|
396
|
+
onClick: () => ye(r.key),
|
|
364
397
|
className: "flexi-filter-clear",
|
|
365
398
|
children: "Clear Filter"
|
|
366
399
|
})
|
|
367
400
|
})
|
|
368
401
|
]
|
|
369
|
-
}),
|
|
402
|
+
}), W.current)
|
|
370
403
|
]
|
|
371
404
|
})
|
|
372
405
|
}, r.key);
|
|
373
406
|
}),
|
|
374
|
-
i === 0 && x && /* @__PURE__ */
|
|
375
|
-
rowSpan:
|
|
407
|
+
i === 0 && x && /* @__PURE__ */ p("th", {
|
|
408
|
+
rowSpan: K.length,
|
|
376
409
|
className: "flexi-actions-th",
|
|
377
410
|
style: {
|
|
378
411
|
position: "sticky",
|
|
412
|
+
top: 0,
|
|
379
413
|
right: 0,
|
|
380
414
|
zIndex: 35,
|
|
381
415
|
backgroundColor: "rgb(248, 250, 252)"
|
|
@@ -384,94 +418,143 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: ee, groupBy:
|
|
|
384
418
|
]
|
|
385
419
|
}, `header-row-${i}`))
|
|
386
420
|
}),
|
|
387
|
-
/* @__PURE__ */
|
|
421
|
+
/* @__PURE__ */ p("tbody", {
|
|
388
422
|
className: "flexi-tbody",
|
|
389
|
-
children:
|
|
423
|
+
children: te ? /* @__PURE__ */ p("tr", { children: /* @__PURE__ */ p("td", {
|
|
390
424
|
colSpan: $,
|
|
391
425
|
className: "flexi-empty-cell",
|
|
392
426
|
children: "Loading records..."
|
|
393
|
-
}) }) : Z.length === 0 ? /* @__PURE__ */
|
|
427
|
+
}) }) : Z.length === 0 ? /* @__PURE__ */ p("tr", { children: /* @__PURE__ */ p("td", {
|
|
394
428
|
colSpan: $,
|
|
395
429
|
className: "flexi-empty-cell",
|
|
396
430
|
children: "No records found matching criteria."
|
|
397
|
-
}) }) : Z.map((e, t) =>
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
children: [/* @__PURE__ */ m("td", {
|
|
403
|
-
className: "flexi-group-cell",
|
|
404
|
-
style: {
|
|
405
|
-
position: "sticky",
|
|
406
|
-
left: 0,
|
|
407
|
-
zIndex: 20,
|
|
408
|
-
backgroundColor: "rgba(248, 250, 252, 0.9)",
|
|
409
|
-
paddingLeft: `${e.depth * 12 + 16}px`
|
|
410
|
-
},
|
|
411
|
-
children: /* @__PURE__ */ h("button", {
|
|
412
|
-
type: "button",
|
|
413
|
-
onClick: () => he(e.path),
|
|
414
|
-
className: "flexi-group-toggle",
|
|
415
|
-
children: [
|
|
416
|
-
m(n ? r : i, { className: "flexi-icon-md flexi-icon-muted" }),
|
|
417
|
-
/* @__PURE__ */ m("span", {
|
|
418
|
-
className: "flexi-group-value",
|
|
419
|
-
children: e.groupValue
|
|
420
|
-
}),
|
|
421
|
-
/* @__PURE__ */ m("span", {
|
|
422
|
-
className: "flexi-group-count",
|
|
423
|
-
children: e.totalItemsCount
|
|
424
|
-
})
|
|
425
|
-
]
|
|
426
|
-
})
|
|
427
|
-
}), /* @__PURE__ */ m("td", {
|
|
428
|
-
colSpan: $ - 1,
|
|
429
|
-
className: "flexi-group-filler"
|
|
430
|
-
})]
|
|
431
|
-
}, `group-header-${e.path}-${t}`);
|
|
432
|
-
}
|
|
433
|
-
return /* @__PURE__ */ h("tr", {
|
|
434
|
-
className: "flexi-row",
|
|
435
|
-
children: [
|
|
436
|
-
S && P?.length > 0 && /* @__PURE__ */ m("td", {
|
|
437
|
-
className: "flexi-row-indent-cell",
|
|
438
|
-
style: {
|
|
439
|
-
position: "sticky",
|
|
440
|
-
left: 0,
|
|
441
|
-
zIndex: 10
|
|
442
|
-
}
|
|
443
|
-
}),
|
|
444
|
-
W?.map((t) => {
|
|
445
|
-
let n = e[t.key], r = Q(t.key, !1, t.style);
|
|
446
|
-
return /* @__PURE__ */ m("td", {
|
|
447
|
-
className: _("flexi-cell", H.includes(t.key) && "flexi-cell--pinned", t.className),
|
|
448
|
-
style: r,
|
|
449
|
-
children: t.render ? t.render(n, e) : /* @__PURE__ */ m("span", {
|
|
450
|
-
className: "flexi-cell-text",
|
|
451
|
-
children: n
|
|
452
|
-
})
|
|
453
|
-
}, t.key);
|
|
454
|
-
}),
|
|
455
|
-
x && /* @__PURE__ */ m("td", {
|
|
456
|
-
className: "flexi-actions-cell",
|
|
457
|
-
style: {
|
|
458
|
-
position: "sticky",
|
|
459
|
-
right: 0,
|
|
460
|
-
zIndex: 20
|
|
461
|
-
},
|
|
462
|
-
children: /* @__PURE__ */ m("div", {
|
|
463
|
-
className: "flexi-actions-inner",
|
|
464
|
-
children: x(e)
|
|
465
|
-
})
|
|
466
|
-
})
|
|
467
|
-
]
|
|
468
|
-
}, oe(e) ?? `row-${t}`);
|
|
469
|
-
})
|
|
431
|
+
}) }) : Z.map((e, t) => Se(e, t))
|
|
432
|
+
}),
|
|
433
|
+
T.length > 0 && /* @__PURE__ */ p("tbody", {
|
|
434
|
+
className: "flexi-tbody flexi-tbody--pinned-bottom",
|
|
435
|
+
children: T.map((e, t) => Ce(e, t))
|
|
470
436
|
})
|
|
471
437
|
]
|
|
472
438
|
})
|
|
473
439
|
})]
|
|
474
440
|
});
|
|
441
|
+
function Se(e, t) {
|
|
442
|
+
if (e.isGroupRow) {
|
|
443
|
+
let n = L[e.path] !== !1;
|
|
444
|
+
return /* @__PURE__ */ m("tr", {
|
|
445
|
+
className: "flexi-group-row",
|
|
446
|
+
children: [/* @__PURE__ */ p("td", {
|
|
447
|
+
className: "flexi-group-cell",
|
|
448
|
+
style: {
|
|
449
|
+
position: "sticky",
|
|
450
|
+
left: 0,
|
|
451
|
+
zIndex: 20,
|
|
452
|
+
backgroundColor: "rgba(248, 250, 252, 0.9)",
|
|
453
|
+
paddingLeft: `${e.depth * 12 + 16}px`
|
|
454
|
+
},
|
|
455
|
+
children: /* @__PURE__ */ m("button", {
|
|
456
|
+
type: "button",
|
|
457
|
+
onClick: () => be(e.path),
|
|
458
|
+
className: "flexi-group-toggle",
|
|
459
|
+
children: [
|
|
460
|
+
p(n ? r : i, { className: "flexi-icon-md flexi-icon-muted" }),
|
|
461
|
+
/* @__PURE__ */ p("span", {
|
|
462
|
+
className: "flexi-group-value",
|
|
463
|
+
children: e.groupValue
|
|
464
|
+
}),
|
|
465
|
+
/* @__PURE__ */ p("span", {
|
|
466
|
+
className: "flexi-group-count",
|
|
467
|
+
children: e.totalItemsCount
|
|
468
|
+
})
|
|
469
|
+
]
|
|
470
|
+
})
|
|
471
|
+
}), /* @__PURE__ */ p("td", {
|
|
472
|
+
colSpan: $ - 1,
|
|
473
|
+
className: "flexi-group-filler"
|
|
474
|
+
})]
|
|
475
|
+
}, `group-header-${e.path}-${t}`);
|
|
476
|
+
}
|
|
477
|
+
let n = de(e);
|
|
478
|
+
return /* @__PURE__ */ m("tr", {
|
|
479
|
+
className: "flexi-row",
|
|
480
|
+
children: [
|
|
481
|
+
S && F?.length > 0 && /* @__PURE__ */ p("td", {
|
|
482
|
+
className: "flexi-row-indent-cell",
|
|
483
|
+
style: {
|
|
484
|
+
position: "sticky",
|
|
485
|
+
left: 0,
|
|
486
|
+
zIndex: 10
|
|
487
|
+
}
|
|
488
|
+
}),
|
|
489
|
+
U?.map((t) => {
|
|
490
|
+
let n = e[t.key], r = Q(t.key, !1, t.style);
|
|
491
|
+
return /* @__PURE__ */ p("td", {
|
|
492
|
+
className: g("flexi-cell", !!V[t.key] && "flexi-cell--pinned", t.className),
|
|
493
|
+
style: r,
|
|
494
|
+
children: t.render ? t.render(n, e) : /* @__PURE__ */ p("span", {
|
|
495
|
+
className: "flexi-cell-text",
|
|
496
|
+
children: n
|
|
497
|
+
})
|
|
498
|
+
}, t.key);
|
|
499
|
+
}),
|
|
500
|
+
x && /* @__PURE__ */ p("td", {
|
|
501
|
+
className: "flexi-actions-cell",
|
|
502
|
+
style: {
|
|
503
|
+
position: "sticky",
|
|
504
|
+
right: 0
|
|
505
|
+
},
|
|
506
|
+
children: /* @__PURE__ */ p("div", {
|
|
507
|
+
className: "flexi-actions-inner",
|
|
508
|
+
children: x(e)
|
|
509
|
+
})
|
|
510
|
+
})
|
|
511
|
+
]
|
|
512
|
+
}, n ?? `row-${t}`);
|
|
513
|
+
}
|
|
514
|
+
function Ce(e, t) {
|
|
515
|
+
let n = typeof E == "function" ? E(e, t) : E, r = {
|
|
516
|
+
position: "sticky",
|
|
517
|
+
bottom: `${xe[t]}px`,
|
|
518
|
+
background: "#",
|
|
519
|
+
zIndex: 45
|
|
520
|
+
};
|
|
521
|
+
return /* @__PURE__ */ m("tr", {
|
|
522
|
+
className: g("flexi-row", "flexi-row--pinned-bottom", n),
|
|
523
|
+
style: r,
|
|
524
|
+
children: [
|
|
525
|
+
S && F?.length > 0 && /* @__PURE__ */ p("td", {
|
|
526
|
+
className: "flexi-row-indent-cell",
|
|
527
|
+
style: {
|
|
528
|
+
position: "sticky",
|
|
529
|
+
left: 0,
|
|
530
|
+
zIndex: 10
|
|
531
|
+
}
|
|
532
|
+
}),
|
|
533
|
+
U?.map((t) => {
|
|
534
|
+
let n = e[t.key], r = Q(t.key, !1, t.style), i = !!V[t.key], a = t.pinnedRender ?? t.render;
|
|
535
|
+
return /* @__PURE__ */ p("td", {
|
|
536
|
+
className: g("flexi-cell", i && "flexi-cell--pinned", t.className),
|
|
537
|
+
style: r,
|
|
538
|
+
children: a ? a(n, e) : /* @__PURE__ */ p("span", {
|
|
539
|
+
className: "flexi-cell-text",
|
|
540
|
+
children: n
|
|
541
|
+
})
|
|
542
|
+
}, t.key);
|
|
543
|
+
}),
|
|
544
|
+
x && /* @__PURE__ */ p("td", {
|
|
545
|
+
className: "flexi-actions-cell",
|
|
546
|
+
style: {
|
|
547
|
+
position: "sticky",
|
|
548
|
+
right: 0
|
|
549
|
+
},
|
|
550
|
+
children: /* @__PURE__ */ p("div", {
|
|
551
|
+
className: "flexi-actions-inner",
|
|
552
|
+
children: x(e)
|
|
553
|
+
})
|
|
554
|
+
})
|
|
555
|
+
]
|
|
556
|
+
}, `pinned-bottom-row-${t}`);
|
|
557
|
+
}
|
|
475
558
|
}
|
|
476
559
|
//#endregion
|
|
477
560
|
export { v as DataTable };
|
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("lucide-react"),require("react"),require("react-dom"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`lucide-react`,`react`,`react-dom`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.FlexiDataGrid={},e.LucideReact,e.React,e.ReactDOM,e.JSX))})(this,function(e,t,n,r,i){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var a=Object.create,o=Object.defineProperty,s=Object.getOwnPropertyDescriptor,c=Object.getOwnPropertyNames,l=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,d=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=c(t),a=0,l=i.length,d;a<l;a++)d=i[a],!u.call(e,d)&&d!==n&&o(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=s(t,d))||r.enumerable});return e};n=((e,t,n)=>(n=e==null?{}:a(l(e)),d(t||!e||!e.__esModule?o(n,`default`,{value:e,enumerable:!0}):n,e)))(n,1);var f=e=>{let t=[];return e.forEach(e=>{e.children&&e.children.length>0?t.push(...f(e.children)):t.push(e)}),t},p=(...e)=>e.filter(Boolean).join(` `);function m({columns:e,data:a,rowKey:o,actions:s,isLoading:c,groupBy:l=!1,defaultGroupBy:u=[],onPinChange:d,onGroupChange:m,containerStyle:h,tableStyle:g}){let[_,v]=(0,n.useState)(null),[y,b]=(0,n.useState)({}),[x,S]=(0,n.useState)(``),[C,w]=(0,n.useState)(null),T=(0,n.useRef)(new Map),[E,D]=(0,n.useState)(u),[O,k]=(0,n.useState)({}),[A,j]=(0,n.useState)(!1),[M,N]=(0,n.useState)({key:null,direction:null}),P=(0,n.useMemo)(()=>f(e),[e]),[F,I]=(0,n.useState)(P.filter(e=>e.pinned).map(e=>e.key)),L=(0,n.useMemo)(()=>{let t=e=>[...e].sort((e,t)=>{let n=F.includes(e.key),r=F.includes(t.key);return n&&!r?-1:!n&&r?1:0}).map(e=>e.children&&e.children.length>0?{...e,children:t(e.children)}:e);return t(e)},[e,F]),R=(0,n.useMemo)(()=>{let e=f(L),t=l?E:[];return e.filter(e=>!t.includes(e.key))},[L,E,l]),z=(0,n.useRef)(null),B=(0,n.useRef)(null);(0,n.useEffect)(()=>{function e(e){let t=e.target,n=_?T.current.get(_):null;B.current&&!B.current.contains(t)&&!(n&&n.contains(t))&&(v(null),S(``))}return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[_]),(0,n.useEffect)(()=>{if(!_)return;let e=()=>{let e=T.current.get(_),t=z.current;if(!e||!t)return;let n=e.getBoundingClientRect(),r=t.getBoundingClientRect();w({top:n.bottom-r.top+4,left:n.left-r.left})};return e(),window.addEventListener(`scroll`,e,!0),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`scroll`,e,!0),window.removeEventListener(`resize`,e)}},[_]);let V=e=>typeof o==`function`?o(e):String(e[o]),H=e=>{let t=F.includes(e);I(t?F.filter(t=>t!==e):[...F,e]),d&&d(e,!t)},U=e=>{let t=`asc`;M.key===e&&(t=M.direction===`asc`?`desc`:M.direction===`desc`?null:`asc`),N({key:t?e:null,direction:t})},W=(e,t)=>{l&&(e.dataTransfer.setData(`text/plain`,t),e.dataTransfer.effectAllowed=`move`)},G=e=>{e.preventDefault(),j(!1);let t=e.dataTransfer.getData(`text/plain`);if(t&&!E.includes(t)){let e=[...E,t];D(e),m&&m(e)}},K=e=>{let t=E.filter(t=>t!==e);D(t),k({}),m&&m(t)},q=(0,n.useMemo)(()=>{let e=t=>{let n=0;return t.forEach(t=>{n=t.children&&t.children.length>0?Math.max(n,1+e(t.children)):Math.max(n,1)}),n},t=e(L),n=Array.from({length:t},()=>[]),r=e=>!e.children||e.children.length===0?E.includes(e.key)&&l?0:1:e.children.reduce((e,t)=>e+r(t),0),i=l?E:[],a=(e,o)=>{e.forEach(e=>{if(i.includes(e.key))return;let s=r(e);s!==0&&(e.children&&e.children.length>0?(n[o].push({col:e,rowSpan:1,colSpan:s}),a(e.children,o+1)):n[o].push({col:e,rowSpan:t-o,colSpan:1}))})};return a(L,0),n.filter(e=>e.length>0)},[L,E,l]),ee=(0,n.useMemo)(()=>{let e={},t=0;return l&&E.length>0&&(t+=48),R.forEach(n=>{if(F.includes(n.key)){e[n.key]=t;let r=n.style?.width||n.headerStyle?.width||`150px`;t+=typeof r==`number`?r:parseInt(String(r),10)||150}}),e},[R,F,E,l]),te=(e,t)=>{b(n=>{let r=n[e]||[],i=r.includes(t)?r.filter(e=>e!==t):[...r,t],a={...n,[e]:i};return a[e].length===0&&delete a[e],a})},ne=e=>{b(t=>{let n={...t};return delete n[e],n})},J=(0,n.useMemo)(()=>{if(!_)return[];let e=P.find(e=>e.key===_),t=a.map(t=>e?.getValue?e.getValue(t):t[_]),n=Array.from(new Set(t)).filter(e=>e!=null);return x.trim()?n.filter(e=>String(e).toLowerCase().includes(x.toLowerCase())):n},[a,_,x,P]),Y=(0,n.useMemo)(()=>{let e=a.filter(e=>Object.entries(y).every(([t,n])=>{if(!n||n.length===0)return!0;let r=P.find(e=>e.key===t),i=r?.getValue?r.getValue(e):e[t];return n.includes(i)}));if(M.key&&M.direction){let{key:t,direction:n}=M,r=P.find(e=>e.key===t);e=[...e].sort((e,i)=>{let a=r?.getValue?r.getValue(e):e[t],o=r?.getValue?r.getValue(i):i[t];if(a===o)return 0;if(a==null)return 1;if(o==null)return-1;let s=0;return s=typeof a==`number`&&typeof o==`number`?a-o:String(a).localeCompare(String(o),void 0,{numeric:!0,sensitivity:`base`}),n===`asc`?s:-s})}return e},[a,y,M,P]),X=(0,n.useMemo)(()=>{if(!l||E.length===0)return Y;let e=(t,n,r=``)=>{if(n>=E.length)return t;let i=E[n],a=P.find(e=>e.key===i),o={};return t.forEach(e=>{let t=a?.getValue?a.getValue(e):e[i],n=String(t??`N/A`);o[n]||(o[n]=[]),o[n].push(e)}),Object.entries(o).map(([t,a])=>{let o=r?`${r}➔${t}`:t;return{isGroupRow:!0,groupKey:i,groupValue:t,path:o,depth:n,children:e(a,n+1,o),totalItemsCount:a.length}})};return e(Y,0)},[Y,E,l,P]),re=e=>{k(t=>{let n=t[e]!==!1;return{...t,[e]:!n}})},Z=(0,n.useMemo)(()=>{if(!l||E.length===0)return X;let e=[],t=n=>{n.forEach(n=>{n.isGroupRow?(e.push(n),O[n.path]!==!1&&t(n.children)):e.push(n)})};return t(X),e},[X,O,E,l]),Q=(e,t=!1,n)=>F.includes(e)?{position:`sticky`,left:`${ee[e]}px`,zIndex:t?30:20,backgroundColor:`#fff`,boxShadow:`2px 0 5px -2px rgba(0,0,0,0.1)`,...n}:n||{},$=R.length+ +!!s+(l&&E.length>0?1:0);return(0,i.jsxs)(`div`,{ref:z,className:`flexi-root`,children:[l&&(0,i.jsx)(`div`,{onDragOver:e=>{e.preventDefault(),j(!0)},onDragLeave:()=>j(!1),onDrop:G,className:p(`flexi-groupzone`,A&&`flexi-groupzone--dragover`),children:E.length===0?(0,i.jsx)(`span`,{className:`flexi-groupzone-hint`,children:`Drag a column header here to group your records by that field`}):(0,i.jsxs)(`div`,{className:`flexi-groupzone-chips`,children:[(0,i.jsx)(`span`,{className:`flexi-groupzone-label`,children:`Grouped By:`}),E.map(e=>(0,i.jsxs)(`div`,{className:`flexi-chip`,children:[(0,i.jsx)(`span`,{children:P.find(t=>t.key===e)?.header||e}),(0,i.jsx)(`button`,{type:`button`,onClick:()=>K(e),className:`flexi-icon-btn flexi-chip-remove`,children:(0,i.jsx)(t.X,{className:`flexi-icon-xs`})})]},e))]})}),(0,i.jsx)(`div`,{className:`flexi-table-wrap`,style:h,children:(0,i.jsxs)(`table`,{className:`flexi-table`,style:g,children:[(0,i.jsxs)(`colgroup`,{children:[l&&E.length>0&&(0,i.jsx)(`col`,{style:{width:`48px`}}),R.map(e=>(0,i.jsx)(`col`,{style:e.style},e.key)),s&&(0,i.jsx)(`col`,{style:{width:`100px`}})]}),(0,i.jsx)(`thead`,{className:`flexi-thead`,children:q.map((e,n)=>(0,i.jsxs)(`tr`,{className:`flexi-header-row`,children:[n===0&&l&&E.length>0&&(0,i.jsx)(`th`,{rowSpan:q.length,className:`flexi-group-spacer-th`,style:{position:`sticky`,left:0,zIndex:35,backgroundColor:`rgb(248, 250, 252)`}}),e.map(({col:e,rowSpan:n,colSpan:a})=>{let o=(y[e.key]?.length||0)>0,s=F.includes(e.key),c=Q(e.key,!0,e.headerStyle),u=!e.children||e.children.length===0,d=M.key===e.key,f=!!(l&&u);return(0,i.jsx)(`th`,{rowSpan:n,colSpan:a,...f?{draggable:!0,onDragStart:t=>W(t,e.key)}:{},className:p(`flexi-th`,f&&`flexi-th--draggable`,s&&`flexi-th--pinned`,e.className),style:c,children:(0,i.jsxs)(`div`,{className:`flexi-th-inner`,children:[(0,i.jsxs)(`div`,{className:p(`flexi-th-label`,e.sortable&&u&&`flexi-th-label--sortable`),onClick:()=>e.sortable&&u&&U(e.key),children:[(0,i.jsx)(`span`,{className:`flexi-th-text`,children:e.header}),u&&e.sortable&&(0,i.jsx)(`span`,{className:p(`flexi-sort-icon`,d&&`flexi-sort-icon--active`),children:d&&M.direction===`asc`?(0,i.jsx)(t.ArrowUp,{className:`flexi-icon-sm`}):d&&M.direction===`desc`?(0,i.jsx)(t.ArrowDown,{className:`flexi-icon-sm`}):(0,i.jsx)(t.ArrowUpDown,{className:`flexi-icon-sm`})})]}),(0,i.jsxs)(`div`,{className:`flexi-th-actions`,children:[u&&e.filterable&&(0,i.jsx)(`button`,{type:`button`,ref:t=>{t?T.current.set(e.key,t):T.current.delete(e.key)},onClick:t=>{t.stopPropagation(),S(``),v(_===e.key?null:e.key)},className:p(`flexi-icon-btn`,`flexi-filter-btn`,o&&`flexi-filter-btn--active`),children:(0,i.jsx)(t.Filter,{className:`flexi-icon-sm`})}),u&&(0,i.jsx)(`button`,{type:`button`,onClick:t=>{t.stopPropagation(),H(e.key)},className:p(`flexi-icon-btn`,`flexi-pin-btn`,s&&`flexi-pin-btn--pinned`),title:s?`Unpin column`:`Pin column`,children:s?(0,i.jsx)(t.PinOff,{className:`flexi-icon-sm`}):(0,i.jsx)(t.Pin,{className:`flexi-icon-sm`})})]}),_===e.key&&u&&C&&z.current&&(0,r.createPortal)((0,i.jsxs)(`div`,{ref:B,className:`flexi-filter-dropdown`,style:{top:C.top,left:C.left,zIndex:9999},children:[(0,i.jsx)(`div`,{className:`flexi-filter-search`,children:(0,i.jsx)(`input`,{type:`text`,placeholder:`Search values...`,value:x,onChange:e=>S(e.target.value),className:`flexi-input`,onClick:e=>e.stopPropagation()})}),(0,i.jsx)(`div`,{className:`flexi-filter-list`,children:J.length===0?(0,i.jsx)(`div`,{className:`flexi-filter-empty`,children:`No results found`}):J.map((t,n)=>(0,i.jsxs)(`label`,{className:`flexi-filter-option`,children:[(0,i.jsx)(`input`,{type:`checkbox`,className:`flexi-checkbox`,checked:y[e.key]?.includes(t)||!1,onChange:()=>te(e.key,t)}),(0,i.jsx)(`span`,{className:`flexi-filter-option-text`,children:String(t)})]},n))}),o&&(0,i.jsx)(`div`,{className:`flexi-filter-footer`,children:(0,i.jsx)(`button`,{type:`button`,onClick:()=>ne(e.key),className:`flexi-filter-clear`,children:`Clear Filter`})})]}),z.current)]})},e.key)}),n===0&&s&&(0,i.jsx)(`th`,{rowSpan:q.length,className:`flexi-actions-th`,style:{position:`sticky`,right:0,zIndex:35,backgroundColor:`rgb(248, 250, 252)`}})]},`header-row-${n}`))}),(0,i.jsx)(`tbody`,{className:`flexi-tbody`,children:c?(0,i.jsx)(`tr`,{children:(0,i.jsx)(`td`,{colSpan:$,className:`flexi-empty-cell`,children:`Loading records...`})}):Z.length===0?(0,i.jsx)(`tr`,{children:(0,i.jsx)(`td`,{colSpan:$,className:`flexi-empty-cell`,children:`No records found matching criteria.`})}):Z.map((e,n)=>{if(e.isGroupRow){let r=O[e.path]!==!1;return(0,i.jsxs)(`tr`,{className:`flexi-group-row`,children:[(0,i.jsx)(`td`,{className:`flexi-group-cell`,style:{position:`sticky`,left:0,zIndex:20,backgroundColor:`rgba(248, 250, 252, 0.9)`,paddingLeft:`${e.depth*12+16}px`},children:(0,i.jsxs)(`button`,{type:`button`,onClick:()=>re(e.path),className:`flexi-group-toggle`,children:[r?(0,i.jsx)(t.ChevronDown,{className:`flexi-icon-md flexi-icon-muted`}):(0,i.jsx)(t.ChevronRight,{className:`flexi-icon-md flexi-icon-muted`}),(0,i.jsx)(`span`,{className:`flexi-group-value`,children:e.groupValue}),(0,i.jsx)(`span`,{className:`flexi-group-count`,children:e.totalItemsCount})]})}),(0,i.jsx)(`td`,{colSpan:$-1,className:`flexi-group-filler`})]},`group-header-${e.path}-${n}`)}return(0,i.jsxs)(`tr`,{className:`flexi-row`,children:[l&&E?.length>0&&(0,i.jsx)(`td`,{className:`flexi-row-indent-cell`,style:{position:`sticky`,left:0,zIndex:10}}),R?.map(t=>{let n=e[t.key],r=Q(t.key,!1,t.style);return(0,i.jsx)(`td`,{className:p(`flexi-cell`,F.includes(t.key)&&`flexi-cell--pinned`,t.className),style:r,children:t.render?t.render(n,e):(0,i.jsx)(`span`,{className:`flexi-cell-text`,children:n})},t.key)}),s&&(0,i.jsx)(`td`,{className:`flexi-actions-cell`,style:{position:`sticky`,right:0,zIndex:20},children:(0,i.jsx)(`div`,{className:`flexi-actions-inner`,children:s(e)})})]},V(e)??`row-${n}`)})})]})})]})}e.DataTable=m});
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("lucide-react"),require("react"),require("react-dom"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`lucide-react`,`react`,`react-dom`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.FlexiDataGrid={},e.LucideReact,e.React,e.ReactDOM,e.JSX))})(this,function(e,t,n,r,i){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var a=Object.create,o=Object.defineProperty,s=Object.getOwnPropertyDescriptor,c=Object.getOwnPropertyNames,l=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,d=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=c(t),a=0,l=i.length,d;a<l;a++)d=i[a],!u.call(e,d)&&d!==n&&o(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=s(t,d))||r.enumerable});return e};n=((e,t,n)=>(n=e==null?{}:a(l(e)),d(t||!e||!e.__esModule?o(n,`default`,{value:e,enumerable:!0}):n,e)))(n,1);var f=e=>{let t=[];return e.forEach(e=>{e.children&&e.children.length>0?t.push(...f(e.children)):t.push(e)}),t},p=(...e)=>e.filter(Boolean).join(` `),m=e=>{if(e===!0)return`left`;if(e===`left`||e===`right`)return e};function h({columns:e,data:a,rowKey:o,actions:s,isLoading:c,groupBy:l=!1,defaultGroupBy:u=[],onPinChange:d,onGroupChange:h,containerStyle:g,tableStyle:ee,bordered:te=!1,pinnedBottomRowData:_=[],pinnedRowClassName:v}){let[y,b]=(0,n.useState)(null),[x,S]=(0,n.useState)({}),[C,w]=(0,n.useState)(``),[T,E]=(0,n.useState)(null),D=(0,n.useRef)(new Map),[O,k]=(0,n.useState)(u),[A,j]=(0,n.useState)({}),[ne,M]=(0,n.useState)(!1),[N,re]=(0,n.useState)({key:null,direction:null}),P=(0,n.useMemo)(()=>f(e),[e]),[F,ie]=(0,n.useState)(()=>{let e={};return P.forEach(t=>{let n=m(t.pinned);n&&(e[t.key]=n)}),e}),I=(0,n.useMemo)(()=>{let t=e=>{let n=e=>{let t=F[e];return t===`left`?0:t===`right`?2:1};return[...e].sort((e,t)=>n(e.key)-n(t.key)).map(e=>e.children&&e.children.length>0?{...e,children:t(e.children)}:e)};return t(e)},[e,F]),L=(0,n.useMemo)(()=>{let e=f(I),t=l?O:[];return e.filter(e=>!t.includes(e.key))},[I,O,l]),R=(0,n.useRef)(null),z=(0,n.useRef)(null);(0,n.useEffect)(()=>{function e(e){let t=e.target,n=y?D.current.get(y):null;z.current&&!z.current.contains(t)&&!(n&&n.contains(t))&&(b(null),w(``))}return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[y]),(0,n.useEffect)(()=>{if(!y)return;let e=()=>{let e=D.current.get(y),t=R.current;if(!e||!t)return;let n=e.getBoundingClientRect(),r=t.getBoundingClientRect();E({top:n.bottom-r.top+4,left:n.left-r.left})};return e(),window.addEventListener(`scroll`,e,!0),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`scroll`,e,!0),window.removeEventListener(`resize`,e)}},[y]);let ae=e=>typeof o==`function`?o(e):String(e[o]),oe=e=>{ie(t=>{let n=t[e],r=n?n===`left`?`right`:void 0:`left`,i={...t};return r?i[e]=r:delete i[e],d&&d(e,!!r,r),i})},B=e=>{let t=`asc`;N.key===e&&(t=N.direction===`asc`?`desc`:N.direction===`desc`?null:`asc`),re({key:t?e:null,direction:t})},V=(e,t)=>{l&&(e.dataTransfer.setData(`text/plain`,t),e.dataTransfer.effectAllowed=`move`)},H=e=>{e.preventDefault(),M(!1);let t=e.dataTransfer.getData(`text/plain`);if(t&&!O.includes(t)){let e=[...O,t];k(e),h&&h(e)}},U=e=>{let t=O.filter(t=>t!==e);k(t),j({}),h&&h(t)},W=(0,n.useMemo)(()=>{let e=t=>{let n=0;return t.forEach(t=>{n=t.children&&t.children.length>0?Math.max(n,1+e(t.children)):Math.max(n,1)}),n},t=e(I),n=Array.from({length:t},()=>[]),r=e=>!e.children||e.children.length===0?O.includes(e.key)&&l?0:1:e.children.reduce((e,t)=>e+r(t),0),i=l?O:[],a=(e,o)=>{e.forEach(e=>{if(i.includes(e.key))return;let s=r(e);s!==0&&(e.children&&e.children.length>0?(n[o].push({col:e,rowSpan:1,colSpan:s}),a(e.children,o+1)):n[o].push({col:e,rowSpan:t-o,colSpan:1}))})};return a(I,0),n.filter(e=>e.length>0)},[I,O,l]),G=e=>{let t=e.style?.width||e.headerStyle?.width||`150px`;return typeof t==`number`?t:parseInt(String(t),10)||150},K=(0,n.useMemo)(()=>{let e={},t=0;l&&O.length>0&&(t+=48),L.forEach(n=>{F[n.key]===`left`&&(e[n.key]={side:`left`,offset:t},t+=G(n))});let n=s?100:0;for(let t=L.length-1;t>=0;t--){let r=L[t];F[r.key]===`right`&&(e[r.key]={side:`right`,offset:n},n+=G(r))}return e},[L,F,O,l,s]),se=(e,t)=>{S(n=>{let r=n[e]||[],i=r.includes(t)?r.filter(e=>e!==t):[...r,t],a={...n,[e]:i};return a[e].length===0&&delete a[e],a})},q=e=>{S(t=>{let n={...t};return delete n[e],n})},J=(0,n.useMemo)(()=>{if(!y)return[];let e=P.find(e=>e.key===y),t=a.map(t=>e?.getValue?e.getValue(t):t[y]),n=Array.from(new Set(t)).filter(e=>e!=null);return C.trim()?n.filter(e=>String(e).toLowerCase().includes(C.toLowerCase())):n},[a,y,C,P]),Y=(0,n.useMemo)(()=>{let e=a.filter(e=>Object.entries(x).every(([t,n])=>{if(!n||n.length===0)return!0;let r=P.find(e=>e.key===t),i=r?.getValue?r.getValue(e):e[t];return n.includes(i)}));if(N.key&&N.direction){let{key:t,direction:n}=N,r=P.find(e=>e.key===t);e=[...e].sort((e,i)=>{let a=r?.getValue?r.getValue(e):e[t],o=r?.getValue?r.getValue(i):i[t];if(a===o)return 0;if(a==null)return 1;if(o==null)return-1;let s=0;return s=typeof a==`number`&&typeof o==`number`?a-o:String(a).localeCompare(String(o),void 0,{numeric:!0,sensitivity:`base`}),n===`asc`?s:-s})}return e},[a,x,N,P]),X=(0,n.useMemo)(()=>{if(!l||O.length===0)return Y;let e=(t,n,r=``)=>{if(n>=O.length)return t;let i=O[n],a=P.find(e=>e.key===i),o={};return t.forEach(e=>{let t=a?.getValue?a.getValue(e):e[i],n=String(t??`N/A`);o[n]||(o[n]=[]),o[n].push(e)}),Object.entries(o).map(([t,a])=>{let o=r?`${r}➔${t}`:t;return{isGroupRow:!0,groupKey:i,groupValue:t,path:o,depth:n,children:e(a,n+1,o),totalItemsCount:a.length}})};return e(Y,0)},[Y,O,l,P]),ce=e=>{j(t=>{let n=t[e]!==!1;return{...t,[e]:!n}})},Z=(0,n.useMemo)(()=>{if(!l||O.length===0)return X;let e=[],t=n=>{n.forEach(n=>{n.isGroupRow?(e.push(n),A[n.path]!==!1&&t(n.children)):e.push(n)})};return t(X),e},[X,A,O,l]),Q=(e,t=!1,n)=>{let r=K[e];if(!r)return n||{};let i=r.side===`right`;return{position:`sticky`,[i?`right`:`left`]:`${r.offset}px`,...t?{top:0}:{},zIndex:t?30:20,background:`#f8fafc`,boxShadow:i?`-2px 0 5px -2px rgba(0,0,0,0.1)`:`2px 0 5px -2px rgba(0,0,0,0.1)`,...n}},le=(0,n.useMemo)(()=>_.map((e,t)=>(_.length-1-t)*48),[_]),$=L.length+ +!!s+(l&&O.length>0?1:0);return(0,i.jsxs)(`div`,{ref:R,className:`flexi-root`,children:[l&&(0,i.jsx)(`div`,{onDragOver:e=>{e.preventDefault(),M(!0)},onDragLeave:()=>M(!1),onDrop:H,className:p(`flexi-groupzone`,ne&&`flexi-groupzone--dragover`),children:O.length===0?(0,i.jsx)(`span`,{className:`flexi-groupzone-hint`,children:`Drag a column header here to group your records by that field`}):(0,i.jsxs)(`div`,{className:`flexi-groupzone-chips`,children:[(0,i.jsx)(`span`,{className:`flexi-groupzone-label`,children:`Grouped By:`}),O.map(e=>(0,i.jsxs)(`div`,{className:`flexi-chip`,children:[(0,i.jsx)(`span`,{children:P.find(t=>t.key===e)?.header||e}),(0,i.jsx)(`button`,{type:`button`,onClick:()=>U(e),className:`flexi-icon-btn flexi-chip-remove`,children:(0,i.jsx)(t.X,{className:`flexi-icon-xs`})})]},e))]})}),(0,i.jsx)(`div`,{className:`flexi-table-wrap`,style:g,children:(0,i.jsxs)(`table`,{className:p(`flexi-table`,te&&`flexi-table--bordered`),style:ee,children:[(0,i.jsxs)(`colgroup`,{children:[l&&O.length>0&&(0,i.jsx)(`col`,{style:{width:`48px`}}),L.map(e=>(0,i.jsx)(`col`,{style:e.style},e.key)),s&&(0,i.jsx)(`col`,{style:{width:`100px`}})]}),(0,i.jsx)(`thead`,{className:`flexi-thead`,children:W.map((e,n)=>(0,i.jsxs)(`tr`,{className:`flexi-header-row`,children:[n===0&&l&&O.length>0&&(0,i.jsx)(`th`,{rowSpan:W.length,className:`flexi-group-spacer-th`,style:{position:`sticky`,top:0,left:0,zIndex:35,backgroundColor:`rgb(248, 250, 252)`}}),e.map(({col:e,rowSpan:n,colSpan:a})=>{let o=(x[e.key]?.length||0)>0,s=!!F[e.key],c=Q(e.key,!0,e.headerStyle),u=!e.children||e.children.length===0,d=N.key===e.key,f=!!(l&&u);return(0,i.jsx)(`th`,{rowSpan:n,colSpan:a,...f?{draggable:!0,onDragStart:t=>V(t,e.key)}:{},className:p(`flexi-th`,f&&`flexi-th--draggable`,s&&`flexi-th--pinned`,e.className),style:c,children:(0,i.jsxs)(`div`,{className:`flexi-th-inner`,children:[(0,i.jsxs)(`div`,{className:p(`flexi-th-label`,e.sortable&&u&&`flexi-th-label--sortable`),onClick:()=>e.sortable&&u&&B(e.key),children:[(0,i.jsx)(`span`,{className:`flexi-th-text`,children:e.header}),u&&e.sortable&&(0,i.jsx)(`span`,{className:p(`flexi-sort-icon`,d&&`flexi-sort-icon--active`),children:d&&N.direction===`asc`?(0,i.jsx)(t.ArrowUp,{className:`flexi-icon-sm`}):d&&N.direction===`desc`?(0,i.jsx)(t.ArrowDown,{className:`flexi-icon-sm`}):(0,i.jsx)(t.ArrowUpDown,{className:`flexi-icon-sm`})})]}),(0,i.jsxs)(`div`,{className:`flexi-th-actions`,children:[u&&e.filterable&&(0,i.jsx)(`button`,{type:`button`,ref:t=>{t?D.current.set(e.key,t):D.current.delete(e.key)},onClick:t=>{t.stopPropagation(),w(``),b(y===e.key?null:e.key)},className:p(`flexi-icon-btn`,`flexi-filter-btn`,o&&`flexi-filter-btn--active`),children:(0,i.jsx)(t.Filter,{className:`flexi-icon-sm`})}),u&&(0,i.jsx)(`button`,{type:`button`,onClick:t=>{t.stopPropagation(),oe(e.key)},className:p(`flexi-icon-btn`,`flexi-pin-btn`,s&&`flexi-pin-btn--pinned`),title:F[e.key]===`left`?`Pinned left (click to pin right)`:F[e.key]===`right`?`Pinned right (click to unpin)`:`Pin column left`,children:s?(0,i.jsx)(t.PinOff,{className:`flexi-icon-sm`}):(0,i.jsx)(t.Pin,{className:`flexi-icon-sm`})})]}),y===e.key&&u&&T&&R.current&&(0,r.createPortal)((0,i.jsxs)(`div`,{ref:z,className:`flexi-filter-dropdown`,style:{top:T.top,left:T.left,zIndex:9999},children:[(0,i.jsx)(`div`,{className:`flexi-filter-search`,children:(0,i.jsx)(`input`,{type:`text`,placeholder:`Search values...`,value:C,onChange:e=>w(e.target.value),className:`flexi-input`,onClick:e=>e.stopPropagation()})}),(0,i.jsx)(`div`,{className:`flexi-filter-list`,children:J.length===0?(0,i.jsx)(`div`,{className:`flexi-filter-empty`,children:`No results found`}):J.map((t,n)=>(0,i.jsxs)(`label`,{className:`flexi-filter-option`,children:[(0,i.jsx)(`input`,{type:`checkbox`,className:`flexi-checkbox`,checked:x[e.key]?.includes(t)||!1,onChange:()=>se(e.key,t)}),(0,i.jsx)(`span`,{className:`flexi-filter-option-text`,children:String(t)})]},n))}),o&&(0,i.jsx)(`div`,{className:`flexi-filter-footer`,children:(0,i.jsx)(`button`,{type:`button`,onClick:()=>q(e.key),className:`flexi-filter-clear`,children:`Clear Filter`})})]}),R.current)]})},e.key)}),n===0&&s&&(0,i.jsx)(`th`,{rowSpan:W.length,className:`flexi-actions-th`,style:{position:`sticky`,top:0,right:0,zIndex:35,backgroundColor:`rgb(248, 250, 252)`}})]},`header-row-${n}`))}),(0,i.jsx)(`tbody`,{className:`flexi-tbody`,children:c?(0,i.jsx)(`tr`,{children:(0,i.jsx)(`td`,{colSpan:$,className:`flexi-empty-cell`,children:`Loading records...`})}):Z.length===0?(0,i.jsx)(`tr`,{children:(0,i.jsx)(`td`,{colSpan:$,className:`flexi-empty-cell`,children:`No records found matching criteria.`})}):Z.map((e,t)=>ue(e,t))}),_.length>0&&(0,i.jsx)(`tbody`,{className:`flexi-tbody flexi-tbody--pinned-bottom`,children:_.map((e,t)=>de(e,t))})]})})]});function ue(e,n){if(e.isGroupRow){let r=A[e.path]!==!1;return(0,i.jsxs)(`tr`,{className:`flexi-group-row`,children:[(0,i.jsx)(`td`,{className:`flexi-group-cell`,style:{position:`sticky`,left:0,zIndex:20,backgroundColor:`rgba(248, 250, 252, 0.9)`,paddingLeft:`${e.depth*12+16}px`},children:(0,i.jsxs)(`button`,{type:`button`,onClick:()=>ce(e.path),className:`flexi-group-toggle`,children:[r?(0,i.jsx)(t.ChevronDown,{className:`flexi-icon-md flexi-icon-muted`}):(0,i.jsx)(t.ChevronRight,{className:`flexi-icon-md flexi-icon-muted`}),(0,i.jsx)(`span`,{className:`flexi-group-value`,children:e.groupValue}),(0,i.jsx)(`span`,{className:`flexi-group-count`,children:e.totalItemsCount})]})}),(0,i.jsx)(`td`,{colSpan:$-1,className:`flexi-group-filler`})]},`group-header-${e.path}-${n}`)}let r=ae(e);return(0,i.jsxs)(`tr`,{className:`flexi-row`,children:[l&&O?.length>0&&(0,i.jsx)(`td`,{className:`flexi-row-indent-cell`,style:{position:`sticky`,left:0,zIndex:10}}),L?.map(t=>{let n=e[t.key],r=Q(t.key,!1,t.style);return(0,i.jsx)(`td`,{className:p(`flexi-cell`,!!F[t.key]&&`flexi-cell--pinned`,t.className),style:r,children:t.render?t.render(n,e):(0,i.jsx)(`span`,{className:`flexi-cell-text`,children:n})},t.key)}),s&&(0,i.jsx)(`td`,{className:`flexi-actions-cell`,style:{position:`sticky`,right:0},children:(0,i.jsx)(`div`,{className:`flexi-actions-inner`,children:s(e)})})]},r??`row-${n}`)}function de(e,t){let n=typeof v==`function`?v(e,t):v,r={position:`sticky`,bottom:`${le[t]}px`,background:`#`,zIndex:45};return(0,i.jsxs)(`tr`,{className:p(`flexi-row`,`flexi-row--pinned-bottom`,n),style:r,children:[l&&O?.length>0&&(0,i.jsx)(`td`,{className:`flexi-row-indent-cell`,style:{position:`sticky`,left:0,zIndex:10}}),L?.map(t=>{let n=e[t.key],r=Q(t.key,!1,t.style),a=!!F[t.key],o=t.pinnedRender??t.render;return(0,i.jsx)(`td`,{className:p(`flexi-cell`,a&&`flexi-cell--pinned`,t.className),style:r,children:o?o(n,e):(0,i.jsx)(`span`,{className:`flexi-cell-text`,children:n})},t.key)}),s&&(0,i.jsx)(`td`,{className:`flexi-actions-cell`,style:{position:`sticky`,right:0},children:(0,i.jsx)(`div`,{className:`flexi-actions-inner`,children:s(e)})})]},`pinned-bottom-row-${t}`)}}e.DataTable=h});
|