flexi-datagrid 1.0.7 → 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/DataTable.d.ts +12 -4
- package/dist/flexi-datagrid.css +1 -1
- package/dist/index.es.js +414 -298
- 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/DataTable.d.ts
CHANGED
|
@@ -1,13 +1,18 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
1
|
+
import { type ReactNode, type CSSProperties } from 'react';
|
|
2
|
+
import React from 'react';
|
|
2
3
|
export interface ColumnConfig<T> {
|
|
3
|
-
key
|
|
4
|
+
key: string;
|
|
4
5
|
header: string;
|
|
5
6
|
className?: string;
|
|
6
7
|
headerClassName?: string;
|
|
8
|
+
style?: CSSProperties;
|
|
9
|
+
headerStyle?: CSSProperties;
|
|
7
10
|
render?: (value: any, record: T) => ReactNode;
|
|
8
11
|
filterable?: boolean;
|
|
12
|
+
sortable?: boolean;
|
|
9
13
|
pinned?: boolean;
|
|
10
14
|
children?: ColumnConfig<T>[];
|
|
15
|
+
getValue?: (record: T) => any;
|
|
11
16
|
}
|
|
12
17
|
interface DataTableProps<T> {
|
|
13
18
|
columns: ColumnConfig<T>[];
|
|
@@ -15,9 +20,12 @@ interface DataTableProps<T> {
|
|
|
15
20
|
rowKey: keyof T | ((record: T) => string);
|
|
16
21
|
actions?: (record: T) => ReactNode;
|
|
17
22
|
isLoading?: boolean;
|
|
23
|
+
groupBy?: boolean;
|
|
24
|
+
defaultGroupBy?: string[];
|
|
18
25
|
onPinChange?: (columnKey: string, isPinned: boolean) => void;
|
|
19
26
|
onGroupChange?: (groupedKeys: string[]) => void;
|
|
20
|
-
|
|
27
|
+
containerStyle?: CSSProperties;
|
|
28
|
+
tableStyle?: CSSProperties;
|
|
21
29
|
}
|
|
22
|
-
export declare function DataTable<T>({ columns, data, rowKey, actions, isLoading, onPinChange, onGroupChange,
|
|
30
|
+
export declare function DataTable<T>({ columns, data, rowKey, actions, isLoading, groupBy, defaultGroupBy, onPinChange, onGroupChange, containerStyle, tableStyle, }: DataTableProps<T>): React.JSX.Element;
|
|
23
31
|
export {};
|
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}.collapse{visibility:collapse}.static{position:static}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.left-0{left:0}.left-4{left:1rem}.right-0{right:0}.top-10{top:2.5rem}.top-9{top:2.25rem}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.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-10{height:2.5rem}.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-\[28px\]{min-height:28px}.min-h-\[52px\]{min-height:52px}.w-12{width:3rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-52{width:13rem}.w-\[100px\]{width:100px}.w-full{width:100%}.flex-shrink-0{flex-shrink:0}.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-center{justify-content:center}.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-100\/60{border-color:#f1f5f999}.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-\[var\(--color-background-secondary\,rgba\(248\,250\,252\,1\)\)\]{background-color:var(--color-background-secondary,#f8fafc)}.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-extrabold{font-weight:800}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.tracking-wide{letter-spacing:.025em}.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-\[2px_0_5px_-2px_rgba\(0\,0\,0\,0\.1\)\]{--tw-shadow:2px 0 5px -2px #0000001a;--tw-shadow-colored:2px 0 5px -2px 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-slate-600:hover{--tw-text-opacity:1;color:rgb(71 85 105/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\/90{background-color:#f1f5f9e6}.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,96 +1,174 @@
|
|
|
1
|
-
import {
|
|
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
|
-
|
|
6
|
-
let
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
6
|
+
var h = (e) => {
|
|
7
|
+
let t = [];
|
|
8
|
+
return e.forEach((e) => {
|
|
9
|
+
e.children && e.children.length > 0 ? t.push(...h(e.children)) : t.push(e);
|
|
10
|
+
}), t;
|
|
11
|
+
};
|
|
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({
|
|
14
|
+
key: null,
|
|
15
|
+
direction: null
|
|
16
|
+
}), R = u(() => h(g), [g]), [z, se] = f(R.filter((e) => e.pinned).map((e) => e.key)), B = u(() => {
|
|
17
|
+
let e = (t) => [...t].sort((e, t) => {
|
|
18
|
+
let n = z.includes(e.key), r = z.includes(t.key);
|
|
19
|
+
return n && !r ? -1 : !n && r ? 1 : 0;
|
|
20
|
+
}).map((t) => t.children && t.children.length > 0 ? {
|
|
21
|
+
...t,
|
|
22
|
+
children: e(t.children)
|
|
23
|
+
} : t);
|
|
24
|
+
return e(g);
|
|
25
|
+
}, [g, z]), V = u(() => {
|
|
26
|
+
let e = h(B), t = b ? M : [];
|
|
27
|
+
return e.filter((e) => !t.includes(e.key));
|
|
28
|
+
}, [
|
|
29
|
+
B,
|
|
30
|
+
M,
|
|
31
|
+
b
|
|
32
|
+
]), H = d(null), U = d(null);
|
|
33
|
+
l(() => {
|
|
15
34
|
function e(e) {
|
|
16
|
-
|
|
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(""));
|
|
17
37
|
}
|
|
18
38
|
return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
|
|
19
|
-
}, [])
|
|
20
|
-
|
|
21
|
-
let
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
e
|
|
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) => {
|
|
58
|
+
let t = "asc";
|
|
59
|
+
L.key === e && (t = L.direction === "asc" ? "desc" : L.direction === "desc" ? null : "asc"), oe({
|
|
60
|
+
key: t ? e : null,
|
|
61
|
+
direction: t
|
|
62
|
+
});
|
|
63
|
+
}, le = (e, t) => {
|
|
64
|
+
b && (e.dataTransfer.setData("text/plain", t), e.dataTransfer.effectAllowed = "move");
|
|
65
|
+
}, ue = (e) => {
|
|
66
|
+
e.preventDefault(), I(!1);
|
|
31
67
|
let t = e.dataTransfer.getData("text/plain");
|
|
32
|
-
if (t && !
|
|
33
|
-
let e = [...
|
|
34
|
-
|
|
68
|
+
if (t && !M.includes(t)) {
|
|
69
|
+
let e = [...M, t];
|
|
70
|
+
N(e), S && S(e);
|
|
35
71
|
}
|
|
36
|
-
},
|
|
37
|
-
let t =
|
|
38
|
-
|
|
39
|
-
},
|
|
40
|
-
let e =
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
72
|
+
}, de = (e) => {
|
|
73
|
+
let t = M.filter((t) => t !== e);
|
|
74
|
+
N(t), F({}), S && S(t);
|
|
75
|
+
}, K = u(() => {
|
|
76
|
+
let e = (t) => {
|
|
77
|
+
let n = 0;
|
|
78
|
+
return t.forEach((t) => {
|
|
79
|
+
n = t.children && t.children.length > 0 ? Math.max(n, 1 + e(t.children)) : Math.max(n, 1);
|
|
80
|
+
}), n;
|
|
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) => {
|
|
82
|
+
e.forEach((e) => {
|
|
83
|
+
if (i.includes(e.key)) return;
|
|
84
|
+
let s = r(e);
|
|
85
|
+
s !== 0 && (e.children && e.children.length > 0 ? (n[o].push({
|
|
86
|
+
col: e,
|
|
87
|
+
rowSpan: 1,
|
|
88
|
+
colSpan: s
|
|
89
|
+
}), a(e.children, o + 1)) : n[o].push({
|
|
90
|
+
col: e,
|
|
91
|
+
rowSpan: t - o,
|
|
92
|
+
colSpan: 1
|
|
93
|
+
}));
|
|
52
94
|
});
|
|
53
95
|
};
|
|
54
|
-
return
|
|
55
|
-
}, [
|
|
96
|
+
return a(B, 0), n.filter((e) => e.length > 0);
|
|
97
|
+
}, [
|
|
98
|
+
B,
|
|
99
|
+
M,
|
|
100
|
+
b
|
|
101
|
+
]), q = u(() => {
|
|
56
102
|
let e = {}, t = 0;
|
|
57
|
-
return
|
|
58
|
-
|
|
103
|
+
return b && M.length > 0 && (t += 48), V.forEach((n) => {
|
|
104
|
+
if (z.includes(n.key)) {
|
|
105
|
+
e[n.key] = t;
|
|
106
|
+
let r = n.style?.width || n.headerStyle?.width || "150px";
|
|
107
|
+
t += typeof r == "number" ? r : parseInt(String(r), 10) || 150;
|
|
108
|
+
}
|
|
59
109
|
}), e;
|
|
60
110
|
}, [
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
return C.trim() ? t.filter((e) => String(e).toLowerCase().includes(C.toLowerCase())) : t;
|
|
68
|
-
}, [
|
|
69
|
-
f,
|
|
70
|
-
y,
|
|
71
|
-
C
|
|
72
|
-
]), K = (e, t) => {
|
|
73
|
-
S((n) => {
|
|
111
|
+
V,
|
|
112
|
+
z,
|
|
113
|
+
M,
|
|
114
|
+
b
|
|
115
|
+
]), fe = (e, t) => {
|
|
116
|
+
D((n) => {
|
|
74
117
|
let r = n[e] || [], i = r.includes(t) ? r.filter((e) => e !== t) : [...r, t], a = {
|
|
75
118
|
...n,
|
|
76
119
|
[e]: i
|
|
77
120
|
};
|
|
78
121
|
return a[e].length === 0 && delete a[e], a;
|
|
79
122
|
});
|
|
80
|
-
},
|
|
81
|
-
|
|
123
|
+
}, pe = (e) => {
|
|
124
|
+
D((t) => {
|
|
82
125
|
let n = { ...t };
|
|
83
126
|
return delete n[e], n;
|
|
84
127
|
});
|
|
85
|
-
}, J =
|
|
86
|
-
if (
|
|
128
|
+
}, J = u(() => {
|
|
129
|
+
if (!w) return [];
|
|
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);
|
|
131
|
+
return O.trim() ? n.filter((e) => String(e).toLowerCase().includes(O.toLowerCase())) : n;
|
|
132
|
+
}, [
|
|
133
|
+
_,
|
|
134
|
+
w,
|
|
135
|
+
O,
|
|
136
|
+
R
|
|
137
|
+
]), Y = u(() => {
|
|
138
|
+
let e = _.filter((e) => Object.entries(E).every(([t, n]) => {
|
|
139
|
+
if (!n || n.length === 0) return !0;
|
|
140
|
+
let r = R.find((e) => e.key === t), i = r?.getValue ? r.getValue(e) : e[t];
|
|
141
|
+
return n.includes(i);
|
|
142
|
+
}));
|
|
143
|
+
if (L.key && L.direction) {
|
|
144
|
+
let { key: t, direction: n } = L, r = R.find((e) => e.key === t);
|
|
145
|
+
e = [...e].sort((e, i) => {
|
|
146
|
+
let a = r?.getValue ? r.getValue(e) : e[t], o = r?.getValue ? r.getValue(i) : i[t];
|
|
147
|
+
if (a === o) return 0;
|
|
148
|
+
if (a == null) return 1;
|
|
149
|
+
if (o == null) return -1;
|
|
150
|
+
let s = 0;
|
|
151
|
+
return s = typeof a == "number" && typeof o == "number" ? a - o : String(a).localeCompare(String(o), void 0, {
|
|
152
|
+
numeric: !0,
|
|
153
|
+
sensitivity: "base"
|
|
154
|
+
}), n === "asc" ? s : -s;
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
return e;
|
|
158
|
+
}, [
|
|
159
|
+
_,
|
|
160
|
+
E,
|
|
161
|
+
L,
|
|
162
|
+
R
|
|
163
|
+
]), X = u(() => {
|
|
164
|
+
if (!b || M.length === 0) return Y;
|
|
87
165
|
let e = (t, n, r = "") => {
|
|
88
|
-
if (n >=
|
|
89
|
-
let i =
|
|
166
|
+
if (n >= M.length) return t;
|
|
167
|
+
let i = M[n], a = R.find((e) => e.key === i), o = {};
|
|
90
168
|
return t.forEach((e) => {
|
|
91
|
-
let t =
|
|
92
|
-
|
|
93
|
-
}), Object.entries(
|
|
169
|
+
let t = a?.getValue ? a.getValue(e) : e[i], n = String(t ?? "N/A");
|
|
170
|
+
o[n] || (o[n] = []), o[n].push(e);
|
|
171
|
+
}), Object.entries(o).map(([t, a]) => {
|
|
94
172
|
let o = r ? `${r}➔${t}` : t;
|
|
95
173
|
return {
|
|
96
174
|
isGroupRow: !0,
|
|
@@ -103,254 +181,292 @@ function d({ columns: d, data: f, rowKey: p, actions: m, isLoading: h, onPinChan
|
|
|
103
181
|
};
|
|
104
182
|
});
|
|
105
183
|
};
|
|
106
|
-
return e(
|
|
107
|
-
}, [
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
184
|
+
return e(Y, 0);
|
|
185
|
+
}, [
|
|
186
|
+
Y,
|
|
187
|
+
M,
|
|
188
|
+
b,
|
|
189
|
+
R
|
|
190
|
+
]), me = (e) => {
|
|
191
|
+
F((t) => {
|
|
192
|
+
let n = t[e] !== !1;
|
|
193
|
+
return {
|
|
194
|
+
...t,
|
|
195
|
+
[e]: !n
|
|
196
|
+
};
|
|
197
|
+
});
|
|
198
|
+
}, Z = u(() => {
|
|
199
|
+
if (!b || M.length === 0) return X;
|
|
114
200
|
let e = [], t = (n) => {
|
|
115
201
|
n.forEach((n) => {
|
|
116
|
-
n.isGroupRow ? (e.push(n),
|
|
202
|
+
n.isGroupRow ? (e.push(n), P[n.path] !== !1 && t(n.children)) : e.push(n);
|
|
117
203
|
});
|
|
118
204
|
};
|
|
119
|
-
return t(
|
|
205
|
+
return t(X), e;
|
|
120
206
|
}, [
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
children: e.header
|
|
146
|
-
}),
|
|
147
|
-
e.filterable || !t && /* @__PURE__ */ u("div", {
|
|
148
|
-
className: "flex items-center gap-1",
|
|
149
|
-
children: [e.filterable && /* @__PURE__ */ l("button", {
|
|
150
|
-
onClick: (t) => {
|
|
151
|
-
t.stopPropagation(), w(""), b(y === e.key ? null : e.key);
|
|
152
|
-
},
|
|
153
|
-
className: `p-0.5 rounded hover:bg-slate-200 transition-colors ${i ? "text-blue-600" : "text-slate-400 opacity-0 group-hover/header:opacity-100"}`,
|
|
154
|
-
children: "Filter"
|
|
155
|
-
}), !t && /* @__PURE__ */ l("button", {
|
|
156
|
-
onClick: (t) => {
|
|
157
|
-
t.stopPropagation(), F(e.key);
|
|
158
|
-
},
|
|
159
|
-
className: `p-0.5 rounded hover:bg-slate-200 transition-colors opacity-0 group-hover/header:opacity-100 ${a ? "text-blue-500 opacity-100" : "text-slate-300"}`,
|
|
160
|
-
children: l(a ? r : n, { className: "w-3.5 h-3.5" })
|
|
161
|
-
})]
|
|
162
|
-
}),
|
|
163
|
-
y === e.key && /* @__PURE__ */ u("div", {
|
|
164
|
-
ref: N,
|
|
165
|
-
className: "absolute left-4 top-9 z-50 w-52 bg-white border border-slate-200 rounded-lg shadow-lg py-2 flex flex-col font-normal text-slate-700",
|
|
166
|
-
children: [
|
|
167
|
-
/* @__PURE__ */ l("div", {
|
|
168
|
-
className: "px-2 pb-2 mb-1 border-b border-slate-100",
|
|
169
|
-
children: /* @__PURE__ */ l("input", {
|
|
170
|
-
type: "text",
|
|
171
|
-
placeholder: "Search values...",
|
|
172
|
-
value: C,
|
|
173
|
-
onChange: (e) => w(e.target.value),
|
|
174
|
-
className: "w-full px-2 py-1 text-[12px] border border-slate-200 rounded focus:outline-none focus:border-blue-500",
|
|
175
|
-
onClick: (e) => e.stopPropagation()
|
|
176
|
-
})
|
|
177
|
-
}),
|
|
178
|
-
/* @__PURE__ */ l("div", {
|
|
179
|
-
className: "max-h-40 overflow-y-auto px-2 space-y-1",
|
|
180
|
-
children: G.length === 0 ? /* @__PURE__ */ l("div", {
|
|
181
|
-
className: "text-[11px] text-slate-400 p-2 text-center",
|
|
182
|
-
children: "No results found"
|
|
183
|
-
}) : G.map((t, n) => /* @__PURE__ */ u("label", {
|
|
184
|
-
className: "flex items-center gap-2 px-2 py-1.5 text-[12px] rounded hover:bg-slate-50 cursor-pointer",
|
|
185
|
-
children: [/* @__PURE__ */ l("input", {
|
|
186
|
-
type: "checkbox",
|
|
187
|
-
className: "rounded text-blue-600 w-3.5 h-3.5",
|
|
188
|
-
checked: x[e.key]?.includes(t) || !1,
|
|
189
|
-
onChange: () => K(e.key, t)
|
|
190
|
-
}), /* @__PURE__ */ l("span", {
|
|
191
|
-
className: "truncate",
|
|
192
|
-
children: String(t)
|
|
193
|
-
})]
|
|
194
|
-
}, n))
|
|
195
|
-
}),
|
|
196
|
-
i && /* @__PURE__ */ l("div", {
|
|
197
|
-
className: "border-t border-slate-100 mt-2 pt-1 px-2 flex justify-end",
|
|
198
|
-
children: /* @__PURE__ */ l("button", {
|
|
199
|
-
onClick: () => q(e.key),
|
|
200
|
-
className: "text-[11px] text-red-500 hover:underline",
|
|
201
|
-
children: "Clear"
|
|
202
|
-
})
|
|
203
|
-
})
|
|
204
|
-
]
|
|
205
|
-
})
|
|
206
|
-
]
|
|
207
|
-
});
|
|
208
|
-
};
|
|
209
|
-
return /* @__PURE__ */ u("div", {
|
|
210
|
-
className: "w-full space-y-3",
|
|
211
|
-
children: [v && /* @__PURE__ */ l("div", {
|
|
212
|
-
onDragOver: L,
|
|
213
|
-
onDragLeave: R,
|
|
214
|
-
onDrop: z,
|
|
215
|
-
className: `w-full min-h-[52px] px-4 py-2 border rounded-xl flex items-center gap-2 transition-all duration-200 ${j ? "border-blue-500 bg-blue-50/50 scale-[0.99]" : "border-dashed border-slate-200 bg-slate-50/50"}`,
|
|
216
|
-
children: D.length === 0 ? /* @__PURE__ */ l("span", {
|
|
217
|
-
className: "text-[12px] text-slate-400 font-medium select-none",
|
|
207
|
+
X,
|
|
208
|
+
P,
|
|
209
|
+
M,
|
|
210
|
+
b
|
|
211
|
+
]), Q = (e, t = !1, n) => z.includes(e) ? {
|
|
212
|
+
position: "sticky",
|
|
213
|
+
left: `${q[e]}px`,
|
|
214
|
+
zIndex: t ? 30 : 20,
|
|
215
|
+
backgroundColor: "#fff",
|
|
216
|
+
boxShadow: "2px 0 5px -2px rgba(0,0,0,0.1)",
|
|
217
|
+
...n
|
|
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", {
|
|
223
|
+
onDragOver: (e) => {
|
|
224
|
+
e.preventDefault(), I(!0);
|
|
225
|
+
},
|
|
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", {
|
|
230
|
+
className: "text-[12px] text-muted-foreground font-medium select-none",
|
|
218
231
|
children: "Drag a column header here to group your records by that field"
|
|
219
|
-
}) : /* @__PURE__ */
|
|
232
|
+
}) : /* @__PURE__ */ m("div", {
|
|
220
233
|
className: "flex flex-wrap items-center gap-1.5",
|
|
221
|
-
children: [/* @__PURE__ */
|
|
222
|
-
className: "text-[11px] font-bold uppercase tracking-wider text-
|
|
234
|
+
children: [/* @__PURE__ */ p("span", {
|
|
235
|
+
className: "text-[11px] font-bold uppercase tracking-wider text-muted-foreground mr-1",
|
|
223
236
|
children: "Grouped By:"
|
|
224
|
-
}),
|
|
225
|
-
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-
|
|
226
|
-
children: [/* @__PURE__ */
|
|
227
|
-
onClick: () =>
|
|
228
|
-
className: "p-0.5 rounded-md hover:bg-slate-100 text-
|
|
229
|
-
children: /* @__PURE__ */
|
|
237
|
+
}), M.map((e) => /* @__PURE__ */ m("div", {
|
|
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",
|
|
239
|
+
children: [/* @__PURE__ */ p("span", { children: R.find((t) => t.key === e)?.header || e }), /* @__PURE__ */ p("button", {
|
|
240
|
+
onClick: () => de(e),
|
|
241
|
+
className: "p-0.5 rounded-md hover:bg-slate-100 text-muted-foreground transition-colors",
|
|
242
|
+
children: /* @__PURE__ */ p(c, { className: "w-3 h-3" })
|
|
230
243
|
})]
|
|
231
244
|
}, e))]
|
|
232
245
|
})
|
|
233
|
-
}), /* @__PURE__ */
|
|
246
|
+
}), /* @__PURE__ */ p("div", {
|
|
234
247
|
className: "w-full overflow-x-auto border border-slate-100 rounded-xl bg-white shadow-sm",
|
|
235
|
-
|
|
248
|
+
style: C,
|
|
249
|
+
children: /* @__PURE__ */ m("table", {
|
|
236
250
|
className: "w-full caption-bottom text-sm border-collapse table-fixed",
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
return /* @__PURE__ */ l("th", {
|
|
249
|
-
colSpan: t ? e.children.length : 1,
|
|
250
|
-
rowSpan: t ? 1 : U ? 2 : 1,
|
|
251
|
-
draggable: !t,
|
|
252
|
-
onDragStart: (n) => !t && I(n, e.key),
|
|
253
|
-
className: `align-middle text-[12px] p-2 border-r border-slate-100/60 bg-slate-50/90 relative ${t ? "text-center font-bold text-slate-500" : "text-left font-semibold text-slate-600 px-4 cursor-grab active:cursor-grabbing"} ${n.className} ${e.headerClassName || ""}`,
|
|
254
|
-
style: n.style,
|
|
255
|
-
children: t ? /* @__PURE__ */ l("div", {
|
|
256
|
-
className: "flex items-center justify-center min-h-[28px]",
|
|
257
|
-
children: /* @__PURE__ */ l("span", {
|
|
258
|
-
className: "truncate tracking-wide uppercase text-[11px] text-slate-400 font-extrabold",
|
|
259
|
-
children: e.header
|
|
260
|
-
})
|
|
261
|
-
}) : $(e, !1)
|
|
262
|
-
}, e.key || e.header);
|
|
263
|
-
}),
|
|
264
|
-
m && /* @__PURE__ */ l("th", {
|
|
265
|
-
rowSpan: U ? 2 : 1,
|
|
266
|
-
className: "w-[100px] bg-white sticky right-0 z-30 shadow-[-1px_0_0_rgba(226,232,240,1)]"
|
|
267
|
-
})
|
|
268
|
-
]
|
|
269
|
-
}), U && /* @__PURE__ */ l("tr", {
|
|
270
|
-
className: "h-10",
|
|
271
|
-
children: V.map((e) => e.children ? e.children.map((e) => {
|
|
272
|
-
let t = T.includes(e.key), n = Q(e.key);
|
|
273
|
-
return /* @__PURE__ */ l("th", {
|
|
274
|
-
draggable: !0,
|
|
275
|
-
onDragStart: (t) => I(t, e.key),
|
|
276
|
-
className: `h-10 text-left align-middle text-slate-600 font-semibold text-[12px] px-4 border-r border-slate-100 relative cursor-grab active:cursor-grabbing bg-slate-50/50 ${n.className} ${t ? "z-30" : ""} ${e.headerClassName || ""}`,
|
|
277
|
-
style: n.style,
|
|
278
|
-
children: $(e, !0)
|
|
279
|
-
}, e.key);
|
|
280
|
-
}) : null)
|
|
281
|
-
})]
|
|
282
|
-
}), /* @__PURE__ */ l("tbody", {
|
|
283
|
-
className: "divide-y divide-slate-100",
|
|
284
|
-
children: h ? /* @__PURE__ */ l("tr", { children: /* @__PURE__ */ l("td", {
|
|
285
|
-
colSpan: H.length + +!!m + +(D.length > 0),
|
|
286
|
-
className: "p-8 text-center text-slate-400 text-[12px]",
|
|
287
|
-
children: "Loading records..."
|
|
288
|
-
}) }) : Z.length === 0 ? /* @__PURE__ */ l("tr", { children: /* @__PURE__ */ l("td", {
|
|
289
|
-
colSpan: H.length + +!!m + +(D.length > 0),
|
|
290
|
-
className: "p-8 text-center text-slate-400 text-[12px]",
|
|
291
|
-
children: "No records found."
|
|
292
|
-
}) }) : Z.map((n, r) => {
|
|
293
|
-
if (n.isGroupRow) {
|
|
294
|
-
let i = !!k[n.path], a = d.find((e) => e.key === n.groupKey);
|
|
295
|
-
return /* @__PURE__ */ u("tr", {
|
|
296
|
-
className: "bg-slate-50/60 hover:bg-slate-100/80 transition-colors",
|
|
297
|
-
children: [/* @__PURE__ */ l("td", {
|
|
298
|
-
className: "p-3 pl-4 font-semibold text-slate-700 text-[12px] sticky left-0 z-20 bg-slate-50 border-r border-slate-100",
|
|
299
|
-
style: { paddingLeft: `${n.depth * 12 + 16}px` },
|
|
300
|
-
children: /* @__PURE__ */ u("button", {
|
|
301
|
-
onClick: () => X(n.path),
|
|
302
|
-
className: "flex items-center gap-1.5 text-left",
|
|
303
|
-
children: [
|
|
304
|
-
l(i ? e : t, { className: "w-4 h-4 text-slate-500" }),
|
|
305
|
-
/* @__PURE__ */ u("span", {
|
|
306
|
-
className: "text-slate-400 font-normal text-[11px] uppercase",
|
|
307
|
-
children: [a?.header || n.groupKey, ":"]
|
|
308
|
-
}),
|
|
309
|
-
/* @__PURE__ */ l("span", {
|
|
310
|
-
className: "text-slate-800 font-bold",
|
|
311
|
-
children: n.groupValue
|
|
312
|
-
}),
|
|
313
|
-
/* @__PURE__ */ l("span", {
|
|
314
|
-
className: "bg-slate-200/70 text-slate-600 text-[10px] px-1.5 py-0.2 rounded-full ml-1",
|
|
315
|
-
children: n.totalItemsCount
|
|
316
|
-
})
|
|
317
|
-
]
|
|
318
|
-
})
|
|
319
|
-
}), /* @__PURE__ */ l("td", {
|
|
320
|
-
colSpan: H.length + +!!m,
|
|
321
|
-
className: "bg-slate-50/30"
|
|
322
|
-
})]
|
|
323
|
-
}, `group-header-${n.path}-${r}`);
|
|
324
|
-
}
|
|
325
|
-
return /* @__PURE__ */ u("tr", {
|
|
326
|
-
className: "border-b border-slate-100 h-12 hover:bg-slate-50/80 transition-colors group",
|
|
251
|
+
style: re,
|
|
252
|
+
children: [
|
|
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" } })
|
|
257
|
+
] }),
|
|
258
|
+
/* @__PURE__ */ p("thead", {
|
|
259
|
+
className: "bg-slate-50 select-none",
|
|
260
|
+
children: K.map((r, i) => /* @__PURE__ */ m("tr", {
|
|
261
|
+
className: "border-b border-slate-100",
|
|
327
262
|
children: [
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
263
|
+
i === 0 && b && M.length > 0 && /* @__PURE__ */ p("th", {
|
|
264
|
+
rowSpan: K.length,
|
|
265
|
+
className: "w-12 border-r border-slate-100",
|
|
266
|
+
style: {
|
|
267
|
+
position: "sticky",
|
|
268
|
+
left: 0,
|
|
269
|
+
zIndex: 35,
|
|
270
|
+
backgroundColor: "rgb(248, 250, 252)"
|
|
271
|
+
}
|
|
272
|
+
}),
|
|
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", {
|
|
276
|
+
rowSpan: i,
|
|
277
|
+
colSpan: c,
|
|
278
|
+
...b && f ? {
|
|
279
|
+
draggable: !0,
|
|
280
|
+
onDragStart: (e) => le(e, r.key)
|
|
281
|
+
} : {},
|
|
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", {
|
|
285
|
+
className: "flex items-center gap-1 group/header w-full justify-between",
|
|
286
|
+
children: [
|
|
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", {
|
|
291
|
+
className: "truncate",
|
|
292
|
+
children: r.header
|
|
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" })
|
|
296
|
+
})]
|
|
297
|
+
}),
|
|
298
|
+
/* @__PURE__ */ m("div", {
|
|
299
|
+
className: "flex items-center gap-1",
|
|
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
|
+
},
|
|
304
|
+
onClick: (e) => {
|
|
305
|
+
e.stopPropagation(), k(""), T(w === r.key ? null : r.key);
|
|
306
|
+
},
|
|
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", {
|
|
310
|
+
onClick: (e) => {
|
|
311
|
+
e.stopPropagation(), G(r.key);
|
|
312
|
+
},
|
|
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" })
|
|
316
|
+
})]
|
|
317
|
+
}),
|
|
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
|
+
},
|
|
326
|
+
children: [
|
|
327
|
+
/* @__PURE__ */ p("div", {
|
|
328
|
+
className: "px-2 pb-2 mb-1 border-b border-slate-100",
|
|
329
|
+
children: /* @__PURE__ */ p("input", {
|
|
330
|
+
type: "text",
|
|
331
|
+
placeholder: "Search values...",
|
|
332
|
+
value: O,
|
|
333
|
+
onChange: (e) => k(e.target.value),
|
|
334
|
+
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",
|
|
335
|
+
onClick: (e) => e.stopPropagation()
|
|
336
|
+
})
|
|
337
|
+
}),
|
|
338
|
+
/* @__PURE__ */ p("div", {
|
|
339
|
+
className: "max-h-40 overflow-y-auto px-2 space-y-1",
|
|
340
|
+
children: J.length === 0 ? /* @__PURE__ */ p("div", {
|
|
341
|
+
className: "text-[11px] text-muted-foreground p-2 text-center",
|
|
342
|
+
children: "No results found"
|
|
343
|
+
}) : J.map((e, t) => /* @__PURE__ */ m("label", {
|
|
344
|
+
className: "flex items-center gap-2 px-2 py-1.5 text-[12px] rounded hover:bg-slate-50 cursor-pointer select-none",
|
|
345
|
+
children: [/* @__PURE__ */ p("input", {
|
|
346
|
+
type: "checkbox",
|
|
347
|
+
className: "rounded border-slate-300 text-blue-600 focus:ring-blue-500 w-3.5 h-3.5",
|
|
348
|
+
checked: E[r.key]?.includes(e) || !1,
|
|
349
|
+
onChange: () => fe(r.key, e)
|
|
350
|
+
}), /* @__PURE__ */ p("span", {
|
|
351
|
+
className: "truncate",
|
|
352
|
+
children: String(e)
|
|
353
|
+
})]
|
|
354
|
+
}, t))
|
|
355
|
+
}),
|
|
356
|
+
l && /* @__PURE__ */ p("div", {
|
|
357
|
+
className: "border-t border-slate-100 mt-2 pt-1 px-2 flex justify-end",
|
|
358
|
+
children: /* @__PURE__ */ p("button", {
|
|
359
|
+
onClick: () => pe(r.key),
|
|
360
|
+
className: "text-[11px] text-red-500 hover:underline font-medium px-2 py-0.5",
|
|
361
|
+
children: "Clear Filter"
|
|
362
|
+
})
|
|
363
|
+
})
|
|
364
|
+
]
|
|
365
|
+
}), H.current)
|
|
366
|
+
]
|
|
337
367
|
})
|
|
338
|
-
},
|
|
368
|
+
}, r.key);
|
|
339
369
|
}),
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
370
|
+
i === 0 && y && /* @__PURE__ */ p("th", {
|
|
371
|
+
rowSpan: K.length,
|
|
372
|
+
className: "h-12 align-middle font-bold text-[12px] px-4 text-right shadow-[-1px_0_0_rgba(226,232,240,1)]",
|
|
373
|
+
style: {
|
|
374
|
+
position: "sticky",
|
|
375
|
+
right: 0,
|
|
376
|
+
zIndex: 35,
|
|
377
|
+
backgroundColor: "rgb(248, 250, 252)"
|
|
378
|
+
}
|
|
346
379
|
})
|
|
347
380
|
]
|
|
348
|
-
},
|
|
381
|
+
}, `header-row-${i}`))
|
|
382
|
+
}),
|
|
383
|
+
/* @__PURE__ */ p("tbody", {
|
|
384
|
+
className: "divide-y divide-slate-100",
|
|
385
|
+
children: te ? /* @__PURE__ */ p("tr", { children: /* @__PURE__ */ p("td", {
|
|
386
|
+
colSpan: $,
|
|
387
|
+
className: "p-8 text-center text-muted-foreground text-[12px] font-medium",
|
|
388
|
+
children: "Loading records..."
|
|
389
|
+
}) }) : Z.length === 0 ? /* @__PURE__ */ p("tr", { children: /* @__PURE__ */ p("td", {
|
|
390
|
+
colSpan: $,
|
|
391
|
+
className: "p-8 text-center text-muted-foreground text-[12px] font-medium",
|
|
392
|
+
children: "No records found matching criteria."
|
|
393
|
+
}) }) : Z.map((e, t) => {
|
|
394
|
+
if (e.isGroupRow) {
|
|
395
|
+
let n = P[e.path] !== !1;
|
|
396
|
+
return /* @__PURE__ */ m("tr", {
|
|
397
|
+
className: "bg-slate-50/60 hover:bg-slate-100/80 transition-colors select-none",
|
|
398
|
+
children: [/* @__PURE__ */ p("td", {
|
|
399
|
+
className: "p-3 pl-4 font-semibold text-slate-700 text-[12px] border-r border-slate-100",
|
|
400
|
+
style: {
|
|
401
|
+
position: "sticky",
|
|
402
|
+
left: 0,
|
|
403
|
+
zIndex: 20,
|
|
404
|
+
backgroundColor: "rgba(248, 250, 252, 0.9)",
|
|
405
|
+
paddingLeft: `${e.depth * 12 + 16}px`
|
|
406
|
+
},
|
|
407
|
+
children: /* @__PURE__ */ m("button", {
|
|
408
|
+
onClick: () => me(e.path),
|
|
409
|
+
className: "flex items-center gap-1.5 text-left focus:outline-none focus:ring-1 focus:ring-blue-400 rounded p-0.5",
|
|
410
|
+
children: [
|
|
411
|
+
p(n ? r : i, { className: "w-4 h-4 text-slate-500" }),
|
|
412
|
+
/* @__PURE__ */ p("span", {
|
|
413
|
+
className: "text-slate-800 font-bold w-40 truncate",
|
|
414
|
+
children: e.groupValue
|
|
415
|
+
}),
|
|
416
|
+
/* @__PURE__ */ p("span", {
|
|
417
|
+
className: "bg-slate-200/70 text-muted-foreground font-medium text-[10px] px-1.5 py-0.2 rounded-full ml-1",
|
|
418
|
+
children: e.totalItemsCount
|
|
419
|
+
})
|
|
420
|
+
]
|
|
421
|
+
})
|
|
422
|
+
}), /* @__PURE__ */ p("td", {
|
|
423
|
+
colSpan: $ - 1,
|
|
424
|
+
className: "bg-slate-50/30"
|
|
425
|
+
})]
|
|
426
|
+
}, `group-header-${e.path}-${t}`);
|
|
427
|
+
}
|
|
428
|
+
return /* @__PURE__ */ m("tr", {
|
|
429
|
+
className: "border-b border-slate-100 h-12 hover:bg-slate-50/80 transition-colors group",
|
|
430
|
+
children: [
|
|
431
|
+
b && M?.length > 0 && /* @__PURE__ */ p("td", {
|
|
432
|
+
className: "w-12 bg-white border-r border-slate-100",
|
|
433
|
+
style: {
|
|
434
|
+
position: "sticky",
|
|
435
|
+
left: 0,
|
|
436
|
+
zIndex: 10
|
|
437
|
+
}
|
|
438
|
+
}),
|
|
439
|
+
V?.map((t) => {
|
|
440
|
+
let n = e[t.key], r = Q(t.key, !1, t.style);
|
|
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 || ""}`,
|
|
443
|
+
style: r,
|
|
444
|
+
children: t.render ? t.render(n, e) : /* @__PURE__ */ p("span", {
|
|
445
|
+
className: "text-[12px] text-muted-foreground font-medium truncate block",
|
|
446
|
+
children: n
|
|
447
|
+
})
|
|
448
|
+
}, t.key);
|
|
449
|
+
}),
|
|
450
|
+
y && /* @__PURE__ */ p("td", {
|
|
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",
|
|
452
|
+
style: {
|
|
453
|
+
position: "sticky",
|
|
454
|
+
right: 0,
|
|
455
|
+
zIndex: 20
|
|
456
|
+
},
|
|
457
|
+
children: /* @__PURE__ */ p("div", {
|
|
458
|
+
className: "flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150",
|
|
459
|
+
children: y(e)
|
|
460
|
+
})
|
|
461
|
+
})
|
|
462
|
+
]
|
|
463
|
+
}, W(e) ?? `row-${t}`);
|
|
464
|
+
})
|
|
349
465
|
})
|
|
350
|
-
|
|
466
|
+
]
|
|
351
467
|
})
|
|
352
468
|
})]
|
|
353
469
|
});
|
|
354
470
|
}
|
|
355
471
|
//#endregion
|
|
356
|
-
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`});function i({columns:e,data:i,rowKey:a,actions:o,isLoading:s,onPinChange:c,onGroupChange:l,groupBy:u}){let[d,f]=(0,n.useState)(null),[p,m]=(0,n.useState)({}),[h,g]=(0,n.useState)(``),[_,v]=(0,n.useState)((0,n.useMemo)(()=>{let t=[],n=e=>{e.forEach(e=>{e.children?n(e.children):e.pinned&&e.key&&t.push(e.key)})};return n(e),t},[e])),[y,b]=(0,n.useState)([]),[x,S]=(0,n.useState)({}),[C,w]=(0,n.useState)(!1),T=(0,n.useRef)(null);(0,n.useEffect)(()=>{function e(e){T.current&&!T.current.contains(e.target)&&(f(null),g(``))}return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[]);let E=e=>typeof a==`function`?a(e):String(e[a]),D=e=>{let t=_.includes(e);v(t?_.filter(t=>t!==e):[..._,e]),c&&c(e,!t)},O=(e,t)=>{e.dataTransfer.setData(`text/plain`,t),e.dataTransfer.effectAllowed=`move`},k=e=>{e.preventDefault(),w(!0)},A=()=>{w(!1)},j=e=>{e.preventDefault(),w(!1);let t=e.dataTransfer.getData(`text/plain`);if(t&&!y.includes(t)){let e=[...y,t];b(e),l&&l(e)}},M=e=>{let t=y.filter(t=>t!==e);b(t),S({}),l&&l(t)},N=(0,n.useMemo)(()=>{let t=e.filter(e=>!y.includes(e.key||``)),n=[],r=[];return t.forEach(e=>{e.children?e.children.some(e=>_.includes(e.key||``))?n.push(e):r.push(e):_.includes(e.key||``)?n.push(e):r.push(e)}),[...n,...r]},[e,_,y]),P=(0,n.useMemo)(()=>{let e=[],t=n=>{n.forEach(n=>{n.children?t(n.children):e.push(n)})};return t(N),e},[N]),F=(0,n.useMemo)(()=>e.some(e=>e.children&&e.children.length>0),[e]),I=(0,n.useMemo)(()=>{let e={},t=0;return y.length>0&&(t+=48),P.forEach(n=>{n.key&&_.includes(n.key)&&(e[n.key]=t,t+=150)}),e},[P,_,y]),L=(0,n.useMemo)(()=>{if(!d)return[];let e=i.map(e=>e[d]),t=Array.from(new Set(e)).filter(e=>e!=null);return h.trim()?t.filter(e=>String(e).toLowerCase().includes(h.toLowerCase())):t},[i,d,h]),R=(e,t)=>{m(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})},z=e=>{m(t=>{let n={...t};return delete n[e],n})},B=(0,n.useMemo)(()=>i.filter(e=>Object.entries(p).every(([t,n])=>!n||n.length===0?!0:n.includes(e[t]))),[i,p]),V=(0,n.useMemo)(()=>{if(y.length===0)return B;let e=(t,n,r=``)=>{if(n>=y.length)return t;let i=y[n],a={};return t.forEach(e=>{let t=String(e[i]??`N/A`);a[t]||(a[t]=[]),a[t].push(e)}),Object.entries(a).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(B,0)},[B,y]),H=e=>{S(t=>({...t,[e]:!t[e]}))},U=(0,n.useMemo)(()=>{if(y.length===0)return V;let e=[],t=n=>{n.forEach(n=>{n.isGroupRow?(e.push(n),x[n.path]&&t(n.children)):e.push(n)})};return t(V),e},[V,x,y]),W=e=>_.includes(e)?{className:`sticky left-0 z-20 bg-white shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)]`,style:{left:`${I[e]}px`,minWidth:`150px`,maxWidth:`150px`}}:{className:``,style:{}},G=(e,n)=>{if(!e.key)return(0,r.jsx)(`span`,{className:`truncate`,children:e.header});let i=(p[e.key]?.length||0)>0,a=_.includes(e.key);return(0,r.jsxs)(`div`,{className:`flex items-center justify-between gap-1 group/header w-full ${e.headerClassName}`,children:[(0,r.jsx)(`div`,{className:`truncate`,children:e.header}),e.filterable||!n&&(0,r.jsxs)(`div`,{className:`flex items-center gap-1`,children:[e.filterable&&(0,r.jsx)(`button`,{onClick:t=>{t.stopPropagation(),g(``),f(d===e.key?null:e.key)},className:`p-0.5 rounded hover:bg-slate-200 transition-colors ${i?`text-blue-600`:`text-slate-400 opacity-0 group-hover/header:opacity-100`}`,children:`Filter`}),!n&&(0,r.jsx)(`button`,{onClick:t=>{t.stopPropagation(),D(e.key)},className:`p-0.5 rounded hover:bg-slate-200 transition-colors opacity-0 group-hover/header:opacity-100 ${a?`text-blue-500 opacity-100`:`text-slate-300`}`,children:a?(0,r.jsx)(t.PinOff,{className:`w-3.5 h-3.5`}):(0,r.jsx)(t.Pin,{className:`w-3.5 h-3.5`})})]}),d===e.key&&(0,r.jsxs)(`div`,{ref:T,className:`absolute left-4 top-9 z-50 w-52 bg-white border border-slate-200 rounded-lg shadow-lg py-2 flex flex-col font-normal text-slate-700`,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:h,onChange:e=>g(e.target.value),className:`w-full px-2 py-1 text-[12px] border border-slate-200 rounded focus:outline-none focus:border-blue-500`,onClick:e=>e.stopPropagation()})}),(0,r.jsx)(`div`,{className:`max-h-40 overflow-y-auto px-2 space-y-1`,children:L.length===0?(0,r.jsx)(`div`,{className:`text-[11px] text-slate-400 p-2 text-center`,children:`No results found`}):L.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`,children:[(0,r.jsx)(`input`,{type:`checkbox`,className:`rounded text-blue-600 w-3.5 h-3.5`,checked:p[e.key]?.includes(t)||!1,onChange:()=>R(e.key,t)}),(0,r.jsx)(`span`,{className:`truncate`,children:String(t)})]},n))}),i&&(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:()=>z(e.key),className:`text-[11px] text-red-500 hover:underline`,children:`Clear`})})]})]})};return(0,r.jsxs)(`div`,{className:`w-full space-y-3`,children:[u&&(0,r.jsx)(`div`,{onDragOver:k,onDragLeave:A,onDrop:j,className:`w-full min-h-[52px] px-4 py-2 border rounded-xl flex items-center gap-2 transition-all duration-200 ${C?`border-blue-500 bg-blue-50/50 scale-[0.99]`:`border-dashed border-slate-200 bg-slate-50/50`}`,children:y.length===0?(0,r.jsx)(`span`,{className:`text-[12px] text-slate-400 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-slate-400 mr-1`,children:`Grouped By:`}),y.map(n=>(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-slate-600`,children:[(0,r.jsx)(`span`,{children:e.find(e=>e.key===n)?.header||n}),(0,r.jsx)(`button`,{onClick:()=>M(n),className:`p-0.5 rounded-md hover:bg-slate-100 text-slate-400 hover:text-slate-600 transition-colors`,children:(0,r.jsx)(t.X,{className:`w-3 h-3`})})]},n))]})}),(0,r.jsx)(`div`,{className:`w-full overflow-x-auto border border-slate-100 rounded-xl bg-white shadow-sm`,children:(0,r.jsxs)(`table`,{className:`w-full caption-bottom text-sm border-collapse table-fixed`,children:[(0,r.jsxs)(`thead`,{className:`bg-[var(--color-background-secondary,rgba(248,250,252,1))] select-none border-b border-slate-200`,children:[(0,r.jsxs)(`tr`,{className:`border-b border-slate-100`,children:[y.length>0&&(0,r.jsx)(`th`,{rowSpan:F?2:1,className:`w-12 sticky left-0 z-40 bg-slate-50 border-r border-slate-100`}),N.map(e=>{let t=!!e.children,n=W(t?e.children[0].key:e.key);return(0,r.jsx)(`th`,{colSpan:t?e.children.length:1,rowSpan:t?1:F?2:1,draggable:!t,onDragStart:n=>!t&&O(n,e.key),className:`align-middle text-[12px] p-2 border-r border-slate-100/60 bg-slate-50/90 relative ${t?`text-center font-bold text-slate-500`:`text-left font-semibold text-slate-600 px-4 cursor-grab active:cursor-grabbing`} ${n.className} ${e.headerClassName||``}`,style:n.style,children:t?(0,r.jsx)(`div`,{className:`flex items-center justify-center min-h-[28px]`,children:(0,r.jsx)(`span`,{className:`truncate tracking-wide uppercase text-[11px] text-slate-400 font-extrabold`,children:e.header})}):G(e,!1)},e.key||e.header)}),o&&(0,r.jsx)(`th`,{rowSpan:F?2:1,className:`w-[100px] bg-white sticky right-0 z-30 shadow-[-1px_0_0_rgba(226,232,240,1)]`})]}),F&&(0,r.jsx)(`tr`,{className:`h-10`,children:N.map(e=>e.children?e.children.map(e=>{let t=_.includes(e.key),n=W(e.key);return(0,r.jsx)(`th`,{draggable:!0,onDragStart:t=>O(t,e.key),className:`h-10 text-left align-middle text-slate-600 font-semibold text-[12px] px-4 border-r border-slate-100 relative cursor-grab active:cursor-grabbing bg-slate-50/50 ${n.className} ${t?`z-30`:``} ${e.headerClassName||``}`,style:n.style,children:G(e,!0)},e.key)}):null)})]}),(0,r.jsx)(`tbody`,{className:`divide-y divide-slate-100`,children:s?(0,r.jsx)(`tr`,{children:(0,r.jsx)(`td`,{colSpan:P.length+ +!!o+ +(y.length>0),className:`p-8 text-center text-slate-400 text-[12px]`,children:`Loading records...`})}):U.length===0?(0,r.jsx)(`tr`,{children:(0,r.jsx)(`td`,{colSpan:P.length+ +!!o+ +(y.length>0),className:`p-8 text-center text-slate-400 text-[12px]`,children:`No records found.`})}):U.map((n,i)=>{if(n.isGroupRow){let a=!!x[n.path],s=e.find(e=>e.key===n.groupKey);return(0,r.jsxs)(`tr`,{className:`bg-slate-50/60 hover:bg-slate-100/80 transition-colors`,children:[(0,r.jsx)(`td`,{className:`p-3 pl-4 font-semibold text-slate-700 text-[12px] sticky left-0 z-20 bg-slate-50 border-r border-slate-100`,style:{paddingLeft:`${n.depth*12+16}px`},children:(0,r.jsxs)(`button`,{onClick:()=>H(n.path),className:`flex items-center gap-1.5 text-left`,children:[a?(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.jsxs)(`span`,{className:`text-slate-400 font-normal text-[11px] uppercase`,children:[s?.header||n.groupKey,`:`]}),(0,r.jsx)(`span`,{className:`text-slate-800 font-bold`,children:n.groupValue}),(0,r.jsx)(`span`,{className:`bg-slate-200/70 text-slate-600 text-[10px] px-1.5 py-0.2 rounded-full ml-1`,children:n.totalItemsCount})]})}),(0,r.jsx)(`td`,{colSpan:P.length+ +!!o,className:`bg-slate-50/30`})]},`group-header-${n.path}-${i}`)}return(0,r.jsxs)(`tr`,{className:`border-b border-slate-100 h-12 hover:bg-slate-50/80 transition-colors group`,children:[y.length>0&&(0,r.jsx)(`td`,{className:`w-12 bg-white sticky left-0 z-10 border-r border-slate-100`}),P.map(e=>{let t=n[e.key],i=W(e.key);return(0,r.jsx)(`td`,{className:`p-4 align-middle py-1 px-4 text-[12px] text-slate-600 font-medium ${i.className} ${e.className||``}`,style:i.style,children:e.render?e.render(t,n):(0,r.jsx)(`span`,{className:`truncate block`,children:t})},e.key)}),o&&(0,r.jsx)(`td`,{className:`p-4 align-middle py-1 px-4 text-right bg-white sticky right-0 z-20 shadow-[-1px_0_0_rgba(226,232,240,1)] group-hover:bg-slate-50/80`,children:(0,r.jsx)(`div`,{className:`flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity`,children:o(n)})})]},E(n))})})]})})]})}e.DataTable=i});
|
|
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});
|