simple-table-core 0.2.9 → 0.3.0

package/README.md

@@ -51,14 +51,19 @@ The Simple Table component accepts the following props:
   - **isEditable**: An optional boolean indicating if the column is editable.
   - **cellRenderer**: An optional function that takes a row object and returns a `ReactNode` for custom cell rendering.
 
-- **enableColumnResizing**: A boolean to enable or disable column resizing. Default is `true`.
+- **columnResizing**: A boolean to enable or disable column resizing. Default is `true`.
+- **draggable**: A boolean to enable or disable column dragging.
+- **editColumns**: A boolean to enable or disable column editing.
 - **height**: The height of the table.
 - **hideFooter**: A boolean to hide or show the footer. Default is `false`.
 - **nextIcon**: A React element to display as the next page icon. Default is `<AngleRightIcon />`.
 - **prevIcon**: A React element to display as the previous page icon. Default is `<AngleLeftIcon />`.
 - **rows**: An array of data rows to be displayed in the table.
 - **rowsPerPage**: The number of rows to display per page. Default is `10`.
+- **selectableCells**: A boolean to enable or disable cell selection.
 - **shouldPaginate**: A boolean to enable or disable pagination. Default is `true`.
+- **sortDownIcon**: A React element to display as the sort down icon.
+- **sortUpIcon**: A React element to display as the sort up icon.
 - **onCellChange**: A function that is called when a cell value changes.
 
 ## Customizable Styles
@@ -108,6 +113,9 @@ The following CSS class names are used in the table and can be customized:
 - `.st-next-prev-btn`
 - `.st-page-btn`
 - `.st-page-btn.active`
