flexi-datagrid 1.1.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +151 -0
- package/dist/flexi-datagrid.css +1 -1
- package/dist/index.es.js +188 -163
- package/dist/index.umd.js +1 -1
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
# Flexi-Datagrid
|
|
2
|
+
|
|
3
|
+
A modern, highly customizable, and feature-rich React data grid component designed for speed and flexibility.
|
|
4
|
+
|
|
5
|
+
## ✨ Features
|
|
6
|
+
|
|
7
|
+
- **Column Pinning:** Easily pin important columns to the left side of the grid.
|
|
8
|
+
- **Multi-State Sorting:** Clickable column headers that support Ascending (asc), Descending (desc), and Unsorted states.
|
|
9
|
+
- **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
|
+
- **Row Grouping (Drag-and-Drop):** Drag column headers into the grouping zone to group your dataset hierarchically with expand/collapse support.
|
|
11
|
+
- **Nested/Grouped Headers:** Columns can be nested via `children` to render multi-level header rows.
|
|
12
|
+
- **Sticky Actions:** Optional custom row actions column locked to the right side.
|
|
13
|
+
- **Custom Cell Rendering:** Full control over how each cell is rendered via a `render` function.
|
|
14
|
+
- **Full TypeScript Support:** Strongly typed configurations for robust developer experience.
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
## 📦 Installation
|
|
19
|
+
|
|
20
|
+
Install the package via npm:
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm install flexi-datagrid
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
`react`, `react-dom`, and `lucide-react` are peer dependencies — make sure they're installed in your project.
|
|
27
|
+
|
|
28
|
+
Don't forget to import the required CSS file in your main entry file (e.g. `main.tsx` or `App.tsx`):
|
|
29
|
+
|
|
30
|
+
```tsx
|
|
31
|
+
import 'flexi-datagrid/dist/flexi-datagrid.css';
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
---
|
|
35
|
+
|
|
36
|
+
## 🚀 Quick Start
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
import { DataTable, type ColumnConfig } from 'flexi-datagrid';
|
|
40
|
+
import 'flexi-datagrid/dist/flexi-datagrid.css';
|
|
41
|
+
|
|
42
|
+
interface Employee {
|
|
43
|
+
id: number;
|
|
44
|
+
name: string;
|
|
45
|
+
department: string;
|
|
46
|
+
role: string;
|
|
47
|
+
salary: number;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
const data: Employee[] = [
|
|
51
|
+
{ id: 1, name: 'Ava Thompson', department: 'Engineering', role: 'Frontend Developer', salary: 95000 },
|
|
52
|
+
{ id: 2, name: 'Liam Carter', department: 'Engineering', role: 'Backend Developer', salary: 102000 },
|
|
53
|
+
{ id: 3, name: 'Sofia Ramirez', department: 'Design', role: 'Product Designer', salary: 88000 },
|
|
54
|
+
{ id: 4, name: 'Noah Patel', department: 'Sales', role: 'Account Executive', salary: 76000 },
|
|
55
|
+
];
|
|
56
|
+
|
|
57
|
+
const columns: ColumnConfig<Employee>[] = [
|
|
58
|
+
{ key: 'name', header: 'Name', sortable: true, filterable: true, pinned: true },
|
|
59
|
+
{ key: 'department', header: 'Department', sortable: true, filterable: true },
|
|
60
|
+
{ key: 'role', header: 'Role', sortable: true, filterable: true },
|
|
61
|
+
{
|
|
62
|
+
key: 'salary',
|
|
63
|
+
header: 'Salary',
|
|
64
|
+
sortable: true,
|
|
65
|
+
render: (value) => `$${value.toLocaleString()}`,
|
|
66
|
+
},
|
|
67
|
+
];
|
|
68
|
+
|
|
69
|
+
export default function EmployeeTable() {
|
|
70
|
+
return (
|
|
71
|
+
<DataTable<Employee>
|
|
72
|
+
columns={columns}
|
|
73
|
+
data={data}
|
|
74
|
+
rowKey="id"
|
|
75
|
+
groupBy
|
|
76
|
+
defaultGroupBy={['department']}
|
|
77
|
+
actions={(record) => (
|
|
78
|
+
<button onClick={() => console.log('Edit', record.id)}>Edit</button>
|
|
79
|
+
)}
|
|
80
|
+
/>
|
|
81
|
+
);
|
|
82
|
+
}
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
---
|
|
86
|
+
|
|
87
|
+
## ⚙️ How It Works
|
|
88
|
+
|
|
89
|
+
`DataTable` is a single, self-contained component: pass it `columns` and `data`, and it manages sorting, filtering, pinning, and grouping state internally.
|
|
90
|
+
|
|
91
|
+
### Columns (`ColumnConfig<T>`)
|
|
92
|
+
|
|
93
|
+
Each entry in `columns` describes one column (or a group of columns, via `children`):
|
|
94
|
+
|
|
95
|
+
| Prop | Type | Description |
|
|
96
|
+
| --- | --- | --- |
|
|
97
|
+
| `key` | `string` | Unique identifier for the column. Used to read values off each row (`record[key]`) unless `getValue` is provided. |
|
|
98
|
+
| `header` | `string` | Text shown in the column header. |
|
|
99
|
+
| `className` / `headerClassName` | `string` | Extra classes applied to body cells / the header cell. |
|
|
100
|
+
| `style` / `headerStyle` | `CSSProperties` | Inline styles for body cells / the header cell (e.g. fixed `width`). |
|
|
101
|
+
| `render` | `(value, record) => ReactNode` | Custom cell renderer. Falls back to the raw value if omitted. |
|
|
102
|
+
| `getValue` | `(record) => any` | Custom accessor used for sorting, filtering, and grouping when the value isn't a simple `record[key]` lookup. |
|
|
103
|
+
| `filterable` | `boolean` | Shows a filter icon in the header that opens a multi-select popup of unique column values. |
|
|
104
|
+
| `sortable` | `boolean` | Makes the header clickable, cycling through ascending → descending → unsorted. |
|
|
105
|
+
| `pinned` | `boolean` | Pins the column to the left edge by default (still toggleable per-column from the UI). |
|
|
106
|
+
| `children` | `ColumnConfig<T>[]` | Nest columns to render a grouped, multi-row header. Only leaf columns are sortable/filterable/pinnable. |
|
|
107
|
+
|
|
108
|
+
### Grid props (`DataTableProps<T>`)
|
|
109
|
+
|
|
110
|
+
| Prop | Type | Description |
|
|
111
|
+
| --- | --- | --- |
|
|
112
|
+
| `columns` | `ColumnConfig<T>[]` | Column definitions (see above). |
|
|
113
|
+
| `data` | `T[]` | Row data to render. |
|
|
114
|
+
| `rowKey` | `keyof T \| (record: T) => string` | Field name or function used to derive a unique React key per row. |
|
|
115
|
+
| `actions` | `(record: T) => ReactNode` | Renders a sticky, right-aligned actions cell per row (e.g. edit/delete buttons). |
|
|
116
|
+
| `isLoading` | `boolean` | Shows a loading state in place of rows. |
|
|
117
|
+
| `groupBy` | `boolean` | Enables drag-and-drop row grouping — drag a column header into the grouping zone above the grid. |
|
|
118
|
+
| `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. |
|
|
120
|
+
| `onGroupChange` | `(groupedKeys: string[]) => void` | Called whenever the set of grouped columns changes. |
|
|
121
|
+
| `containerStyle` | `CSSProperties` | Inline styles for the scrollable table container. |
|
|
122
|
+
| `tableStyle` | `CSSProperties` | Inline styles for the `<table>` element itself. |
|
|
123
|
+
|
|
124
|
+
### Filtering
|
|
125
|
+
|
|
126
|
+
Any column with `filterable: true` gets a filter icon in its header. Clicking it opens a searchable, multi-select popup listing the column's unique values (derived from `data`, via `getValue` if provided). Selected values are combined with AND across columns and OR within a column's own selected values. The popup is rendered through a portal anchored to the grid's own root element, so it overlays the grid instead of being clipped by the table's horizontal scroll container — similar to an Excel-style filter panel.
|
|
127
|
+
|
|
128
|
+
### Sorting
|
|
129
|
+
|
|
130
|
+
Clicking a `sortable` column header cycles through ascending → descending → unsorted. Only one column can be actively sorted at a time.
|
|
131
|
+
|
|
132
|
+
### Row Grouping
|
|
133
|
+
|
|
134
|
+
Set `groupBy` to enable a drop zone above the table. Dragging a sortable/leaf column header into it groups rows by that column's value, with collapsible group rows and per-group row counts. Multiple columns can be stacked to create nested groups; use `defaultGroupBy` to pre-group on mount.
|
|
135
|
+
|
|
136
|
+
### Column Pinning
|
|
137
|
+
|
|
138
|
+
Hovering a header reveals a pin icon; pinning locks that column to the left with a sticky position and shadow so it stays visible while scrolling horizontally. Columns marked `pinned: true` start pinned.
|
|
139
|
+
|
|
140
|
+
---
|
|
141
|
+
|
|
142
|
+
## 🛠 Local Development
|
|
143
|
+
|
|
144
|
+
```bash
|
|
145
|
+
npm install
|
|
146
|
+
npm run build # bundles the library to dist/ and emits type declarations
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
## 📄 License
|
|
150
|
+
|
|
151
|
+
ISC
|
package/dist/flexi-datagrid.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
*,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:""}html,:host{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.left-4{left:1rem}.top-10{top:2.5rem}.z-50{z-index:50}.mb-1{margin-bottom:.25rem}.ml-1{margin-left:.25rem}.mr-1{margin-right:.25rem}.mt-2{margin-top:.5rem}.block{display:block}.flex{display:flex}.table{display:table}.h-12{height:3rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.max-h-40{max-height:10rem}.min-h-\[52px\]{min-height:52px}.w-12{width:3rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-40{width:10rem}.w-52{width:13rem}.w-full{width:100%}.table-fixed{table-layout:fixed}.caption-bottom{caption-side:bottom}.border-collapse{border-collapse:collapse}.scale-\[0\.99\]{--tw-scale-x:.99;--tw-scale-y:.99;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;user-select:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-slate-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(241 245 249/var(--tw-divide-opacity,1))}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity,1))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity,1))}.bg-blue-50\/50{background-color:#eff6ff80}.bg-slate-200\/70{background-color:#e2e8f0b3}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.bg-slate-50\/30{background-color:#f8fafc4d}.bg-slate-50\/50{background-color:#f8fafc80}.bg-slate-50\/60{background-color:#f8fafc99}.bg-slate-50\/90{background-color:#f8fafce6}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-0\.5{padding:.125rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-8{padding:2rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pb-2{padding-bottom:.5rem}.pl-2{padding-left:.5rem}.pl-4{padding-left:1rem}.pr-1{padding-right:.25rem}.pt-1{padding-top:.25rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.tracking-wider{letter-spacing:.05em}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow-\[-1px_0_0_rgba\(226\,232\,240\,1\)\]{--tw-shadow:-1px 0 0 #e2e8f0;--tw-shadow-colored:-1px 0 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.hover\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.hover\:bg-slate-100\/80:hover{background-color:#f1f5f9cc}.hover\:bg-slate-200:hover{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity,1))}.hover\:bg-slate-50:hover{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.hover\:bg-slate-50\/80:hover{background-color:#f8fafccc}.hover\:text-blue-600:hover{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.focus\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.focus\:outline-none:focus{outline-offset:2px;outline:2px solid #0000}.focus\:ring-1:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow,0 0 #0000)}.focus\:ring-blue-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(96 165 250/var(--tw-ring-opacity,1))}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.active\:cursor-grabbing:active{cursor:grabbing}.group:hover .group-hover\:bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.group:hover .group-hover\:bg-slate-50\/80{background-color:#f8fafccc}.group\/header:hover .group-hover\/header\:opacity-100,.group:hover .group-hover\:opacity-100{opacity:1}
|
|
1
|
+
*,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.pointer-events-auto{pointer-events:auto}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.mb-1{margin-bottom:.25rem}.ml-1{margin-left:.25rem}.mr-1{margin-right:.25rem}.mt-2{margin-top:.5rem}.block{display:block}.flex{display:flex}.table{display:table}.h-12{height:3rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.max-h-40{max-height:10rem}.min-h-\[52px\]{min-height:52px}.w-12{width:3rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-40{width:10rem}.w-52{width:13rem}.w-full{width:100%}.table-fixed{table-layout:fixed}.caption-bottom{caption-side:bottom}.border-collapse{border-collapse:collapse}.scale-\[0\.99\]{--tw-scale-x:.99;--tw-scale-y:.99;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;user-select:none}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-slate-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(241 245 249/var(--tw-divide-opacity,1))}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity,1))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity,1))}.bg-blue-50\/50{background-color:#eff6ff80}.bg-slate-200\/70{background-color:#e2e8f0b3}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.bg-slate-50\/30{background-color:#f8fafc4d}.bg-slate-50\/50{background-color:#f8fafc80}.bg-slate-50\/60{background-color:#f8fafc99}.bg-slate-50\/90{background-color:#f8fafce6}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-0\.5{padding:.125rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-8{padding:2rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pb-2{padding-bottom:.5rem}.pl-2{padding-left:.5rem}.pl-4{padding-left:1rem}.pr-1{padding-right:.25rem}.pt-1{padding-top:.25rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.tracking-wider{letter-spacing:.05em}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow-\[-1px_0_0_rgba\(226\,232\,240\,1\)\]{--tw-shadow:-1px 0 0 #e2e8f0;--tw-shadow-colored:-1px 0 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.flexi-datagrid-scope button{appearance:none;cursor:pointer;font:inherit;background:0 0;border:none;margin:0;padding:0;line-height:normal}.flexi-datagrid-scope table{border-collapse:collapse;border-spacing:0}.flexi-datagrid-scope th,.flexi-datagrid-scope td{border-top:none!important}.flexi-datagrid-scope .opacity-0{opacity:0!important}.flexi-datagrid-scope .opacity-100,.flexi-datagrid-scope .group\/header:hover .group-hover\/header\:opacity-100,.flexi-datagrid-scope .group:hover .group-hover\:opacity-100{opacity:1!important}.hover\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.hover\:bg-slate-100\/80:hover{background-color:#f1f5f9cc}.hover\:bg-slate-200:hover{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity,1))}.hover\:bg-slate-50:hover{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.hover\:bg-slate-50\/80:hover{background-color:#f8fafccc}.hover\:text-blue-600:hover{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.focus\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.focus\:outline-none:focus{outline-offset:2px;outline:2px solid #0000}.focus\:ring-1:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow,0 0 #0000)}.focus\:ring-blue-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(96 165 250/var(--tw-ring-opacity,1))}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.active\:cursor-grabbing:active{cursor:grabbing}.group:hover .group-hover\:bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.group:hover .group-hover\:bg-slate-50\/80{background-color:#f8fafccc}.group\/header:hover .group-hover\/header\:opacity-100,.group:hover .group-hover\:opacity-100{opacity:1}
|
|
2
2
|
/*$vite$:1*/
|
package/dist/index.es.js
CHANGED
|
@@ -1,68 +1,84 @@
|
|
|
1
|
-
import { ArrowDown as e, ArrowUp as t, ArrowUpDown as n, ChevronDown as r, ChevronRight as i,
|
|
2
|
-
import { useEffect as
|
|
3
|
-
import {
|
|
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
|
+
import { useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
|
|
3
|
+
import { createPortal as ee } from "react-dom";
|
|
4
|
+
import { jsx as p, jsxs as m } from "react/jsx-runtime";
|
|
4
5
|
//#region src/DataTable.tsx
|
|
5
|
-
var
|
|
6
|
+
var h = (e) => {
|
|
6
7
|
let t = [];
|
|
7
8
|
return e.forEach((e) => {
|
|
8
|
-
e.children && e.children.length > 0 ? t.push(...
|
|
9
|
+
e.children && e.children.length > 0 ? t.push(...h(e.children)) : t.push(e);
|
|
9
10
|
}), t;
|
|
10
11
|
};
|
|
11
|
-
function
|
|
12
|
-
let [w, T] =
|
|
12
|
+
function g({ columns: g, data: _, rowKey: v, actions: y, isLoading: te, groupBy: b = !1, defaultGroupBy: ne = [], onPinChange: x, onGroupChange: S, containerStyle: C, tableStyle: re }) {
|
|
13
|
+
let [w, T] = f(null), [E, D] = f({}), [O, k] = f(""), [A, ie] = f(null), j = d(/* @__PURE__ */ new Map()), [M, N] = f(ne), [P, F] = f({}), [ae, I] = f(!1), [L, oe] = f({
|
|
13
14
|
key: null,
|
|
14
15
|
direction: null
|
|
15
|
-
}),
|
|
16
|
+
}), R = u(() => h(g), [g]), [z, se] = f(R.filter((e) => e.pinned).map((e) => e.key)), B = u(() => {
|
|
16
17
|
let e = (t) => [...t].sort((e, t) => {
|
|
17
|
-
let n =
|
|
18
|
+
let n = z.includes(e.key), r = z.includes(t.key);
|
|
18
19
|
return n && !r ? -1 : !n && r ? 1 : 0;
|
|
19
20
|
}).map((t) => t.children && t.children.length > 0 ? {
|
|
20
21
|
...t,
|
|
21
22
|
children: e(t.children)
|
|
22
23
|
} : t);
|
|
23
|
-
return e(
|
|
24
|
-
}, [
|
|
25
|
-
let e =
|
|
24
|
+
return e(g);
|
|
25
|
+
}, [g, z]), V = u(() => {
|
|
26
|
+
let e = h(B), t = b ? M : [];
|
|
26
27
|
return e.filter((e) => !t.includes(e.key));
|
|
27
28
|
}, [
|
|
28
29
|
B,
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
]), H =
|
|
32
|
-
|
|
30
|
+
M,
|
|
31
|
+
b
|
|
32
|
+
]), H = d(null), U = d(null);
|
|
33
|
+
l(() => {
|
|
33
34
|
function e(e) {
|
|
34
|
-
|
|
35
|
+
let t = e.target, n = w ? j.current.get(w) : null;
|
|
36
|
+
U.current && !U.current.contains(t) && !(n && n.contains(t)) && (T(null), k(""));
|
|
35
37
|
}
|
|
36
38
|
return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
|
|
37
|
-
}, [])
|
|
38
|
-
|
|
39
|
-
let
|
|
40
|
-
|
|
41
|
-
|
|
39
|
+
}, [w]), l(() => {
|
|
40
|
+
if (!w) return;
|
|
41
|
+
let e = () => {
|
|
42
|
+
let e = j.current.get(w), t = H.current;
|
|
43
|
+
if (!e || !t) return;
|
|
44
|
+
let n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
|
|
45
|
+
ie({
|
|
46
|
+
top: n.bottom - r.top + 4,
|
|
47
|
+
left: n.left - r.left
|
|
48
|
+
});
|
|
49
|
+
};
|
|
50
|
+
return e(), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
|
|
51
|
+
window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
|
|
52
|
+
};
|
|
53
|
+
}, [w]);
|
|
54
|
+
let W = (e) => typeof v == "function" ? v(e) : String(e[v]), G = (e) => {
|
|
55
|
+
let t = z.includes(e);
|
|
56
|
+
se(t ? z.filter((t) => t !== e) : [...z, e]), x && x(e, !t);
|
|
57
|
+
}, ce = (e) => {
|
|
42
58
|
let t = "asc";
|
|
43
|
-
|
|
59
|
+
L.key === e && (t = L.direction === "asc" ? "desc" : L.direction === "desc" ? null : "asc"), oe({
|
|
44
60
|
key: t ? e : null,
|
|
45
61
|
direction: t
|
|
46
62
|
});
|
|
47
|
-
},
|
|
48
|
-
|
|
49
|
-
},
|
|
50
|
-
e.preventDefault(),
|
|
63
|
+
}, le = (e, t) => {
|
|
64
|
+
b && (e.dataTransfer.setData("text/plain", t), e.dataTransfer.effectAllowed = "move");
|
|
65
|
+
}, ue = (e) => {
|
|
66
|
+
e.preventDefault(), I(!1);
|
|
51
67
|
let t = e.dataTransfer.getData("text/plain");
|
|
52
|
-
if (t && !
|
|
53
|
-
let e = [...
|
|
54
|
-
|
|
68
|
+
if (t && !M.includes(t)) {
|
|
69
|
+
let e = [...M, t];
|
|
70
|
+
N(e), S && S(e);
|
|
55
71
|
}
|
|
56
|
-
},
|
|
57
|
-
let t =
|
|
58
|
-
|
|
59
|
-
},
|
|
72
|
+
}, de = (e) => {
|
|
73
|
+
let t = M.filter((t) => t !== e);
|
|
74
|
+
N(t), F({}), S && S(t);
|
|
75
|
+
}, K = u(() => {
|
|
60
76
|
let e = (t) => {
|
|
61
77
|
let n = 0;
|
|
62
78
|
return t.forEach((t) => {
|
|
63
79
|
n = t.children && t.children.length > 0 ? Math.max(n, 1 + e(t.children)) : Math.max(n, 1);
|
|
64
80
|
}), n;
|
|
65
|
-
}, t = e(B), n = Array.from({ length: t }, () => []), r = (e) => !e.children || e.children.length === 0 ?
|
|
81
|
+
}, t = e(B), n = Array.from({ length: t }, () => []), r = (e) => !e.children || e.children.length === 0 ? M.includes(e.key) && b ? 0 : 1 : e.children.reduce((e, t) => e + r(t), 0), i = b ? M : [], a = (e, o) => {
|
|
66
82
|
e.forEach((e) => {
|
|
67
83
|
if (i.includes(e.key)) return;
|
|
68
84
|
let s = r(e);
|
|
@@ -80,12 +96,12 @@ function h({ columns: h, data: g, rowKey: _, actions: v, isLoading: ee, groupBy:
|
|
|
80
96
|
return a(B, 0), n.filter((e) => e.length > 0);
|
|
81
97
|
}, [
|
|
82
98
|
B,
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
]),
|
|
99
|
+
M,
|
|
100
|
+
b
|
|
101
|
+
]), q = u(() => {
|
|
86
102
|
let e = {}, t = 0;
|
|
87
|
-
return
|
|
88
|
-
if (
|
|
103
|
+
return b && M.length > 0 && (t += 48), V.forEach((n) => {
|
|
104
|
+
if (z.includes(n.key)) {
|
|
89
105
|
e[n.key] = t;
|
|
90
106
|
let r = n.style?.width || n.headerStyle?.width || "150px";
|
|
91
107
|
t += typeof r == "number" ? r : parseInt(String(r), 10) || 150;
|
|
@@ -93,10 +109,10 @@ function h({ columns: h, data: g, rowKey: _, actions: v, isLoading: ee, groupBy:
|
|
|
93
109
|
}), e;
|
|
94
110
|
}, [
|
|
95
111
|
V,
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
]),
|
|
112
|
+
z,
|
|
113
|
+
M,
|
|
114
|
+
b
|
|
115
|
+
]), fe = (e, t) => {
|
|
100
116
|
D((n) => {
|
|
101
117
|
let r = n[e] || [], i = r.includes(t) ? r.filter((e) => e !== t) : [...r, t], a = {
|
|
102
118
|
...n,
|
|
@@ -104,28 +120,28 @@ function h({ columns: h, data: g, rowKey: _, actions: v, isLoading: ee, groupBy:
|
|
|
104
120
|
};
|
|
105
121
|
return a[e].length === 0 && delete a[e], a;
|
|
106
122
|
});
|
|
107
|
-
},
|
|
123
|
+
}, pe = (e) => {
|
|
108
124
|
D((t) => {
|
|
109
125
|
let n = { ...t };
|
|
110
126
|
return delete n[e], n;
|
|
111
127
|
});
|
|
112
|
-
}, J =
|
|
128
|
+
}, J = u(() => {
|
|
113
129
|
if (!w) return [];
|
|
114
|
-
let e =
|
|
130
|
+
let e = R.find((e) => e.key === w), t = _.map((t) => e?.getValue ? e.getValue(t) : t[w]), n = Array.from(new Set(t)).filter((e) => e != null);
|
|
115
131
|
return O.trim() ? n.filter((e) => String(e).toLowerCase().includes(O.toLowerCase())) : n;
|
|
116
132
|
}, [
|
|
117
|
-
|
|
133
|
+
_,
|
|
118
134
|
w,
|
|
119
135
|
O,
|
|
120
|
-
|
|
121
|
-
]), Y =
|
|
122
|
-
let e =
|
|
136
|
+
R
|
|
137
|
+
]), Y = u(() => {
|
|
138
|
+
let e = _.filter((e) => Object.entries(E).every(([t, n]) => {
|
|
123
139
|
if (!n || n.length === 0) return !0;
|
|
124
|
-
let r =
|
|
140
|
+
let r = R.find((e) => e.key === t), i = r?.getValue ? r.getValue(e) : e[t];
|
|
125
141
|
return n.includes(i);
|
|
126
142
|
}));
|
|
127
|
-
if (
|
|
128
|
-
let { key: t, direction: n } =
|
|
143
|
+
if (L.key && L.direction) {
|
|
144
|
+
let { key: t, direction: n } = L, r = R.find((e) => e.key === t);
|
|
129
145
|
e = [...e].sort((e, i) => {
|
|
130
146
|
let a = r?.getValue ? r.getValue(e) : e[t], o = r?.getValue ? r.getValue(i) : i[t];
|
|
131
147
|
if (a === o) return 0;
|
|
@@ -140,15 +156,15 @@ function h({ columns: h, data: g, rowKey: _, actions: v, isLoading: ee, groupBy:
|
|
|
140
156
|
}
|
|
141
157
|
return e;
|
|
142
158
|
}, [
|
|
143
|
-
|
|
159
|
+
_,
|
|
144
160
|
E,
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
]), X =
|
|
148
|
-
if (!
|
|
161
|
+
L,
|
|
162
|
+
R
|
|
163
|
+
]), X = u(() => {
|
|
164
|
+
if (!b || M.length === 0) return Y;
|
|
149
165
|
let e = (t, n, r = "") => {
|
|
150
|
-
if (n >=
|
|
151
|
-
let i =
|
|
166
|
+
if (n >= M.length) return t;
|
|
167
|
+
let i = M[n], a = R.find((e) => e.key === i), o = {};
|
|
152
168
|
return t.forEach((e) => {
|
|
153
169
|
let t = a?.getValue ? a.getValue(e) : e[i], n = String(t ?? "N/A");
|
|
154
170
|
o[n] || (o[n] = []), o[n].push(e);
|
|
@@ -168,83 +184,84 @@ function h({ columns: h, data: g, rowKey: _, actions: v, isLoading: ee, groupBy:
|
|
|
168
184
|
return e(Y, 0);
|
|
169
185
|
}, [
|
|
170
186
|
Y,
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
]),
|
|
175
|
-
|
|
187
|
+
M,
|
|
188
|
+
b,
|
|
189
|
+
R
|
|
190
|
+
]), me = (e) => {
|
|
191
|
+
F((t) => {
|
|
176
192
|
let n = t[e] !== !1;
|
|
177
193
|
return {
|
|
178
194
|
...t,
|
|
179
195
|
[e]: !n
|
|
180
196
|
};
|
|
181
197
|
});
|
|
182
|
-
}, Z =
|
|
183
|
-
if (!
|
|
198
|
+
}, Z = u(() => {
|
|
199
|
+
if (!b || M.length === 0) return X;
|
|
184
200
|
let e = [], t = (n) => {
|
|
185
201
|
n.forEach((n) => {
|
|
186
|
-
n.isGroupRow ? (e.push(n),
|
|
202
|
+
n.isGroupRow ? (e.push(n), P[n.path] !== !1 && t(n.children)) : e.push(n);
|
|
187
203
|
});
|
|
188
204
|
};
|
|
189
205
|
return t(X), e;
|
|
190
206
|
}, [
|
|
191
207
|
X,
|
|
208
|
+
P,
|
|
192
209
|
M,
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
]), Q = (e, t = !1, n) => R.includes(e) ? {
|
|
210
|
+
b
|
|
211
|
+
]), Q = (e, t = !1, n) => z.includes(e) ? {
|
|
196
212
|
position: "sticky",
|
|
197
|
-
left: `${
|
|
213
|
+
left: `${q[e]}px`,
|
|
198
214
|
zIndex: t ? 30 : 20,
|
|
199
215
|
backgroundColor: "#fff",
|
|
200
216
|
boxShadow: "2px 0 5px -2px rgba(0,0,0,0.1)",
|
|
201
217
|
...n
|
|
202
|
-
} : n || {}, $ = V.length + +!!
|
|
203
|
-
return /* @__PURE__ */
|
|
204
|
-
|
|
205
|
-
|
|
218
|
+
} : n || {}, $ = V.length + +!!y + (b && M.length > 0 ? 1 : 0);
|
|
219
|
+
return /* @__PURE__ */ m("div", {
|
|
220
|
+
ref: H,
|
|
221
|
+
className: "w-full space-y-3 relative",
|
|
222
|
+
children: [b && /* @__PURE__ */ p("div", {
|
|
206
223
|
onDragOver: (e) => {
|
|
207
|
-
e.preventDefault(),
|
|
224
|
+
e.preventDefault(), I(!0);
|
|
208
225
|
},
|
|
209
|
-
onDragLeave: () =>
|
|
210
|
-
onDrop:
|
|
211
|
-
className: `w-full min-h-[52px] px-4 py-2 border rounded-xl flex items-center gap-2 transition-all duration-200 ${
|
|
212
|
-
children:
|
|
226
|
+
onDragLeave: () => I(!1),
|
|
227
|
+
onDrop: ue,
|
|
228
|
+
className: `w-full min-h-[52px] px-4 py-2 border rounded-xl flex items-center gap-2 transition-all duration-200 ${ae ? "border-blue-500 bg-blue-50/50 scale-[0.99]" : "border-dashed border-slate-200 bg-slate-50/50"}`,
|
|
229
|
+
children: M.length === 0 ? /* @__PURE__ */ p("span", {
|
|
213
230
|
className: "text-[12px] text-muted-foreground font-medium select-none",
|
|
214
231
|
children: "Drag a column header here to group your records by that field"
|
|
215
|
-
}) : /* @__PURE__ */
|
|
232
|
+
}) : /* @__PURE__ */ m("div", {
|
|
216
233
|
className: "flex flex-wrap items-center gap-1.5",
|
|
217
|
-
children: [/* @__PURE__ */
|
|
234
|
+
children: [/* @__PURE__ */ p("span", {
|
|
218
235
|
className: "text-[11px] font-bold uppercase tracking-wider text-muted-foreground mr-1",
|
|
219
236
|
children: "Grouped By:"
|
|
220
|
-
}),
|
|
237
|
+
}), M.map((e) => /* @__PURE__ */ m("div", {
|
|
221
238
|
className: "flex items-center gap-1.5 pl-2 pr-1 py-1 bg-white border border-slate-200 rounded-lg shadow-sm text-[12px] font-semibold text-muted-foreground",
|
|
222
|
-
children: [/* @__PURE__ */
|
|
223
|
-
onClick: () =>
|
|
239
|
+
children: [/* @__PURE__ */ p("span", { children: R.find((t) => t.key === e)?.header || e }), /* @__PURE__ */ p("button", {
|
|
240
|
+
onClick: () => de(e),
|
|
224
241
|
className: "p-0.5 rounded-md hover:bg-slate-100 text-muted-foreground transition-colors",
|
|
225
|
-
children: /* @__PURE__ */
|
|
242
|
+
children: /* @__PURE__ */ p(c, { className: "w-3 h-3" })
|
|
226
243
|
})]
|
|
227
244
|
}, e))]
|
|
228
245
|
})
|
|
229
|
-
}), /* @__PURE__ */
|
|
246
|
+
}), /* @__PURE__ */ p("div", {
|
|
230
247
|
className: "w-full overflow-x-auto border border-slate-100 rounded-xl bg-white shadow-sm",
|
|
231
248
|
style: C,
|
|
232
|
-
children: /* @__PURE__ */
|
|
249
|
+
children: /* @__PURE__ */ m("table", {
|
|
233
250
|
className: "w-full caption-bottom text-sm border-collapse table-fixed",
|
|
234
|
-
style:
|
|
251
|
+
style: re,
|
|
235
252
|
children: [
|
|
236
|
-
/* @__PURE__ */
|
|
237
|
-
|
|
238
|
-
V.map((e) => /* @__PURE__ */
|
|
239
|
-
|
|
253
|
+
/* @__PURE__ */ m("colgroup", { children: [
|
|
254
|
+
b && M.length > 0 && /* @__PURE__ */ p("col", { style: { width: "48px" } }),
|
|
255
|
+
V.map((e) => /* @__PURE__ */ p("col", { style: e.style }, e.key)),
|
|
256
|
+
y && /* @__PURE__ */ p("col", { style: { width: "100px" } })
|
|
240
257
|
] }),
|
|
241
|
-
/* @__PURE__ */
|
|
258
|
+
/* @__PURE__ */ p("thead", {
|
|
242
259
|
className: "bg-slate-50 select-none",
|
|
243
|
-
children:
|
|
260
|
+
children: K.map((r, i) => /* @__PURE__ */ m("tr", {
|
|
244
261
|
className: "border-b border-slate-100",
|
|
245
262
|
children: [
|
|
246
|
-
i === 0 &&
|
|
247
|
-
rowSpan:
|
|
263
|
+
i === 0 && b && M.length > 0 && /* @__PURE__ */ p("th", {
|
|
264
|
+
rowSpan: K.length,
|
|
248
265
|
className: "w-12 border-r border-slate-100",
|
|
249
266
|
style: {
|
|
250
267
|
position: "sticky",
|
|
@@ -253,55 +270,63 @@ function h({ columns: h, data: g, rowKey: _, actions: v, isLoading: ee, groupBy:
|
|
|
253
270
|
backgroundColor: "rgb(248, 250, 252)"
|
|
254
271
|
}
|
|
255
272
|
}),
|
|
256
|
-
r.map(({ col: r, rowSpan: i, colSpan:
|
|
257
|
-
let
|
|
258
|
-
return /* @__PURE__ */
|
|
273
|
+
r.map(({ col: r, rowSpan: i, colSpan: c }) => {
|
|
274
|
+
let l = (E[r.key]?.length || 0) > 0, u = z.includes(r.key), d = Q(r.key, !0, r.headerStyle), f = !r.children || r.children.length === 0, h = L.key === r.key;
|
|
275
|
+
return /* @__PURE__ */ p("th", {
|
|
259
276
|
rowSpan: i,
|
|
260
|
-
colSpan:
|
|
261
|
-
...
|
|
277
|
+
colSpan: c,
|
|
278
|
+
...b && f ? {
|
|
262
279
|
draggable: !0,
|
|
263
|
-
onDragStart: (e) =>
|
|
280
|
+
onDragStart: (e) => le(e, r.key)
|
|
264
281
|
} : {},
|
|
265
|
-
className: `h-12 text-center align-middle font-bold text-[12px] px-4 border-r border-b border-slate-100 relative ${
|
|
266
|
-
style:
|
|
267
|
-
children: /* @__PURE__ */
|
|
282
|
+
className: `h-12 text-center align-middle font-bold text-[12px] px-4 border-r border-b border-slate-100 relative ${b && f ? "cursor-grab active:cursor-grabbing" : ""} ${u ? "bg-slate-50/90" : ""} ${r.className || ""}`,
|
|
283
|
+
style: d,
|
|
284
|
+
children: /* @__PURE__ */ m("div", {
|
|
268
285
|
className: "flex items-center gap-1 group/header w-full justify-between",
|
|
269
286
|
children: [
|
|
270
|
-
/* @__PURE__ */
|
|
271
|
-
className: `flex items-center gap-1.5 truncate w-full ${r.sortable &&
|
|
272
|
-
onClick: () => r.sortable &&
|
|
273
|
-
children: [/* @__PURE__ */
|
|
287
|
+
/* @__PURE__ */ m("div", {
|
|
288
|
+
className: `flex items-center gap-1.5 truncate w-full ${r.sortable && f ? "cursor-pointer select-none hover:text-blue-600" : ""}`,
|
|
289
|
+
onClick: () => r.sortable && f && ce(r.key),
|
|
290
|
+
children: [/* @__PURE__ */ p("span", {
|
|
274
291
|
className: "truncate",
|
|
275
292
|
children: r.header
|
|
276
|
-
}),
|
|
277
|
-
className: `text-slate-400 transition-colors ${
|
|
278
|
-
children:
|
|
293
|
+
}), f && r.sortable && /* @__PURE__ */ p("span", {
|
|
294
|
+
className: `text-slate-400 transition-colors ${h ? "text-blue-600" : "opacity-0 group-hover/header:opacity-100"}`,
|
|
295
|
+
children: h && L.direction === "asc" ? /* @__PURE__ */ p(t, { className: "w-3.5 h-3.5" }) : h && L.direction === "desc" ? /* @__PURE__ */ p(e, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ p(n, { className: "w-3.5 h-3.5" })
|
|
279
296
|
})]
|
|
280
297
|
}),
|
|
281
|
-
/* @__PURE__ */
|
|
298
|
+
/* @__PURE__ */ m("div", {
|
|
282
299
|
className: "flex items-center gap-1",
|
|
283
|
-
children: [
|
|
300
|
+
children: [f && r.filterable && /* @__PURE__ */ p("button", {
|
|
301
|
+
ref: (e) => {
|
|
302
|
+
e ? j.current.set(r.key, e) : j.current.delete(r.key);
|
|
303
|
+
},
|
|
284
304
|
onClick: (e) => {
|
|
285
305
|
e.stopPropagation(), k(""), T(w === r.key ? null : r.key);
|
|
286
306
|
},
|
|
287
|
-
className: `p-0.5 rounded hover:bg-slate-200 transition-colors ${
|
|
288
|
-
children: "
|
|
289
|
-
}),
|
|
307
|
+
className: `p-0.5 rounded hover:bg-slate-200 transition-colors ${l ? "text-blue-600" : "text-muted-foreground opacity-0 group-hover/header:opacity-100"}`,
|
|
308
|
+
children: /* @__PURE__ */ p(a, { className: "w-3.5 h-3.5" })
|
|
309
|
+
}), f && /* @__PURE__ */ p("button", {
|
|
290
310
|
onClick: (e) => {
|
|
291
|
-
e.stopPropagation(),
|
|
311
|
+
e.stopPropagation(), G(r.key);
|
|
292
312
|
},
|
|
293
|
-
className: `p-0.5 rounded hover:bg-slate-200 transition-colors opacity-0 group-hover/header:opacity-100 ${
|
|
294
|
-
title:
|
|
295
|
-
children:
|
|
313
|
+
className: `p-0.5 rounded hover:bg-slate-200 transition-colors opacity-0 group-hover/header:opacity-100 ${u ? "text-blue-500 opacity-100" : "text-slate-300"}`,
|
|
314
|
+
title: u ? "Unpin column" : "Pin column",
|
|
315
|
+
children: p(u ? s : o, { className: "w-3.5 h-3.5" })
|
|
296
316
|
})]
|
|
297
317
|
}),
|
|
298
|
-
w === r.key &&
|
|
299
|
-
ref:
|
|
300
|
-
className: "absolute
|
|
318
|
+
w === r.key && f && A && H.current && ee(/* @__PURE__ */ m("div", {
|
|
319
|
+
ref: U,
|
|
320
|
+
className: "absolute w-52 bg-white border border-slate-200 rounded-lg shadow-lg py-2 flex flex-col font-normal text-slate-700 text-left pointer-events-auto",
|
|
321
|
+
style: {
|
|
322
|
+
top: A.top,
|
|
323
|
+
left: A.left,
|
|
324
|
+
zIndex: 9999
|
|
325
|
+
},
|
|
301
326
|
children: [
|
|
302
|
-
/* @__PURE__ */
|
|
327
|
+
/* @__PURE__ */ p("div", {
|
|
303
328
|
className: "px-2 pb-2 mb-1 border-b border-slate-100",
|
|
304
|
-
children: /* @__PURE__ */
|
|
329
|
+
children: /* @__PURE__ */ p("input", {
|
|
305
330
|
type: "text",
|
|
306
331
|
placeholder: "Search values...",
|
|
307
332
|
value: O,
|
|
@@ -310,40 +335,40 @@ function h({ columns: h, data: g, rowKey: _, actions: v, isLoading: ee, groupBy:
|
|
|
310
335
|
onClick: (e) => e.stopPropagation()
|
|
311
336
|
})
|
|
312
337
|
}),
|
|
313
|
-
/* @__PURE__ */
|
|
338
|
+
/* @__PURE__ */ p("div", {
|
|
314
339
|
className: "max-h-40 overflow-y-auto px-2 space-y-1",
|
|
315
|
-
children: J.length === 0 ? /* @__PURE__ */
|
|
340
|
+
children: J.length === 0 ? /* @__PURE__ */ p("div", {
|
|
316
341
|
className: "text-[11px] text-muted-foreground p-2 text-center",
|
|
317
342
|
children: "No results found"
|
|
318
|
-
}) : J.map((e, t) => /* @__PURE__ */
|
|
343
|
+
}) : J.map((e, t) => /* @__PURE__ */ m("label", {
|
|
319
344
|
className: "flex items-center gap-2 px-2 py-1.5 text-[12px] rounded hover:bg-slate-50 cursor-pointer select-none",
|
|
320
|
-
children: [/* @__PURE__ */
|
|
345
|
+
children: [/* @__PURE__ */ p("input", {
|
|
321
346
|
type: "checkbox",
|
|
322
347
|
className: "rounded border-slate-300 text-blue-600 focus:ring-blue-500 w-3.5 h-3.5",
|
|
323
348
|
checked: E[r.key]?.includes(e) || !1,
|
|
324
|
-
onChange: () =>
|
|
325
|
-
}), /* @__PURE__ */
|
|
349
|
+
onChange: () => fe(r.key, e)
|
|
350
|
+
}), /* @__PURE__ */ p("span", {
|
|
326
351
|
className: "truncate",
|
|
327
352
|
children: String(e)
|
|
328
353
|
})]
|
|
329
354
|
}, t))
|
|
330
355
|
}),
|
|
331
|
-
|
|
356
|
+
l && /* @__PURE__ */ p("div", {
|
|
332
357
|
className: "border-t border-slate-100 mt-2 pt-1 px-2 flex justify-end",
|
|
333
|
-
children: /* @__PURE__ */
|
|
334
|
-
onClick: () =>
|
|
358
|
+
children: /* @__PURE__ */ p("button", {
|
|
359
|
+
onClick: () => pe(r.key),
|
|
335
360
|
className: "text-[11px] text-red-500 hover:underline font-medium px-2 py-0.5",
|
|
336
361
|
children: "Clear Filter"
|
|
337
362
|
})
|
|
338
363
|
})
|
|
339
364
|
]
|
|
340
|
-
})
|
|
365
|
+
}), H.current)
|
|
341
366
|
]
|
|
342
367
|
})
|
|
343
368
|
}, r.key);
|
|
344
369
|
}),
|
|
345
|
-
i === 0 &&
|
|
346
|
-
rowSpan:
|
|
370
|
+
i === 0 && y && /* @__PURE__ */ p("th", {
|
|
371
|
+
rowSpan: K.length,
|
|
347
372
|
className: "h-12 align-middle font-bold text-[12px] px-4 text-right shadow-[-1px_0_0_rgba(226,232,240,1)]",
|
|
348
373
|
style: {
|
|
349
374
|
position: "sticky",
|
|
@@ -355,22 +380,22 @@ function h({ columns: h, data: g, rowKey: _, actions: v, isLoading: ee, groupBy:
|
|
|
355
380
|
]
|
|
356
381
|
}, `header-row-${i}`))
|
|
357
382
|
}),
|
|
358
|
-
/* @__PURE__ */
|
|
383
|
+
/* @__PURE__ */ p("tbody", {
|
|
359
384
|
className: "divide-y divide-slate-100",
|
|
360
|
-
children:
|
|
385
|
+
children: te ? /* @__PURE__ */ p("tr", { children: /* @__PURE__ */ p("td", {
|
|
361
386
|
colSpan: $,
|
|
362
387
|
className: "p-8 text-center text-muted-foreground text-[12px] font-medium",
|
|
363
388
|
children: "Loading records..."
|
|
364
|
-
}) }) : Z.length === 0 ? /* @__PURE__ */
|
|
389
|
+
}) }) : Z.length === 0 ? /* @__PURE__ */ p("tr", { children: /* @__PURE__ */ p("td", {
|
|
365
390
|
colSpan: $,
|
|
366
391
|
className: "p-8 text-center text-muted-foreground text-[12px] font-medium",
|
|
367
392
|
children: "No records found matching criteria."
|
|
368
393
|
}) }) : Z.map((e, t) => {
|
|
369
394
|
if (e.isGroupRow) {
|
|
370
|
-
let n =
|
|
371
|
-
return /* @__PURE__ */
|
|
395
|
+
let n = P[e.path] !== !1;
|
|
396
|
+
return /* @__PURE__ */ m("tr", {
|
|
372
397
|
className: "bg-slate-50/60 hover:bg-slate-100/80 transition-colors select-none",
|
|
373
|
-
children: [/* @__PURE__ */
|
|
398
|
+
children: [/* @__PURE__ */ p("td", {
|
|
374
399
|
className: "p-3 pl-4 font-semibold text-slate-700 text-[12px] border-r border-slate-100",
|
|
375
400
|
style: {
|
|
376
401
|
position: "sticky",
|
|
@@ -379,31 +404,31 @@ function h({ columns: h, data: g, rowKey: _, actions: v, isLoading: ee, groupBy:
|
|
|
379
404
|
backgroundColor: "rgba(248, 250, 252, 0.9)",
|
|
380
405
|
paddingLeft: `${e.depth * 12 + 16}px`
|
|
381
406
|
},
|
|
382
|
-
children: /* @__PURE__ */
|
|
383
|
-
onClick: () =>
|
|
407
|
+
children: /* @__PURE__ */ m("button", {
|
|
408
|
+
onClick: () => me(e.path),
|
|
384
409
|
className: "flex items-center gap-1.5 text-left focus:outline-none focus:ring-1 focus:ring-blue-400 rounded p-0.5",
|
|
385
410
|
children: [
|
|
386
|
-
|
|
387
|
-
/* @__PURE__ */
|
|
411
|
+
p(n ? r : i, { className: "w-4 h-4 text-slate-500" }),
|
|
412
|
+
/* @__PURE__ */ p("span", {
|
|
388
413
|
className: "text-slate-800 font-bold w-40 truncate",
|
|
389
414
|
children: e.groupValue
|
|
390
415
|
}),
|
|
391
|
-
/* @__PURE__ */
|
|
416
|
+
/* @__PURE__ */ p("span", {
|
|
392
417
|
className: "bg-slate-200/70 text-muted-foreground font-medium text-[10px] px-1.5 py-0.2 rounded-full ml-1",
|
|
393
418
|
children: e.totalItemsCount
|
|
394
419
|
})
|
|
395
420
|
]
|
|
396
421
|
})
|
|
397
|
-
}), /* @__PURE__ */
|
|
422
|
+
}), /* @__PURE__ */ p("td", {
|
|
398
423
|
colSpan: $ - 1,
|
|
399
424
|
className: "bg-slate-50/30"
|
|
400
425
|
})]
|
|
401
426
|
}, `group-header-${e.path}-${t}`);
|
|
402
427
|
}
|
|
403
|
-
return /* @__PURE__ */
|
|
428
|
+
return /* @__PURE__ */ m("tr", {
|
|
404
429
|
className: "border-b border-slate-100 h-12 hover:bg-slate-50/80 transition-colors group",
|
|
405
430
|
children: [
|
|
406
|
-
|
|
431
|
+
b && M?.length > 0 && /* @__PURE__ */ p("td", {
|
|
407
432
|
className: "w-12 bg-white border-r border-slate-100",
|
|
408
433
|
style: {
|
|
409
434
|
position: "sticky",
|
|
@@ -413,29 +438,29 @@ function h({ columns: h, data: g, rowKey: _, actions: v, isLoading: ee, groupBy:
|
|
|
413
438
|
}),
|
|
414
439
|
V?.map((t) => {
|
|
415
440
|
let n = e[t.key], r = Q(t.key, !1, t.style);
|
|
416
|
-
return /* @__PURE__ */
|
|
417
|
-
className: `p-4 align-middle py-1 px-4 transition-colors ${
|
|
441
|
+
return /* @__PURE__ */ p("td", {
|
|
442
|
+
className: `p-4 align-middle py-1 px-4 transition-colors ${z.includes(t.key) ? "group-hover:bg-slate-100" : ""} ${t.className || ""}`,
|
|
418
443
|
style: r,
|
|
419
|
-
children: t.render ? t.render(n, e) : /* @__PURE__ */
|
|
444
|
+
children: t.render ? t.render(n, e) : /* @__PURE__ */ p("span", {
|
|
420
445
|
className: "text-[12px] text-muted-foreground font-medium truncate block",
|
|
421
446
|
children: n
|
|
422
447
|
})
|
|
423
448
|
}, t.key);
|
|
424
449
|
}),
|
|
425
|
-
|
|
450
|
+
y && /* @__PURE__ */ p("td", {
|
|
426
451
|
className: "p-4 align-middle py-1 px-4 text-right bg-white shadow-[-1px_0_0_rgba(226,232,240,1)] group-hover:bg-slate-50/80",
|
|
427
452
|
style: {
|
|
428
453
|
position: "sticky",
|
|
429
454
|
right: 0,
|
|
430
455
|
zIndex: 20
|
|
431
456
|
},
|
|
432
|
-
children: /* @__PURE__ */
|
|
457
|
+
children: /* @__PURE__ */ p("div", {
|
|
433
458
|
className: "flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150",
|
|
434
|
-
children:
|
|
459
|
+
children: y(e)
|
|
435
460
|
})
|
|
436
461
|
})
|
|
437
462
|
]
|
|
438
|
-
},
|
|
463
|
+
}, W(e) ?? `row-${t}`);
|
|
439
464
|
})
|
|
440
465
|
})
|
|
441
466
|
]
|
|
@@ -444,4 +469,4 @@ function h({ columns: h, data: g, rowKey: _, actions: v, isLoading: ee, groupBy:
|
|
|
444
469
|
});
|
|
445
470
|
}
|
|
446
471
|
//#endregion
|
|
447
|
-
export {
|
|
472
|
+
export { g 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/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`lucide-react`,`react`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.FlexiDataGrid={},e.LucideReact,e.React,e.JSX))})(this,function(e,t,n,r){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var i=Object.create,a=Object.defineProperty,o=Object.getOwnPropertyDescriptor,s=Object.getOwnPropertyNames,c=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty,u=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=s(t),c=0,u=i.length,d;c<u;c++)d=i[c],!l.call(e,d)&&d!==n&&a(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=o(t,d))||r.enumerable});return e};n=((e,t,n)=>(n=e==null?{}:i(c(e)),u(t||!e||!e.__esModule?a(n,`default`,{value:e,enumerable:!0}):n,e)))(n,1);var d=e=>{let t=[];return e.forEach(e=>{e.children&&e.children.length>0?t.push(...d(e.children)):t.push(e)}),t};function f({columns:e,data:i,rowKey:a,actions:o,isLoading:s,groupBy:c=!1,defaultGroupBy:l=[],onPinChange:u,onGroupChange:f,containerStyle:p,tableStyle:m}){let[h,g]=(0,n.useState)(null),[_,v]=(0,n.useState)({}),[y,b]=(0,n.useState)(``),[x,S]=(0,n.useState)(l),[C,w]=(0,n.useState)({}),[T,E]=(0,n.useState)(!1),[D,O]=(0,n.useState)({key:null,direction:null}),k=(0,n.useMemo)(()=>d(e),[e]),[A,j]=(0,n.useState)(k.filter(e=>e.pinned).map(e=>e.key)),M=(0,n.useMemo)(()=>{let t=e=>[...e].sort((e,t)=>{let n=A.includes(e.key),r=A.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,A]),N=(0,n.useMemo)(()=>{let e=d(M),t=c?x:[];return e.filter(e=>!t.includes(e.key))},[M,x,c]),P=(0,n.useRef)(null);(0,n.useEffect)(()=>{function e(e){P.current&&!P.current.contains(e.target)&&(g(null),b(``))}return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[]);let F=e=>typeof a==`function`?a(e):String(e[a]),I=e=>{let t=A.includes(e);j(t?A.filter(t=>t!==e):[...A,e]),u&&u(e,!t)},L=e=>{let t=`asc`;D.key===e&&(t=D.direction===`asc`?`desc`:D.direction===`desc`?null:`asc`),O({key:t?e:null,direction:t})},R=(e,t)=>{c&&(e.dataTransfer.setData(`text/plain`,t),e.dataTransfer.effectAllowed=`move`)},z=e=>{e.preventDefault(),E(!1);let t=e.dataTransfer.getData(`text/plain`);if(t&&!x.includes(t)){let e=[...x,t];S(e),f&&f(e)}},B=e=>{let t=x.filter(t=>t!==e);S(t),w({}),f&&f(t)},V=(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(M),n=Array.from({length:t},()=>[]),r=e=>!e.children||e.children.length===0?x.includes(e.key)&&c?0:1:e.children.reduce((e,t)=>e+r(t),0),i=c?x:[],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(M,0),n.filter(e=>e.length>0)},[M,x,c]),H=(0,n.useMemo)(()=>{let e={},t=0;return c&&x.length>0&&(t+=48),N.forEach(n=>{if(A.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},[N,A,x,c]),U=(e,t)=>{v(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})},W=e=>{v(t=>{let n={...t};return delete n[e],n})},G=(0,n.useMemo)(()=>{if(!h)return[];let e=k.find(e=>e.key===h),t=i.map(t=>e?.getValue?e.getValue(t):t[h]),n=Array.from(new Set(t)).filter(e=>e!=null);return y.trim()?n.filter(e=>String(e).toLowerCase().includes(y.toLowerCase())):n},[i,h,y,k]),K=(0,n.useMemo)(()=>{let e=i.filter(e=>Object.entries(_).every(([t,n])=>{if(!n||n.length===0)return!0;let r=k.find(e=>e.key===t),i=r?.getValue?r.getValue(e):e[t];return n.includes(i)}));if(D.key&&D.direction){let{key:t,direction:n}=D,r=k.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},[i,_,D,k]),q=(0,n.useMemo)(()=>{if(!c||x.length===0)return K;let e=(t,n,r=``)=>{if(n>=x.length)return t;let i=x[n],a=k.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(K,0)},[K,x,c,k]),J=e=>{w(t=>{let n=t[e]!==!1;return{...t,[e]:!n}})},Y=(0,n.useMemo)(()=>{if(!c||x.length===0)return q;let e=[],t=n=>{n.forEach(n=>{n.isGroupRow?(e.push(n),C[n.path]!==!1&&t(n.children)):e.push(n)})};return t(q),e},[q,C,x,c]),X=(e,t=!1,n)=>A.includes(e)?{position:`sticky`,left:`${H[e]}px`,zIndex:t?30:20,backgroundColor:`#fff`,boxShadow:`2px 0 5px -2px rgba(0,0,0,0.1)`,...n}:n||{},Z=N.length+ +!!o+(c&&x.length>0?1:0);return(0,r.jsxs)(`div`,{className:`w-full space-y-3`,children:[c&&(0,r.jsx)(`div`,{onDragOver:e=>{e.preventDefault(),E(!0)},onDragLeave:()=>E(!1),onDrop:z,className:`w-full min-h-[52px] px-4 py-2 border rounded-xl flex items-center gap-2 transition-all duration-200 ${T?`border-blue-500 bg-blue-50/50 scale-[0.99]`:`border-dashed border-slate-200 bg-slate-50/50`}`,children:x.length===0?(0,r.jsx)(`span`,{className:`text-[12px] text-muted-foreground font-medium select-none`,children:`Drag a column header here to group your records by that field`}):(0,r.jsxs)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:[(0,r.jsx)(`span`,{className:`text-[11px] font-bold uppercase tracking-wider text-muted-foreground mr-1`,children:`Grouped By:`}),x.map(e=>(0,r.jsxs)(`div`,{className:`flex items-center gap-1.5 pl-2 pr-1 py-1 bg-white border border-slate-200 rounded-lg shadow-sm text-[12px] font-semibold text-muted-foreground`,children:[(0,r.jsx)(`span`,{children:k.find(t=>t.key===e)?.header||e}),(0,r.jsx)(`button`,{onClick:()=>B(e),className:`p-0.5 rounded-md hover:bg-slate-100 text-muted-foreground transition-colors`,children:(0,r.jsx)(t.X,{className:`w-3 h-3`})})]},e))]})}),(0,r.jsx)(`div`,{className:`w-full overflow-x-auto border border-slate-100 rounded-xl bg-white shadow-sm`,style:p,children:(0,r.jsxs)(`table`,{className:`w-full caption-bottom text-sm border-collapse table-fixed`,style:m,children:[(0,r.jsxs)(`colgroup`,{children:[c&&x.length>0&&(0,r.jsx)(`col`,{style:{width:`48px`}}),N.map(e=>(0,r.jsx)(`col`,{style:e.style},e.key)),o&&(0,r.jsx)(`col`,{style:{width:`100px`}})]}),(0,r.jsx)(`thead`,{className:`bg-slate-50 select-none`,children:V.map((e,n)=>(0,r.jsxs)(`tr`,{className:`border-b border-slate-100`,children:[n===0&&c&&x.length>0&&(0,r.jsx)(`th`,{rowSpan:V.length,className:`w-12 border-r border-slate-100`,style:{position:`sticky`,left:0,zIndex:35,backgroundColor:`rgb(248, 250, 252)`}}),e.map(({col:e,rowSpan:n,colSpan:i})=>{let a=(_[e.key]?.length||0)>0,o=A.includes(e.key),s=X(e.key,!0,e.headerStyle),l=!e.children||e.children.length===0,u=D.key===e.key;return(0,r.jsx)(`th`,{rowSpan:n,colSpan:i,...c&&l?{draggable:!0,onDragStart:t=>R(t,e.key)}:{},className:`h-12 text-center align-middle font-bold text-[12px] px-4 border-r border-b border-slate-100 relative ${c&&l?`cursor-grab active:cursor-grabbing`:``} ${o?`bg-slate-50/90`:``} ${e.className||``}`,style:s,children:(0,r.jsxs)(`div`,{className:`flex items-center gap-1 group/header w-full justify-between`,children:[(0,r.jsxs)(`div`,{className:`flex items-center gap-1.5 truncate w-full ${e.sortable&&l?`cursor-pointer select-none hover:text-blue-600`:``}`,onClick:()=>e.sortable&&l&&L(e.key),children:[(0,r.jsx)(`span`,{className:`truncate`,children:e.header}),l&&e.sortable&&(0,r.jsx)(`span`,{className:`text-slate-400 transition-colors ${u?`text-blue-600`:`opacity-0 group-hover/header:opacity-100`}`,children:u&&D.direction===`asc`?(0,r.jsx)(t.ArrowUp,{className:`w-3.5 h-3.5`}):u&&D.direction===`desc`?(0,r.jsx)(t.ArrowDown,{className:`w-3.5 h-3.5`}):(0,r.jsx)(t.ArrowUpDown,{className:`w-3.5 h-3.5`})})]}),(0,r.jsxs)(`div`,{className:`flex items-center gap-1`,children:[l&&e.filterable&&(0,r.jsx)(`button`,{onClick:t=>{t.stopPropagation(),b(``),g(h===e.key?null:e.key)},className:`p-0.5 rounded hover:bg-slate-200 transition-colors ${a?`text-blue-600`:`text-muted-foreground opacity-0 group-hover/header:opacity-100`}`,children:`Filter`}),l&&(0,r.jsx)(`button`,{onClick:t=>{t.stopPropagation(),I(e.key)},className:`p-0.5 rounded hover:bg-slate-200 transition-colors opacity-0 group-hover/header:opacity-100 ${o?`text-blue-500 opacity-100`:`text-slate-300`}`,title:o?`Unpin column`:`Pin column`,children:o?(0,r.jsx)(t.PinOff,{className:`w-3.5 h-3.5`}):(0,r.jsx)(t.Pin,{className:`w-3.5 h-3.5`})})]}),h===e.key&&l&&(0,r.jsxs)(`div`,{ref:P,className:`absolute left-4 top-10 z-50 w-52 bg-white border border-slate-200 rounded-lg shadow-lg py-2 flex flex-col font-normal text-slate-700 text-left`,children:[(0,r.jsx)(`div`,{className:`px-2 pb-2 mb-1 border-b border-slate-100`,children:(0,r.jsx)(`input`,{type:`text`,placeholder:`Search values...`,value:y,onChange:e=>b(e.target.value),className:`w-full px-2 py-1 text-[12px] border border-slate-200 rounded focus:outline-none focus:border-blue-500 font-medium text-slate-600`,onClick:e=>e.stopPropagation()})}),(0,r.jsx)(`div`,{className:`max-h-40 overflow-y-auto px-2 space-y-1`,children:G.length===0?(0,r.jsx)(`div`,{className:`text-[11px] text-muted-foreground p-2 text-center`,children:`No results found`}):G.map((t,n)=>(0,r.jsxs)(`label`,{className:`flex items-center gap-2 px-2 py-1.5 text-[12px] rounded hover:bg-slate-50 cursor-pointer select-none`,children:[(0,r.jsx)(`input`,{type:`checkbox`,className:`rounded border-slate-300 text-blue-600 focus:ring-blue-500 w-3.5 h-3.5`,checked:_[e.key]?.includes(t)||!1,onChange:()=>U(e.key,t)}),(0,r.jsx)(`span`,{className:`truncate`,children:String(t)})]},n))}),a&&(0,r.jsx)(`div`,{className:`border-t border-slate-100 mt-2 pt-1 px-2 flex justify-end`,children:(0,r.jsx)(`button`,{onClick:()=>W(e.key),className:`text-[11px] text-red-500 hover:underline font-medium px-2 py-0.5`,children:`Clear Filter`})})]})]})},e.key)}),n===0&&o&&(0,r.jsx)(`th`,{rowSpan:V.length,className:`h-12 align-middle font-bold text-[12px] px-4 text-right shadow-[-1px_0_0_rgba(226,232,240,1)]`,style:{position:`sticky`,right:0,zIndex:35,backgroundColor:`rgb(248, 250, 252)`}})]},`header-row-${n}`))}),(0,r.jsx)(`tbody`,{className:`divide-y divide-slate-100`,children:s?(0,r.jsx)(`tr`,{children:(0,r.jsx)(`td`,{colSpan:Z,className:`p-8 text-center text-muted-foreground text-[12px] font-medium`,children:`Loading records...`})}):Y.length===0?(0,r.jsx)(`tr`,{children:(0,r.jsx)(`td`,{colSpan:Z,className:`p-8 text-center text-muted-foreground text-[12px] font-medium`,children:`No records found matching criteria.`})}):Y.map((e,n)=>{if(e.isGroupRow){let i=C[e.path]!==!1;return(0,r.jsxs)(`tr`,{className:`bg-slate-50/60 hover:bg-slate-100/80 transition-colors select-none`,children:[(0,r.jsx)(`td`,{className:`p-3 pl-4 font-semibold text-slate-700 text-[12px] border-r border-slate-100`,style:{position:`sticky`,left:0,zIndex:20,backgroundColor:`rgba(248, 250, 252, 0.9)`,paddingLeft:`${e.depth*12+16}px`},children:(0,r.jsxs)(`button`,{onClick:()=>J(e.path),className:`flex items-center gap-1.5 text-left focus:outline-none focus:ring-1 focus:ring-blue-400 rounded p-0.5`,children:[i?(0,r.jsx)(t.ChevronDown,{className:`w-4 h-4 text-slate-500`}):(0,r.jsx)(t.ChevronRight,{className:`w-4 h-4 text-slate-500`}),(0,r.jsx)(`span`,{className:`text-slate-800 font-bold w-40 truncate`,children:e.groupValue}),(0,r.jsx)(`span`,{className:`bg-slate-200/70 text-muted-foreground font-medium text-[10px] px-1.5 py-0.2 rounded-full ml-1`,children:e.totalItemsCount})]})}),(0,r.jsx)(`td`,{colSpan:Z-1,className:`bg-slate-50/30`})]},`group-header-${e.path}-${n}`)}return(0,r.jsxs)(`tr`,{className:`border-b border-slate-100 h-12 hover:bg-slate-50/80 transition-colors group`,children:[c&&x?.length>0&&(0,r.jsx)(`td`,{className:`w-12 bg-white border-r border-slate-100`,style:{position:`sticky`,left:0,zIndex:10}}),N?.map(t=>{let n=e[t.key],i=X(t.key,!1,t.style);return(0,r.jsx)(`td`,{className:`p-4 align-middle py-1 px-4 transition-colors ${A.includes(t.key)?`group-hover:bg-slate-100`:``} ${t.className||``}`,style:i,children:t.render?t.render(n,e):(0,r.jsx)(`span`,{className:`text-[12px] text-muted-foreground font-medium truncate block`,children:n})},t.key)}),o&&(0,r.jsx)(`td`,{className:`p-4 align-middle py-1 px-4 text-right bg-white shadow-[-1px_0_0_rgba(226,232,240,1)] group-hover:bg-slate-50/80`,style:{position:`sticky`,right:0,zIndex:20},children:(0,r.jsx)(`div`,{className:`flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150`,children:o(e)})})]},F(e)??`row-${n}`)})})]})})]})}e.DataTable=f});
|
|
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};function p({columns:e,data:a,rowKey:o,actions:s,isLoading:c,groupBy:l=!1,defaultGroupBy:u=[],onPinChange:d,onGroupChange:p,containerStyle:ee,tableStyle:m}){let[h,g]=(0,n.useState)(null),[_,v]=(0,n.useState)({}),[y,b]=(0,n.useState)(``),[x,S]=(0,n.useState)(null),C=(0,n.useRef)(new Map),[w,T]=(0,n.useState)(u),[E,D]=(0,n.useState)({}),[O,k]=(0,n.useState)(!1),[A,te]=(0,n.useState)({key:null,direction:null}),j=(0,n.useMemo)(()=>f(e),[e]),[M,N]=(0,n.useState)(j.filter(e=>e.pinned).map(e=>e.key)),P=(0,n.useMemo)(()=>{let t=e=>[...e].sort((e,t)=>{let n=M.includes(e.key),r=M.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,M]),F=(0,n.useMemo)(()=>{let e=f(P),t=l?w:[];return e.filter(e=>!t.includes(e.key))},[P,w,l]),I=(0,n.useRef)(null),L=(0,n.useRef)(null);(0,n.useEffect)(()=>{function e(e){let t=e.target,n=h?C.current.get(h):null;L.current&&!L.current.contains(t)&&!(n&&n.contains(t))&&(g(null),b(``))}return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[h]),(0,n.useEffect)(()=>{if(!h)return;let e=()=>{let e=C.current.get(h),t=I.current;if(!e||!t)return;let n=e.getBoundingClientRect(),r=t.getBoundingClientRect();S({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)}},[h]);let R=e=>typeof o==`function`?o(e):String(e[o]),z=e=>{let t=M.includes(e);N(t?M.filter(t=>t!==e):[...M,e]),d&&d(e,!t)},B=e=>{let t=`asc`;A.key===e&&(t=A.direction===`asc`?`desc`:A.direction===`desc`?null:`asc`),te({key:t?e:null,direction:t})},V=(e,t)=>{l&&(e.dataTransfer.setData(`text/plain`,t),e.dataTransfer.effectAllowed=`move`)},H=e=>{e.preventDefault(),k(!1);let t=e.dataTransfer.getData(`text/plain`);if(t&&!w.includes(t)){let e=[...w,t];T(e),p&&p(e)}},U=e=>{let t=w.filter(t=>t!==e);T(t),D({}),p&&p(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(P),n=Array.from({length:t},()=>[]),r=e=>!e.children||e.children.length===0?w.includes(e.key)&&l?0:1:e.children.reduce((e,t)=>e+r(t),0),i=l?w:[],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(P,0),n.filter(e=>e.length>0)},[P,w,l]),G=(0,n.useMemo)(()=>{let e={},t=0;return l&&w.length>0&&(t+=48),F.forEach(n=>{if(M.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},[F,M,w,l]),K=(e,t)=>{v(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=>{v(t=>{let n={...t};return delete n[e],n})},J=(0,n.useMemo)(()=>{if(!h)return[];let e=j.find(e=>e.key===h),t=a.map(t=>e?.getValue?e.getValue(t):t[h]),n=Array.from(new Set(t)).filter(e=>e!=null);return y.trim()?n.filter(e=>String(e).toLowerCase().includes(y.toLowerCase())):n},[a,h,y,j]),Y=(0,n.useMemo)(()=>{let e=a.filter(e=>Object.entries(_).every(([t,n])=>{if(!n||n.length===0)return!0;let r=j.find(e=>e.key===t),i=r?.getValue?r.getValue(e):e[t];return n.includes(i)}));if(A.key&&A.direction){let{key:t,direction:n}=A,r=j.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,_,A,j]),X=(0,n.useMemo)(()=>{if(!l||w.length===0)return Y;let e=(t,n,r=``)=>{if(n>=w.length)return t;let i=w[n],a=j.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,w,l,j]),ne=e=>{D(t=>{let n=t[e]!==!1;return{...t,[e]:!n}})},Z=(0,n.useMemo)(()=>{if(!l||w.length===0)return X;let e=[],t=n=>{n.forEach(n=>{n.isGroupRow?(e.push(n),E[n.path]!==!1&&t(n.children)):e.push(n)})};return t(X),e},[X,E,w,l]),Q=(e,t=!1,n)=>M.includes(e)?{position:`sticky`,left:`${G[e]}px`,zIndex:t?30:20,backgroundColor:`#fff`,boxShadow:`2px 0 5px -2px rgba(0,0,0,0.1)`,...n}:n||{},$=F.length+ +!!s+(l&&w.length>0?1:0);return(0,i.jsxs)(`div`,{ref:I,className:`w-full space-y-3 relative`,children:[l&&(0,i.jsx)(`div`,{onDragOver:e=>{e.preventDefault(),k(!0)},onDragLeave:()=>k(!1),onDrop:H,className:`w-full min-h-[52px] px-4 py-2 border rounded-xl flex items-center gap-2 transition-all duration-200 ${O?`border-blue-500 bg-blue-50/50 scale-[0.99]`:`border-dashed border-slate-200 bg-slate-50/50`}`,children:w.length===0?(0,i.jsx)(`span`,{className:`text-[12px] text-muted-foreground font-medium select-none`,children:`Drag a column header here to group your records by that field`}):(0,i.jsxs)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:[(0,i.jsx)(`span`,{className:`text-[11px] font-bold uppercase tracking-wider text-muted-foreground mr-1`,children:`Grouped By:`}),w.map(e=>(0,i.jsxs)(`div`,{className:`flex items-center gap-1.5 pl-2 pr-1 py-1 bg-white border border-slate-200 rounded-lg shadow-sm text-[12px] font-semibold text-muted-foreground`,children:[(0,i.jsx)(`span`,{children:j.find(t=>t.key===e)?.header||e}),(0,i.jsx)(`button`,{onClick:()=>U(e),className:`p-0.5 rounded-md hover:bg-slate-100 text-muted-foreground transition-colors`,children:(0,i.jsx)(t.X,{className:`w-3 h-3`})})]},e))]})}),(0,i.jsx)(`div`,{className:`w-full overflow-x-auto border border-slate-100 rounded-xl bg-white shadow-sm`,style:ee,children:(0,i.jsxs)(`table`,{className:`w-full caption-bottom text-sm border-collapse table-fixed`,style:m,children:[(0,i.jsxs)(`colgroup`,{children:[l&&w.length>0&&(0,i.jsx)(`col`,{style:{width:`48px`}}),F.map(e=>(0,i.jsx)(`col`,{style:e.style},e.key)),s&&(0,i.jsx)(`col`,{style:{width:`100px`}})]}),(0,i.jsx)(`thead`,{className:`bg-slate-50 select-none`,children:W.map((e,n)=>(0,i.jsxs)(`tr`,{className:`border-b border-slate-100`,children:[n===0&&l&&w.length>0&&(0,i.jsx)(`th`,{rowSpan:W.length,className:`w-12 border-r border-slate-100`,style:{position:`sticky`,left:0,zIndex:35,backgroundColor:`rgb(248, 250, 252)`}}),e.map(({col:e,rowSpan:n,colSpan:a})=>{let o=(_[e.key]?.length||0)>0,s=M.includes(e.key),c=Q(e.key,!0,e.headerStyle),u=!e.children||e.children.length===0,d=A.key===e.key;return(0,i.jsx)(`th`,{rowSpan:n,colSpan:a,...l&&u?{draggable:!0,onDragStart:t=>V(t,e.key)}:{},className:`h-12 text-center align-middle font-bold text-[12px] px-4 border-r border-b border-slate-100 relative ${l&&u?`cursor-grab active:cursor-grabbing`:``} ${s?`bg-slate-50/90`:``} ${e.className||``}`,style:c,children:(0,i.jsxs)(`div`,{className:`flex items-center gap-1 group/header w-full justify-between`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-1.5 truncate w-full ${e.sortable&&u?`cursor-pointer select-none hover:text-blue-600`:``}`,onClick:()=>e.sortable&&u&&B(e.key),children:[(0,i.jsx)(`span`,{className:`truncate`,children:e.header}),u&&e.sortable&&(0,i.jsx)(`span`,{className:`text-slate-400 transition-colors ${d?`text-blue-600`:`opacity-0 group-hover/header:opacity-100`}`,children:d&&A.direction===`asc`?(0,i.jsx)(t.ArrowUp,{className:`w-3.5 h-3.5`}):d&&A.direction===`desc`?(0,i.jsx)(t.ArrowDown,{className:`w-3.5 h-3.5`}):(0,i.jsx)(t.ArrowUpDown,{className:`w-3.5 h-3.5`})})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-1`,children:[u&&e.filterable&&(0,i.jsx)(`button`,{ref:t=>{t?C.current.set(e.key,t):C.current.delete(e.key)},onClick:t=>{t.stopPropagation(),b(``),g(h===e.key?null:e.key)},className:`p-0.5 rounded hover:bg-slate-200 transition-colors ${o?`text-blue-600`:`text-muted-foreground opacity-0 group-hover/header:opacity-100`}`,children:(0,i.jsx)(t.Filter,{className:`w-3.5 h-3.5`})}),u&&(0,i.jsx)(`button`,{onClick:t=>{t.stopPropagation(),z(e.key)},className:`p-0.5 rounded hover:bg-slate-200 transition-colors opacity-0 group-hover/header:opacity-100 ${s?`text-blue-500 opacity-100`:`text-slate-300`}`,title:s?`Unpin column`:`Pin column`,children:s?(0,i.jsx)(t.PinOff,{className:`w-3.5 h-3.5`}):(0,i.jsx)(t.Pin,{className:`w-3.5 h-3.5`})})]}),h===e.key&&u&&x&&I.current&&(0,r.createPortal)((0,i.jsxs)(`div`,{ref:L,className:`absolute w-52 bg-white border border-slate-200 rounded-lg shadow-lg py-2 flex flex-col font-normal text-slate-700 text-left pointer-events-auto`,style:{top:x.top,left:x.left,zIndex:9999},children:[(0,i.jsx)(`div`,{className:`px-2 pb-2 mb-1 border-b border-slate-100`,children:(0,i.jsx)(`input`,{type:`text`,placeholder:`Search values...`,value:y,onChange:e=>b(e.target.value),className:`w-full px-2 py-1 text-[12px] border border-slate-200 rounded focus:outline-none focus:border-blue-500 font-medium text-slate-600`,onClick:e=>e.stopPropagation()})}),(0,i.jsx)(`div`,{className:`max-h-40 overflow-y-auto px-2 space-y-1`,children:J.length===0?(0,i.jsx)(`div`,{className:`text-[11px] text-muted-foreground p-2 text-center`,children:`No results found`}):J.map((t,n)=>(0,i.jsxs)(`label`,{className:`flex items-center gap-2 px-2 py-1.5 text-[12px] rounded hover:bg-slate-50 cursor-pointer select-none`,children:[(0,i.jsx)(`input`,{type:`checkbox`,className:`rounded border-slate-300 text-blue-600 focus:ring-blue-500 w-3.5 h-3.5`,checked:_[e.key]?.includes(t)||!1,onChange:()=>K(e.key,t)}),(0,i.jsx)(`span`,{className:`truncate`,children:String(t)})]},n))}),o&&(0,i.jsx)(`div`,{className:`border-t border-slate-100 mt-2 pt-1 px-2 flex justify-end`,children:(0,i.jsx)(`button`,{onClick:()=>q(e.key),className:`text-[11px] text-red-500 hover:underline font-medium px-2 py-0.5`,children:`Clear Filter`})})]}),I.current)]})},e.key)}),n===0&&s&&(0,i.jsx)(`th`,{rowSpan:W.length,className:`h-12 align-middle font-bold text-[12px] px-4 text-right shadow-[-1px_0_0_rgba(226,232,240,1)]`,style:{position:`sticky`,right:0,zIndex:35,backgroundColor:`rgb(248, 250, 252)`}})]},`header-row-${n}`))}),(0,i.jsx)(`tbody`,{className:`divide-y divide-slate-100`,children:c?(0,i.jsx)(`tr`,{children:(0,i.jsx)(`td`,{colSpan:$,className:`p-8 text-center text-muted-foreground text-[12px] font-medium`,children:`Loading records...`})}):Z.length===0?(0,i.jsx)(`tr`,{children:(0,i.jsx)(`td`,{colSpan:$,className:`p-8 text-center text-muted-foreground text-[12px] font-medium`,children:`No records found matching criteria.`})}):Z.map((e,n)=>{if(e.isGroupRow){let r=E[e.path]!==!1;return(0,i.jsxs)(`tr`,{className:`bg-slate-50/60 hover:bg-slate-100/80 transition-colors select-none`,children:[(0,i.jsx)(`td`,{className:`p-3 pl-4 font-semibold text-slate-700 text-[12px] border-r border-slate-100`,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`,{onClick:()=>ne(e.path),className:`flex items-center gap-1.5 text-left focus:outline-none focus:ring-1 focus:ring-blue-400 rounded p-0.5`,children:[r?(0,i.jsx)(t.ChevronDown,{className:`w-4 h-4 text-slate-500`}):(0,i.jsx)(t.ChevronRight,{className:`w-4 h-4 text-slate-500`}),(0,i.jsx)(`span`,{className:`text-slate-800 font-bold w-40 truncate`,children:e.groupValue}),(0,i.jsx)(`span`,{className:`bg-slate-200/70 text-muted-foreground font-medium text-[10px] px-1.5 py-0.2 rounded-full ml-1`,children:e.totalItemsCount})]})}),(0,i.jsx)(`td`,{colSpan:$-1,className:`bg-slate-50/30`})]},`group-header-${e.path}-${n}`)}return(0,i.jsxs)(`tr`,{className:`border-b border-slate-100 h-12 hover:bg-slate-50/80 transition-colors group`,children:[l&&w?.length>0&&(0,i.jsx)(`td`,{className:`w-12 bg-white border-r border-slate-100`,style:{position:`sticky`,left:0,zIndex:10}}),F?.map(t=>{let n=e[t.key],r=Q(t.key,!1,t.style);return(0,i.jsx)(`td`,{className:`p-4 align-middle py-1 px-4 transition-colors ${M.includes(t.key)?`group-hover:bg-slate-100`:``} ${t.className||``}`,style:r,children:t.render?t.render(n,e):(0,i.jsx)(`span`,{className:`text-[12px] text-muted-foreground font-medium truncate block`,children:n})},t.key)}),s&&(0,i.jsx)(`td`,{className:`p-4 align-middle py-1 px-4 text-right bg-white shadow-[-1px_0_0_rgba(226,232,240,1)] group-hover:bg-slate-50/80`,style:{position:`sticky`,right:0,zIndex:20},children:(0,i.jsx)(`div`,{className:`flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150`,children:s(e)})})]},R(e)??`row-${n}`)})})]})})]})}e.DataTable=p});
|