flexi-datagrid 1.2.1 → 1.2.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/README.md +68 -11
- package/dist/DataTable.d.ts +8 -3
- package/dist/flexi-datagrid.css +1 -1
- package/dist/index.es.js +319 -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,193 @@ 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
|
+
boxShadow: i ? "-2px 0 5px -2px rgba(0,0,0,0.1)" : "2px 0 5px -2px rgba(0,0,0,0.1)",
|
|
247
|
+
...n
|
|
248
|
+
};
|
|
249
|
+
}, xe = u(() => T.map((e, t) => (T.length - 1 - t) * 48), [T]), $ = U.length + +!!x + (S && F.length > 0 ? 1 : 0);
|
|
250
|
+
return /* @__PURE__ */ m("div", {
|
|
251
|
+
ref: W,
|
|
221
252
|
className: "flexi-root",
|
|
222
|
-
children: [S && /* @__PURE__ */
|
|
253
|
+
children: [S && /* @__PURE__ */ p("div", {
|
|
223
254
|
onDragOver: (e) => {
|
|
224
255
|
e.preventDefault(), R(!0);
|
|
225
256
|
},
|
|
226
257
|
onDragLeave: () => R(!1),
|
|
227
|
-
onDrop:
|
|
228
|
-
className:
|
|
229
|
-
children:
|
|
258
|
+
onDrop: he,
|
|
259
|
+
className: g("flexi-groupzone", ce && "flexi-groupzone--dragover"),
|
|
260
|
+
children: F.length === 0 ? /* @__PURE__ */ p("span", {
|
|
230
261
|
className: "flexi-groupzone-hint",
|
|
231
262
|
children: "Drag a column header here to group your records by that field"
|
|
232
|
-
}) : /* @__PURE__ */
|
|
263
|
+
}) : /* @__PURE__ */ m("div", {
|
|
233
264
|
className: "flexi-groupzone-chips",
|
|
234
|
-
children: [/* @__PURE__ */
|
|
265
|
+
children: [/* @__PURE__ */ p("span", {
|
|
235
266
|
className: "flexi-groupzone-label",
|
|
236
267
|
children: "Grouped By:"
|
|
237
|
-
}),
|
|
268
|
+
}), F.map((e) => /* @__PURE__ */ m("div", {
|
|
238
269
|
className: "flexi-chip",
|
|
239
|
-
children: [/* @__PURE__ */
|
|
270
|
+
children: [/* @__PURE__ */ p("span", { children: B.find((t) => t.key === e)?.header || e }), /* @__PURE__ */ p("button", {
|
|
240
271
|
type: "button",
|
|
241
|
-
onClick: () =>
|
|
272
|
+
onClick: () => ge(e),
|
|
242
273
|
className: "flexi-icon-btn flexi-chip-remove",
|
|
243
|
-
children: /* @__PURE__ */
|
|
274
|
+
children: /* @__PURE__ */ p(c, { className: "flexi-icon-xs" })
|
|
244
275
|
})]
|
|
245
276
|
}, e))]
|
|
246
277
|
})
|
|
247
|
-
}), /* @__PURE__ */
|
|
278
|
+
}), /* @__PURE__ */ p("div", {
|
|
248
279
|
className: "flexi-table-wrap",
|
|
249
|
-
style:
|
|
250
|
-
children: /* @__PURE__ */
|
|
251
|
-
className: "flexi-table",
|
|
252
|
-
style:
|
|
280
|
+
style: re,
|
|
281
|
+
children: /* @__PURE__ */ m("table", {
|
|
282
|
+
className: g("flexi-table", ae && "flexi-table--bordered"),
|
|
283
|
+
style: ie,
|
|
253
284
|
children: [
|
|
254
|
-
/* @__PURE__ */
|
|
255
|
-
S &&
|
|
256
|
-
|
|
257
|
-
x && /* @__PURE__ */
|
|
285
|
+
/* @__PURE__ */ m("colgroup", { children: [
|
|
286
|
+
S && F.length > 0 && /* @__PURE__ */ p("col", { style: { width: "48px" } }),
|
|
287
|
+
U.map((e) => /* @__PURE__ */ p("col", { style: e.style }, e.key)),
|
|
288
|
+
x && /* @__PURE__ */ p("col", { style: { width: "100px" } })
|
|
258
289
|
] }),
|
|
259
|
-
/* @__PURE__ */
|
|
290
|
+
/* @__PURE__ */ p("thead", {
|
|
260
291
|
className: "flexi-thead",
|
|
261
|
-
children:
|
|
292
|
+
children: K.map((r, i) => /* @__PURE__ */ m("tr", {
|
|
262
293
|
className: "flexi-header-row",
|
|
263
294
|
children: [
|
|
264
|
-
i === 0 && S &&
|
|
265
|
-
rowSpan:
|
|
295
|
+
i === 0 && S && F.length > 0 && /* @__PURE__ */ p("th", {
|
|
296
|
+
rowSpan: K.length,
|
|
266
297
|
className: "flexi-group-spacer-th",
|
|
267
298
|
style: {
|
|
268
299
|
position: "sticky",
|
|
300
|
+
top: 0,
|
|
269
301
|
left: 0,
|
|
270
302
|
zIndex: 35,
|
|
271
303
|
backgroundColor: "rgb(248, 250, 252)"
|
|
272
304
|
}
|
|
273
305
|
}),
|
|
274
306
|
r.map(({ col: r, rowSpan: i, colSpan: c }) => {
|
|
275
|
-
let l = (
|
|
276
|
-
return /* @__PURE__ */
|
|
307
|
+
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);
|
|
308
|
+
return /* @__PURE__ */ p("th", {
|
|
277
309
|
rowSpan: i,
|
|
278
310
|
colSpan: c,
|
|
279
|
-
...
|
|
311
|
+
..._ ? {
|
|
280
312
|
draggable: !0,
|
|
281
|
-
onDragStart: (e) =>
|
|
313
|
+
onDragStart: (e) => me(e, r.key)
|
|
282
314
|
} : {},
|
|
283
|
-
className:
|
|
315
|
+
className: g("flexi-th", _ && "flexi-th--draggable", u && "flexi-th--pinned", r.className),
|
|
284
316
|
style: d,
|
|
285
|
-
children: /* @__PURE__ */
|
|
317
|
+
children: /* @__PURE__ */ m("div", {
|
|
286
318
|
className: "flexi-th-inner",
|
|
287
319
|
children: [
|
|
288
|
-
/* @__PURE__ */
|
|
289
|
-
className:
|
|
290
|
-
onClick: () => r.sortable && f &&
|
|
291
|
-
children: [/* @__PURE__ */
|
|
320
|
+
/* @__PURE__ */ m("div", {
|
|
321
|
+
className: g("flexi-th-label", r.sortable && f && "flexi-th-label--sortable"),
|
|
322
|
+
onClick: () => r.sortable && f && pe(r.key),
|
|
323
|
+
children: [/* @__PURE__ */ p("span", {
|
|
292
324
|
className: "flexi-th-text",
|
|
293
325
|
children: r.header
|
|
294
|
-
}), f && r.sortable && /* @__PURE__ */
|
|
295
|
-
className:
|
|
296
|
-
children:
|
|
326
|
+
}), f && r.sortable && /* @__PURE__ */ p("span", {
|
|
327
|
+
className: g("flexi-sort-icon", h && "flexi-sort-icon--active"),
|
|
328
|
+
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
329
|
})]
|
|
298
330
|
}),
|
|
299
|
-
/* @__PURE__ */
|
|
331
|
+
/* @__PURE__ */ m("div", {
|
|
300
332
|
className: "flexi-th-actions",
|
|
301
|
-
children: [f && r.filterable && /* @__PURE__ */
|
|
333
|
+
children: [f && r.filterable && /* @__PURE__ */ p("button", {
|
|
302
334
|
type: "button",
|
|
303
335
|
ref: (e) => {
|
|
304
|
-
e ?
|
|
336
|
+
e ? P.current.set(r.key, e) : P.current.delete(r.key);
|
|
305
337
|
},
|
|
306
338
|
onClick: (e) => {
|
|
307
|
-
e.stopPropagation(),
|
|
339
|
+
e.stopPropagation(), M(""), O(D === r.key ? null : r.key);
|
|
308
340
|
},
|
|
309
|
-
className:
|
|
310
|
-
children: /* @__PURE__ */
|
|
311
|
-
}), f && /* @__PURE__ */
|
|
341
|
+
className: g("flexi-icon-btn", "flexi-filter-btn", l && "flexi-filter-btn--active"),
|
|
342
|
+
children: /* @__PURE__ */ p(a, { className: "flexi-icon-sm" })
|
|
343
|
+
}), f && /* @__PURE__ */ p("button", {
|
|
312
344
|
type: "button",
|
|
313
345
|
onClick: (e) => {
|
|
314
|
-
e.stopPropagation(),
|
|
346
|
+
e.stopPropagation(), fe(r.key);
|
|
315
347
|
},
|
|
316
|
-
className:
|
|
317
|
-
title:
|
|
318
|
-
children:
|
|
348
|
+
className: g("flexi-icon-btn", "flexi-pin-btn", u && "flexi-pin-btn--pinned"),
|
|
349
|
+
title: V[r.key] === "left" ? "Pinned left (click to pin right)" : V[r.key] === "right" ? "Pinned right (click to unpin)" : "Pin column left",
|
|
350
|
+
children: p(u ? s : o, { className: "flexi-icon-sm" })
|
|
319
351
|
})]
|
|
320
352
|
}),
|
|
321
|
-
|
|
322
|
-
ref:
|
|
353
|
+
D === r.key && f && N && W.current && ee(/* @__PURE__ */ m("div", {
|
|
354
|
+
ref: G,
|
|
323
355
|
className: "flexi-filter-dropdown",
|
|
324
356
|
style: {
|
|
325
|
-
top:
|
|
326
|
-
left:
|
|
357
|
+
top: N.top,
|
|
358
|
+
left: N.left,
|
|
327
359
|
zIndex: 9999
|
|
328
360
|
},
|
|
329
361
|
children: [
|
|
330
|
-
/* @__PURE__ */
|
|
362
|
+
/* @__PURE__ */ p("div", {
|
|
331
363
|
className: "flexi-filter-search",
|
|
332
|
-
children: /* @__PURE__ */
|
|
364
|
+
children: /* @__PURE__ */ p("input", {
|
|
333
365
|
type: "text",
|
|
334
366
|
placeholder: "Search values...",
|
|
335
|
-
value:
|
|
336
|
-
onChange: (e) =>
|
|
367
|
+
value: j,
|
|
368
|
+
onChange: (e) => M(e.target.value),
|
|
337
369
|
className: "flexi-input",
|
|
338
370
|
onClick: (e) => e.stopPropagation()
|
|
339
371
|
})
|
|
340
372
|
}),
|
|
341
|
-
/* @__PURE__ */
|
|
373
|
+
/* @__PURE__ */ p("div", {
|
|
342
374
|
className: "flexi-filter-list",
|
|
343
|
-
children: J.length === 0 ? /* @__PURE__ */
|
|
375
|
+
children: J.length === 0 ? /* @__PURE__ */ p("div", {
|
|
344
376
|
className: "flexi-filter-empty",
|
|
345
377
|
children: "No results found"
|
|
346
|
-
}) : J.map((e, t) => /* @__PURE__ */
|
|
378
|
+
}) : J.map((e, t) => /* @__PURE__ */ m("label", {
|
|
347
379
|
className: "flexi-filter-option",
|
|
348
|
-
children: [/* @__PURE__ */
|
|
380
|
+
children: [/* @__PURE__ */ p("input", {
|
|
349
381
|
type: "checkbox",
|
|
350
382
|
className: "flexi-checkbox",
|
|
351
|
-
checked:
|
|
352
|
-
onChange: () =>
|
|
353
|
-
}), /* @__PURE__ */
|
|
383
|
+
checked: k[r.key]?.includes(e) || !1,
|
|
384
|
+
onChange: () => ve(r.key, e)
|
|
385
|
+
}), /* @__PURE__ */ p("span", {
|
|
354
386
|
className: "flexi-filter-option-text",
|
|
355
387
|
children: String(e)
|
|
356
388
|
})]
|
|
357
389
|
}, t))
|
|
358
390
|
}),
|
|
359
|
-
l && /* @__PURE__ */
|
|
391
|
+
l && /* @__PURE__ */ p("div", {
|
|
360
392
|
className: "flexi-filter-footer",
|
|
361
|
-
children: /* @__PURE__ */
|
|
393
|
+
children: /* @__PURE__ */ p("button", {
|
|
362
394
|
type: "button",
|
|
363
|
-
onClick: () =>
|
|
395
|
+
onClick: () => ye(r.key),
|
|
364
396
|
className: "flexi-filter-clear",
|
|
365
397
|
children: "Clear Filter"
|
|
366
398
|
})
|
|
367
399
|
})
|
|
368
400
|
]
|
|
369
|
-
}),
|
|
401
|
+
}), W.current)
|
|
370
402
|
]
|
|
371
403
|
})
|
|
372
404
|
}, r.key);
|
|
373
405
|
}),
|
|
374
|
-
i === 0 && x && /* @__PURE__ */
|
|
375
|
-
rowSpan:
|
|
406
|
+
i === 0 && x && /* @__PURE__ */ p("th", {
|
|
407
|
+
rowSpan: K.length,
|
|
376
408
|
className: "flexi-actions-th",
|
|
377
409
|
style: {
|
|
378
410
|
position: "sticky",
|
|
411
|
+
top: 0,
|
|
379
412
|
right: 0,
|
|
380
413
|
zIndex: 35,
|
|
381
414
|
backgroundColor: "rgb(248, 250, 252)"
|
|
@@ -384,94 +417,143 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: ee, groupBy:
|
|
|
384
417
|
]
|
|
385
418
|
}, `header-row-${i}`))
|
|
386
419
|
}),
|
|
387
|
-
/* @__PURE__ */
|
|
420
|
+
/* @__PURE__ */ p("tbody", {
|
|
388
421
|
className: "flexi-tbody",
|
|
389
|
-
children:
|
|
422
|
+
children: te ? /* @__PURE__ */ p("tr", { children: /* @__PURE__ */ p("td", {
|
|
390
423
|
colSpan: $,
|
|
391
424
|
className: "flexi-empty-cell",
|
|
392
425
|
children: "Loading records..."
|
|
393
|
-
}) }) : Z.length === 0 ? /* @__PURE__ */
|
|
426
|
+
}) }) : Z.length === 0 ? /* @__PURE__ */ p("tr", { children: /* @__PURE__ */ p("td", {
|
|
394
427
|
colSpan: $,
|
|
395
428
|
className: "flexi-empty-cell",
|
|
396
429
|
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
|
-
})
|
|
430
|
+
}) }) : Z.map((e, t) => Se(e, t))
|
|
431
|
+
}),
|
|
432
|
+
T.length > 0 && /* @__PURE__ */ p("tbody", {
|
|
433
|
+
className: "flexi-tbody flexi-tbody--pinned-bottom",
|
|
434
|
+
children: T.map((e, t) => Ce(e, t))
|
|
470
435
|
})
|
|
471
436
|
]
|
|
472
437
|
})
|
|
473
438
|
})]
|
|
474
439
|
});
|
|
440
|
+
function Se(e, t) {
|
|
441
|
+
if (e.isGroupRow) {
|
|
442
|
+
let n = L[e.path] !== !1;
|
|
443
|
+
return /* @__PURE__ */ m("tr", {
|
|
444
|
+
className: "flexi-group-row",
|
|
445
|
+
children: [/* @__PURE__ */ p("td", {
|
|
446
|
+
className: "flexi-group-cell",
|
|
447
|
+
style: {
|
|
448
|
+
position: "sticky",
|
|
449
|
+
left: 0,
|
|
450
|
+
zIndex: 20,
|
|
451
|
+
backgroundColor: "rgba(248, 250, 252, 0.9)",
|
|
452
|
+
paddingLeft: `${e.depth * 12 + 16}px`
|
|
453
|
+
},
|
|
454
|
+
children: /* @__PURE__ */ m("button", {
|
|
455
|
+
type: "button",
|
|
456
|
+
onClick: () => be(e.path),
|
|
457
|
+
className: "flexi-group-toggle",
|
|
458
|
+
children: [
|
|
459
|
+
p(n ? r : i, { className: "flexi-icon-md flexi-icon-muted" }),
|
|
460
|
+
/* @__PURE__ */ p("span", {
|
|
461
|
+
className: "flexi-group-value",
|
|
462
|
+
children: e.groupValue
|
|
463
|
+
}),
|
|
464
|
+
/* @__PURE__ */ p("span", {
|
|
465
|
+
className: "flexi-group-count",
|
|
466
|
+
children: e.totalItemsCount
|
|
467
|
+
})
|
|
468
|
+
]
|
|
469
|
+
})
|
|
470
|
+
}), /* @__PURE__ */ p("td", {
|
|
471
|
+
colSpan: $ - 1,
|
|
472
|
+
className: "flexi-group-filler"
|
|
473
|
+
})]
|
|
474
|
+
}, `group-header-${e.path}-${t}`);
|
|
475
|
+
}
|
|
476
|
+
let n = de(e);
|
|
477
|
+
return /* @__PURE__ */ m("tr", {
|
|
478
|
+
className: "flexi-row",
|
|
479
|
+
children: [
|
|
480
|
+
S && F?.length > 0 && /* @__PURE__ */ p("td", {
|
|
481
|
+
className: "flexi-row-indent-cell",
|
|
482
|
+
style: {
|
|
483
|
+
position: "sticky",
|
|
484
|
+
left: 0,
|
|
485
|
+
zIndex: 10
|
|
486
|
+
}
|
|
487
|
+
}),
|
|
488
|
+
U?.map((t) => {
|
|
489
|
+
let n = e[t.key], r = Q(t.key, !1, t.style);
|
|
490
|
+
return /* @__PURE__ */ p("td", {
|
|
491
|
+
className: g("flexi-cell", !!V[t.key] && "flexi-cell--pinned", t.className),
|
|
492
|
+
style: r,
|
|
493
|
+
children: t.render ? t.render(n, e) : /* @__PURE__ */ p("span", {
|
|
494
|
+
className: "flexi-cell-text",
|
|
495
|
+
children: n
|
|
496
|
+
})
|
|
497
|
+
}, t.key);
|
|
498
|
+
}),
|
|
499
|
+
x && /* @__PURE__ */ p("td", {
|
|
500
|
+
className: "flexi-actions-cell",
|
|
501
|
+
style: {
|
|
502
|
+
position: "sticky",
|
|
503
|
+
right: 0
|
|
504
|
+
},
|
|
505
|
+
children: /* @__PURE__ */ p("div", {
|
|
506
|
+
className: "flexi-actions-inner",
|
|
507
|
+
children: x(e)
|
|
508
|
+
})
|
|
509
|
+
})
|
|
510
|
+
]
|
|
511
|
+
}, n ?? `row-${t}`);
|
|
512
|
+
}
|
|
513
|
+
function Ce(e, t) {
|
|
514
|
+
let n = typeof E == "function" ? E(e, t) : E, r = {
|
|
515
|
+
position: "sticky",
|
|
516
|
+
bottom: `${xe[t]}px`,
|
|
517
|
+
background: "#",
|
|
518
|
+
zIndex: 45
|
|
519
|
+
};
|
|
520
|
+
return /* @__PURE__ */ m("tr", {
|
|
521
|
+
className: g("flexi-row", "flexi-row--pinned-bottom", n),
|
|
522
|
+
style: r,
|
|
523
|
+
children: [
|
|
524
|
+
S && F?.length > 0 && /* @__PURE__ */ p("td", {
|
|
525
|
+
className: "flexi-row-indent-cell",
|
|
526
|
+
style: {
|
|
527
|
+
position: "sticky",
|
|
528
|
+
left: 0,
|
|
529
|
+
zIndex: 10
|
|
530
|
+
}
|
|
531
|
+
}),
|
|
532
|
+
U?.map((t) => {
|
|
533
|
+
let n = e[t.key], r = Q(t.key, !1, t.style), i = !!V[t.key], a = t.pinnedRender ?? t.render;
|
|
534
|
+
return /* @__PURE__ */ p("td", {
|
|
535
|
+
className: g("flexi-cell", i && "flexi-cell--pinned", t.className),
|
|
536
|
+
style: r,
|
|
537
|
+
children: a ? a(n, e) : /* @__PURE__ */ p("span", {
|
|
538
|
+
className: "flexi-cell-text",
|
|
539
|
+
children: n
|
|
540
|
+
})
|
|
541
|
+
}, t.key);
|
|
542
|
+
}),
|
|
543
|
+
x && /* @__PURE__ */ p("td", {
|
|
544
|
+
className: "flexi-actions-cell",
|
|
545
|
+
style: {
|
|
546
|
+
position: "sticky",
|
|
547
|
+
right: 0
|
|
548
|
+
},
|
|
549
|
+
children: /* @__PURE__ */ p("div", {
|
|
550
|
+
className: "flexi-actions-inner",
|
|
551
|
+
children: x(e)
|
|
552
|
+
})
|
|
553
|
+
})
|
|
554
|
+
]
|
|
555
|
+
}, `pinned-bottom-row-${t}`);
|
|
556
|
+
}
|
|
475
557
|
}
|
|
476
558
|
//#endregion
|
|
477
559
|
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,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});
|