+- `.editable-cell-input`
+- `.st-column-editor`
+- `.st-column-editor.open`
 
 For more detailed usage and examples, please refer to our [documentation](http://www.simple-table.com/docs).
 

package/dist/components/Animate.d.ts

@@ -1,7 +1,9 @@
+import { RefObject } from "react";
 interface AnimateProps {
     allowHorizontalAnimate?: boolean;
     children: any;
     pauseAnimation?: boolean;
+    tableRef: RefObject<HTMLDivElement>;
 }
-declare const Animate: ({ allowHorizontalAnimate, children, pauseAnimation, }: AnimateProps) => any;
+declare const Animate: ({ allowHorizontalAnimate, children, pauseAnimation, tableRef, }: AnimateProps) => any;
 export default Animate;

package/dist/components/SimpleTable/SimpleTable.d.ts

@@ -4,8 +4,10 @@ import "../../styles/simple-table.css";
 import CellValue from "../../types/CellValue";
 import CellChangeProps from "../../types/CellChangeProps";
 export interface SpreadsheetProps {
+    columnResizing?: boolean;
     defaultHeaders: HeaderObject[];
-    enableColumnResizing?: boolean;
+    draggable?: boolean;
+    editColumns?: boolean;
     height?: string;
     hideFooter?: boolean;
     nextIcon?: ReactNode;
@@ -15,7 +17,10 @@ export interface SpreadsheetProps {
         [key: string]: CellValue;
     }[];
     rowsPerPage?: number;
+    selectableCells?: boolean;
     shouldPaginate?: boolean;
+    sortDownIcon?: ReactNode;
+    sortUpIcon?: ReactNode;
 }
-declare const SimpleTable: ({ defaultHeaders, enableColumnResizing, height, hideFooter, nextIcon, onCellChange, prevIcon, rows, rowsPerPage, shouldPaginate, }: SpreadsheetProps) => import("react/jsx-runtime").JSX.Element;
+declare const SimpleTable: ({ columnResizing, defaultHeaders, draggable, editColumns, height, hideFooter, nextIcon, onCellChange, prevIcon, rows, rowsPerPage, selectableCells, shouldPaginate, sortDownIcon, sortUpIcon, }: SpreadsheetProps) => import("react/jsx-runtime").JSX.Element;
 export default SimpleTable;

package/dist/components/SimpleTable/TableBody.d.ts

@@ -1,3 +1,4 @@
+import { RefObject } from "react";
 import HeaderObject from "../../types/HeaderObject";
 import CellChangeProps from "../../types/CellChangeProps";
 interface TableBodyProps {
@@ -14,8 +15,9 @@ interface TableBodyProps {
         [key: string]: any;
     }[];
     onCellChange?: (props: CellChangeProps) => void;
+    tableRef: RefObject<HTMLDivElement>;
 }
-declare const TableBody: ({ getBorderClass, handleMouseDown, handleMouseOver, headers, isSelected, isTopLeftCell, isWidthDragging, onCellChange, shouldDisplayLastColumnCell, shouldPaginate, sortedRows, }: TableBodyProps & {
+declare const TableBody: ({ getBorderClass, handleMouseDown, handleMouseOver, headers, isSelected, isTopLeftCell, isWidthDragging, onCellChange, shouldDisplayLastColumnCell, shouldPaginate, sortedRows, tableRef, }: TableBodyProps & {
     shouldDisplayLastColumnCell: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export default TableBody;

package/dist/components/SimpleTable/TableColumnEditor.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import HeaderObject from "../../types/HeaderObject";
+type TableColumnEditorProps = {
+    editColumns: boolean;
+    headersRef: React.MutableRefObject<HeaderObject[]>;
+    onTableHeaderDragEnd: (newHeaders: HeaderObject[]) => void;
+};
+declare const TableColumnEditor: ({ editColumns, headersRef, onTableHeaderDragEnd, }: TableColumnEditorProps) => null;
+export default TableColumnEditor;

package/dist/components/SimpleTable/TableFooter.d.ts

@@ -6,7 +6,8 @@ interface TableFooterProps {
     onPageChange: (page: number) => void;
     prevIcon?: ReactNode;
     rowsPerPage: number;
+    shouldPaginate?: boolean;
     totalRows: number;
 }
-declare const TableFooter: ({ currentPage, hideFooter, nextIcon, onPageChange, prevIcon, rowsPerPage, totalRows, }: TableFooterProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const TableFooter: ({ currentPage, hideFooter, nextIcon, onPageChange, prevIcon, rowsPerPage, shouldPaginate, totalRows, }: TableFooterProps) => import("react/jsx-runtime").JSX.Element | null;
 export default TableFooter;

package/dist/components/SimpleTable/TableHeader.d.ts

@@ -1,14 +1,21 @@
-import { Dispatch, SetStateAction } from "react";
+import { Dispatch, ReactNode, RefObject, SetStateAction } from "react";
 import HeaderObject from "../../types/HeaderObject";
+import SortConfig from "../../types/SortConfig";
+import OnSortProps from "../../types/OnSortProps";
 interface TableHeaderProps {
-    enableColumnResizing: boolean;
+    draggable: boolean;
+    columnResizing: boolean;
     forceUpdate: () => void;
     headersRef: React.RefObject<HeaderObject[]>;
     isWidthDragging: boolean;
-    onSort: (columnIndex: number) => void;
+    onSort: OnSortProps;
     onTableHeaderDragEnd: (newHeaders: HeaderObject[]) => void;
     setIsWidthDragging: Dispatch<SetStateAction<boolean>>;
     shouldDisplayLastColumnCell: boolean;
+    sort: SortConfig | null;
+    sortDownIcon?: ReactNode;
+    sortUpIcon?: ReactNode;
+    tableRef: RefObject<HTMLDivElement>;
 }
-declare const TableHeader: ({ enableColumnResizing, forceUpdate, headersRef, isWidthDragging, onSort, onTableHeaderDragEnd, setIsWidthDragging, shouldDisplayLastColumnCell, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableHeader: ({ draggable, columnResizing, forceUpdate, headersRef, isWidthDragging, onSort, onTableHeaderDragEnd, setIsWidthDragging, shouldDisplayLastColumnCell, sort, sortDownIcon, sortUpIcon, tableRef, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default TableHeader;

package/dist/components/SimpleTable/TableHeaderCell.d.ts

@@ -1,15 +1,21 @@
-import { SetStateAction, Dispatch } from "react";
+import { SetStateAction, Dispatch, ReactNode } from "react";
 import HeaderObject from "../../types/HeaderObject";
+import SortConfig from "../../types/SortConfig";
+import OnSortProps from "../../types/OnSortProps";
 interface TableHeaderCellProps {
+    draggable: boolean;
     draggedHeaderRef: React.MutableRefObject<HeaderObject | null>;
-    enableColumnResizing: boolean;
+    columnResizing: boolean;
     forceUpdate: () => void;
     headersRef: React.RefObject<HeaderObject[]>;
     hoveredHeaderRef: React.MutableRefObject<HeaderObject | null>;
     index: number;
-    onSort: (columnIndex: number) => void;
+    onSort: OnSortProps;
     onTableHeaderDragEnd: (newHeaders: HeaderObject[]) => void;
     setIsWidthDragging: Dispatch<SetStateAction<boolean>>;
+    sort: SortConfig | null;
+    sortDownIcon?: ReactNode;
+    sortUpIcon?: ReactNode;
 }
 declare const TableHeaderCell: import("react").ForwardRefExoticComponent<TableHeaderCellProps & import("react").RefAttributes<HTMLDivElement>>;
 export default TableHeaderCell;

package/dist/hooks/useSelection.d.ts

@@ -4,9 +4,13 @@ interface Cell {
     row: number;
     col: number;
 }
-declare const useSelection: (rows: {
-    [key: string]: any;
-}[], headers: HeaderObject[]) => {
+declare const useSelection: ({ selectableCells, headers, rows, }: {
+    selectableCells: boolean;
+    headers: HeaderObject[];
+    rows: {
+        [key: string]: any;
+    }[];
+}) => {
     selectedCells: Cell[];
     handleMouseDown: (rowIndex: number, colIndex: number) => void;
     handleMouseOver: (rowIndex: number, colIndex: number) => void;

package/dist/icons/AngleDownIcon.d.ts

@@ -0,0 +1,4 @@
+declare const AngleDownIcon: ({ className }: {
+    className?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default AngleDownIcon;

package/dist/icons/AngleUpIcon.d.ts

@@ -0,0 +1,4 @@
+declare const AngleUpIcon: ({ className }: {
+    className?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default AngleUpIcon;

package/dist/index.js

@@ -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 i,useEffect as c,Children as l,useLayoutEffect as u,forwardRef as s,createRef as d,createContext as f,useContext as g,Fragment as h,useMemo as v,useReducer as p}from"react";var m=function(){return m=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},m.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 C=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},b=function(e){var n,r,i=e.allowHorizontalAnimate,l=void 0===i||i,s=e.children,d=e.pauseAnimation,f=o({}),g=f[0],h=f[1],v=o({}),p=v[0],m=v[1],w=(n=s,r=a(),c((function(){r.current=n}),[n]),r.current);return u((function(){var e=C(s);h(e)}),[s]),u((function(){var e=C(w);m(e)}),[w]),c((function(){d||Object.keys(p).length&&t.Children.forEach(s,(function(e){var n=e.ref.current,r=p[e.key],t=g[e.key];if(r&&t){var o=r.left-t.left,a=l?0:r.top-t.top,i=Math.abs(o),c=Math.abs(a);(i>10||c>10)&&requestAnimationFrame((function(){n.style.transform="translate(".concat(o,"px, ").concat(a,"px)"),n.style.transition="transform 0s",requestAnimationFrame((function(){n.style.transform="",n.style.transition="transform 500ms"}))}))}}))}),[l,g,s,d,p]),s},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 i=w([],r.current,!0),c=i.findIndex((function(e){var r;return e.accessor===(null===(r=n.current)||void 0===r?void 0:r.accessor)})),l=i.findIndex((function(n){return n.accessor===e.accessor}));if(void 0===c||void 0===l)return;var u=i.splice(c,1)[0];i.splice(l,0,u),JSON.stringify(i)!==JSON.stringify(r.current)&&setTimeout((function(){o(i),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=s((function(r,t){var i,c=r.draggedHeaderRef,l=r.enableColumnResizing,u=r.forceUpdate,s=r.headersRef,d=r.hoveredHeaderRef,f=r.index,g=r.onSort,h=r.onTableHeaderDragEnd,v=r.setIsWidthDragging,p=a({pageX:0,pageY:0}),w=o(!1),C=w[0],b=w[1],y=null===(i=s.current)||void 0===i?void 0:i[f],x=D({draggedHeaderRef:c,headersRef:s,hoveredHeaderRef:d,onTableHeaderDragEnd:h}),M=x.handleDragStart,I=x.handleDragOver,E=x.handleDragEnd,L=a(R((function(e){I(e)}),100)).current;return y?e("div",m({className:"st-header-cell ".concat(y===d.current?"st-hovered":""," ").concat(C?"st-dragging":""),ref:t,style:{width:y.width}},{children:[n("div",m({className:"st-header-label",draggable:!0,onClick:function(){return g(f)},onDragStart:function(){return function(e){b(!0),M(e)}(y)},onDragOver:function(e){var n=e.pageX,r=e.pageY;n===p.current.pageX&&r===p.current.pageY||(p.current={pageX:n,pageY:r},e.preventDefault(),L(y,e))},onDragEnd:function(){b(!1),E()}},{children:null==y?void 0:y.label})),l&&n("div",{className:"st-header-resize-handle",onMouseDown:function(e){v(!0),e.preventDefault();var n=e.clientX;if(y){var r=y.width,t=R((function(e){var t=Math.max(r+(e.clientX-n),10);y&&(s.current[f].width=t,u())}),10),o=function(){document.removeEventListener("mousemove",t),document.removeEventListener("mouseup",o),v(!1)};document.addEventListener("mousemove",t),document.addEventListener("mouseup",o)}}})]})):null})),M=s((function(e,r){return e.visible?n("div",{className:"st-cell",ref:r}):n("div",{ref:r})})),I=function(){return n("div",{className:"st-row-separator"})},E=function(t){var o,i=t.enableColumnResizing,c=t.forceUpdate,l=t.headersRef,u=t.isWidthDragging,s=t.onSort,f=t.onTableHeaderDragEnd,g=t.setIsWidthDragging,h=t.shouldDisplayLastColumnCell,v=a(null),p=a(null);return e(r,{children:[e(b,m({pauseAnimation:u},{children:[null===(o=l.current)||void 0===o?void 0:o.map((function(e,r){return n(x,{draggedHeaderRef:v,enableColumnResizing:i,forceUpdate:c,headersRef:l,hoveredHeaderRef:p,index:r,onSort:s,onTableHeaderDragEnd:f,ref:d(),setIsWidthDragging:g},e.accessor)})),n(M,{ref:d(),visible:h})]})),n(I,{})]})},L=function(r){var t=r.value,o=r.onBlur,a=r.onChange;return e("select",m({value:t.toString(),onBlur:o,onChange:a},{children:[n("option",m({value:"true"},{children:"True"})),n("option",m({value:"false"},{children:"False"}))]}))},S=function(e){var r=e.defaultValue,t=e.onBlur,o=e.onChange,i=a(null);return n("input",{className:"editable-cell-input",ref:i,autoFocus:!0,type:"text",defaultValue:r,onBlur:t,onChange:o})},T=function(e){var t=e.onChange,o=e.setIsEditing,a=e.value,i=function(e){var n=e.target.value;null==t||t(n)},c=function(){o(!1)};return n(r,{children:"string"==typeof a?n(S,{defaultValue:a,onBlur:c,onChange:i}):"boolean"==typeof a?n(L,{value:a,onBlur:c,onChange:i}):null})},N=f({rows:[],tableRows:[]}),O=s((function(e,r){var t=e.borderClass,a=e.colIndex,i=e.content,l=e.header,u=e.isSelected,s=e.isTopLeftCell,d=e.onCellChange,f=e.onMouseDown,h=e.onMouseOver,v=e.row,p=e.rowIndex,w=g(N),C=w.rows,b=w.tableRows,y=o(i),D=y[0],R=y[1],x=o(!1),M=x[0],I=x[1],E=p%2==0,L="st-cell ".concat(u?s?"st-cell-selected-first-cell ".concat(t):"st-cell-selected ".concat(t):""," ").concat(E?"st-cell-odd-row":"");c((function(){R(i)}),[i]),c((function(){if(void 0!==v.originalRowIndex&&"number"==typeof v.originalRowIndex){var e=C[v.originalRowIndex];e[l.accessor]!==D?R(e[l.accessor]):b[v.originalRowIndex][l.accessor]=D}}),[l.accessor,D,C,v.originalRowIndex,b]);return n("div",M?m({className:"st-cell-editing ".concat(E?"st-cell-odd-row":"")},{children:n(T,{onChange:function(e){R(e),null==d||d({accessor:l.accessor,newValue:e,newRowIndex:p,originalRowIndex:v.originalRowIndex,row:v})},setIsEditing:I,value:D})}):m({className:L,onDoubleClick:function(){return l.isEditable&&I(!0)},onMouseDown:function(){return f(p,a)},onMouseOver:function(){return h(p,a)},ref:r},{children:D}))})),H=function(t){var o=t.getBorderClass,a=t.handleMouseDown,i=t.handleMouseOver,c=t.headers,l=t.isSelected,u=t.isTopLeftCell,s=t.isWidthDragging,f=t.onCellChange,g=t.shouldDisplayLastColumnCell,v=t.shouldPaginate,p=t.sortedRows;return n(r,{children:p.map((function(r,t){return e(h,{children:[e(b,m({allowHorizontalAnimate:v,pauseAnimation:s},{children:[c.map((function(e,c){var s=r[e.accessor];return e.cellRenderer&&(s=e.cellRenderer(r)),n(O,{borderClass:o(t,c),colIndex:c,content:s,header:e,isSelected:l(t,c),isTopLeftCell:u(t,c),onCellChange:f,onMouseDown:function(){return a(t,c)},onMouseOver:function(){return i(t,c)},ref:d(),row:r,rowIndex:t},e.accessor)})),n(M,{ref:d(),visible:g})]})),t!==p.length-1&&n(I,{})]},r.originalRowIndex)}))})},k=function(r){var t=r.currentPage,o=r.hideFooter,a=r.nextIcon,i=r.onPageChange,c=r.prevIcon,l=r.rowsPerPage,u=r.totalRows,s=Math.ceil(u/l),d=function(e){e>=1&&e<=s&&i(e)};return o?null:e("div",m({className:"st-footer"},{children:[n("button",m({className:"st-next-prev-btn",onClick:function(){return d(t-1)},disabled:1===t},{children:c})),n("button",m({className:"st-next-prev-btn",onClick:function(){return d(t+1)},disabled:t===s},{children:a})),Array.from({length:s},(function(e,r){return n("button",m({onClick:function(){return d(r+1)},className:"st-page-btn ".concat(t===r+1?"active":"")},{children:r+1}),r)}))]}))},P=function(){return n("svg",m({className:"angle-icon",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"})}))},B=function(){return n("svg",m({className:"angle-icon",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"})}))},j=function(r){var t,l=r.defaultHeaders,u=r.enableColumnResizing,s=void 0===u||u,d=r.height,f=r.hideFooter,g=void 0!==f&&f,h=r.nextIcon,C=void 0===h?n(B,{}):h,b=r.onCellChange,y=r.prevIcon,D=void 0===y?n(P,{}):y,R=r.rows,x=r.rowsPerPage,M=void 0===x?10:x,I=r.shouldPaginate,L=void 0===I||I,S=v((function(){return R.map((function(e,n){return m(m({},e),{originalRowIndex:n})}))}),[R]),T=a(null),O=o(!1),j=O[0],z=O[1],A=a(l),W=o(null),F=W[0],U=W[1],X=o(1),V=X[0],Y=X[1],q=v((function(){if(!F)return S;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}}}(A.current,S,F).sortedData;return e}),[S,F]),J=p((function(e){return e+1}),0)[1],K=function(e,n){var r=o([]),t=r[0],l=r[1],u=a(!1),s=a(null),d=i((function(){var r=t.reduce((function(r,t){var o=t.row,a=t.col;return r[o]||(r[o]=[]),r[o][a]=e[o][n[a].accessor],r}),{}),o=Object.values(r).map((function(e){return Object.values(e).join("\t")})).join("\n");navigator.clipboard.writeText(o)}),[t,e,n]);c((function(){var e=function(e){(e.ctrlKey||e.metaKey)&&"c"===e.key&&d()};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[d,t]);var f=function(e,n){return t.some((function(r){return r.row===e&&r.col===n}))};return{selectedCells:t,handleMouseDown:function(e,n){u.current=!0,s.current={row:e,col:n},l([{row:e,col:n}])},handleMouseOver:function(e,n){if(u.current&&s.current){for(var r=[],t=Math.min(s.current.row,e),o=Math.max(s.current.row,e),a=Math.min(s.current.col,n),i=Math.max(s.current.col,n),c=t;c<=o;c++)for(var d=a;d<=i;d++)r.push({row:c,col:d});l(r)}},handleMouseUp:function(){u.current=!1,s.current=null},isSelected:f,getBorderClass:function(e,n){var r=[];return f(e-1,n)||r.push("st-selected-top-border"),f(e+1,n)||r.push("st-selected-bottom-border"),f(e,n-1)||r.push("st-selected-left-border"),f(e,n+1)||r.push("st-selected-right-border"),r.join(" ")},isTopLeftCell:function(e,n){return e===Math.min.apply(Math,t.map((function(e){return e.row})))&&n===Math.min.apply(Math,t.map((function(e){return e.col})))},setSelectedCells:l}}(q,A.current),G=K.handleMouseDown,Q=K.handleMouseOver,Z=K.handleMouseUp,$=K.isSelected,_=K.getBorderClass,ee=K.isTopLeftCell,ne=K.setSelectedCells,re=v((function(){return!!T.current&&A.current.reduce((function(e,n){return e+n.width}),0)<T.current.clientWidth}),[]),te=L?q.slice((V-1)*M,V*M):q;return c((function(){var e=function(e){e.target.closest(".st-cell")||ne([])};return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}}),[ne]),n(N.Provider,m({value:{rows:R,tableRows:S}},{children:e("div",m({ref:T,className:"st-wrapper",style:d?{height:d}:{}},{children:[e("div",m({className:"st-table",onMouseUp:Z,onMouseLeave:Z,style:{gridTemplateColumns:"".concat(null===(t=A.current)||void 0===t?void 0:t.map((function(e){return"".concat(e.width,"px")})).join(" ")," 1fr")}},{children:[n(E,{enableColumnResizing:s,forceUpdate:J,headersRef:A,isWidthDragging:j,onSort:function(e){U((function(n){return{key:A.current[e],direction:"ascending"===(null==n?void 0:n.direction)?"descending":"ascending"}}))},onTableHeaderDragEnd:function(e){A.current=e,J()},setIsWidthDragging:z,shouldDisplayLastColumnCell:re}),n(H,{getBorderClass:_,handleMouseDown:G,handleMouseOver:Q,headers:A.current,isSelected:$,isTopLeftCell:ee,isWidthDragging:j,onCellChange:b,shouldDisplayLastColumnCell:re,shouldPaginate:L,sortedRows:te})]})),L&&n(k,{currentPage:V,hideFooter:g,onPageChange:Y,rowsPerPage:M,totalRows:q.length,nextIcon:C,prevIcon:D})]}))}))};export{j as SimpleTable};
+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 g,Fragment as v,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,g=a(!1),v=o({}),h=v[0],m=v[1],p=o({}),w=p[0],C=p[1],D=(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(D);C(e);var n=f.current,r=function(){g.current=!0;var e=b(D);m(e),C(e)},t=function(){g.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)}}),[D,f]),i((function(){d||g.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},D=!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(!D&&(t.current=e,e.accessor!==(null===(a=n.current)||void 0===a?void 0:a.accessor)&&null!==n.current&&!D)){if(D=!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(){D=!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,g=r.hoveredHeaderRef,v=r.index,h=r.onSort,m=r.onTableHeaderDragEnd,w=r.setIsWidthDragging,b=r.sort,C=r.sortDownIcon,D=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[v],A=Boolean(null==L?void 0:L.isSortable),N="st-header-cell ".concat(L===g.current?"st-hovered":""," ").concat(E?"st-dragging":""," ").concat(A?"clickable":""," ").concat(l&&!A?"draggable":""),T=y({draggedHeaderRef:s,headersRef:f,hoveredHeaderRef:g,onTableHeaderDragEnd:m}),k=T.handleDragStart,S=T.handleDragOver,B=T.handleDragEnd,H=a(R((function(e){S(e)}),100)).current,O=function(e){e.isSortable&&h(v,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 O(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},H(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 O(L)}},{children:["ascending"===b.direction&&D&&D,"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[v].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,g=t.onTableHeaderDragEnd,v=t.setIsWidthDragging,h=t.shouldDisplayLastColumnCell,m=t.sort,w=t.sortDownIcon,b=t.sortUpIcon,D=t.tableRef,y=a(null),R=a(null);return e(r,{children:[e(C,p({pauseAnimation:u,tableRef:D},{children:[null===(o=s.current)||void 0===o?void 0:o.map((function(e,r){return n(x,{draggable:c,draggedHeaderRef:y,columnResizing:i,forceUpdate:l,headersRef:s,hoveredHeaderRef:R,index:r,onSort:f,onTableHeaderDragEnd:g,ref:d(),setIsWidthDragging:v,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,v=e.onMouseOver,h=e.row,m=e.rowIndex,w=g(T),b=w.rows,C=w.tableRows,D=o(c),y=D[0],R=D[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]!==y?R(e[l.accessor]):C[h.originalRowIndex][l.accessor]=y}}),[l.accessor,y,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:y})}):p({className:A,onDoubleClick:function(){return l.isEditable&&E(!0)},onMouseDown:function(){return f(m,a)},onMouseOver:function(){return v(m,a)},ref:r},{children:y}))})),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,g=t.shouldDisplayLastColumnCell,h=t.shouldPaginate,m=t.sortedRows,w=t.tableRef;return n(r,{children:m.map((function(r,t){return e(v,{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:g})]})),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=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",onClick:function(){return f(t-1)},disabled:1===t},{children:i})),n("button",p({className:"st-next-prev-btn",onClick:function(){return f(t+1)},disabled:t===d},{children:a})),Array.from({length:d},(function(e,r){return n("button",p({onClick:function(){return f(r+1)},className:"st-page-btn ".concat(t===r+1?"active":"")},{children:r+1}),r)}))]}))},H=function(){return n("svg",p({className:"angle-icon",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(){return n("svg",p({className:"angle-icon",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){return e.editColumns,e.headersRef,e.onTableHeaderDragEnd,null},j=function(r){var t=r.columnResizing,l=void 0!==t&&t,s=r.defaultHeaders,u=r.draggable,d=void 0!==u&&u,f=r.editColumns,g=void 0!==f&&f,v=r.height,b=r.hideFooter,C=void 0!==b&&b,D=r.nextIcon,y=void 0===D?n(O,{}):D,R=r.onCellChange,x=r.prevIcon,I=void 0===x?n(H,{}):x,E=r.rows,L=r.rowsPerPage,A=void 0===L?10:L,N=r.selectableCells,k=void 0!==N&&N,j=r.shouldPaginate,W=void 0!==j&&j,F=r.sortDownIcon,X=void 0===F?n(U,{className:"st-sort-icon"}):F,V=r.sortUpIcon,Y=void 0===V?n(P,{className:"st-sort-icon"}):V,Q=h((function(){return E.map((function(e,n){return p(p({},e),{originalRowIndex:n})}))}),[E]),q=a(null),J=o(!1),K=J[0],G=J[1],Z=a(s),$=o(null),_=$[0],ee=$[1],ne=o(1),re=ne[0],te=ne[1],oe=h((function(){if(!_)return Q;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}}}(Z.current,Q,_).sortedData;return e}),[Q,_]),ae=m((function(e){return e+1}),0)[1],ce=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),g=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&&g()};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[g,s]);var v=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:v,getBorderClass:function(e,n){var r=[];return v(e-1,n)||r.push("st-selected-top-border"),v(e+1,n)||r.push("st-selected-bottom-border"),v(e,n-1)||r.push("st-selected-left-border"),v(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:k,headers:Z.current,rows:oe}),ie=ce.handleMouseDown,le=ce.handleMouseOver,se=ce.handleMouseUp,ue=ce.isSelected,de=ce.getBorderClass,fe=ce.isTopLeftCell,ge=ce.setSelectedCells,ve=Z.current.filter((function(e){return!e.hide})),he=h((function(){return!!q.current&&ve.reduce((function(e,n){return e+n.width}),0)<q.current.clientWidth}),[ve]),me=W?oe.slice((re-1)*A,re*A):oe,pe=function(e){Z.current=e,ae()};return i((function(){var e=function(e){e.target.closest(".st-cell")||ge([])};return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}}),[ge]),n(T.Provider,p({value:{rows:E,tableRows:Q}},{children:e("div",p({ref:q,className:"st-wrapper",style:v?{height:v}:{}},{children:[e("div",p({className:"st-table",onMouseUp:se,onMouseLeave:se,style:{gridTemplateColumns:"".concat(null==ve?void 0:ve.map((function(e){return"".concat(e.width,"px")})).join(" ")," 1fr")}},{children:[n(M,{draggable:d,columnResizing:l,forceUpdate:ae,headersRef:Z,isWidthDragging:K,onSort:function(e,n){ee((function(r){return(null==r?void 0:r.key.accessor)!==n?{key:Z.current[e],direction:"ascending"}:"ascending"===(null==r?void 0:r.direction)?{key:Z.current[e],direction:"descending"}:null}))},onTableHeaderDragEnd:pe,setIsWidthDragging:G,shouldDisplayLastColumnCell:he,sort:_,sortDownIcon:X,sortUpIcon:Y,tableRef:q}),n(S,{getBorderClass:de,handleMouseDown:ie,handleMouseOver:le,headers:Z.current,isSelected:ue,isTopLeftCell:fe,isWidthDragging:K,onCellChange:R,shouldDisplayLastColumnCell:he,shouldPaginate:W,sortedRows:me,tableRef:q})]})),n(z,{editColumns:g,headersRef:Z,onTableHeaderDragEnd:pe}),n(B,{currentPage:re,hideFooter:C,nextIcon:y,onPageChange:te,prevIcon:I,rowsPerPage:A,shouldPaginate:W,totalRows:oe.length})]}))}))};export{j as SimpleTable};

package/dist/style.css

@@ -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);height:auto;max-height:100dvh;overflow:auto}.st-table{border-collapse:collapse;display:grid;table-layout:auto;white-space:nowrap;width:100%}.st-header-cell{background-color:#fff;font-weight:600;position:sticky;top:0;z-index:1}.st-cell,.st-header-cell{border:var(--st-border-width) solid #0000;color:var(--slate-800);cursor:pointer;overflow:hidden}.st-cell,.st-cell-editing,.st-header-cell{font-family:Nunito;height:100%;height:40px;position:relative;width:100%}.st-cell,.st-header-label{overflow:hidden;padding:var(--st-cell-padding);text-align:left;text-overflow:ellipsis;user-select:none;white-space:nowrap}.st-header-resize-handle{background-color:var(--st-resize-handle-color);border-radius:.25rem;bottom:0;cursor:col-resize;margin-bottom:.5rem;margin-top:.5rem;position:absolute;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{background-color:initial;border:none;border-radius:4px;color:var(--slate-600);cursor:pointer;justify-content:center;padding:4px;transition:background-color .3s ease}.st-next-prev-btn: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)}
+@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);height:auto;max-height:100dvh;overflow:auto;position:relative}.st-table{border-collapse:collapse;display:grid;position:relative;table-layout:auto;white-space:nowrap;width:100%}.st-header-cell{align-items:center;background-color:#fff;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{border:var(--st-border-width) solid #0000;color:var(--slate-800);overflow:hidden}.st-cell.clickable{cursor:pointer}.st-cell,.st-cell-editing,.st-header-cell{font-family:Nunito;height:100%;height:40px;position:relative;width:100%}.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-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;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{background-color:initial;border:none;border-radius:4px;color:var(--slate-600);cursor:pointer;justify-content:center;padding:4px;transition:background-color .3s ease}.st-next-prev-btn: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{align-items:center;background-color:var(--st-footer-background-color);border-top:var(--st-border-width) solid var(--st-border-color);display:flex;justify-content:end;left:0;padding:8px;position:sticky;top:0;writing-mode:vertical-rl}.st-column-editor.open{background-color:var(--slate-100)}

package/dist/types/HeaderObject.d.ts

@@ -1,11 +1,14 @@
 import { ReactNode } from "react";
 type HeaderObject = {
-    label: string;
     accessor: string;
-    width: number;
-    isEditable?: boolean;
     cellRenderer?: (row: {
         [key: string]: any;
     }) => ReactNode;
+    hide?: boolean;
+    isEditable?: boolean;
+    isSortable?: boolean;
+    label: string;
+    type?: "string" | "number" | "boolean" | "date" | "enum";
+    width: number;
 };
 export default HeaderObject;

package/dist/types/OnSortProps.d.ts

@@ -0,0 +1,2 @@
+type OnSortProps = (columnIndex: number, accessor: string) => void;
+export default OnSortProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-table-core",
-  "version": "0.2.9",
+  "version": "0.3.0",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",