simple-table-core 0.3.2 → 0.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +121 -19
- package/dist/index.js +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,37 +4,141 @@ Any questions, support or features requests join me on Dicord [https://discord.g
|
|
|
4
4
|
|
|
5
5
|
Simple Table is a React grid package designed to provide a flexible and easy-to-use table component for your React applications.
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
7
|
## Example Usage
|
|
10
8
|
|
|
11
9
|
```tsx
|
|
10
|
+
import { useState } from "react";
|
|
12
11
|
import { SimpleTable } from "simple-table-core";
|
|
13
|
-
import "simple-table-core/dist/
|
|
12
|
+
import CellChangeProps from "simple-table-core/dist/types/CellChangeProps";
|
|
14
13
|
|
|
15
14
|
export const SAMPLE_HEADERS: any[] = [
|
|
16
15
|
{ label: "Product ID", accessor: "id", width: 150 },
|
|
17
16
|
{ label: "Product Name", accessor: "productName", width: 200 },
|
|
18
17
|
{ label: "Category", accessor: "category", width: 150 },
|
|
19
18
|
{ label: "Quantity", accessor: "quantity", width: 100 },
|
|
19
|
+
{ label: "Price", accessor: "price", width: 100 },
|
|
20
|
+
{ label: "Supplier", accessor: "supplier", width: 150 },
|
|
21
|
+
{ label: "Location", accessor: "location", width: 150 },
|
|
22
|
+
{ label: "Reorder Level", accessor: "reorderLevel", width: 100 },
|
|
23
|
+
{ label: "SKU", accessor: "sku", width: 100 },
|
|
24
|
+
{ label: "Description", accessor: "description", width: 250 },
|
|
25
|
+
{ label: "Weight", accessor: "weight", width: 100 },
|
|
26
|
+
{ label: "Dimensions", accessor: "dimensions", width: 150 },
|
|
27
|
+
{ label: "Barcode", accessor: "barcode", width: 100 },
|
|
20
28
|
];
|
|
21
29
|
|
|
22
|
-
|
|
30
|
+
export const inventoryData: any[] = Array.from({ length: 50 }, (_, index) => ({
|
|
31
|
+
id: `P-${index + 1001}`,
|
|
32
|
+
productName: [
|
|
33
|
+
"Wireless Mouse",
|
|
34
|
+
"Bluetooth Speaker",
|
|
35
|
+
"LED Monitor",
|
|
36
|
+
"Gaming Keyboard",
|
|
37
|
+
"Smartphone",
|
|
38
|
+
"Laptop",
|
|
39
|
+
"Tablet",
|
|
40
|
+
"Headphones",
|
|
41
|
+
"Smartwatch",
|
|
42
|
+
"External Hard Drive",
|
|
43
|
+
][index % 10],
|
|
44
|
+
category: ["Electronics", "Furniture", "Clothing", "Food", "Books"][
|
|
45
|
+
Math.floor(Math.random() * 5)
|
|
46
|
+
],
|
|
47
|
+
quantity: Math.floor(Math.random() * 100) + 1,
|
|
48
|
+
price: (Math.random() * 100).toFixed(2),
|
|
49
|
+
supplier: [
|
|
50
|
+
"Tech Supplies Co.",
|
|
51
|
+
"Gadget World",
|
|
52
|
+
"Office Essentials",
|
|
53
|
+
"Home Comforts",
|
|
54
|
+
"Fashion Hub",
|
|
55
|
+
][Math.floor(Math.random() * 5)],
|
|
56
|
+
location: [
|
|
57
|
+
"Warehouse A - New York",
|
|
58
|
+
"Warehouse B - Los Angeles",
|
|
59
|
+
"Warehouse C - Chicago",
|
|
60
|
+
"Warehouse D - Houston",
|
|
61
|
+
"Warehouse E - Miami",
|
|
62
|
+
][Math.floor(Math.random() * 5)],
|
|
63
|
+
reorderLevel: Math.floor(Math.random() * 20) + 5,
|
|
64
|
+
sku: `SKU-${index + 1001}`,
|
|
65
|
+
description: `High-quality ${
|
|
66
|
+
[
|
|
67
|
+
"wireless mouse",
|
|
68
|
+
"bluetooth speaker",
|
|
69
|
+
"LED monitor",
|
|
70
|
+
"gaming keyboard",
|
|
71
|
+
"smartphone",
|
|
72
|
+
"laptop",
|
|
73
|
+
"tablet",
|
|
74
|
+
"headphones",
|
|
75
|
+
"smartwatch",
|
|
76
|
+
"external hard drive",
|
|
77
|
+
][index % 10]
|
|
78
|
+
} for everyday use.`,
|
|
79
|
+
weight: `${(Math.random() * 10).toFixed(2)} kg`,
|
|
80
|
+
dimensions: `${(Math.random() * 100).toFixed(2)}x${(
|
|
81
|
+
Math.random() * 100
|
|
82
|
+
).toFixed(2)}x${(Math.random() * 100).toFixed(2)} cm`,
|
|
83
|
+
barcode: `1234567890${index}`,
|
|
84
|
+
expirationDate: `2024-${Math.floor(Math.random() * 12) + 1}-${
|
|
85
|
+
Math.floor(Math.random() * 28) + 1
|
|
86
|
+
}`,
|
|
87
|
+
manufacturer: [
|
|
88
|
+
"Tech Innovators Inc.",
|
|
89
|
+
"Gadget Makers Ltd.",
|
|
90
|
+
"Office Producers",
|
|
91
|
+
"Home Creators",
|
|
92
|
+
"Fashion Designers",
|
|
93
|
+
][Math.floor(Math.random() * 5)],
|
|
94
|
+
}));
|
|
95
|
+
|
|
96
|
+
const SimpleTableExample = () => {
|
|
97
|
+
const [rows, setRows] = useState(inventoryData);
|
|
98
|
+
|
|
99
|
+
const updateCell = ({
|
|
100
|
+
accessor,
|
|
101
|
+
newRowIndex,
|
|
102
|
+
newValue,
|
|
103
|
+
originalRowIndex,
|
|
104
|
+
row,
|
|
105
|
+
}: CellChangeProps) => {
|
|
106
|
+
setRows((prevRows) => {
|
|
107
|
+
prevRows[originalRowIndex][accessor] = newValue;
|
|
108
|
+
return prevRows;
|
|
109
|
+
});
|
|
110
|
+
};
|
|
111
|
+
|
|
23
112
|
return (
|
|
24
|
-
<
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
|
|
113
|
+
<div style={{ padding: "2rem" }}>
|
|
114
|
+
<SimpleTable
|
|
115
|
+
// Enable column resizing
|
|
116
|
+
columnResizing
|
|
117
|
+
// Enable draggable columns
|
|
118
|
+
draggable
|
|
119
|
+
// Enable editing columns
|
|
120
|
+
editColumns
|
|
121
|
+
// Set the headers
|
|
122
|
+
defaultHeaders={SAMPLE_HEADERS}
|
|
123
|
+
// Set the rows
|
|
124
|
+
rows={inventoryData}
|
|
125
|
+
// Handle cell changes
|
|
126
|
+
onCellChange={updateCell}
|
|
127
|
+
// Enable selectable cells
|
|
128
|
+
selectableCells
|
|
129
|
+
// Use pagination
|
|
130
|
+
shouldPaginate
|
|
131
|
+
height="auto"
|
|
132
|
+
rowsPerPage={8}
|
|
133
|
+
|
|
134
|
+
// If you aren't using pagination a height is required
|
|
135
|
+
// height="calc(100dvh - 4rem)"`
|
|
136
|
+
/>
|
|
137
|
+
</div>
|
|
36
138
|
);
|
|
37
|
-
}
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
export default SimpleTableExample;
|
|
38
142
|
```
|
|
39
143
|
|
|
40
144
|
Import the CSS file to apply the styles to your table.
|
|
@@ -124,8 +228,6 @@ The following CSS class names are used in the table and can be customized:
|
|
|
124
228
|
- `.st-column-editor`
|
|
125
229
|
- `.st-column-editor.open`
|
|
126
230
|
|
|
127
|
-
For more detailed usage and examples, please refer to our [documentation](http://www.simple-table.com/docs).
|
|
128
|
-
|
|
129
231
|
## License
|
|
130
232
|
|
|
131
233
|
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
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 c,useEffect as i,Children as l,useLayoutEffect as s,forwardRef as u,createRef as d,createContext as f,useContext as v,Fragment as g,useMemo as h,useReducer as m}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 w(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 b=function(e){var n={};return l.forEach(e,(function(e,r){if(e.ref&&e.ref.current){var t=e.ref.current.getBoundingClientRect();n[e.key]=t}})),n},C=function(e){var n,r,c=e.allowHorizontalAnimate,l=void 0===c||c,u=e.children,d=e.pauseAnimation,f=e.tableRef,v=a(!1),g=o({}),h=g[0],m=g[1],p=o({}),w=p[0],C=p[1],y=(n=u,r=a(),i((function(){r.current=n}),[n]),r.current);return s((function(){var e=b(u);m(e)}),[u]),s((function(){var e=b(y);C(e);var n=f.current,r=function(){v.current=!0;var e=b(y);m(e),C(e)},t=function(){v.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)}}),[y,f]),i((function(){d||v.current||Object.keys(w).length&&t.Children.forEach(u,(function(e,n){var r=e.ref.current,t=w[e.key],o=h[e.key];if(t&&o){var a=t.left-o.left,c=l?0:t.top-o.top,i=Math.abs(a),s=Math.abs(c);(i>10||s>10)&&requestAnimationFrame((function(){r.style.transform="translate(".concat(a,"px, ").concat(c,"px)"),r.style.transition="transform 0s",requestAnimationFrame((function(){r.style.transform="",r.style.transition="transform 500ms"}))}))}}))}),[l,h,u,d,w]),u},y=!1,D=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(!y&&(t.current=e,e.accessor!==(null===(a=n.current)||void 0===a?void 0:a.accessor)&&null!==n.current&&!y)){if(y=!0,!r.current)return;var c=w([],r.current,!0),i=c.findIndex((function(e){var r;return e.accessor===(null===(r=n.current)||void 0===r?void 0:r.accessor)})),l=c.findIndex((function(n){return n.accessor===e.accessor}));if(void 0===i||void 0===l)return;var s=c.splice(i,1)[0];c.splice(l,0,s),JSON.stringify(c)!==JSON.stringify(r.current)&&setTimeout((function(){o(c),setTimeout((function(){y=!1}),500)}),50)}}(e)},handleDragEnd:function(){n.current=null,t.current=null}}},R=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))}},x=u((function(r,t){var c,l=r.draggable,s=r.draggedHeaderRef,u=r.columnResizing,d=r.forceUpdate,f=r.headersRef,v=r.hoveredHeaderRef,g=r.index,h=r.onSort,m=r.onTableHeaderDragEnd,w=r.setIsWidthDragging,b=r.sort,C=r.sortDownIcon,y=r.sortUpIcon,x=a({pageX:0,pageY:0}),I=o(!1),E=I[0],M=I[1],L=null===(c=f.current)||void 0===c?void 0:c[g],A=Boolean(null==L?void 0:L.isSortable),N="st-header-cell ".concat(L===v.current?"st-hovered":""," ").concat(E?"st-dragging":""," ").concat(A?"clickable":""," ").concat(l&&!A?"draggable":""),T=D({draggedHeaderRef:s,headersRef:f,hoveredHeaderRef:v,onTableHeaderDragEnd:m}),k=T.handleDragStart,S=T.handleDragOver,B=T.handleDragEnd,O=a(R((function(e){S(e)}),100)).current,H=function(e){e.isSortable&&h(g,e.accessor)};return i((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)}}),[]),L?e("div",p({className:N,ref:t,style:{width:L.width}},{children:[n("div",p({className:"st-header-label",draggable:l,onClick:function(){return H(L)},onDragStart:function(e){l&&L&&(e.dataTransfer.dropEffect="move",function(e){M(!0),k(e)}(L))},onDragOver:function(e){return function(e,n){e.preventDefault(),e.dataTransfer.dropEffect="move";var r=e.pageX,t=e.pageY;r===x.current.pageX&&t===x.current.pageY||(x.current={pageX:r,pageY:t},O(n,e))}(e,L)},onDragEnd:function(e){e.preventDefault(),e.dataTransfer.dropEffect="move",M(!1),B()},onMouseEnter:function(){return document.body.style.overflow="hidden"},onMouseLeave:function(){return document.body.style.overflow="auto"}},{children:null==L?void 0:L.label})),b&&b.key.accessor===L.accessor&&e("div",p({className:"st-sort-icon-container",onClick:function(){return H(L)}},{children:["ascending"===b.direction&&y&&y,"descending"===b.direction&&C&&C]})),u&&n("div",{className:"st-header-resize-handle",onMouseDown:function(e){w(!0),e.preventDefault();var n=e.clientX;if(L){var r=L.width,t=R((function(e){var t=Math.max(r+(e.clientX-n),10);L&&(f.current[g].width=t,d())}),10),o=function(){document.removeEventListener("mousemove",t),document.removeEventListener("mouseup",o),w(!1)};document.addEventListener("mousemove",t),document.addEventListener("mouseup",o)}}})]})):null})),I=u((function(e,r){return e.visible?n("div",{className:"st-cell",ref:r}):n("div",{ref:r})})),E=function(){return n("div",{className:"st-row-separator"})},M=function(t){var o,c=t.draggable,i=t.columnResizing,l=t.forceUpdate,s=t.headersRef,u=t.isWidthDragging,f=t.onSort,v=t.onTableHeaderDragEnd,g=t.setIsWidthDragging,h=t.shouldDisplayLastColumnCell,m=t.sort,w=t.sortDownIcon,b=t.sortUpIcon,y=t.tableRef,D=a(null),R=a(null);return e(r,{children:[e(C,p({pauseAnimation:u,tableRef:y},{children:[null===(o=s.current)||void 0===o?void 0:o.map((function(e,r){return n(x,{draggable:c,draggedHeaderRef:D,columnResizing:i,forceUpdate:l,headersRef:s,hoveredHeaderRef:R,index:r,onSort:f,onTableHeaderDragEnd:v,ref:d(),setIsWidthDragging:g,sort:m,sortDownIcon:w,sortUpIcon:b},e.accessor)})),n(I,{ref:d(),visible:h})]})),n(E,{})]})},L=function(r){var t=r.value,o=r.onBlur,a=r.onChange;return e("select",p({value:t.toString(),onBlur:o,onChange:a},{children:[n("option",p({value:"true"},{children:"True"})),n("option",p({value:"false"},{children:"False"}))]}))},A=function(e){var r=e.defaultValue,t=e.onBlur,o=e.onChange,c=a(null);return n("input",{className:"editable-cell-input",ref:c,autoFocus:!0,type:"text",defaultValue:r,onBlur:t,onChange:o})},N=function(e){var t=e.onChange,o=e.setIsEditing,a=e.value,c=function(e){var n=e.target.value;null==t||t(n)},i=function(){o(!1)};return n(r,{children:"string"==typeof a?n(A,{defaultValue:a,onBlur:i,onChange:c}):"boolean"==typeof a?n(L,{value:a,onBlur:i,onChange:c}):null})},T=f({rows:[],tableRows:[]}),k=u((function(e,r){var t=e.borderClass,a=e.colIndex,c=e.content,l=e.header,s=e.isSelected,u=e.isTopLeftCell,d=e.onCellChange,f=e.onMouseDown,g=e.onMouseOver,h=e.row,m=e.rowIndex,w=v(T),b=w.rows,C=w.tableRows,y=o(c),D=y[0],R=y[1],x=o(!1),I=x[0],E=x[1],M=Boolean(null==l?void 0:l.isEditable),L=m%2==0,A="st-cell ".concat(s?u?"st-cell-selected-first-cell ".concat(t):"st-cell-selected ".concat(t):""," ").concat(L?"st-cell-odd-row":""," ").concat(M?"clickable":"");i((function(){R(c)}),[c]),i((function(){if(void 0!==h.originalRowIndex&&"number"==typeof h.originalRowIndex){var e=b[h.originalRowIndex];e[l.accessor]!==D?R(e[l.accessor]):C[h.originalRowIndex][l.accessor]=D}}),[l.accessor,D,b,h.originalRowIndex,C]);return n("div",I?p({className:"st-cell-editing ".concat(L?"st-cell-odd-row":"")},{children:n(N,{onChange:function(e){R(e),null==d||d({accessor:l.accessor,newValue:e,newRowIndex:m,originalRowIndex:h.originalRowIndex,row:h})},setIsEditing:E,value:D})}):p({className:A,onDoubleClick:function(){return l.isEditable&&E(!0)},onMouseDown:function(){return f(m,a)},onMouseOver:function(){return g(m,a)},ref:r},{children:D}))})),S=function(t){var o=t.getBorderClass,a=t.handleMouseDown,c=t.handleMouseOver,i=t.headers,l=t.isSelected,s=t.isTopLeftCell,u=t.isWidthDragging,f=t.onCellChange,v=t.shouldDisplayLastColumnCell,h=t.shouldPaginate,m=t.sortedRows,w=t.tableRef;return n(r,{children:m.map((function(r,t){return e(g,{children:[e(C,p({allowHorizontalAnimate:h,pauseAnimation:u,tableRef:w},{children:[i.map((function(e,i){var u=r[e.accessor];return e.cellRenderer&&(u=e.cellRenderer(r)),n(k,{borderClass:o(t,i),colIndex:i,content:u,header:e,isSelected:l(t,i),isTopLeftCell:s(t,i),onCellChange:f,onMouseDown:function(){return a(t,i)},onMouseOver:function(){return c(t,i)},ref:d(),row:r,rowIndex:t},e.accessor)})),n(I,{ref:d(),visible:v})]})),t!==m.length-1&&n(E,{})]},r.originalRowIndex)}))})},B=function(r){var t=r.currentPage,o=r.hideFooter,a=r.nextIcon,c=r.onPageChange,i=r.prevIcon,l=r.rowsPerPage,s=r.shouldPaginate,u=r.totalRows,d=Math.ceil(u/l),f=t>1,v=t<d,g=function(e){e>=1&&e<=d&&c(e)};return o||!s?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:i})),n("button",p({className:"st-next-prev-btn ".concat(v?"":"disabled"),onClick:function(){return g(t+1)},disabled:!v},{children:a})),Array.from({length:d},(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)}))]}))},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:"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"})}))},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:"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"})}))},U=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"})}))},z=function(e){var r=e.columnEditorText,t=e.editColumns,a=o(!1),c=a[0],i=a[1];return t?n("div",p({className:"st-column-editor ".concat(c?"open":""),onClick:function(){return function(e){i(!e)}(!c)}},{children:r})):null},j=function(r){var t=r.columnEditorText,l=void 0===t?"Columns":t,s=r.columnResizing,u=void 0!==s&&s,d=r.defaultHeaders,f=r.draggable,v=void 0!==f&&f,g=r.editColumns,b=void 0!==g&&g,C=r.height,y=r.hideFooter,D=void 0!==y&&y,R=r.nextIcon,x=void 0===R?n(H,{className:"st-next-prev-icon"}):R,I=r.onCellChange,E=r.prevIcon,L=void 0===E?n(O,{className:"st-next-prev-icon"}):E,A=r.rows,N=r.rowsPerPage,k=void 0===N?10:N,j=r.selectableCells,W=void 0!==j&&j,F=r.shouldPaginate,X=void 0!==F&&F,V=r.sortDownIcon,Y=void 0===V?n(U,{className:"st-sort-icon"}):V,Q=r.sortUpIcon,q=void 0===Q?n(P,{className:"st-sort-icon"}):Q,J=h((function(){return A.map((function(e,n){return p(p({},e),{originalRowIndex:n})}))}),[A]),K=a(null),G=o(!1),Z=G[0],$=G[1],_=a(d),ee=o(null),ne=ee[0],re=ee[1],te=o(1),oe=te[0],ae=te[1],ce=h((function(){if(!ne)return J;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:w([],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}}}(_.current,J,ne).sortedData;return e}),[J,ne]),ie=m((function(e){return e+1}),0)[1],le=function(e){var n=e.selectableCells,r=e.headers,t=e.rows,l=o([]),s=l[0],u=l[1],d=a(!1),f=a(null),v=c((function(){var e=s.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)}),[s,t,r]);i((function(){var e=function(e){(e.ctrlKey||e.metaKey)&&"c"===e.key&&v()};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[v,s]);var g=function(e,n){return s.some((function(r){return r.row===e&&r.col===n}))};return{selectedCells:s,handleMouseDown:function(e,r){n&&(d.current=!0,f.current={row:e,col:r},u([{row:e,col:r}]))},handleMouseOver:function(e,r){if(n&&d.current&&f.current){for(var t=[],o=Math.min(f.current.row,e),a=Math.max(f.current.row,e),c=Math.min(f.current.col,r),i=Math.max(f.current.col,r),l=o;l<=a;l++)for(var s=c;s<=i;s++)t.push({row:l,col:s});u(t)}},handleMouseUp:function(){d.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,s.map((function(e){return e.row})))&&n===Math.min.apply(Math,s.map((function(e){return e.col})))},setSelectedCells:u}}({selectableCells:W,headers:_.current,rows:ce}),se=le.handleMouseDown,ue=le.handleMouseOver,de=le.handleMouseUp,fe=le.isSelected,ve=le.getBorderClass,ge=le.isTopLeftCell,he=le.setSelectedCells,me=_.current.filter((function(e){return!e.hide})),pe=h((function(){return!!K.current&&me.reduce((function(e,n){return e+n.width}),0)<K.current.clientWidth}),[me]),we=X?ce.slice((oe-1)*k,oe*k):ce;return i((function(){var e=function(e){e.target.closest(".st-cell")||he([])};return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}}),[he]),n(T.Provider,p({value:{rows:A,tableRows:J}},{children:e("div",p({ref:K,className:"st-wrapper",style:C?{height:C}:{}},{children:[e("div",p({className:"st-table-wrapper"},{children:[e("div",p({className:"st-table",onMouseUp:de,onMouseLeave:de,style:{gridTemplateColumns:"".concat(null==me?void 0:me.map((function(e){return"".concat(e.width,"px")})).join(" ")," 1fr")}},{children:[n(M,{draggable:v,columnResizing:u,forceUpdate:ie,headersRef:_,isWidthDragging:Z,onSort:function(e,n){re((function(r){return(null==r?void 0:r.key.accessor)!==n?{key:_.current[e],direction:"ascending"}:"ascending"===(null==r?void 0:r.direction)?{key:_.current[e],direction:"descending"}:null}))},onTableHeaderDragEnd:function(e){_.current=e,ie()},setIsWidthDragging:$,shouldDisplayLastColumnCell:pe,sort:ne,sortDownIcon:Y,sortUpIcon:q,tableRef:K}),n(S,{getBorderClass:ve,handleMouseDown:se,handleMouseOver:ue,headers:_.current,isSelected:fe,isTopLeftCell:ge,isWidthDragging:Z,onCellChange:I,shouldDisplayLastColumnCell:pe,shouldPaginate:X,sortedRows:we,tableRef:K})]})),n(z,{columnEditorText:l,editColumns:b})]})),n(B,{currentPage:oe,hideFooter:D,nextIcon:x,onPageChange:ae,prevIcon:L,rowsPerPage:k,shouldPaginate:X,totalRows:ce.length})]}))}))};export{j as SimpleTable};
|
|
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 c,useEffect as i,Children as l,useLayoutEffect as s,forwardRef as u,createRef as d,createContext as f,useContext as v,Fragment as g,useMemo as h,useReducer as m}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 w(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 b=function(e){var n={};return l.forEach(e,(function(e,r){if(e.ref&&e.ref.current){var t=e.ref.current.getBoundingClientRect();n[e.key]=t}})),n},C=function(e){var n,r,c=e.allowHorizontalAnimate,l=void 0===c||c,u=e.children,d=e.pauseAnimation,f=e.tableRef,v=a(!1),g=o({}),h=g[0],m=g[1],p=o({}),w=p[0],C=p[1],y=(n=u,r=a(),i((function(){r.current=n}),[n]),r.current);return s((function(){var e=b(u);m(e)}),[u]),s((function(){var e=b(y);C(e);var n=f.current,r=function(){v.current=!0;var e=b(y);m(e),C(e)},t=function(){v.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)}}),[y,f]),i((function(){d||v.current||Object.keys(w).length&&t.Children.forEach(u,(function(e,n){var r=e.ref.current,t=w[e.key],o=h[e.key];if(t&&o){var a=t.left-o.left,c=l?0:t.top-o.top,i=Math.abs(a),s=Math.abs(c);(i>10||s>10)&&requestAnimationFrame((function(){r.style.transform="translate(".concat(a,"px, ").concat(c,"px)"),r.style.transition="transform 0s",requestAnimationFrame((function(){r.style.transform="",r.style.transition="transform 500ms"}))}))}}))}),[l,h,u,d,w]),u},y=!1,D=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(!y&&(t.current=e,e.accessor!==(null===(a=n.current)||void 0===a?void 0:a.accessor)&&null!==n.current&&!y)){if(y=!0,!r.current)return;var c=w([],r.current,!0),i=c.findIndex((function(e){var r;return e.accessor===(null===(r=n.current)||void 0===r?void 0:r.accessor)})),l=c.findIndex((function(n){return n.accessor===e.accessor}));if(void 0===i||void 0===l)return;var s=c.splice(i,1)[0];c.splice(l,0,s),JSON.stringify(c)!==JSON.stringify(r.current)&&setTimeout((function(){o(c),setTimeout((function(){y=!1}),500)}),50)}}(e)},handleDragEnd:function(){n.current=null,t.current=null}}},R=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))}},x=u((function(r,t){var c,l=r.draggable,s=r.draggedHeaderRef,u=r.columnResizing,d=r.forceUpdate,f=r.headersRef,v=r.hoveredHeaderRef,g=r.index,h=r.onSort,m=r.onTableHeaderDragEnd,w=r.setIsWidthDragging,b=r.sort,C=r.sortDownIcon,y=r.sortUpIcon,x=a({pageX:0,pageY:0}),I=o(!1),E=I[0],M=I[1],L=null===(c=f.current)||void 0===c?void 0:c[g],A=Boolean(null==L?void 0:L.isSortable),N="st-header-cell ".concat(L===v.current?"st-hovered":""," ").concat(E?"st-dragging":""," ").concat(A?"clickable":""," ").concat(l&&!A?"draggable":""),T=D({draggedHeaderRef:s,headersRef:f,hoveredHeaderRef:v,onTableHeaderDragEnd:m}),k=T.handleDragStart,S=T.handleDragOver,B=T.handleDragEnd,O=a(R((function(e){S(e)}),100)).current,H=function(e){e.isSortable&&h(g,e.accessor)};return i((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)}}),[]),L?e("div",p({className:N,ref:t,style:{width:L.width}},{children:[n("div",p({className:"st-header-label",draggable:l,onClick:function(){return H(L)},onDragStart:function(e){l&&L&&(e.dataTransfer.dropEffect="move",function(e){M(!0),k(e)}(L))},onDragOver:function(e){return function(e,n){e.preventDefault(),e.dataTransfer.dropEffect="move";var r=e.pageX,t=e.pageY;r===x.current.pageX&&t===x.current.pageY||(x.current={pageX:r,pageY:t},O(n,e))}(e,L)},onDragEnd:function(e){e.preventDefault(),e.dataTransfer.dropEffect="move",M(!1),B()},onMouseEnter:function(){return document.body.style.overflow="hidden"},onMouseLeave:function(){return document.body.style.overflow="auto"}},{children:null==L?void 0:L.label})),b&&b.key.accessor===L.accessor&&e("div",p({className:"st-sort-icon-container",onClick:function(){return H(L)}},{children:["ascending"===b.direction&&y&&y,"descending"===b.direction&&C&&C]})),u&&n("div",{className:"st-header-resize-handle",onMouseDown:function(e){w(!0),e.preventDefault();var n=e.clientX;if(L){var r=L.width,t=R((function(e){var t=Math.max(r+(e.clientX-n),40);L&&(f.current[g].width=t,d())}),10),o=function(){document.removeEventListener("mousemove",t),document.removeEventListener("mouseup",o),w(!1)};document.addEventListener("mousemove",t),document.addEventListener("mouseup",o)}}})]})):null})),I=u((function(e,r){return e.visible?n("div",{className:"st-cell",ref:r}):n("div",{ref:r})})),E=function(t){var o,c=t.draggable,i=t.columnResizing,l=t.forceUpdate,s=t.headersRef,u=t.isWidthDragging,f=t.onSort,v=t.onTableHeaderDragEnd,g=t.setIsWidthDragging,h=t.shouldDisplayLastColumnCell,m=t.sort,w=t.sortDownIcon,b=t.sortUpIcon,y=t.tableRef,D=a(null),R=a(null);return n(r,{children:e(C,p({pauseAnimation:u,tableRef:y},{children:[null===(o=s.current)||void 0===o?void 0:o.map((function(e,r){return n(x,{draggable:c,draggedHeaderRef:D,columnResizing:i,forceUpdate:l,headersRef:s,hoveredHeaderRef:R,index:r,onSort:f,onTableHeaderDragEnd:v,ref:d(),setIsWidthDragging:g,sort:m,sortDownIcon:w,sortUpIcon:b},e.accessor)})),n(I,{ref:d(),visible:h})]}))})},M=function(r){var t=r.value,o=r.onBlur,a=r.onChange;return e("select",p({value:t.toString(),onBlur:o,onChange:a},{children:[n("option",p({value:"true"},{children:"True"})),n("option",p({value:"false"},{children:"False"}))]}))},L=function(e){var r=e.defaultValue,t=e.onBlur,o=e.onChange,c=a(null);return n("input",{className:"editable-cell-input",ref:c,autoFocus:!0,type:"text",defaultValue:r,onBlur:t,onChange:o})},A=function(e){var t=e.onChange,o=e.setIsEditing,a=e.value,c=function(e){var n=e.target.value;null==t||t(n)},i=function(){o(!1)};return n(r,{children:"string"==typeof a?n(L,{defaultValue:a,onBlur:i,onChange:c}):"boolean"==typeof a?n(M,{value:a,onBlur:i,onChange:c}):null})},N=f({rows:[],tableRows:[]}),T=u((function(e,r){var t=e.borderClass,a=e.colIndex,c=e.content,l=e.header,s=e.isSelected,u=e.isTopLeftCell,d=e.onCellChange,f=e.onMouseDown,g=e.onMouseOver,h=e.row,m=e.rowIndex,w=v(N),b=w.rows,C=w.tableRows,y=o(c),D=y[0],R=y[1],x=o(!1),I=x[0],E=x[1],M=Boolean(null==l?void 0:l.isEditable),L=m%2==0,T="st-cell ".concat(s?u?"st-cell-selected-first-cell ".concat(t):"st-cell-selected ".concat(t):""," ").concat(L?"st-cell-odd-row":""," ").concat(M?"clickable":"");i((function(){R(c)}),[c]),i((function(){if(void 0!==h.originalRowIndex&&"number"==typeof h.originalRowIndex){var e=b[h.originalRowIndex];e[l.accessor]!==D?R(e[l.accessor]):C[h.originalRowIndex][l.accessor]=D}}),[l.accessor,D,b,h.originalRowIndex,C]);return n("div",I?p({className:"st-cell-editing ".concat(L?"st-cell-odd-row":"")},{children:n(A,{onChange:function(e){R(e),null==d||d({accessor:l.accessor,newValue:e,newRowIndex:m,originalRowIndex:h.originalRowIndex,row:h})},setIsEditing:E,value:D})}):p({className:T,onDoubleClick:function(){return l.isEditable&&E(!0)},onMouseDown:function(){return f(m,a)},onMouseOver:function(){return g(m,a)},ref:r},{children:D}))})),k=function(){return n("div",{className:"st-row-separator"})},S=function(t){var o=t.getBorderClass,a=t.handleMouseDown,c=t.handleMouseOver,i=t.headers,l=t.isSelected,s=t.isTopLeftCell,u=t.isWidthDragging,f=t.onCellChange,v=t.shouldDisplayLastColumnCell,h=t.shouldPaginate,m=t.sortedRows,w=t.tableRef;return n(r,{children:m.map((function(r,t){return e(g,{children:[e(C,p({allowHorizontalAnimate:h,pauseAnimation:u,tableRef:w},{children:[i.map((function(e,i){var u=r[e.accessor];return e.cellRenderer&&(u=e.cellRenderer(r)),n(T,{borderClass:o(t,i),colIndex:i,content:u,header:e,isSelected:l(t,i),isTopLeftCell:s(t,i),onCellChange:f,onMouseDown:function(){return a(t,i)},onMouseOver:function(){return c(t,i)},ref:d(),row:r,rowIndex:t},e.accessor)})),n(I,{ref:d(),visible:v})]})),t!==m.length-1&&n(k,{})]},r.originalRowIndex)}))})},B=function(r){var t=r.currentPage,o=r.hideFooter,a=r.nextIcon,c=r.onPageChange,i=r.prevIcon,l=r.rowsPerPage,s=r.shouldPaginate,u=r.totalRows,d=Math.ceil(u/l),f=t>1,v=t<d,g=function(e){e>=1&&e<=d&&c(e)};return o||!s?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:i})),n("button",p({className:"st-next-prev-btn ".concat(v?"":"disabled"),onClick:function(){return g(t+1)},disabled:!v},{children:a})),Array.from({length:d},(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)}))]}))},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:"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"})}))},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:"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"})}))},U=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"})}))},z=function(e){var r=e.columnEditorText,t=e.editColumns,a=o(!1),c=a[0],i=a[1];return t?n("div",p({className:"st-column-editor ".concat(c?"open":""),onClick:function(){return function(e){i(!e)}(!c)}},{children:r})):null},j=function(r){var t=r.columnEditorText,l=void 0===t?"Columns":t,s=r.columnResizing,u=void 0!==s&&s,d=r.defaultHeaders,f=r.draggable,v=void 0!==f&&f,g=r.editColumns,b=void 0!==g&&g,C=r.height,y=r.hideFooter,D=void 0!==y&&y,R=r.nextIcon,x=void 0===R?n(H,{className:"st-next-prev-icon"}):R,I=r.onCellChange,M=r.prevIcon,L=void 0===M?n(O,{className:"st-next-prev-icon"}):M,A=r.rows,T=r.rowsPerPage,k=void 0===T?10:T,j=r.selectableCells,W=void 0!==j&&j,F=r.shouldPaginate,X=void 0!==F&&F,V=r.sortDownIcon,Y=void 0===V?n(U,{className:"st-sort-icon"}):V,Q=r.sortUpIcon,q=void 0===Q?n(P,{className:"st-sort-icon"}):Q,J=h((function(){return A.map((function(e,n){return p(p({},e),{originalRowIndex:n})}))}),[A]),K=a(null),G=o(!1),Z=G[0],$=G[1],_=a(d),ee=o(null),ne=ee[0],re=ee[1],te=o(1),oe=te[0],ae=te[1],ce=h((function(){if(!ne)return J;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:w([],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}}}(_.current,J,ne).sortedData;return e}),[J,ne]),ie=m((function(e){return e+1}),0)[1],le=function(e){var n=e.selectableCells,r=e.headers,t=e.rows,l=o([]),s=l[0],u=l[1],d=a(!1),f=a(null),v=c((function(){var e=s.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)}),[s,t,r]);i((function(){var e=function(e){(e.ctrlKey||e.metaKey)&&"c"===e.key&&v()};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[v,s]);var g=function(e,n){return s.some((function(r){return r.row===e&&r.col===n}))};return{selectedCells:s,handleMouseDown:function(e,r){n&&(d.current=!0,f.current={row:e,col:r},u([{row:e,col:r}]))},handleMouseOver:function(e,r){if(n&&d.current&&f.current){for(var t=[],o=Math.min(f.current.row,e),a=Math.max(f.current.row,e),c=Math.min(f.current.col,r),i=Math.max(f.current.col,r),l=o;l<=a;l++)for(var s=c;s<=i;s++)t.push({row:l,col:s});u(t)}},handleMouseUp:function(){d.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,s.map((function(e){return e.row})))&&n===Math.min.apply(Math,s.map((function(e){return e.col})))},setSelectedCells:u}}({selectableCells:W,headers:_.current,rows:ce}),se=le.handleMouseDown,ue=le.handleMouseOver,de=le.handleMouseUp,fe=le.isSelected,ve=le.getBorderClass,ge=le.isTopLeftCell,he=le.setSelectedCells,me=_.current.filter((function(e){return!e.hide})),pe=h((function(){return!!K.current&&me.reduce((function(e,n){return e+n.width}),0)<K.current.clientWidth}),[me]),we=X?ce.slice((oe-1)*k,oe*k):ce;return i((function(){var e=function(e){e.target.closest(".st-cell")||he([])};return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}}),[he]),n(N.Provider,p({value:{rows:A,tableRows:J}},{children:e("div",p({className:"st-wrapper",style:C?{height:C}:{}},{children:[e("div",p({className:"st-table-wrapper"},{children:[e("div",p({className:"st-table",onMouseUp:de,onMouseLeave:de,ref:K,style:{gridTemplateColumns:"".concat(null==me?void 0:me.map((function(e){return"".concat(e.width,"px")})).join(" ")," 1fr")}},{children:[n(E,{draggable:v,columnResizing:u,forceUpdate:ie,headersRef:_,isWidthDragging:Z,onSort:function(e,n){re((function(r){return(null==r?void 0:r.key.accessor)!==n?{key:_.current[e],direction:"ascending"}:"ascending"===(null==r?void 0:r.direction)?{key:_.current[e],direction:"descending"}:null}))},onTableHeaderDragEnd:function(e){_.current=e,ie()},setIsWidthDragging:$,shouldDisplayLastColumnCell:pe,sort:ne,sortDownIcon:Y,sortUpIcon:q,tableRef:K}),n(S,{getBorderClass:ve,handleMouseDown:se,handleMouseOver:ue,headers:_.current,isSelected:fe,isTopLeftCell:ge,isWidthDragging:Z,onCellChange:I,shouldDisplayLastColumnCell:pe,shouldPaginate:X,sortedRows:we,tableRef:K})]})),n(z,{columnEditorText:l,editColumns:b})]})),n(B,{currentPage:oe,hideFooter:D,nextIcon:x,onPageChange:ae,prevIcon:L,rowsPerPage:k,shouldPaginate:X,totalRows:ce.length})]}))}))};export{j as SimpleTable};
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap");:root{--slate-50:#f8fafc;--slate-100:#f1f5f9;--slate-200:#e2e8f0;--slate-300:#cbd5e1;--slate-400:#94a3b8;--slate-500:#64748b;--slate-600:#475569;--slate-700:#334155;--slate-800:#1e293b;--slate-900:#0f172a;--blue-50:#eff6ff;--blue-100:#dbeafe;--blue-200:#bfdbfe;--blue-300:#93c5fd;--blue-400:#60a5fa;--blue-500:#3b82f6;--blue-600:#2563eb;--blue-700:#1d4ed8;--blue-800:#1e40af;--blue-900:#1e3a8a;--orange-50:#fff7ed;--orange-100:#ffedd5;--orange-200:#fed7aa;--orange-300:#fdba74;--orange-400:#fb923c;--orange-500:#f97316;--orange-600:#ea580c;--orange-700:#c2410c;--orange-800:#9a3412;--orange-900:#7c2d12;--amber-50:#fffbeb;--amber-100:#fef3c7;--amber-200:#fde68a;--amber-300:#fcd34d;--amber-400:#fbbf24;--amber-500:#f59e0b;--amber-600:#d97706;--amber-700:#b45309;--amber-800:#92400e;--amber-900:#78350f;--st-border-radius:4px;--st-border-color:var(--slate-300);--st-border-width:1px;--st-resize-handle-color:var(--slate-300);--st-separator-border-color:var(--slate-300);--st-odd-row-background-color:var(--slate-100);--st-dragging-background-color:var(--blue-100);--st-selected-cell-background-color:var(--blue-200);--st-selected-first-cell-background-color:var(--amber-100);--st-border-top-color:var(--blue-500);--st-border-bottom-color:var(--blue-500);--st-border-left-color:var(--blue-500);--st-border-right-color:var(--blue-500);--st-border-top-white-color:#fff;--st-footer-background-color:#fff;--st-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--st-cell-padding:8px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Nunito}.st-wrapper{border:var(--st-border-width) solid var(--st-border-color);border-radius:var(--st-border-radius);
|
|
1
|
+
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap");:root{--slate-50:#f8fafc;--slate-100:#f1f5f9;--slate-200:#e2e8f0;--slate-300:#cbd5e1;--slate-400:#94a3b8;--slate-500:#64748b;--slate-600:#475569;--slate-700:#334155;--slate-800:#1e293b;--slate-900:#0f172a;--blue-50:#eff6ff;--blue-100:#dbeafe;--blue-200:#bfdbfe;--blue-300:#93c5fd;--blue-400:#60a5fa;--blue-500:#3b82f6;--blue-600:#2563eb;--blue-700:#1d4ed8;--blue-800:#1e40af;--blue-900:#1e3a8a;--orange-50:#fff7ed;--orange-100:#ffedd5;--orange-200:#fed7aa;--orange-300:#fdba74;--orange-400:#fb923c;--orange-500:#f97316;--orange-600:#ea580c;--orange-700:#c2410c;--orange-800:#9a3412;--orange-900:#7c2d12;--amber-50:#fffbeb;--amber-100:#fef3c7;--amber-200:#fde68a;--amber-300:#fcd34d;--amber-400:#fbbf24;--amber-500:#f59e0b;--amber-600:#d97706;--amber-700:#b45309;--amber-800:#92400e;--amber-900:#78350f;--st-border-radius:4px;--st-border-color:var(--slate-300);--st-border-width:1px;--st-resize-handle-color:var(--slate-300);--st-separator-border-color:var(--slate-300);--st-odd-row-background-color:var(--slate-100);--st-dragging-background-color:var(--blue-100);--st-selected-cell-background-color:var(--blue-200);--st-selected-first-cell-background-color:var(--amber-100);--st-border-top-color:var(--blue-500);--st-border-bottom-color:var(--blue-500);--st-border-left-color:var(--blue-500);--st-border-right-color:var(--blue-500);--st-border-top-white-color:#fff;--st-footer-background-color:#fff;--st-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--st-cell-padding:8px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Nunito}.st-wrapper{border:var(--st-border-width) solid var(--st-border-color);border-radius:var(--st-border-radius);max-height:100dvh;overflow:hidden;position:relative}.st-table-wrapper{display:flex;overflow:visible;width:max-content}.st-table,.st-table-wrapper{height:100%;position:relative;width:100%}.st-table{border-collapse:collapse;display:grid;overflow:auto;table-layout:auto;white-space:nowrap}.st-header-cell{align-items:center;background-color:#fff;border-bottom:var(--st-border-width) solid var(--st-border-color);border-top:var(--st-border-width) solid #0000;display:flex;font-weight:600;gap:4px;position:sticky;top:0;z-index:1}.st-header-cell.clickable{cursor:pointer}.st-header-cell.draggable{cursor:grab}.st-cell,.st-header-cell{color:var(--slate-800);overflow:hidden}.st-cell.clickable{cursor:pointer}.st-cell,.st-cell-editing,.st-header-cell{font-family:Nunito;height:40px;width:100%}.st-cell-editing{position:relative}.st-header-label{flex:1}.st-cell,.st-header-label{overflow:hidden;padding:var(--st-cell-padding);text-align:left;text-overflow:ellipsis;user-select:none;white-space:nowrap;width:100%}.st-cell{border:var(--st-border-width) solid #0000;position:relative}.st-sort-icon-container{align-items:center;display:flex;flex-direction:column;justify-content:center}.st-sort-icon{fill:var(--slate-500)}.st-header-resize-handle{background-color:var(--st-resize-handle-color);border-radius:.25rem;cursor:col-resize;height:20px;right:0;top:0;width:5px}.st-row-separator{background-color:var(--st-separator-border-color);grid-column:1/-1;height:1px}.st-cell-odd-row{background-color:var(--st-odd-row-background-color)}.st-dragging{background-color:var(--st-dragging-background-color)}.st-cell-selected{background-color:var(--st-selected-cell-background-color)}.st-cell-selected-first{background-color:var(--st-selected-first-cell-background-color)}.st-selected-top-border{border-top:var(--st-border-width) solid var(--st-border-top-color)}.st-selected-bottom-border{border-bottom:var(--st-border-width) solid var(--st-border-bottom-color)}.st-selected-left-border{border-left:var(--st-border-width) solid var(--st-border-left-color)}.st-selected-right-border{border-right:var(--st-border-width) solid var(--st-border-right-color)}.st-selected-top-border-white{border-top:var(--st-border-width) solid var(--st-border-top-white-color)}.st-footer{background-color:var(--st-footer-background-color);border-top:var(--st-border-width) solid var(--st-border-color);bottom:0;left:0;padding:8px;position:sticky}.st-footer,.st-next-prev-btn{align-items:center;display:flex}.st-next-prev-btn{fill:var(--slate-600);background-color:initial;border:none;border-radius:4px;cursor:pointer;justify-content:center;padding:4px;transition:background-color .3s ease}.disabled>.st-next-prev-icon{fill:var(--slate-400);cursor:not-allowed}.st-next-prev-btn:not(.disabled):hover{background-color:var(--slate-100)}.st-page-btn{background-color:initial;border:none;border-radius:var(--st-border-radius);color:var(--slate-600);cursor:pointer;margin-left:4px;padding:4px;transition:background-color .3s ease}.st-page-btn:hover{background-color:var(--slate-100)}.st-page-btn.active{background-color:var(--blue-500);color:#fff}.editable-cell-input{border:var(--st-border-width) solid var(--st-border-color);border-radius:var(--st-border-radius);box-shadow:var(--st-shadow);font-family:Nunito;font-size:1rem;height:100%;left:0;outline:none;padding:var(--st-cell-padding);position:absolute;top:0;width:100%;z-index:1}.editable-cell-input:focus{border:var(--st-border-width) solid var(--blue-500)}.st-column-editor{background:var(--st-footer-background-color);border-left:var(--st-border-width) solid var(--st-border-color);color:var(--slate-500);cursor:pointer;padding:8px 4px;position:sticky;right:0;top:0;user-select:none;writing-mode:vertical-rl;z-index:1}.st-column-editor.open{background-color:var(--slate-100)}
|