simple-table-core 0.5.7 → 0.5.8
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/dist/components/SimpleTable/SimpleTable.d.ts +4 -2
- package/dist/components/SimpleTable/TableBody.d.ts +7 -6
- package/dist/components/SimpleTable/TableHeader.d.ts +6 -2
- package/dist/components/SimpleTable/TableHeaderCell.d.ts +5 -1
- package/dist/hooks/useSelection.d.ts +7 -7
- package/dist/index.js +1 -1
- package/dist/types/Cell.d.ts +5 -0
- package/dist/types/Row.d.ts +4 -0
- package/dist/types/Theme.d.ts +2 -0
- package/package.json +1 -1
|
@@ -3,6 +3,7 @@ import HeaderObject from "../../types/HeaderObject";
|
|
|
3
3
|
import CellValue from "../../types/CellValue";
|
|
4
4
|
import CellChangeProps from "../../types/CellChangeProps";
|
|
5
5
|
import "../../styles/simple-table.css";
|
|
6
|
+
import Theme from "../../types/Theme";
|
|
6
7
|
interface SpreadsheetProps {
|
|
7
8
|
columnEditorPosition?: "left" | "right";
|
|
8
9
|
columnEditorText?: string;
|
|
@@ -12,7 +13,6 @@ interface SpreadsheetProps {
|
|
|
12
13
|
editColumns?: boolean;
|
|
13
14
|
height?: string;
|
|
14
15
|
hideFooter?: boolean;
|
|
15
|
-
importStyles?: boolean;
|
|
16
16
|
nextIcon?: ReactNode;
|
|
17
17
|
onCellChange?: ({ accessor, newValue, originalRowIndex, row, }: CellChangeProps) => void;
|
|
18
18
|
prevIcon?: ReactNode;
|
|
@@ -21,9 +21,11 @@ interface SpreadsheetProps {
|
|
|
21
21
|
}[];
|
|
22
22
|
rowsPerPage?: number;
|
|
23
23
|
selectableCells?: boolean;
|
|
24
|
+
selectableColumns?: boolean;
|
|
24
25
|
shouldPaginate?: boolean;
|
|
25
26
|
sortDownIcon?: ReactNode;
|
|
26
27
|
sortUpIcon?: ReactNode;
|
|
28
|
+
theme?: Theme;
|
|
27
29
|
}
|
|
28
|
-
declare const SimpleTable: ({ columnEditorPosition, columnEditorText, columnResizing, defaultHeaders, draggable, editColumns, height, hideFooter,
|
|
30
|
+
declare const SimpleTable: ({ columnEditorPosition, columnEditorText, columnResizing, defaultHeaders, draggable, editColumns, height, hideFooter, nextIcon, onCellChange, prevIcon, rows, rowsPerPage, selectableCells, selectableColumns, shouldPaginate, sortDownIcon, sortUpIcon, theme, }: SpreadsheetProps) => import("react/jsx-runtime").JSX.Element;
|
|
29
31
|
export default SimpleTable;
|
|
@@ -1,24 +1,25 @@
|
|
|
1
1
|
import { RefObject } from "react";
|
|
2
2
|
import HeaderObject from "../../types/HeaderObject";
|
|
3
3
|
import CellChangeProps from "../../types/CellChangeProps";
|
|
4
|
+
import { MouseDownProps } from "../../hooks/useSelection";
|
|
4
5
|
interface TableBodyProps {
|
|
6
|
+
currentRows: {
|
|
7
|
+
[key: string]: any;
|
|
8
|
+
}[];
|
|
5
9
|
getBorderClass: (rowIndex: number, columnIndex: number) => string;
|
|
6
|
-
handleMouseDown: (
|
|
10
|
+
handleMouseDown: (props: MouseDownProps) => void;
|
|
7
11
|
handleMouseOver: (rowIndex: number, columnIndex: number) => void;
|
|
8
12
|
headers: HeaderObject[];
|
|
9
13
|
hiddenColumns: Record<string, boolean>;
|
|
10
14
|
isSelected: (rowIndex: number, columnIndex: number) => boolean;
|
|
11
15
|
isTopLeftCell: (rowIndex: number, columnIndex: number) => boolean;
|
|
12
16
|
isWidthDragging: boolean;
|
|
17
|
+
onCellChange?: (props: CellChangeProps) => void;
|
|
13
18
|
shouldDisplayLastColumnCell: boolean;
|
|
14
19
|
shouldPaginate: boolean;
|
|
15
|
-
sortedRows: {
|
|
16
|
-
[key: string]: any;
|
|
17
|
-
}[];
|
|
18
|
-
onCellChange?: (props: CellChangeProps) => void;
|
|
19
20
|
tableRef: RefObject<HTMLDivElement>;
|
|
20
21
|
}
|
|
21
|
-
declare const TableBody: ({ getBorderClass, handleMouseDown, handleMouseOver, headers, hiddenColumns, isSelected, isTopLeftCell, isWidthDragging, onCellChange, shouldDisplayLastColumnCell, shouldPaginate,
|
|
22
|
+
declare const TableBody: ({ currentRows, getBorderClass, handleMouseDown, handleMouseOver, headers, hiddenColumns, isSelected, isTopLeftCell, isWidthDragging, onCellChange, shouldDisplayLastColumnCell, shouldPaginate, tableRef, }: TableBodyProps & {
|
|
22
23
|
shouldDisplayLastColumnCell: boolean;
|
|
23
24
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
24
25
|
export default TableBody;
|
|
@@ -2,21 +2,25 @@ import { Dispatch, ReactNode, RefObject, SetStateAction } from "react";
|
|
|
2
2
|
import HeaderObject from "../../types/HeaderObject";
|
|
3
3
|
import SortConfig from "../../types/SortConfig";
|
|
4
4
|
import OnSortProps from "../../types/OnSortProps";
|
|
5
|
+
import Row from "../../types/Row";
|
|
5
6
|
interface TableHeaderProps {
|
|
6
|
-
draggable: boolean;
|
|
7
7
|
columnResizing: boolean;
|
|
8
|
+
currentRows: Row[];
|
|
9
|
+
draggable: boolean;
|
|
8
10
|
forceUpdate: () => void;
|
|
9
11
|
headersRef: React.RefObject<HeaderObject[]>;
|
|
10
12
|
hiddenColumns: Record<string, boolean>;
|
|
11
13
|
isWidthDragging: boolean;
|
|
12
14
|
onSort: OnSortProps;
|
|
13
15
|
onTableHeaderDragEnd: (newHeaders: HeaderObject[]) => void;
|
|
16
|
+
selectableColumns: boolean;
|
|
14
17
|
setIsWidthDragging: Dispatch<SetStateAction<boolean>>;
|
|
18
|
+
setSelectedCells: Dispatch<React.SetStateAction<Set<string>>>;
|
|
15
19
|
shouldDisplayLastColumnCell: boolean;
|
|
16
20
|
sort: SortConfig | null;
|
|
17
21
|
sortDownIcon?: ReactNode;
|
|
18
22
|
sortUpIcon?: ReactNode;
|
|
19
23
|
tableRef: RefObject<HTMLDivElement>;
|
|
20
24
|
}
|
|
21
|
-
declare const TableHeader: ({
|
|
25
|
+
declare const TableHeader: ({ columnResizing, currentRows, draggable, forceUpdate, headersRef, hiddenColumns, isWidthDragging, onSort, onTableHeaderDragEnd, selectableColumns, setIsWidthDragging, setSelectedCells, shouldDisplayLastColumnCell, sort, sortDownIcon, sortUpIcon, tableRef, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
26
|
export default TableHeader;
|
|
@@ -2,17 +2,21 @@ import { SetStateAction, Dispatch, ReactNode } from "react";
|
|
|
2
2
|
import HeaderObject from "../../types/HeaderObject";
|
|
3
3
|
import SortConfig from "../../types/SortConfig";
|
|
4
4
|
import OnSortProps from "../../types/OnSortProps";
|
|
5
|
+
import Row from "../../types/Row";
|
|
5
6
|
interface TableHeaderCellProps {
|
|
7
|
+
columnResizing: boolean;
|
|
8
|
+
currentRows: Row[];
|
|
6
9
|
draggable: boolean;
|
|
7
10
|
draggedHeaderRef: React.MutableRefObject<HeaderObject | null>;
|
|
8
|
-
columnResizing: boolean;
|
|
9
11
|
forceUpdate: () => void;
|
|
10
12
|
headersRef: React.RefObject<HeaderObject[]>;
|
|
11
13
|
hoveredHeaderRef: React.MutableRefObject<HeaderObject | null>;
|
|
12
14
|
index: number;
|
|
13
15
|
onSort: OnSortProps;
|
|
14
16
|
onTableHeaderDragEnd: (newHeaders: HeaderObject[]) => void;
|
|
17
|
+
selectableColumns: boolean;
|
|
15
18
|
setIsWidthDragging: Dispatch<SetStateAction<boolean>>;
|
|
19
|
+
setSelectedCells: Dispatch<React.SetStateAction<Set<string>>>;
|
|
16
20
|
sort: SortConfig | null;
|
|
17
21
|
sortDownIcon?: ReactNode;
|
|
18
22
|
sortUpIcon?: ReactNode;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import HeaderObject from "../types/HeaderObject";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
}
|
|
3
|
+
export type MouseDownProps = {
|
|
4
|
+
rowIndex: number;
|
|
5
|
+
colIndex: number;
|
|
6
|
+
};
|
|
7
7
|
declare const useSelection: ({ selectableCells, headers, rows, }: {
|
|
8
8
|
selectableCells: boolean;
|
|
9
9
|
headers: HeaderObject[];
|
|
@@ -11,13 +11,13 @@ declare const useSelection: ({ selectableCells, headers, rows, }: {
|
|
|
11
11
|
[key: string]: any;
|
|
12
12
|
}[];
|
|
13
13
|
}) => {
|
|
14
|
-
selectedCells:
|
|
15
|
-
handleMouseDown: (
|
|
14
|
+
selectedCells: Set<string>;
|
|
15
|
+
handleMouseDown: ({ colIndex, rowIndex }: MouseDownProps) => void;
|
|
16
16
|
handleMouseOver: (rowIndex: number, colIndex: number) => void;
|
|
17
17
|
handleMouseUp: () => void;
|
|
18
18
|
isSelected: (rowIndex: number, colIndex: number) => boolean;
|
|
19
19
|
getBorderClass: (rowIndex: number, colIndex: number) => string;
|
|
20
20
|
isTopLeftCell: (rowIndex: number, colIndex: number) => boolean;
|
|
21
|
-
setSelectedCells: import("react").Dispatch<import("react").SetStateAction<
|
|
21
|
+
setSelectedCells: import("react").Dispatch<import("react").SetStateAction<Set<string>>>;
|
|
22
22
|
};
|
|
23
23
|
export default useSelection;
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as n,Fragment as r}from"react/jsx-runtime";import t,{useState as o,useRef as a,useCallback as l,useEffect as s,Children as i,useLayoutEffect as c,forwardRef as d,createRef as u,createContext as f,useContext as h,Fragment as g,useMemo as v,useReducer as b}from"react";var p=function(){return p=Object.assign||function(e){for(var n,r=1,t=arguments.length;r<t;r++)for(var o in n=arguments[r])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},p.apply(this,arguments)};function m(e,n,r){if(r||2===arguments.length)for(var t,o=0,a=n.length;o<a;o++)!t&&o in n||(t||(t=Array.prototype.slice.call(n,0,o)),t[o]=n[o]);return e.concat(t||Array.prototype.slice.call(n))}"function"==typeof SuppressedError&&SuppressedError;var w=function(e){var n={};return i.forEach(e,(function(e){if(e&&e.ref&&e.ref.current){var r=e.ref.current.getBoundingClientRect();n[e.key]=r}})),n},x=function(e){var n,r,l=e.allowHorizontalAnimate,i=void 0===l||l,d=e.children,u=e.pauseAnimation,f=e.tableRef,h=a(!1),g=o({}),v=g[0],b=g[1],p=o({}),m=p[0],x=p[1],C=(n=d,r=a(),s((function(){r.current=n}),[n]),r.current);return c((function(){var e=w(d);b(e)}),[d]),c((function(){var e=w(C);x(e);var n=f.current,r=function(){h.current=!0;var e=w(C);b(e),x(e)},t=function(){h.current=!1};return null==n||n.addEventListener("scroll",r),null==n||n.addEventListener("scrollend",t),function(){null==n||n.removeEventListener("scroll",r),null==n||n.removeEventListener("scrollend",t)}}),[C,f]),s((function(){u||h.current||Object.keys(m).length&&t.Children.forEach(d,(function(e){if(e){var n=e.ref.current,r=m[e.key],t=v[e.key];if(r&&t){var o=r.left-t.left,a=i?0:r.top-t.top,l=Math.abs(o),s=Math.abs(a);(l>10||s>10)&&requestAnimationFrame((function(){n.style.transform="translate(".concat(o,"px, ").concat(a,"px)"),n.style.transition="transform 0s, opacity 0s",requestAnimationFrame((function(){n.style.transform="",n.style.transition="transform 300ms ease-out, opacity 300ms ease-out"}))}))}}}))}),[i,v,d,u,m]),d},C=!1,y=function(e){var n=e.draggedHeaderRef,r=e.headersRef,t=e.hoveredHeaderRef,o=e.onTableHeaderDragEnd;return{handleDragStart:function(e){n.current=e},handleDragOver:function(e){!function(e){var a;if(!C&&(t.current=e,e.accessor!==(null===(a=n.current)||void 0===a?void 0:a.accessor)&&null!==n.current&&!C)){if(C=!0,!r.current)return;var l=m([],r.current,!0),s=l.findIndex((function(e){var r;return e.accessor===(null===(r=n.current)||void 0===r?void 0:r.accessor)})),i=l.findIndex((function(n){return n.accessor===e.accessor}));if(void 0===s||void 0===i)return;var c=l.splice(s,1)[0];l.splice(i,0,c),JSON.stringify(l)!==JSON.stringify(r.current)&&setTimeout((function(){o(l),setTimeout((function(){C=!1}),500)}),50)}}(e)},handleDragEnd:function(){n.current=null,t.current=null}}},k=function(e,n){var r=!0,t=!0;return function(){for(var o=[],a=0;a<arguments.length;a++)o[a]=arguments[a];if(r)return r=!1,void setTimeout((function(){return t=!1}),n);t||(e.apply(this,o),t=!0,setTimeout((function(){return t=!1}),n))}},D=d((function(r,t){var l,i=r.draggable,c=r.draggedHeaderRef,d=r.columnResizing,u=r.forceUpdate,f=r.headersRef,h=r.hoveredHeaderRef,g=r.index,v=r.onSort,b=r.onTableHeaderDragEnd,m=r.setIsWidthDragging,w=r.sort,x=r.sortDownIcon,C=r.sortUpIcon,D=a({pageX:0,pageY:0}),N=o(!1),R=N[0],E=N[1],I=null===(l=f.current)||void 0===l?void 0:l[g],M=Boolean(null==I?void 0:I.isSortable),A="st-header-cell ".concat(I===h.current?"st-hovered":""," ").concat(R?"st-dragging":""," ").concat(M?"clickable":""," ").concat(i&&!M?"draggable":""),L=y({draggedHeaderRef:c,headersRef:f,hoveredHeaderRef:h,onTableHeaderDragEnd:b}),S=L.handleDragStart,B=L.handleDragOver,T=L.handleDragEnd,z=a(k((function(e){B(e)}),100)).current,H=function(e){e.isSortable&&v(g,e.accessor)};return s((function(){var e=function(e){var n=new Image;n.src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=",e.dataTransfer.setDragImage(n,0,0)};return document.addEventListener("dragend",e,!1),function(){document.removeEventListener("dragend",e)}}),[]),I?e("div",p({className:A,ref:t,style:{width:I.width}},{children:[n("div",p({className:"st-header-label",draggable:i,onClick:function(){return H(I)},onDragStart:function(e){i&&I&&(e.dataTransfer.dropEffect="move",function(e){E(!0),S(e)}(I))},onDragOver:function(e){return function(e,n){e.preventDefault(),e.dataTransfer.dropEffect="move";var r=e.pageX,t=e.pageY;r===D.current.pageX&&t===D.current.pageY||(D.current={pageX:r,pageY:t},z(n,e))}(e,I)},onDragEnd:function(e){e.preventDefault(),e.dataTransfer.dropEffect="move",E(!1),T()},onMouseEnter:function(){return document.body.style.overflow="hidden"},onMouseLeave:function(){return document.body.style.overflow="auto"}},{children:null==I?void 0:I.label})),w&&w.key.accessor===I.accessor&&e("div",p({className:"st-sort-icon-container",onClick:function(){return H(I)}},{children:["ascending"===w.direction&&C&&C,"descending"===w.direction&&x&&x]})),d&&n("div",{className:"st-header-resize-handle",onMouseDown:function(e){m(!0),e.preventDefault();var n=e.clientX;if(I){var r=I.width,t=k((function(e){var t=Math.max(r+(e.clientX-n),40);I&&(f.current[g].width=t,u())}),10),o=function(){document.removeEventListener("mousemove",t),document.removeEventListener("mouseup",o),m(!1)};document.addEventListener("mousemove",t),document.addEventListener("mouseup",o)}}})]})):null})),N=d((function(e,r){return e.visible?n("div",{className:"st-cell",ref:r}):n("div",{ref:r})})),R=function(t){var o,l=t.draggable,s=t.columnResizing,i=t.forceUpdate,c=t.headersRef,d=t.hiddenColumns,f=t.isWidthDragging,h=t.onSort,g=t.onTableHeaderDragEnd,v=t.setIsWidthDragging,b=t.shouldDisplayLastColumnCell,m=t.sort,w=t.sortDownIcon,C=t.sortUpIcon,y=t.tableRef,k=a(null),R=a(null);return n(r,{children:e(x,p({pauseAnimation:f,tableRef:y},{children:[null===(o=c.current)||void 0===o?void 0:o.map((function(e,r){return d[e.accessor]?null:n(D,{draggable:l,draggedHeaderRef:k,columnResizing:s,forceUpdate:i,headersRef:c,hoveredHeaderRef:R,index:r,onSort:h,onTableHeaderDragEnd:g,ref:u(),setIsWidthDragging:v,sort:m,sortDownIcon:w,sortUpIcon:C},e.accessor)})),n(N,{ref:u(),visible:b})]}))})},E=function(r){var t=r.value,o=r.onBlur,a=r.onChange;return e("select",p({value:t.toString(),onBlur:o,onChange:function(e){var n=e.target.value;a("true"===n)}},{children:[n("option",p({value:"true"},{children:"True"})),n("option",p({value:"false"},{children:"False"}))]}))},I=function(e){var r=e.defaultValue,t=e.onBlur,o=e.onChange,l=a(null);return n("input",{className:"editable-cell-input",ref:l,autoFocus:!0,type:"text",defaultValue:null!=r?r:"",onBlur:t,onChange:function(e){var n=e.target.value;o(n)}})},M=function(e){var r=e.defaultValue,t=e.onBlur,o=e.onChange,l=a(null);return n("input",{className:"editable-cell-input",ref:l,autoFocus:!0,defaultValue:r.toString(),onBlur:t,onChange:function(e){var n=e.target.value;/^\d*\.?\d*$/.test(n)&&o(n)}})},A=function(e){var t=e.onChange,o=e.setIsEditing,a=e.value,l=function(e){null==t||t(e)},s=function(){o(!1)};return n(r,{children:"string"==typeof a||null==a?n(I,{defaultValue:a,onBlur:s,onChange:l}):"boolean"==typeof a?n(E,{onBlur:s,onChange:l,value:a}):"number"==typeof a?n(M,{defaultValue:a,onBlur:s,onChange:l}):null})},L=f({rows:[],tableRows:[]}),S=d((function(e,r){var t=e.borderClass,a=e.colIndex,l=e.content,i=e.header,c=e.isSelected,d=e.isTopLeftCell,u=e.onCellChange,f=e.onMouseDown,g=e.onMouseOver,v=e.row,b=e.rowIndex,m=h(L),w=m.rows,x=m.tableRows,C=o(l),y=C[0],k=C[1],D=o(!1),N=D[0],R=D[1],E=Boolean(null==i?void 0:i.isEditable),I=b%2==0,M="st-cell ".concat(c?d?"st-cell-selected-first-cell ".concat(t):"st-cell-selected ".concat(t):""," ").concat(I?"st-cell-odd-row":""," ").concat(E?"clickable":"");s((function(){k(l)}),[l]),s((function(){if(void 0!==v.originalRowIndex&&"number"==typeof v.originalRowIndex){var e=w[v.originalRowIndex];e[i.accessor]!==y?k(e[i.accessor]):x[v.originalRowIndex][i.accessor]=y}}),[i.accessor,y,w,v.originalRowIndex,x]);return n("div",N?p({className:"st-cell-editing ".concat(I?"st-cell-odd-row":"")},{children:n(A,{onChange:function(e){k(e),null==u||u({accessor:i.accessor,newValue:e,newRowIndex:b,originalRowIndex:v.originalRowIndex,row:v})},setIsEditing:R,value:y})}):p({className:M,onDoubleClick:function(){return i.isEditable&&R(!0)},onMouseDown:function(){return f(b,a)},onMouseOver:function(){return g(b,a)},ref:r},{children:y}))})),B=function(){return n("div",{className:"st-row-separator"})},T=function(t){var o=t.getBorderClass,a=t.handleMouseDown,l=t.handleMouseOver,s=t.headers,i=t.hiddenColumns,c=t.isSelected,d=t.isTopLeftCell,f=t.isWidthDragging,h=t.onCellChange,v=t.shouldDisplayLastColumnCell,b=t.shouldPaginate,m=t.sortedRows,w=t.tableRef;return n(r,{children:m.map((function(r,t){return e(g,{children:[e(x,p({allowHorizontalAnimate:b,pauseAnimation:f,tableRef:w},{children:[s.map((function(e,s){if(i[e.accessor])return null;var f=r[e.accessor];return e.cellRenderer&&(f=e.cellRenderer(r)),n(S,{borderClass:o(t,s),colIndex:s,content:f,header:e,isSelected:c(t,s),isTopLeftCell:d(t,s),onCellChange:h,onMouseDown:function(){return a(t,s)},onMouseOver:function(){return l(t,s)},ref:u(),row:r,rowIndex:t},e.accessor)})),n(N,{ref:u(),visible:v})]})),t!==m.length-1&&n(B,{})]},r.originalRowIndex)}))})},z=function(r){var t=r.currentPage,o=r.hideFooter,a=r.nextIcon,l=r.onPageChange,s=r.prevIcon,i=r.rowsPerPage,c=r.shouldPaginate,d=r.totalRows,u=Math.ceil(d/i),f=t>1,h=t<u,g=function(e){e>=1&&e<=u&&l(e)};return o||!c?null:e("div",p({className:"st-footer"},{children:[n("button",p({className:"st-next-prev-btn ".concat(f?"":"disabled"),onClick:function(){return g(t-1)},disabled:!f},{children:s})),n("button",p({className:"st-next-prev-btn ".concat(h?"":"disabled"),onClick:function(){return g(t+1)},disabled:!h},{children:a})),Array.from({length:u},(function(e,r){return n("button",p({onClick:function(){return g(r+1)},className:"st-page-btn ".concat(t===r+1?"active":"")},{children:r+1}),r)}))]}))},H=function(e){var r=e.className;return n("svg",p({className:r,viewBox:"0 0 24 24",width:"24",height:"24",xmlns:"http://www.w3.org/2000/svg"},{children:n("path",{d:"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"})}))},O=function(e){var r=e.className;return n("svg",p({className:r,viewBox:"0 0 24 24",width:"24",height:"24",xmlns:"http://www.w3.org/2000/svg"},{children:n("path",{d:"M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z"})}))},P=function(e){var r=e.className;return n("svg",p({className:r,viewBox:"0 0 20 20",width:"20",height:"20",xmlns:"http://www.w3.org/2000/svg"},{children:n("path",{d:"M5.41 11.41L10 6.83l4.59 4.58L16 10l-6-6-6 6z"})}))},j=function(e){var r=e.className;return n("svg",p({className:r,viewBox:"0 0 20 20",width:"20",height:"20",xmlns:"http://www.w3.org/2000/svg"},{children:n("path",{d:"M5.41 7.59L10 12.17l4.59-4.58L16 9l-6 6-6-6z"})}))},U=function(r){var t=r.checked,a=void 0!==t&&t,l=r.children,s=r.onChange,i=o(a),c=i[0],d=i[1];return e("label",p({className:"st-checkbox-label"},{children:[n("input",{checked:c,className:"st-checkbox-input",onChange:function(){var e=!c;d(e),s&&s(e)},type:"checkbox"}),n("span",p({className:"st-checkbox-custom ".concat(c?"st-checked":"")},{children:c&&n("span",{className:"st-checkbox-checkmark"})})),l]}))},X=function(e){var r=e.headers,t=e.open,o=e.position;e.setOpen;var a=e.setHiddenColumns,l=e.hiddenColumns,s="left"===o?"left":"";return n("div",p({className:"st-column-editor-popout ".concat(t?"open":""," ").concat(s),onClick:function(e){return e.stopPropagation()}},{children:n("div",p({className:"st-column-editor-popout-content"},{children:r.map((function(e,r){return n(U,p({checked:l[e.accessor],onChange:function(n){var r;return a(p(p({},l),((r={})[e.accessor]=n,r)))}},{children:e.label}),r)}))}))}))},W=function(r){var t=r.columnEditorText,a=r.editColumns,l=r.headers,s=r.position,i=void 0===s?"right":s,c=r.setHiddenColumns,d=r.hiddenColumns,u=o(!1),f=u[0],h=u[1];return a?e("div",p({className:"st-column-editor ".concat(f?"open":""," ").concat(i),onClick:function(){return function(e){h(e)}(!f)}},{children:[n("div",p({className:"st-column-editor-text"},{children:t})),n(X,{headers:l,open:f,position:i,setOpen:h,setHiddenColumns:c,hiddenColumns:d})]})):null};!function(e,n){void 0===n&&(n={});var r=n.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}('/* Import Nunito font from Google Fonts */\n@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap");\n\n:root {\n /* Slate Colors */\n --slate-50: #f8fafc;\n --slate-100: #f1f5f9;\n --slate-200: #e2e8f0;\n --slate-300: #cbd5e1;\n --slate-400: #94a3b8;\n --slate-500: #64748b;\n --slate-600: #475569;\n --slate-700: #334155;\n --slate-800: #1e293b;\n --slate-900: #0f172a;\n\n /* Blue Colors */\n --blue-50: #eff6ff;\n --blue-100: #dbeafe;\n --blue-200: #bfdbfe;\n --blue-300: #93c5fd;\n --blue-400: #60a5fa;\n --blue-500: #3b82f6;\n --blue-600: #2563eb;\n --blue-700: #1d4ed8;\n --blue-800: #1e40af;\n --blue-900: #1e3a8a;\n\n /* Orange Colors */\n --orange-50: #fff7ed;\n --orange-100: #ffedd5;\n --orange-200: #fed7aa;\n --orange-300: #fdba74;\n --orange-400: #fb923c;\n --orange-500: #f97316;\n --orange-600: #ea580c;\n --orange-700: #c2410c;\n --orange-800: #9a3412;\n --orange-900: #7c2d12;\n\n /* Amber Colors */\n --amber-50: #fffbeb;\n --amber-100: #fef3c7;\n --amber-200: #fde68a;\n --amber-300: #fcd34d;\n --amber-400: #fbbf24;\n --amber-500: #f59e0b;\n --amber-600: #d97706;\n --amber-700: #b45309;\n --amber-800: #92400e;\n --amber-900: #78350f;\n\n /* Customizable Variables */\n --st-border-radius: 4px;\n --st-border-color: var(--slate-300);\n --st-border-width: 1px;\n --st-resize-handle-color: var(--slate-300);\n --st-separator-border-color: var(--slate-300);\n --st-odd-row-background-color: var(--slate-100);\n --st-dragging-background-color: var(--blue-100);\n --st-selected-cell-background-color: var(--blue-200);\n --st-selected-first-cell-background-color: var(--amber-100);\n --st-border-top-color: var(--blue-500);\n --st-border-bottom-color: var(--blue-500);\n --st-border-left-color: var(--blue-500);\n --st-border-right-color: var(--blue-500);\n --st-border-top-white-color: white;\n --st-footer-background-color: white;\n --st-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --st-cell-padding: 8px;\n}\n\n/* Global styles */\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\n/* Apply Nunito as the default font */\nbody {\n font-family: "Nunito";\n}\n\n/* Wrapper for the table */\n.st-wrapper {\n position: relative;\n border: var(--st-border-width) solid var(--st-border-color);\n border-radius: var(--st-border-radius);\n max-height: 100dvh;\n overflow: hidden;\n}\n\n.st-table-wrapper {\n position: relative;\n display: flex;\n width: max-content;\n overflow: visible;\n height: 100%;\n width: 100%;\n}\n\n/* Main table styling */\n.st-table {\n position: relative;\n display: grid;\n border-collapse: collapse;\n table-layout: auto;\n white-space: nowrap;\n width: 100%;\n height: 100%;\n overflow: auto;\n}\n\n/* Styles for table header cells */\n.st-header-cell {\n position: sticky;\n top: 0;\n background-color: white;\n z-index: 1;\n font-weight: 600;\n\n display: flex;\n align-items: center;\n gap: 4px;\n border-top: var(--st-border-width) solid transparent;\n border-bottom: var(--st-border-width) solid var(--st-border-color);\n}\n.st-header-cell.clickable {\n cursor: pointer;\n}\n.st-header-cell.draggable {\n cursor: grab;\n}\n\n/* Common styles for table header and cells */\n.st-header-cell,\n.st-cell {\n color: var(--slate-800);\n overflow: hidden;\n}\n\n.st-cell.clickable {\n cursor: pointer;\n}\n\n.st-header-cell,\n.st-cell,\n.st-cell-editing {\n width: 100%;\n height: 40px;\n font-family: "Nunito";\n}\n\n.st-cell-editing {\n position: relative;\n}\n\n.st-header-label {\n flex: 1;\n}\n\n.st-header-label,\n.st-cell {\n user-select: none;\n padding: var(--st-cell-padding);\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 100%;\n}\n.st-cell {\n position: relative;\n border: var(--st-border-width) solid transparent;\n}\n.st-sort-icon-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n.st-sort-icon {\n fill: var(--slate-500);\n}\n\n.st-header-resize-handle {\n top: 0;\n right: 0;\n width: 5px;\n height: 20px;\n cursor: col-resize;\n background-color: var(--st-resize-handle-color);\n border-radius: 0.25rem;\n}\n\n.st-row-separator {\n height: 1px;\n background-color: var(--st-separator-border-color);\n grid-column: 1 / -1;\n}\n\n.st-cell-odd-row {\n background-color: var(--st-odd-row-background-color);\n}\n\n/* Style for a cell when it is being dragged */\n.st-dragging {\n background-color: var(--st-dragging-background-color);\n}\n\n/* Style for selected table cells */\n.st-cell-selected {\n background-color: var(--st-selected-cell-background-color);\n}\n\n/* Style for the first selected table cell */\n.st-cell-selected-first {\n background-color: var(--st-selected-first-cell-background-color);\n}\n\n/* Blue top border for cells */\n.st-selected-top-border {\n border-top: var(--st-border-width) solid var(--st-border-top-color);\n}\n\n/* Blue bottom border for cells */\n.st-selected-bottom-border {\n border-bottom: var(--st-border-width) solid var(--st-border-bottom-color);\n}\n\n/* Blue left border for cells */\n.st-selected-left-border {\n border-left: var(--st-border-width) solid var(--st-border-left-color);\n}\n\n/* Blue right border for cells */\n.st-selected-right-border {\n border-right: var(--st-border-width) solid var(--st-border-right-color);\n}\n\n/* White top border for cells */\n.st-selected-top-border-white {\n border-top: var(--st-border-width) solid var(--st-border-top-white-color);\n}\n\n.st-footer {\n display: flex;\n align-items: center;\n background-color: var(--st-footer-background-color);\n\n padding: 8px;\n\n border-top: var(--st-border-width) solid var(--st-border-color);\n}\n\n.st-next-prev-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 4px;\n cursor: pointer;\n background-color: transparent;\n border: none;\n border-radius: 4px;\n transition: background-color 0.3s ease;\n}\n.st-next-prev-btn {\n fill: var(--slate-600);\n}\n.disabled > .st-next-prev-icon {\n cursor: not-allowed;\n fill: var(--slate-400);\n}\n\n.st-next-prev-btn:not(.disabled):hover {\n background-color: var(--slate-100);\n}\n\n.st-page-btn {\n margin-left: 4px;\n padding: 4px;\n cursor: pointer;\n background-color: transparent;\n color: var(--slate-600);\n border: none;\n border-radius: var(--st-border-radius);\n transition: background-color 0.3s ease;\n}\n\n.st-page-btn:hover {\n background-color: var(--slate-100);\n}\n\n.st-page-btn.active {\n background-color: var(--blue-500);\n color: white;\n}\n\n.editable-cell-input {\n position: absolute;\n top: 0;\n left: 0;\n border-radius: var(--st-border-radius);\n border: var(--st-border-width) solid var(--st-border-color);\n box-shadow: var(--st-shadow);\n z-index: 1;\n outline: none;\n height: 100%;\n width: 100%;\n padding: var(--st-cell-padding);\n font-size: 1rem;\n font-family: "Nunito";\n}\n.editable-cell-input:focus {\n border: var(--st-border-width) solid var(--blue-500);\n}\n.st-column-editor {\n position: relative;\n user-select: none;\n\n background: var(--st-footer-background-color);\n border-left: var(--st-border-width) solid var(--st-border-color);\n cursor: pointer;\n}\n\n.st-column-editor-text {\n padding: 8px 4px;\n\n writing-mode: vertical-rl;\n color: var(--slate-500);\n background-color: white;\n z-index: 2;\n}\n\n.st-column-editor.open,\n.st-column-editor.open .st-column-editor-text {\n background-color: var(--slate-100);\n}\n\n.st-column-editor-popout {\n position: absolute;\n top: 0;\n right: calc(100% + 1px);\n z-index: 1;\n\n height: 100%;\n background-color: var(--slate-100);\n\n transition: width 0.2s ease;\n overflow: hidden;\n width: 0;\n}\n.st-column-editor-popout-content {\n display: flex;\n flex-direction: column;\n overflow: auto;\n gap: 4px;\n padding: 8px 4px;\n border-left: var(--st-border-width) solid var(--st-border-color);\n height: 100%;\n}\n\n.st-column-editor-popout.open {\n width: 200px;\n}\n\n.st-column-editor-popout.left {\n transform: translateX(-100%);\n}\n\n.st-column-editor-popout.open.left {\n transform: translateX(0);\n}\n\n/* Checkbox styles */\n.st-checkbox-label {\n display: flex;\n align-items: center;\n cursor: pointer;\n gap: 8px;\n}\n\n.st-checkbox-input {\n display: none; /* Hide the default checkbox */\n}\n\n.st-checkbox-custom {\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 24px;\n height: 24px;\n\n border: var(--st-border-width) solid var(--slate-300);\n border-radius: var(--st-border-radius);\n\n background-color: white;\n transition: background-color 0.3s ease, border-color 0.3s ease;\n}\n\n.st-checkbox-custom.st-checked {\n background-color: var(--blue-500);\n border-color: var(--blue-500);\n}\n\n.st-checkbox-checkmark {\n width: 6px;\n height: 11px;\n border: solid white;\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n}\n\n@keyframes slide-in-left {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n}\n\n@keyframes slide-in-right {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n');var F=function(r){var t=r.columnEditorPosition,i=void 0===t?"right":t,c=r.columnEditorText,d=void 0===c?"Columns":c,u=r.columnResizing,f=void 0!==u&&u,h=r.defaultHeaders,g=r.draggable,w=void 0!==g&&g,x=r.editColumns,C=void 0!==x&&x,y=r.height,k=r.hideFooter,D=void 0!==k&&k;r.importStyles;var N=r.nextIcon,E=void 0===N?n(O,{className:"st-next-prev-icon"}):N,I=r.onCellChange,M=r.prevIcon,A=void 0===M?n(H,{className:"st-next-prev-icon"}):M,S=r.rows,B=r.rowsPerPage,U=void 0===B?10:B,X=r.selectableCells,F=void 0!==X&&X,V=r.shouldPaginate,Y=void 0!==V&&V,G=r.sortDownIcon,Q=void 0===G?n(j,{className:"st-sort-icon"}):G,q=r.sortUpIcon,J=void 0===q?n(P,{className:"st-sort-icon"}):q,K=v((function(){return S.map((function(e,n){return p(p({},e),{originalRowIndex:n})}))}),[S]),$=a(null),Z=o(!1),_=Z[0],ee=Z[1],ne=a(h),re=o(null),te=re[0],oe=re[1],ae=o({}),le=ae[0],se=ae[1],ie=o(1),ce=ie[0],de=ie[1],ue=v((function(){if(!te)return K;var e=function(e,n,r){var t=r?r.key:e[0],o="ascending";return r&&r.key.accessor===t.accessor&&"ascending"===r.direction&&(o="descending"),{sortedData:m([],n,!0).sort((function(e,n){return e[t.accessor]<n[t.accessor]?"ascending"===o?1:-1:e[t.accessor]>n[t.accessor]?"ascending"===o?-1:1:0})),newSortConfig:{key:t,direction:o}}}(ne.current,K,te).sortedData;return e}),[K,te]),fe=b((function(e){return e+1}),0)[1],he=function(e){var n=e.selectableCells,r=e.headers,t=e.rows,i=o([]),c=i[0],d=i[1],u=a(!1),f=a(null),h=l((function(){var e=c.reduce((function(e,n){var o=n.row,a=n.col;return e[o]||(e[o]=[]),e[o][a]=t[o][r[a].accessor],e}),{}),n=Object.values(e).map((function(e){return Object.values(e).join("\t")})).join("\n");navigator.clipboard.writeText(n)}),[c,t,r]);s((function(){var e=function(e){(e.ctrlKey||e.metaKey)&&"c"===e.key&&h()};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[h,c]);var g=function(e,n){return c.some((function(r){return r.row===e&&r.col===n}))};return{selectedCells:c,handleMouseDown:function(e,r){n&&(u.current=!0,f.current={row:e,col:r},d([{row:e,col:r}]))},handleMouseOver:function(e,r){if(n&&u.current&&f.current){for(var t=[],o=Math.min(f.current.row,e),a=Math.max(f.current.row,e),l=Math.min(f.current.col,r),s=Math.max(f.current.col,r),i=o;i<=a;i++)for(var c=l;c<=s;c++)t.push({row:i,col:c});d(t)}},handleMouseUp:function(){u.current=!1,f.current=null},isSelected:g,getBorderClass:function(e,n){var r=[];return g(e-1,n)||r.push("st-selected-top-border"),g(e+1,n)||r.push("st-selected-bottom-border"),g(e,n-1)||r.push("st-selected-left-border"),g(e,n+1)||r.push("st-selected-right-border"),r.join(" ")},isTopLeftCell:function(e,n){return e===Math.min.apply(Math,c.map((function(e){return e.row})))&&n===Math.min.apply(Math,c.map((function(e){return e.col})))},setSelectedCells:d}}({selectableCells:F,headers:ne.current,rows:ue}),ge=he.handleMouseDown,ve=he.handleMouseOver,be=he.handleMouseUp,pe=he.isSelected,me=he.getBorderClass,we=he.isTopLeftCell,xe=he.setSelectedCells,Ce=ne.current.filter((function(e){return!e.hide})),ye=v((function(){return!!$.current&&Ce.reduce((function(e,n){return e+n.width}),0)<$.current.clientWidth}),[Ce]),ke=Y?ue.slice((ce-1)*U,ce*U):ue;s((function(){var e=function(e){e.target.closest(".st-cell")||xe([])};return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}}),[xe]);var De=v((function(){return"".concat(Ce.filter((function(e){return!0!==le[e.accessor]})).map((function(e){return"".concat(e.width,"px")})).join(" ")," 1fr")}),[Ce,le]);return n(L.Provider,p({value:{rows:S,tableRows:K}},{children:e("div",p({className:"st-wrapper",style:y?{height:y}:{}},{children:[e("div",p({className:"st-table-wrapper"},{children:[e("div",p({className:"st-table",onMouseUp:be,onMouseLeave:be,ref:$,style:{gridTemplateColumns:De}},{children:[n(R,{columnResizing:f,draggable:w,forceUpdate:fe,headersRef:ne,hiddenColumns:le,isWidthDragging:_,onSort:function(e,n){oe((function(r){return(null==r?void 0:r.key.accessor)!==n?{key:ne.current[e],direction:"ascending"}:"ascending"===(null==r?void 0:r.direction)?{key:ne.current[e],direction:"descending"}:null}))},onTableHeaderDragEnd:function(e){ne.current=e,fe()},setIsWidthDragging:ee,shouldDisplayLastColumnCell:ye,sort:te,sortDownIcon:Q,sortUpIcon:J,tableRef:$}),n(T,{getBorderClass:me,handleMouseDown:ge,handleMouseOver:ve,headers:ne.current,hiddenColumns:le,isSelected:pe,isTopLeftCell:we,isWidthDragging:_,onCellChange:I,shouldDisplayLastColumnCell:ye,shouldPaginate:Y,sortedRows:ke,tableRef:$})]})),n(W,{headers:ne.current,columnEditorText:d,editColumns:C,position:i,setHiddenColumns:se,hiddenColumns:le})]})),n(z,{currentPage:ce,hideFooter:D,nextIcon:E,onPageChange:de,prevIcon:A,rowsPerPage:U,shouldPaginate:Y,totalRows:ue.length})]}))}))};export{F as SimpleTable};
|
|
1
|
+
import{jsxs as e,jsx as n,Fragment as o}from"react/jsx-runtime";import r,{useState as t,useRef as c,useCallback as l,useEffect as a,useMemo as s,Children as d,useLayoutEffect as i,forwardRef as u,createRef as b,createContext as g,useContext as f,Fragment as h,useReducer as v}from"react";var p=function(){return p=Object.assign||function(e){for(var n,o=1,r=arguments.length;o<r;o++)for(var t in n=arguments[o])Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t]);return e},p.apply(this,arguments)};function m(e,n,o){if(o||2===arguments.length)for(var r,t=0,c=n.length;t<c;t++)!r&&t in n||(r||(r=Array.prototype.slice.call(n,0,t)),r[t]=n[t]);return e.concat(r||Array.prototype.slice.call(n))}"function"==typeof SuppressedError&&SuppressedError;var k=function(e){var n={};return d.forEach(e,(function(e){if(e&&e.ref&&e.ref.current){var o=e.ref.current.getBoundingClientRect();n[e.key]=o}})),n},w=function(e){var n,o,l=e.allowHorizontalAnimate,s=void 0===l||l,d=e.children,u=e.pauseAnimation,b=e.tableRef,g=c(!1),f=t({}),h=f[0],v=f[1],p=t({}),m=p[0],w=p[1],x=(n=d,o=c(),a((function(){o.current=n}),[n]),o.current);return i((function(){var e=k(d);v(e)}),[d]),i((function(){var e=k(x);w(e);var n=b.current,o=function(){g.current=!0;var e=k(x);v(e),w(e)},r=function(){g.current=!1};return null==n||n.addEventListener("scroll",o),null==n||n.addEventListener("scrollend",r),function(){null==n||n.removeEventListener("scroll",o),null==n||n.removeEventListener("scrollend",r)}}),[x,b]),a((function(){u||g.current||Object.keys(m).length&&r.Children.forEach(d,(function(e){if(e){var n=e.ref.current,o=m[e.key],r=h[e.key];if(o&&r){var t=o.left-r.left,c=s?0:o.top-r.top,l=Math.abs(t),a=Math.abs(c);(l>10||a>10)&&requestAnimationFrame((function(){n.style.transform="translate(".concat(t,"px, ").concat(c,"px)"),n.style.transition="transform 0s, opacity 0s",requestAnimationFrame((function(){n.style.transform="",n.style.transition="transform 300ms ease-out, opacity 300ms ease-out"}))}))}}}))}),[s,h,d,u,m]),d},x=!1,y=function(e){var n=e.draggedHeaderRef,o=e.headersRef,r=e.hoveredHeaderRef,t=e.onTableHeaderDragEnd;return{handleDragStart:function(e){n.current=e},handleDragOver:function(e){!function(e){var c;if(!x&&(r.current=e,e.accessor!==(null===(c=n.current)||void 0===c?void 0:c.accessor)&&null!==n.current&&!x)){if(x=!0,!o.current)return;var l=m([],o.current,!0),a=l.findIndex((function(e){var o;return e.accessor===(null===(o=n.current)||void 0===o?void 0:o.accessor)})),s=l.findIndex((function(n){return n.accessor===e.accessor}));if(void 0===a||void 0===s)return;var d=l.splice(a,1)[0];l.splice(s,0,d),JSON.stringify(l)!==JSON.stringify(o.current)&&setTimeout((function(){t(l),setTimeout((function(){x=!1}),500)}),50)}}(e)},handleDragEnd:function(){n.current=null,r.current=null}}},C=function(e,n){var o=!0,r=!0;return function(){for(var t=[],c=0;c<arguments.length;c++)t[c]=arguments[c];if(o)return o=!1,void setTimeout((function(){return r=!1}),n);r||(e.apply(this,t),r=!0,setTimeout((function(){return r=!1}),n))}},R=u((function(o,r){var l,s=o.columnResizing,d=o.currentRows,i=o.draggable,u=o.draggedHeaderRef,b=o.forceUpdate,g=o.headersRef,f=o.hoveredHeaderRef,h=o.index,v=o.onSort,m=o.onTableHeaderDragEnd,k=o.selectableColumns,w=o.setIsWidthDragging,x=o.setSelectedCells,R=o.sort,D=o.sortDownIcon,N=o.sortUpIcon,I=c({pageX:0,pageY:0}),E=t(!1),A=E[0],S=E[1],M=null===(l=g.current)||void 0===l?void 0:l[h],z=Boolean(null==M?void 0:M.isSortable),L="st-header-cell ".concat(M===f.current?"st-hovered":""," ").concat(A?"st-dragging":""," ").concat(z?"clickable":""," ").concat(i&&!z?"draggable":""),T=y({draggedHeaderRef:u,headersRef:g,hoveredHeaderRef:f,onTableHeaderDragEnd:m}),B=T.handleDragStart,H=T.handleDragOver,O=T.handleDragEnd,P=c(C((function(e){H(e)}),100)).current,j=function(e){var n=e.event,o=e.header;if(k){var r=d.length,t=Array.from({length:r},(function(e,n){return"".concat(n,"-").concat(h)})),c=function(e,n){var o=new Set,t=Math.min(e,n),c=Math.max(e,n);return Array.from({length:r}).forEach((function(e,n){Array.from({length:c-t+1}).forEach((function(e,r){o.add("".concat(n,"-").concat(t+r))}))})),o};n.shiftKey?x((function(e){var n,o=Number(null===(n=Array.from(e)[0])||void 0===n?void 0:n.split("-")[1]),r=Number(t[0].split("-")[1]);return o===r?new Set(t):o>r?c(r,o):c(o,r)})):x(new Set(t))}else o.isSortable&&v(h,o.accessor)};return a((function(){var e=function(e){var n=new Image;n.src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=",e.dataTransfer.setDragImage(n,0,0)};return document.addEventListener("dragend",e,!1),function(){document.removeEventListener("dragend",e)}}),[]),M?e("div",p({className:L,ref:r,style:{width:M.width}},{children:[n("div",p({className:"st-header-label",draggable:i,onClick:function(e){return j({event:e,header:M})},onDragStart:function(e){i&&M&&(e.dataTransfer.dropEffect="move",function(e){S(!0),B(e)}(M))},onDragOver:function(e){return function(e,n){e.preventDefault(),e.dataTransfer.dropEffect="move";var o=e.pageX,r=e.pageY;o===I.current.pageX&&r===I.current.pageY||(I.current={pageX:o,pageY:r},P(n,e))}(e,M)},onDragEnd:function(e){e.preventDefault(),e.dataTransfer.dropEffect="move",S(!1),O()},onMouseEnter:function(){return document.body.style.overflow="hidden"},onMouseLeave:function(){return document.body.style.overflow="auto"}},{children:null==M?void 0:M.label})),R&&R.key.accessor===M.accessor&&e("div",p({className:"st-sort-icon-container",onClick:function(e){return j({event:e,header:M})}},{children:["ascending"===R.direction&&N&&N,"descending"===R.direction&&D&&D]})),s&&n("div",{className:"st-header-resize-handle",onMouseDown:function(e){w(!0),e.preventDefault();var n=e.clientX;if(M){var o=M.width,r=C((function(e){var r=Math.max(o+(e.clientX-n),40);M&&(g.current[h].width=r,b())}),10),t=function(){document.removeEventListener("mousemove",r),document.removeEventListener("mouseup",t),w(!1)};document.addEventListener("mousemove",r),document.addEventListener("mouseup",t)}}})]})):null})),D=u((function(e,o){return e.visible?n("div",{className:"st-cell",ref:o}):n("div",{ref:o})})),N=function(r){var t,l=r.columnResizing,a=r.currentRows,s=r.draggable,d=r.forceUpdate,i=r.headersRef,u=r.hiddenColumns,g=r.isWidthDragging,f=r.onSort,h=r.onTableHeaderDragEnd,v=r.selectableColumns,m=r.setIsWidthDragging,k=r.setSelectedCells,x=r.shouldDisplayLastColumnCell,y=r.sort,C=r.sortDownIcon,N=r.sortUpIcon,I=r.tableRef,E=c(null),A=c(null);return n(o,{children:e(w,p({pauseAnimation:g,tableRef:I},{children:[null===(t=i.current)||void 0===t?void 0:t.map((function(e,o){return u[e.accessor]?null:n(R,{columnResizing:l,currentRows:a,draggable:s,draggedHeaderRef:E,forceUpdate:d,headersRef:i,hoveredHeaderRef:A,index:o,onSort:f,onTableHeaderDragEnd:h,ref:b(),selectableColumns:v,setIsWidthDragging:m,setSelectedCells:k,sort:y,sortDownIcon:C,sortUpIcon:N},e.accessor)})),n(D,{ref:b(),visible:x})]}))})},I=function(o){var r=o.value,t=o.onBlur,c=o.onChange;return e("select",p({value:r.toString(),onBlur:t,onChange:function(e){var n=e.target.value;c("true"===n)}},{children:[n("option",p({value:"true"},{children:"True"})),n("option",p({value:"false"},{children:"False"}))]}))},E=function(e){var o=e.defaultValue,r=e.onBlur,t=e.onChange,l=c(null);return n("input",{className:"editable-cell-input",ref:l,autoFocus:!0,type:"text",defaultValue:null!=o?o:"",onBlur:r,onChange:function(e){var n=e.target.value;t(n)}})},A=function(e){var o=e.defaultValue,r=e.onBlur,t=e.onChange,l=c(null);return n("input",{className:"editable-cell-input",ref:l,autoFocus:!0,defaultValue:o.toString(),onBlur:r,onChange:function(e){var n=e.target.value;/^\d*\.?\d*$/.test(n)&&t(n)}})},S=function(e){var r=e.onChange,t=e.setIsEditing,c=e.value,l=function(e){null==r||r(e)},a=function(){t(!1)};return n(o,{children:"string"==typeof c||null==c?n(E,{defaultValue:c,onBlur:a,onChange:l}):"boolean"==typeof c?n(I,{onBlur:a,onChange:l,value:c}):"number"==typeof c?n(A,{defaultValue:c,onBlur:a,onChange:l}):null})},M=g({rows:[],tableRows:[]}),z=u((function(e,o){var r=e.borderClass,c=e.colIndex,l=e.content,s=e.header,d=e.isSelected,i=e.isTopLeftCell,u=e.onCellChange,b=e.onMouseDown,g=e.onMouseOver,h=e.row,v=e.rowIndex,m=f(M),k=m.rows,w=m.tableRows,x=t(l),y=x[0],C=x[1],R=t(!1),D=R[0],N=R[1],I=Boolean(null==s?void 0:s.isEditable),E=v%2==0,A="st-cell ".concat(d?i?"st-cell-selected-first-cell ".concat(r):"st-cell-selected ".concat(r):""," ").concat(E?"st-cell-odd-row":""," ").concat(I?"clickable":"");a((function(){C(l)}),[l]),a((function(){if(void 0!==h.originalRowIndex&&"number"==typeof h.originalRowIndex){var e=k[h.originalRowIndex];e[s.accessor]!==y?C(e[s.accessor]):w[h.originalRowIndex][s.accessor]=y}}),[s.accessor,y,k,h.originalRowIndex,w]);return n("div",D?p({className:"st-cell-editing ".concat(E?"st-cell-odd-row":"")},{children:n(S,{onChange:function(e){C(e),null==u||u({accessor:s.accessor,newValue:e,newRowIndex:v,originalRowIndex:h.originalRowIndex,row:h})},setIsEditing:N,value:y})}):p({className:A,onDoubleClick:function(){return s.isEditable&&N(!0)},onMouseDown:function(){return b(v,c)},onMouseOver:function(){return g(v,c)},ref:o},{children:y}))})),L=function(){return n("div",{className:"st-row-separator"})},T=function(r){var t=r.currentRows,c=r.getBorderClass,l=r.handleMouseDown,a=r.handleMouseOver,s=r.headers,d=r.hiddenColumns,i=r.isSelected,u=r.isTopLeftCell,g=r.isWidthDragging,f=r.onCellChange,v=r.shouldDisplayLastColumnCell,m=r.shouldPaginate,k=r.tableRef;return n(o,{children:t.map((function(o,r){return e(h,{children:[e(w,p({allowHorizontalAnimate:m,pauseAnimation:g,tableRef:k},{children:[s.map((function(e,t){if(d[e.accessor])return null;var s=o[e.accessor];return e.cellRenderer&&(s=e.cellRenderer(o)),n(z,{borderClass:c(r,t),colIndex:t,content:s,header:e,isSelected:i(r,t),isTopLeftCell:u(r,t),onCellChange:f,onMouseDown:function(){return l({rowIndex:r,colIndex:t})},onMouseOver:function(){return a(r,t)},ref:b(),row:o,rowIndex:r},e.accessor)})),n(D,{ref:b(),visible:v})]})),r!==t.length-1&&n(L,{})]},o.originalRowIndex)}))})},B=function(o){var r=o.currentPage,t=o.hideFooter,c=o.nextIcon,l=o.onPageChange,a=o.prevIcon,s=o.rowsPerPage,d=o.shouldPaginate,i=o.totalRows,u=Math.ceil(i/s),b=r>1,g=r<u,f=function(e){e>=1&&e<=u&&l(e)};return t||!d?null:e("div",p({className:"st-footer"},{children:[n("button",p({className:"st-next-prev-btn ".concat(b?"":"disabled"),onClick:function(){return f(r-1)},disabled:!b},{children:a})),n("button",p({className:"st-next-prev-btn ".concat(g?"":"disabled"),onClick:function(){return f(r+1)},disabled:!g},{children:c})),Array.from({length:u},(function(e,o){return n("button",p({onClick:function(){return f(o+1)},className:"st-page-btn ".concat(r===o+1?"active":"")},{children:o+1}),o)}))]}))},H=function(e){var o=e.className;return n("svg",p({className:o,viewBox:"0 0 24 24",width:"24",height:"24",xmlns:"http://www.w3.org/2000/svg"},{children:n("path",{d:"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"})}))},O=function(e){var o=e.className;return n("svg",p({className:o,viewBox:"0 0 24 24",width:"24",height:"24",xmlns:"http://www.w3.org/2000/svg"},{children:n("path",{d:"M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z"})}))},P=function(e){var o=e.className;return n("svg",p({className:o,viewBox:"0 0 20 20",width:"20",height:"20",xmlns:"http://www.w3.org/2000/svg"},{children:n("path",{d:"M5.41 11.41L10 6.83l4.59 4.58L16 10l-6-6-6 6z"})}))},j=function(e){var o=e.className;return n("svg",p({className:o,viewBox:"0 0 20 20",width:"20",height:"20",xmlns:"http://www.w3.org/2000/svg"},{children:n("path",{d:"M5.41 7.59L10 12.17l4.59-4.58L16 9l-6 6-6-6z"})}))},U=function(o){var r=o.checked,c=void 0!==r&&r,l=o.children,a=o.onChange,s=t(c),d=s[0],i=s[1];return e("label",p({className:"st-checkbox-label"},{children:[n("input",{checked:d,className:"st-checkbox-input",onChange:function(){var e=!d;i(e),a&&a(e)},type:"checkbox"}),n("span",p({className:"st-checkbox-custom ".concat(d?"st-checked":"")},{children:d&&n("span",{className:"st-checkbox-checkmark"})})),l]}))},X=function(e){var o=e.headers,r=e.open,t=e.position;e.setOpen;var c=e.setHiddenColumns,l=e.hiddenColumns,a="left"===t?"left":"";return n("div",p({className:"st-column-editor-popout ".concat(r?"open":""," ").concat(a),onClick:function(e){return e.stopPropagation()}},{children:n("div",p({className:"st-column-editor-popout-content"},{children:o.map((function(e,o){return n(U,p({checked:l[e.accessor],onChange:function(n){var o;return c(p(p({},l),((o={})[e.accessor]=n,o)))}},{children:e.label}),o)}))}))}))},F=function(o){var r=o.columnEditorText,c=o.editColumns,l=o.headers,a=o.position,s=void 0===a?"right":a,d=o.setHiddenColumns,i=o.hiddenColumns,u=t(!1),b=u[0],g=u[1];return c?e("div",p({className:"st-column-editor ".concat(b?"open":""," ").concat(s),onClick:function(){return function(e){g(e)}(!b)}},{children:[n("div",p({className:"st-column-editor-text"},{children:r})),n(X,{headers:l,open:b,position:s,setOpen:g,setHiddenColumns:d,hiddenColumns:i})]})):null};!function(e,n){void 0===n&&(n={});var o=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css","top"===o&&r.firstChild?r.insertBefore(t,r.firstChild):r.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}}('/* Import Nunito font from Google Fonts */\n@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap");\n\n:root {\n /* Slate Colors */\n --slate-50: #f8fafc;\n --slate-100: #f1f5f9;\n --slate-200: #e2e8f0;\n --slate-300: #cbd5e1;\n --slate-400: #94a3b8;\n --slate-500: #64748b;\n --slate-600: #475569;\n --slate-700: #334155;\n --slate-800: #1e293b;\n --slate-900: #0f172a;\n\n /* Blue Colors */\n --blue-50: #eff6ff;\n --blue-100: #dbeafe;\n --blue-200: #bfdbfe;\n --blue-300: #93c5fd;\n --blue-400: #60a5fa;\n --blue-500: #3b82f6;\n --blue-600: #2563eb;\n --blue-700: #1d4ed8;\n --blue-800: #1e40af;\n --blue-900: #1e3a8a;\n\n /* Orange Colors */\n --orange-50: #fff7ed;\n --orange-100: #ffedd5;\n --orange-200: #fed7aa;\n --orange-300: #fdba74;\n --orange-400: #fb923c;\n --orange-500: #f97316;\n --orange-600: #ea580c;\n --orange-700: #c2410c;\n --orange-800: #9a3412;\n --orange-900: #7c2d12;\n\n /* Amber Colors */\n --amber-50: #fffbeb;\n --amber-100: #fef3c7;\n --amber-200: #fde68a;\n --amber-300: #fcd34d;\n --amber-400: #fbbf24;\n --amber-500: #f59e0b;\n --amber-600: #d97706;\n --amber-700: #b45309;\n --amber-800: #92400e;\n --amber-900: #78350f;\n\n /* Customizable Variables */\n --st-border-radius: 4px;\n --st-border-width: 1px;\n --st-cell-padding: 8px;\n\n /* New Variables for Theming */\n --st-font-family: "Nunito", sans-serif;\n --st-font-size: 1rem;\n --st-font-weight-normal: 400;\n --st-font-weight-bold: 700;\n --st-transition-duration: 0.3s;\n --st-transition-ease: ease;\n --st-opacity-disabled: 0.5;\n --st-spacing-small: 4px;\n --st-spacing-medium: 8px;\n --st-spacing-large: 16px;\n}\n\n.theme-light {\n --st-border-color: var(--slate-300);\n --st-odd-row-background-color: var(--slate-50);\n --st-even-row-background-color: var(--slate-100);\n --st-header-background-color: white;\n --st-dragging-background-color: var(--blue-50);\n --st-selected-cell-background-color: var(--blue-100);\n --st-selected-first-cell-background-color: var(--amber-50);\n --st-footer-background-color: white;\n --st-cell-color: var(--slate-800);\n --st-cell-odd-row-color: var(--slate-500);\n --st-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --st-shadow-hover: 0 4px 6px -1px rgb(0 0 0 / 0.1),\n 0 2px 4px -1px rgb(0 0 0 / 0.06);\n --st-selected-cell-color: var(--slate-800);\n --st-selected-first-cell-color: var(--slate-800);\n --st-resize-handle-color: var(--slate-400);\n --st-separator-border-color: var(--slate-300);\n --st-border-top-color: var(--slate-300);\n --st-border-bottom-color: var(--slate-300);\n --st-border-left-color: var(--slate-300);\n --st-border-right-color: var(--slate-300);\n --st-checkbox-checked-background-color: var(--blue-500);\n --st-checkbox-checked-border-color: var(--blue-500);\n --st-column-editor-background-color: var(--slate-100);\n --st-column-editor-popout-background-color: var(--slate-100);\n --st-button-hover-background-color: var(--slate-200);\n --st-button-active-background-color: var(--slate-300);\n}\n\n.theme-dark {\n --st-border-color: var(--slate-700);\n --st-odd-row-background-color: var(--slate-800);\n --st-even-row-background-color: var(--slate-900);\n --st-header-background-color: var(--slate-700);\n --st-dragging-background-color: var(--blue-800);\n --st-selected-cell-background-color: var(--blue-700);\n --st-selected-first-cell-background-color: var(--amber-700);\n --st-footer-background-color: var(--slate-900);\n --st-cell-color: var(--slate-100);\n --st-cell-odd-row-color: var(--slate-300);\n --st-shadow: 0 1px 3px 0 rgb(255 255 255 / 0.1),\n 0 1px 2px -1px rgb(255 255 255 / 0.1);\n --st-shadow-hover: 0 4px 6px -1px rgb(255 255 255 / 0.1),\n 0 2px 4px -1px rgb(255 255 255 / 0.06);\n --st-selected-cell-color: var(--slate-100);\n --st-selected-first-cell-color: var(--slate-100);\n --st-resize-handle-color: var(--slate-600);\n --st-separator-border-color: var(--slate-700);\n --st-border-top-color: var(--slate-700);\n --st-border-bottom-color: var(--slate-700);\n --st-border-left-color: var(--slate-700);\n --st-border-right-color: var(--slate-700);\n --st-checkbox-checked-background-color: var(--blue-700);\n --st-checkbox-checked-border-color: var(--blue-700);\n --st-column-editor-background-color: var(--slate-800);\n --st-column-editor-popout-background-color: var(--slate-800);\n --st-button-hover-background-color: var(--slate-600);\n --st-button-active-background-color: var(--slate-700);\n}\n\n.theme-high-contrast {\n --st-border-color: black;\n --st-odd-row-background-color: white;\n --st-even-row-background-color: black;\n --st-header-background-color: black;\n --st-dragging-background-color: yellow;\n --st-selected-cell-background-color: black;\n --st-selected-first-cell-background-color: red;\n --st-footer-background-color: black;\n --st-cell-color: white;\n --st-cell-odd-row-color: black;\n --st-shadow: none;\n --st-shadow-hover: none;\n --st-selected-cell-color: white;\n --st-selected-first-cell-color: white;\n --st-resize-handle-color: black;\n --st-separator-border-color: black;\n --st-border-top-color: black;\n --st-border-bottom-color: black;\n --st-border-left-color: black;\n --st-border-right-color: black;\n --st-checkbox-checked-background-color: white;\n --st-checkbox-checked-border-color: white;\n --st-column-editor-background-color: black;\n --st-column-editor-popout-background-color: black;\n --st-button-hover-background-color: white;\n --st-button-active-background-color: black;\n}\n\n.theme-pastel {\n --st-border-color: #d3c4e3;\n --st-odd-row-background-color: #f3e8ff;\n --st-even-row-background-color: #e8f3ff;\n --st-header-background-color: #e8f3ff;\n --st-dragging-background-color: #e0f7fa;\n --st-selected-cell-background-color: #ffccbc;\n --st-selected-first-cell-background-color: #ffe0b2;\n --st-footer-background-color: #f3e5f5;\n --st-cell-color: #6b7280;\n --st-cell-odd-row-color: #4b5563;\n --st-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --st-shadow-hover: 0 4px 6px -1px rgb(0 0 0 / 0.1),\n 0 2px 4px -1px rgb(0 0 0 / 0.06);\n --st-selected-cell-color: #6b7280;\n --st-selected-first-cell-color: #6b7280;\n --st-resize-handle-color: #d3c4e3;\n --st-separator-border-color: #d3c4e3;\n --st-border-top-color: #d3c4e3;\n --st-border-bottom-color: #d3c4e3;\n --st-border-left-color: #d3c4e3;\n --st-border-right-color: #d3c4e3;\n --st-checkbox-checked-background-color: #d3c4e3;\n --st-checkbox-checked-border-color: #d3c4e3;\n --st-column-editor-background-color: #f3e5f5;\n --st-column-editor-popout-background-color: #f3e5f5;\n --st-button-hover-background-color: #e0c3fc;\n --st-button-active-background-color: #d3c4e3;\n}\n\n.theme-vibrant {\n --st-border-color: var(--orange-500);\n --st-odd-row-background-color: var(--orange-100);\n --st-even-row-background-color: var(--orange-200);\n --st-header-background-color: var(--orange-300);\n --st-dragging-background-color: var(--blue-300);\n --st-selected-cell-background-color: var(--blue-400);\n --st-selected-first-cell-background-color: var(--amber-300);\n --st-footer-background-color: var(--orange-50);\n --st-cell-color: var(--orange-900);\n --st-cell-odd-row-color: var(--orange-800);\n --st-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2);\n --st-shadow-hover: 0 4px 6px -1px rgb(0 0 0 / 0.2),\n 0 2px 4px -1px rgb(0 0 0 / 0.1);\n --st-selected-cell-color: var(--orange-900);\n --st-selected-first-cell-color: var(--orange-900);\n --st-resize-handle-color: var(--orange-400);\n --st-separator-border-color: var(--orange-500);\n --st-border-top-color: var(--orange-500);\n --st-border-bottom-color: var(--orange-500);\n --st-border-left-color: var(--orange-500);\n --st-border-right-color: var(--orange-500);\n --st-checkbox-checked-background-color: var(--orange-500);\n --st-checkbox-checked-border-color: var(--orange-500);\n --st-column-editor-background-color: var(--orange-100);\n --st-column-editor-popout-background-color: var(--orange-100);\n --st-button-hover-background-color: var(--orange-300);\n --st-button-active-background-color: var(--orange-400);\n}\n\n.theme-solarized-light {\n --st-border-color: #eee8d5;\n --st-odd-row-background-color: #fdf6e3;\n --st-even-row-background-color: #eee8d5;\n --st-header-background-color: #eee8d5;\n --st-dragging-background-color: #eee8d5;\n --st-selected-cell-background-color: #93a1a1;\n --st-selected-first-cell-background-color: #b58900;\n --st-footer-background-color: #fdf6e3;\n --st-cell-color: #586e75;\n --st-cell-odd-row-color: #657b83;\n --st-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --st-shadow-hover: 0 4px 6px -1px rgb(0 0 0 / 0.1),\n 0 2px 4px -1px rgb(0 0 0 / 0.06);\n --st-selected-cell-color: #586e75;\n --st-selected-first-cell-color: #586e75;\n --st-resize-handle-color: #93a1a1;\n --st-separator-border-color: #eee8d5;\n --st-border-top-color: #eee8d5;\n --st-border-bottom-color: #eee8d5;\n --st-border-left-color: #eee8d5;\n --st-border-right-color: #eee8d5;\n --st-checkbox-checked-background-color: #93a1a1;\n --st-checkbox-checked-border-color: #93a1a1;\n --st-column-editor-background-color: #eee8d5;\n --st-column-editor-popout-background-color: #eee8d5;\n --st-button-hover-background-color: #eee8d5;\n --st-button-active-background-color: #93a1a1;\n}\n\n.theme-solarized-dark {\n --st-border-color: #073642;\n --st-odd-row-background-color: #002b36;\n --st-even-row-background-color: #073642;\n --st-header-background-color: #073642;\n --st-dragging-background-color: #073642;\n --st-selected-cell-background-color: #586e75;\n --st-selected-first-cell-background-color: #b58900;\n --st-footer-background-color: #002b36;\n --st-cell-color: #839496;\n --st-cell-odd-row-color: #93a1a1;\n --st-shadow: 0 1px 3px 0 rgb(255 255 255 / 0.1),\n 0 1px 2px -1px rgb(255 255 255 / 0.1);\n --st-shadow-hover: 0 4px 6px -1px rgb(255 255 255 / 0.1),\n 0 2px 4px -1px rgb(255 255 255 / 0.06);\n --st-selected-cell-color: #839496;\n --st-selected-first-cell-color: #839496;\n --st-resize-handle-color: #586e75;\n --st-separator-border-color: #073642;\n --st-border-top-color: #073642;\n --st-border-bottom-color: #073642;\n --st-border-left-color: #073642;\n --st-border-right-color: #073642;\n --st-checkbox-checked-background-color: #586e75;\n --st-checkbox-checked-border-color: #586e75;\n --st-column-editor-background-color: #073642;\n --st-column-editor-popout-background-color: #073642;\n --st-button-hover-background-color: #586e75;\n --st-button-active-background-color: #073642;\n}\n\n.theme-ocean {\n --st-border-color: #2b7a78;\n --st-odd-row-background-color: #def2f1;\n --st-even-row-background-color: #cfe8e7;\n --st-header-background-color: #cfe8e7;\n --st-dragging-background-color: #3aafa9;\n --st-selected-cell-background-color: #2b7a78;\n --st-selected-first-cell-background-color: #17252a;\n --st-footer-background-color: #feffff;\n --st-cell-color: #17252a;\n --st-cell-odd-row-color: #2b7a78;\n --st-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --st-shadow-hover: 0 4px 6px -1px rgb(0 0 0 / 0.1),\n 0 2px 4px -1px rgb(0 0 0 / 0.06);\n --st-selected-cell-color: #17252a;\n --st-selected-first-cell-color: #17252a;\n --st-resize-handle-color: #3aafa9;\n --st-separator-border-color: #2b7a78;\n --st-border-top-color: #2b7a78;\n --st-border-bottom-color: #2b7a78;\n --st-border-left-color: #2b7a78;\n --st-border-right-color: #2b7a78;\n --st-checkbox-checked-background-color: #2b7a78;\n --st-checkbox-checked-border-color: #2b7a78;\n --st-column-editor-background-color: #cfe8e7;\n --st-column-editor-popout-background-color: #cfe8e7;\n --st-button-hover-background-color: #3aafa9;\n --st-button-active-background-color: #2b7a78;\n}\n\n.theme-forest {\n --st-border-color: #2f4f4f;\n --st-odd-row-background-color: #e0f2f1;\n --st-even-row-background-color: #c8e6c9;\n --st-header-background-color: #c8e6c9;\n --st-dragging-background-color: #4caf50;\n --st-selected-cell-background-color: #388e3c;\n --st-selected-first-cell-background-color: #1b5e20;\n --st-footer-background-color: #a5d6a7;\n --st-cell-color: #1b5e20;\n --st-cell-odd-row-color: #388e3c;\n --st-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --st-shadow-hover: 0 4px 6px -1px rgb(0 0 0 / 0.1),\n 0 2px 4px -1px rgb(0 0 0 / 0.06);\n --st-selected-cell-color: #1b5e20;\n --st-selected-first-cell-color: #1b5e20;\n --st-resize-handle-color: #388e3c;\n --st-separator-border-color: #2f4f4f;\n --st-border-top-color: #2f4f4f;\n --st-border-bottom-color: #2f4f4f;\n --st-border-left-color: #2f4f4f;\n --st-border-right-color: #2f4f4f;\n --st-checkbox-checked-background-color: #388e3c;\n --st-checkbox-checked-border-color: #388e3c;\n --st-column-editor-background-color: #c8e6c9;\n --st-column-editor-popout-background-color: #c8e6c9;\n --st-button-hover-background-color: #a5d6a7;\n --st-button-active-background-color: #388e3c;\n}\n\n.theme-desert {\n --st-border-color: #d2b48c;\n --st-odd-row-background-color: #f5deb3;\n --st-even-row-background-color: #eeddc1;\n --st-header-background-color: #eeddc1;\n --st-dragging-background-color: #deb887;\n --st-selected-cell-background-color: #cd853f;\n --st-selected-first-cell-background-color: #8b4513;\n --st-footer-background-color: #f5f5dc;\n --st-cell-color: #8b4513;\n --st-cell-odd-row-color: #cd853f;\n --st-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --st-shadow-hover: 0 4px 6px -1px rgb(0 0 0 / 0.1),\n 0 2px 4px -1px rgb(0 0 0 / 0.06);\n --st-selected-cell-color: #8b4513;\n --st-selected-first-cell-color: #8b4513;\n --st-resize-handle-color: #cd853f;\n --st-separator-border-color: #d2b48c;\n --st-border-top-color: #d2b48c;\n --st-border-bottom-color: #d2b48c;\n --st-border-left-color: #d2b48c;\n --st-border-right-color: #d2b48c;\n --st-checkbox-checked-background-color: #cd853f;\n --st-checkbox-checked-border-color: #cd853f;\n --st-column-editor-background-color: #eeddc1;\n --st-column-editor-popout-background-color: #eeddc1;\n --st-button-hover-background-color: #deb887;\n --st-button-active-background-color: #cd853f;\n}\n\n/* Global styles */\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\n/* Apply Nunito as the default font */\nbody {\n font-family: var(--st-font-family);\n font-size: var(--st-font-size);\n font-weight: var(--st-font-weight-normal);\n}\n\n/* Wrapper for the table */\n.st-wrapper {\n position: relative;\n border: var(--st-border-width) solid var(--st-border-color);\n border-radius: var(--st-border-radius);\n max-height: 100dvh;\n overflow: hidden;\n}\n\n.st-table-wrapper {\n position: relative;\n display: flex;\n width: max-content;\n overflow: visible;\n height: 100%;\n width: 100%;\n}\n\n/* Main table styling */\n.st-table {\n position: relative;\n display: grid;\n border-collapse: collapse;\n table-layout: auto;\n white-space: nowrap;\n width: 100%;\n height: 100%;\n overflow: auto;\n}\n\n/* Styles for table header cells */\n.st-header-cell {\n position: sticky;\n top: 0;\n background-color: var(--st-header-background-color);\n z-index: 1;\n font-weight: var(--st-font-weight-bold);\n\n display: flex;\n align-items: center;\n gap: var(--st-spacing-small);\n border-top: var(--st-border-width) solid transparent;\n border-bottom: var(--st-border-width) solid var(--st-border-color);\n}\n.st-header-cell.clickable {\n cursor: pointer;\n}\n.st-header-cell.draggable {\n cursor: grab;\n}\n\n/* Common styles for table header and cells */\n.st-header-cell,\n.st-cell {\n color: var(--slate-800);\n overflow: hidden;\n}\n\n.st-cell.clickable {\n cursor: pointer;\n}\n\n.st-header-cell,\n.st-cell,\n.st-cell-editing {\n width: 100%;\n height: 40px;\n font-family: var(--st-font-family);\n}\n\n.st-cell-editing {\n position: relative;\n}\n\n.st-header-label {\n flex: 1;\n color: var(--st-cell-color);\n}\n\n.st-header-label,\n.st-cell {\n user-select: none;\n padding: var(--st-cell-padding);\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 100%;\n}\n.st-cell {\n position: relative;\n border: var(--st-border-width) solid transparent;\n}\n.st-sort-icon-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n.st-sort-icon {\n fill: var(--slate-500);\n}\n\n.st-header-resize-handle {\n top: 0;\n right: 0;\n width: 5px;\n height: 20px;\n cursor: col-resize;\n background-color: var(--st-resize-handle-color);\n border-radius: 0.25rem;\n}\n\n.st-row-separator {\n height: 1px;\n background-color: var(--st-separator-border-color);\n grid-column: 1 / -1;\n}\n\n.st-cell-odd-row:not(.st-cell-selected) {\n background-color: var(--st-odd-row-background-color);\n color: var(--st-cell-odd-row-color);\n}\n.st-cell:not(.st-cell-odd-row):not(.st-cell-selected) {\n background-color: var(--st-even-row-background-color);\n color: var(--st-cell-color);\n}\n\n/* Style for a cell when it is being dragged */\n.st-dragging {\n background-color: var(--st-dragging-background-color);\n}\n\n/* Style for selected table cells */\n.st-cell-selected {\n background-color: var(--st-selected-cell-background-color);\n color: var(--st-selected-cell-color);\n}\n\n/* Style for the first selected table cell */\n.st-cell-selected-first {\n background-color: var(--st-selected-first-cell-background-color);\n color: var(--st-selected-first-cell-color);\n}\n\n/* Border for selected cells */\n.st-selected-top-border {\n border-top: var(--st-border-width) solid var(--st-border-top-color);\n}\n\n.st-selected-bottom-border {\n border-bottom: var(--st-border-width) solid var(--st-border-bottom-color);\n}\n\n.st-selected-left-border {\n border-left: var(--st-border-width) solid var(--st-border-left-color);\n}\n\n.st-selected-right-border {\n border-right: var(--st-border-width) solid var(--st-border-right-color);\n}\n\n.st-footer {\n display: flex;\n align-items: center;\n background-color: var(--st-footer-background-color);\n padding: var(--st-spacing-medium);\n border-top: var(--st-border-width) solid var(--st-border-color);\n}\n\n.st-next-prev-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--st-spacing-small);\n cursor: pointer;\n background-color: transparent;\n border: none;\n border-radius: var(--st-border-radius);\n transition: background-color var(--st-transition-duration)\n var(--st-transition-ease);\n}\n.st-next-prev-btn {\n fill: var(--slate-600);\n}\n.disabled > .st-next-prev-icon {\n cursor: not-allowed;\n fill: var(--slate-400);\n}\n\n.st-next-prev-btn:not(.disabled):hover {\n background-color: var(--slate-100);\n}\n\n.st-page-btn {\n margin-left: var(--st-spacing-small);\n padding: var(--st-spacing-small);\n cursor: pointer;\n background-color: transparent;\n color: var(--slate-600);\n border: none;\n border-radius: var(--st-border-radius);\n transition: background-color var(--st-transition-duration)\n var(--st-transition-ease);\n}\n\n.st-page-btn:hover {\n background-color: var(--st-button-hover-background-color);\n}\n\n.st-page-btn.active {\n background-color: var(--st-button-active-background-color);\n color: white;\n}\n\n.editable-cell-input {\n position: absolute;\n top: 0;\n left: 0;\n border-radius: var(--st-border-radius);\n border: var(--st-border-width) solid var(--st-border-color);\n box-shadow: var(--st-shadow);\n z-index: 1;\n outline: none;\n height: 100%;\n width: 100%;\n padding: var(--st-cell-padding);\n font-size: var(--st-font-size);\n font-family: var(--st-font-family);\n}\n.editable-cell-input:focus {\n border: var(--st-border-width) solid var(--blue-500);\n}\n.st-column-editor {\n position: relative;\n user-select: none;\n background: var(--st-footer-background-color);\n border-left: var(--st-border-width) solid var(--st-border-color);\n cursor: pointer;\n color: var(--slate-500);\n}\n\n.st-column-editor-text {\n padding: var(--st-spacing-medium) var(--st-spacing-small);\n writing-mode: vertical-rl;\n z-index: 2;\n}\n\n.st-column-editor.open,\n.st-column-editor.open .st-column-editor-text {\n background-color: var(--st-column-editor-background-color);\n}\n\n.st-column-editor-popout {\n position: absolute;\n top: 0;\n right: calc(100% + 1px);\n z-index: 1;\n height: 100%;\n background-color: var(--st-column-editor-popout-background-color);\n transition: width var(--st-transition-duration) var(--st-transition-ease);\n overflow: hidden;\n width: 0;\n}\n.st-column-editor-popout-content {\n display: flex;\n flex-direction: column;\n overflow: auto;\n gap: var(--st-spacing-small);\n padding: var(--st-spacing-medium) var(--st-spacing-small);\n border-left: var(--st-border-width) solid var(--st-border-color);\n height: 100%;\n}\n\n.st-column-editor-popout.open {\n width: 200px;\n}\n\n.st-column-editor-popout.left {\n transform: translateX(-100%);\n}\n\n.st-column-editor-popout.open.left {\n transform: translateX(0);\n}\n\n/* Checkbox styles */\n.st-checkbox-label {\n display: flex;\n align-items: center;\n cursor: pointer;\n gap: var(--st-spacing-medium);\n}\n\n.st-checkbox-input {\n display: none; /* Hide the default checkbox */\n}\n\n.st-checkbox-custom {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n border: var(--st-border-width) solid var(--slate-300);\n border-radius: var(--st-border-radius);\n background-color: white;\n transition: background-color var(--st-transition-duration)\n var(--st-transition-ease),\n border-color var(--st-transition-duration) var(--st-transition-ease);\n}\n\n.st-checkbox-custom.st-checked {\n background-color: var(--st-checkbox-checked-background-color);\n border-color: var(--st-checkbox-checked-border-color);\n}\n\n.st-checkbox-checkmark {\n width: 6px;\n height: 11px;\n border: solid white;\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n}\n\n@keyframes slide-in-left {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n}\n\n@keyframes slide-in-right {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n');var W=function(o){var r=o.columnEditorPosition,d=void 0===r?"right":r,i=o.columnEditorText,u=void 0===i?"Columns":i,b=o.columnResizing,g=void 0!==b&&b,f=o.defaultHeaders,h=o.draggable,k=void 0!==h&&h,w=o.editColumns,x=void 0!==w&&w,y=o.height,C=o.hideFooter,R=void 0!==C&&C,D=o.nextIcon,I=void 0===D?n(O,{className:"st-next-prev-icon"}):D,E=o.onCellChange,A=o.prevIcon,S=void 0===A?n(H,{className:"st-next-prev-icon"}):A,z=o.rows,L=o.rowsPerPage,U=void 0===L?10:L,X=o.selectableCells,W=void 0!==X&&X,V=o.selectableColumns,Y=void 0!==V&&V,G=o.shouldPaginate,K=void 0!==G&&G,Q=o.sortDownIcon,q=void 0===Q?n(j,{className:"st-sort-icon"}):Q,J=o.sortUpIcon,$=void 0===J?n(P,{className:"st-sort-icon"}):J,Z=o.theme,_=void 0===Z?"light":Z,ee=s((function(){return z.map((function(e,n){return p(p({},e),{originalRowIndex:n})}))}),[z]),ne=c(null),oe=t(!1),re=oe[0],te=oe[1],ce=c(f),le=t(null),ae=le[0],se=le[1],de=t({}),ie=de[0],ue=de[1],be=t(1),ge=be[0],fe=be[1],he=s((function(){if(!ae)return ee;var e=function(e,n,o){var r=o?o.key:e[0],t="ascending";return o&&o.key.accessor===r.accessor&&"ascending"===o.direction&&(t="descending"),{sortedData:m([],n,!0).sort((function(e,n){return e[r.accessor]<n[r.accessor]?"ascending"===t?1:-1:e[r.accessor]>n[r.accessor]?"ascending"===t?-1:1:0})),newSortConfig:{key:r,direction:t}}}(ce.current,ee,ae).sortedData;return e}),[ee,ae]),ve=v((function(e){return e+1}),0)[1],pe=function(e){var n=e.selectableCells,o=e.headers,r=e.rows,d=t(new Set),i=d[0],u=d[1],b=c(!1),g=c(null),f=l((function(){var e=Array.from(i).reduce((function(e,n){var t=n.split("-").map(Number),c=t[0],l=t[1];return e[c]||(e[c]=[]),e[c][l]=r[c][o[l].accessor],e}),{}),n=Object.values(e).map((function(e){return Object.values(e).join("\t")})).join("\n");navigator.clipboard.writeText(n)}),[i,r,o]);a((function(){var e=function(e){(e.ctrlKey||e.metaKey)&&"c"===e.key&&f()};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[f]);var h=l((function(e,n){return i.has("".concat(e,"-").concat(n))}),[i]),v=l((function(e,n){var o=[];return h(e-1,n)||o.push("st-selected-top-border"),h(e+1,n)||o.push("st-selected-bottom-border"),h(e,n-1)||o.push("st-selected-left-border"),h(e,n+1)||o.push("st-selected-right-border"),o.join(" ")}),[h]),p=s((function(){var e=Math.min.apply(Math,Array.from(i).map((function(e){return parseInt(e.split("-")[0])}))),n=Math.min.apply(Math,Array.from(i).map((function(e){return parseInt(e.split("-")[1])})));return function(o,r){return o===e&&r===n}}),[i]);return{selectedCells:i,handleMouseDown:function(e){var o=e.colIndex,r=e.rowIndex;n&&(b.current=!0,g.current={row:r,col:o},u(new Set(["".concat(r,"-").concat(o)])))},handleMouseOver:function(e,o){if(n&&b.current&&g.current){for(var r=new Set,t=Math.min(g.current.row,e),c=Math.max(g.current.row,e),l=Math.min(g.current.col,o),a=Math.max(g.current.col,o),s=t;s<=c;s++)for(var d=l;d<=a;d++)r.add("".concat(s,"-").concat(d));u(r)}},handleMouseUp:function(){b.current=!1,g.current=null},isSelected:h,getBorderClass:v,isTopLeftCell:p,setSelectedCells:u}}({selectableCells:W,headers:ce.current,rows:he}),me=pe.handleMouseDown,ke=pe.handleMouseOver,we=pe.handleMouseUp,xe=pe.isSelected,ye=pe.getBorderClass,Ce=pe.isTopLeftCell,Re=pe.setSelectedCells,De=ce.current.filter((function(e){return!e.hide})),Ne=s((function(){return!!ne.current&&De.reduce((function(e,n){return e+n.width}),0)<ne.current.clientWidth}),[De]),Ie=K?he.slice((ge-1)*U,ge*U):he;a((function(){var e=function(e){var n=e.target;n.closest(".st-cell")||Y&&(n.classList.contains("st-header-cell")||n.classList.contains("st-header-label"))||Re(new Set)};return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}}),[Y,Re]);var Ee=s((function(){return"".concat(De.filter((function(e){return!0!==ie[e.accessor]})).map((function(e){return"".concat(e.width,"px")})).join(" ")," 1fr")}),[De,ie]);return n(M.Provider,p({value:{rows:z,tableRows:ee}},{children:e("div",p({className:"st-wrapper theme-".concat(_),style:y?{height:y}:{}},{children:[e("div",p({className:"st-table-wrapper"},{children:[e("div",p({className:"st-table",onMouseUp:we,onMouseLeave:we,ref:ne,style:{gridTemplateColumns:Ee}},{children:[n(N,{columnResizing:g,currentRows:Ie,draggable:k,forceUpdate:ve,headersRef:ce,hiddenColumns:ie,isWidthDragging:re,onSort:function(e,n){se((function(o){return(null==o?void 0:o.key.accessor)!==n?{key:ce.current[e],direction:"ascending"}:"ascending"===(null==o?void 0:o.direction)?{key:ce.current[e],direction:"descending"}:null}))},onTableHeaderDragEnd:function(e){ce.current=e,ve()},selectableColumns:Y,setIsWidthDragging:te,setSelectedCells:Re,shouldDisplayLastColumnCell:Ne,sort:ae,sortDownIcon:q,sortUpIcon:$,tableRef:ne}),n(T,{currentRows:Ie,getBorderClass:ye,handleMouseDown:me,handleMouseOver:ke,headers:ce.current,hiddenColumns:ie,isSelected:xe,isTopLeftCell:Ce,isWidthDragging:re,onCellChange:E,shouldDisplayLastColumnCell:Ne,shouldPaginate:K,tableRef:ne})]})),n(F,{headers:ce.current,columnEditorText:u,editColumns:x,position:d,setHiddenColumns:ue,hiddenColumns:ie})]})),n(B,{currentPage:ge,hideFooter:R,nextIcon:I,onPageChange:fe,prevIcon:S,rowsPerPage:U,shouldPaginate:K,totalRows:he.length})]}))}))};export{W as SimpleTable};
|