simple-table-core 0.1.2 → 0.1.4

package/.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/preset-create-react-app",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/README.md

@@ -1,12 +1,80 @@
-# Simple React Table Project
+# Simple Table
 
-This project is a simple React table application created for fun
+Simple Table is a React grid package designed to provide a flexible and easy-to-use table component for your React applications. Visit our website at [www.simple-table.com](http://www.simple-table.com) for more information and documentation.
 
-## Available Scripts
+![Simple Table Example](assets/table-example.png)
 
-In the project directory, you can run:
+## Props
 
-### `npm start`
+The Simple Table component accepts the following props:
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+- **defaultHeaders**: An array of `HeaderObject` defining the table headers. Each `HeaderObject` includes:
+
+  - **label**: A string representing the display name of the column header.
+  - **accessor**: A string used to access the corresponding data in each row.
+  - **width**: A number specifying the width of the column.
+  - **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`.
+- **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`.
+- **shouldPaginate**: A boolean to enable or disable pagination. Default is `true`.
+
+## Customizable Styles
+
+All styles for the Simple Table are customizable and can be found in the `table.css` file. You can modify these styles to fit the design needs of your application.
+
+### CSS Variables
+
+You can override the following CSS variables to customize the appearance of the table:
+
+- `--st-border-radius`
+- `--st-table-border-color`
+- `--st-border-width`
+- `--st-resize-handle-color`
+- `--st-separator-border-color`
+- `--st-odd-row-background-color`
+- `--st-dragging-background-color`
+- `--st-selected-cell-background-color`
+- `--st-selected-first-cell-background-color`
+- `--st-border-top-color`
+- `--st-border-bottom-color`
+- `--st-border-left-color`
+- `--st-border-right-color`
+- `--st-border-top-white-color`
+- `--st-footer-background-color`
+
+### CSS Class Names
+
+The following CSS class names are used in the table and can be customized:
+
+- `.st-table-wrapper`
+- `.st-table`
+- `.st-table-header-cell`
+- `.st-table-cell`
+- `.st-table-header-label`
+- `.st-table-header-resize-handle`
+- `.st-table-row-separator`
+- `.st-table-cell-odd-row`
+- `.st-dragging`
+- `.st-table-cell-selected`
+- `.st-table-cell-selected-first`
+- `.border-top-blue`
+- `.border-bottom-blue`
+- `.border-left-blue`
+- `.border-right-blue`
+- `.border-top-white`
+- `.st-footer`
+- `.st-next-prev-btn`
+- `.st-page-btn`
+- `.st-page-btn.active`
+
+For more detailed usage and examples, please refer to our [documentation](http://www.simple-table.com/docs).
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

package/dist/index.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as r,Fragment as t}from"react/jsx-runtime";import o,{useState as n,useRef as a,useCallback as l,useEffect as s,Children as c,useLayoutEffect as i,forwardRef as d,createRef as u,Fragment as f,useReducer as b,useMemo as g}from"react";var v=function(){return v=Object.assign||function(e){for(var r,t=1,o=arguments.length;t<o;t++)for(var n in r=arguments[t])Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);return e},v.apply(this,arguments)};function h(e,r,t){if(t||2===arguments.length)for(var o,n=0,a=r.length;n<a;n++)!o&&n in r||(o||(o=Array.prototype.slice.call(r,0,n)),o[n]=r[n]);return e.concat(o||Array.prototype.slice.call(r))}"function"==typeof SuppressedError&&SuppressedError;var p=function(e){var r={};return c.forEach(e,(function(e){if(e.ref&&e.ref.current){var t=e.ref.current.getBoundingClientRect();r[e.key]=t}})),r},m=function(e){var r,t,l=e.allowHorizontalAnimate,c=void 0===l||l,d=e.children,u=e.pause,f=n({}),b=f[0],g=f[1],v=n({}),h=v[0],m=v[1],w=(r=d,t=a(),s((function(){t.current=r}),[r]),t.current);return i((function(){var e=p(d);g(e)}),[d]),i((function(){var e=p(w);m(e)}),[w]),s((function(){u||Object.keys(h).length&&o.Children.forEach(d,(function(e){var r=e.ref.current,t=h[e.key],o=b[e.key],n=t.left-o.left,a=c?0:t.top-o.top,l=Math.abs(n),s=Math.abs(a);(l>10||s>10)&&requestAnimationFrame((function(){r.style.transform="translate(".concat(n,"px, ").concat(a,"px)"),r.style.transition="transform 0s",requestAnimationFrame((function(){r.style.transform="",r.style.transition="transform 500ms"}))}))}))}),[b,h,d,u,c]),d},w=!1,y=function(e){var r=e.draggedHeaderRef,t=e.headersRef,o=e.hoveredHeaderRef,n=e.onTableHeaderDragEnd;return{handleDragStart:function(e){r.current=e},handleDragOver:function(e){!function(e){var a;if(!w&&(o.current=e,e.accessor!==(null===(a=r.current)||void 0===a?void 0:a.accessor)&&null!==r.current&&!w)){if(w=!0,!t.current)return;var l=h([],t.current,!0),s=l.findIndex((function(e){var t;return e.accessor===(null===(t=r.current)||void 0===t?void 0:t.accessor)})),c=l.findIndex((function(r){return r.accessor===e.accessor}));if(void 0===s||void 0===c)return;var i=l.splice(s,1)[0];l.splice(c,0,i),JSON.stringify(l)!==JSON.stringify(t.current)&&setTimeout((function(){n(l),setTimeout((function(){w=!1}),500)}),50)}}(e)},handleDragEnd:function(){r.current=null,o.current=null}}},x=function(e,r){var t=!0,o=!0;return function(){for(var n=[],a=0;a<arguments.length;a++)n[a]=arguments[a];if(t)return t=!1,void setTimeout((function(){return o=!1}),r);o||(e.apply(this,n),o=!0,setTimeout((function(){return o=!1}),r))}},C=d((function(t,o){var l,s=t.draggedHeaderRef,c=t.enableColumnResizing,i=t.forceUpdate,d=t.headersRef,u=t.hoveredHeaderRef,f=t.index,b=t.onSort,g=t.onTableHeaderDragEnd,h=t.setIsWidthDragging,p=a({pageX:0,pageY:0}),m=n(!1),w=m[0],C=m[1],k=null===(l=d.current)||void 0===l?void 0:l[f],D=y({draggedHeaderRef:s,headersRef:d,hoveredHeaderRef:u,onTableHeaderDragEnd:g}),M=D.handleDragStart,R=D.handleDragOver,L=D.handleDragEnd,E=a(x((function(e){R(e)}),100)).current;return k?e("div",v({className:"st-table-header-cell ".concat(k===u.current?"st-hovered":""," ").concat(w?"st-dragging":""),ref:o,style:{width:k.width}},{children:[r("div",v({className:"st-table-header-label",draggable:!0,onClick:function(){return b(f)},onDragStart:function(){return function(e){C(!0),M(e)}(k)},onDragOver:function(e){var r=e.pageX,t=e.pageY;r===p.current.pageX&&t===p.current.pageY||(p.current={pageX:r,pageY:t},e.preventDefault(),E(k,e))},onDragEnd:function(){C(!1),L()}},{children:null==k?void 0:k.label})),c&&r("div",{className:"st-table-header-resize-handle",onMouseDown:function(e){h(!0),e.preventDefault();var r=e.clientX;if(k){var t=k.width,o=x((function(e){var o=Math.max(t+(e.clientX-r),10);k&&(d.current[f].width=o,i())}),10),n=function(){document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",n),h(!1)};document.addEventListener("mousemove",o),document.addEventListener("mouseup",n)}}})]})):null})),k=d((function(e,t){return e.visible?r("div",{className:"st-table-cell ".concat(e.isLastRow?"st-table-cell-last-row":""),ref:t}):r("div",{ref:t})})),D=function(){return r("div",{className:"st-table-row-separator"})},M=function(o){var n,l=o.enableColumnResizing,s=o.forceUpdate,c=o.headersRef,i=o.isWidthDragging,d=o.onSort,f=o.onTableHeaderDragEnd,b=o.setIsWidthDragging,g=o.shouldDisplayLastColumnCell,h=a(null),p=a(null);return e(t,{children:[e(m,v({pause:i},{children:[null===(n=c.current)||void 0===n?void 0:n.map((function(e,t){return r(C,{draggedHeaderRef:h,enableColumnResizing:l,forceUpdate:s,headersRef:c,hoveredHeaderRef:p,index:t,onSort:d,onTableHeaderDragEnd:f,ref:u(),setIsWidthDragging:b},e.accessor)})),r(k,{ref:u(),visible:g})]})),r(D,{})]})},R=d((function(e,t){var o=e.rowIndex,n=e.colIndex,a=e.content,l=e.isSelected,s=e.isTopLeftCell,c=e.borderClass,i=e.onMouseDown,d=e.onMouseOver,u=e.isLastRow,f=o%2==0;return r("div",v({onMouseDown:function(){return i(o,n)},onMouseOver:function(){return d(o,n)},ref:t,className:"st-table-cell ".concat(l?s?"st-table-cell-selected-first-cell ".concat(c):"st-table-cell-selected ".concat(c):""," ").concat(u?"st-table-cell-last-row":"","\n        ").concat(f?"st-table-cell-odd-row":"")},{children:a}))})),L=function(o){var n=o.getBorderClass,a=o.handleMouseDown,l=o.handleMouseOver,s=o.headers,c=o.isSelected,i=o.isTopLeftCell,d=o.isWidthDragging,b=o.shouldDisplayLastColumnCell,g=o.shouldPaginate,h=o.sortedRows;return r(t,{children:h.map((function(t,o){return e(f,{children:[e(m,v({allowHorizontalAnimate:g,pause:d},{children:[s.map((function(e,s){var d=t[e.accessor];return e.cellRenderer&&(d=e.cellRenderer(t)),r(R,{borderClass:n(o,s),colIndex:s,content:d,isSelected:c(o,s),isTopLeftCell:i(o,s),onMouseDown:function(){return a(o,s)},onMouseOver:function(){return l(o,s)},ref:u(),rowIndex:o,isLastRow:o===h.length-1},e.accessor)})),r(k,{isLastRow:o===h.length-1,ref:u(),visible:b})]})),o!==h.length-1&&r(D,{})]},t.id)}))})},E=function(t){var o=t.currentPage,n=t.hideFooter,a=t.nextIcon,l=t.onPageChange,s=t.prevIcon,c=t.rowsPerPage,i=t.totalRows,d=Math.ceil(i/c),u=function(e){e>=1&&e<=d&&l(e)};return n?null:e("div",v({className:"st-footer"},{children:[r("button",v({className:"st-next-prev-btn",onClick:function(){return u(o-1)},disabled:1===o},{children:s})),r("button",v({className:"st-next-prev-btn",onClick:function(){return u(o+1)},disabled:o===d},{children:a})),Array.from({length:d},(function(e,t){return r("button",v({onClick:function(){return u(t+1)},className:"st-page-btn ".concat(o===t+1?"active":"")},{children:t+1}),t)}))]}))},S=function(){return r("svg",v({className:"angle-icon",viewBox:"0 0 24 24",width:"24",height:"24",xmlns:"http://www.w3.org/2000/svg"},{children:r("path",{d:"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"})}))},T=function(){return r("svg",v({className:"angle-icon",viewBox:"0 0 24 24",width:"24",height:"24",xmlns:"http://www.w3.org/2000/svg"},{children:r("path",{d:"M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z"})}))};!function(e,r){void 0===r&&(r={});var t=r.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===t&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}('@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-table-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}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Nunito}.st-table-wrapper{border:var(--st-border-width) solid var(--st-table-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-table-header-cell{background-color:#fff;position:sticky;top:0}.st-table-cell,.st-table-header-cell{border:var(--st-border-width) solid #0000;color:var(--slate-800);cursor:pointer;overflow:hidden}.st-table-cell,.st-table-header-label{overflow:hidden;padding:8px;text-align:left;text-overflow:ellipsis;user-select:none;white-space:nowrap}.st-table-header-resize-handle{background-color:var(--st-resize-handle-color);border-radius:.25rem;bottom:0;cursor:col-resize;margin-bottom:.25rem;margin-top:.25rem;position:absolute;right:0;top:0;width:5px}.st-table-row-separator{background-color:var(--st-separator-border-color);grid-column:1/-1;height:1px}.st-table-cell-odd-row{background-color:var(--st-odd-row-background-color)}.st-dragging{background-color:var(--st-dragging-background-color)}.st-table-cell-selected{background-color:var(--st-selected-cell-background-color)}.st-table-cell-selected-first{background-color:var(--st-selected-first-cell-background-color)}.border-top-blue{border-top:var(--st-border-width) solid var(--st-border-top-color)}.border-bottom-blue{border-bottom:var(--st-border-width) solid var(--st-border-bottom-color)}.border-left-blue{border-left:var(--st-border-width) solid var(--st-border-left-color)}.border-right-blue{border-right:var(--st-border-width) solid var(--st-border-right-color)}.border-top-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-table-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}');var N=function(t){var o,c=t.defaultHeaders,i=t.enableColumnResizing,d=void 0===i||i,u=t.height,f=t.hideFooter,p=void 0!==f&&f,m=t.nextIcon,w=void 0===m?r(T,{}):m,y=t.prevIcon,x=void 0===y?r(S,{}):y,C=t.rows,k=t.rowsPerPage,D=void 0===k?10:k,R=t.shouldPaginate,N=void 0===R||R,O=n(!1),H=O[0],I=O[1],z=a(c),P=n(C),j=P[0],B=P[1],W=n(null),A=W[0],U=W[1],F=b((function(e){return e+1}),0)[1],X=n(1),Y=X[0],q=X[1],J=a(null),K=g((function(){return!!J.current&&z.current.reduce((function(e,r){return e+r.width}),0)<J.current.clientWidth}),[]),G=function(e,r){var t=n([]),o=t[0],c=t[1],i=a(!1),d=a(null),u=l((function(){var t=o.reduce((function(t,o){var n=o.row,a=o.col;return t[n]||(t[n]=[]),t[n][a]=e[n][r[a].accessor],t}),{}),n=Object.values(t).map((function(e){return Object.values(e).join("\t")})).join("\n");navigator.clipboard.writeText(n)}),[o,e,r]);s((function(){var e=function(e){(e.ctrlKey||e.metaKey)&&"c"===e.key&&u()};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[u,o]);var f=function(e,r){return o.some((function(t){return t.row===e&&t.col===r}))};return{selectedCells:o,handleMouseDown:function(e,r){i.current=!0,d.current={row:e,col:r},c([{row:e,col:r}])},handleMouseOver:function(e,r){if(i.current&&d.current){for(var t=[],o=Math.min(d.current.row,e),n=Math.max(d.current.row,e),a=Math.min(d.current.col,r),l=Math.max(d.current.col,r),s=o;s<=n;s++)for(var u=a;u<=l;u++)t.push({row:s,col:u});c(t)}},handleMouseUp:function(){i.current=!1,d.current=null},isSelected:f,getBorderClass:function(e,r){var t=[];return f(e-1,r)||t.push("border-top-blue"),f(e+1,r)||t.push("border-bottom-blue"),f(e,r-1)||t.push("border-left-blue"),f(e,r+1)||t.push("border-right-blue"),t.join(" ")},isTopLeftCell:function(e,r){return e===Math.min.apply(Math,o.map((function(e){return e.row})))&&r===Math.min.apply(Math,o.map((function(e){return e.col})))},setSelectedCells:c}}(j,z.current),Q=G.handleMouseDown,V=G.handleMouseOver,Z=G.handleMouseUp,$=G.isSelected,_=G.getBorderClass,ee=G.isTopLeftCell,re=G.setSelectedCells;s((function(){var e=function(e){e.target.closest(".st-table-cell")||re([])};return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}}),[re]);var te=N?j.slice((Y-1)*D,Y*D):j;return e("div",v({ref:J,className:"st-table-wrapper",style:u?{height:u}:{}},{children:[e("div",v({className:"st-table",onMouseUp:Z,onMouseLeave:Z,style:{gridTemplateColumns:"".concat(null===(o=z.current)||void 0===o?void 0:o.map((function(e){return"".concat(e.width,"px")})).join(" ")," 1fr")}},{children:[r(M,{enableColumnResizing:d,forceUpdate:F,headersRef:z,isWidthDragging:H,onSort:function(e){var r=function(e,r,t,o){var n=e[o],a="ascending";return t&&t.key.accessor===n.accessor&&"ascending"===t.direction&&(a="descending"),{sortedData:h([],r,!0).sort((function(e,r){return e[n.accessor]<r[n.accessor]?"ascending"===a?-1:1:e[n.accessor]>r[n.accessor]?"ascending"===a?1:-1:0})),newSortConfig:{key:n,direction:a}}}(z.current,j,A,e),t=r.sortedData,o=r.newSortConfig;B(t),U(o)},onTableHeaderDragEnd:function(e){z.current=e,F()},setIsWidthDragging:I,shouldDisplayLastColumnCell:K}),r(L,{getBorderClass:_,handleMouseDown:Q,handleMouseOver:V,headers:z.current,isSelected:$,isTopLeftCell:ee,isWidthDragging:H,shouldDisplayLastColumnCell:K,shouldPaginate:N,sortedRows:te})]})),N&&r(E,{currentPage:Y,hideFooter:p,onPageChange:q,rowsPerPage:D,totalRows:j.length,nextIcon:w,prevIcon:x})]}))};export{N as SimpleTable};

package/package.json

@@ -1,27 +1,47 @@
 {
   "name": "simple-table-core",
-  "version": "0.1.2",
+  "version": "0.1.4",
+  "main": "dist/index.js",
   "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^18.3.1"
   },
   "devDependencies": {
+    "@babel/preset-react": "^7.25.7",
+    "@chromatic-com/storybook": "^1.9.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^12.1.0",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/addon-onboarding": "^8.3.5",
+    "@storybook/blocks": "^8.3.5",
+    "@storybook/preset-create-react-app": "^8.3.5",
+    "@storybook/react": "^8.3.5",
+    "@storybook/react-webpack5": "^8.3.5",
+    "@storybook/test": "^8.3.5",
     "@types/node": "^16.18.111",
     "@types/react": "^18.3.9",
-    "@types/react-dom": "^18.3.0",
-    "react-scripts": "5.0.1",
-    "typescript": "^4.9.5"
+    "eslint-plugin-storybook": "^0.9.0",
+    "prop-types": "^15.8.1",
+    "rollup": "^2.79.2",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "storybook": "^8.3.5",
+    "typescript": "^4.9.5",
+    "webpack": "^5.95.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "build": "rollup -c",
+    "start": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "eslintConfig": {
     "extends": [
       "react-app",
-      "react-app/jest"
+      "react-app/jest",
+      "plugin:storybook/recommended"
     ]
   },
   "browserslist": {

package/rollup.config.js

@@ -0,0 +1,27 @@
+import babel from "@rollup/plugin-babel";
+import resolve from "@rollup/plugin-node-resolve";
+import postcss from "rollup-plugin-postcss";
+import typescript from "@rollup/plugin-typescript";
+import { terser } from "rollup-plugin-terser";
+
+export default {
+  input: "src/index.tsx",
+  output: {
+    file: "dist/index.js",
+    format: "esm",
+  },
+  plugins: [
+    postcss({
+      plugins: [],
+      minimize: true,
+    }),
+    babel({
+      exclude: "node_modules/**",
+      presets: ["@babel/preset-react"],
+    }),
+    resolve(),
+    typescript(),
+    terser(),
+  ],
+  external: ["react", "react/jsx-runtime"],
+};

package/src/components/Animate.tsx

@@ -3,11 +3,16 @@ import usePrevious from "../hooks/usePrevious";
 import calculateBoundingBoxes from "../helpers/calculateBoundingBoxes";
 
 interface AnimateProps {
+  allowHorizontalAnimate?: boolean;
   children: any;
   pause?: boolean;
 }
 
-const Animate = ({ children, pause }: AnimateProps) => {
+const Animate = ({
+  allowHorizontalAnimate = true,
+  children,
+  pause,
+}: AnimateProps) => {
   const [boundingBox, setBoundingBox] = useState<any>({});
   const [prevBoundingBox, setPrevBoundingBox] = useState<any>({});
   const prevChildren = usePrevious(children);
@@ -33,9 +38,14 @@ const Animate = ({ children, pause }: AnimateProps) => {
         const lastBox = boundingBox[child.key];
 
         const changeInX = firstBox.left - lastBox.left;
-        const changeInY = firstBox.top - lastBox.top;
+        const changeInY = !allowHorizontalAnimate
+          ? firstBox.top - lastBox.top
+          : 0;
 
-        if (changeInX || changeInY) {
+        const absoluteChangeInX = Math.abs(changeInX);
+        const absoluteChangeInY = Math.abs(changeInY);
+
+        if (absoluteChangeInX > 10 || absoluteChangeInY > 10) {
           requestAnimationFrame(() => {
             // Before the DOM paints, invert child to old position
             domNode.style.transform = `translate(${changeInX}px, ${changeInY}px)`;
@@ -51,7 +61,7 @@ const Animate = ({ children, pause }: AnimateProps) => {
         }
       });
     }
-  }, [boundingBox, prevBoundingBox, children, pause]);
+  }, [boundingBox, prevBoundingBox, children, pause, allowHorizontalAnimate]);
 
   return children;
 };

package/src/components/SimpleTable/SimpleTable.tsx

@@ -1,25 +1,65 @@
-import { useState, createRef, useRef, useReducer } from "react";
+import {
+  useState,
+  useRef,
+  useEffect,
+  useReducer,
+  ReactNode,
+  useMemo,
+} from "react";
 import useSelection from "../../hooks/useSelection";
 import TableHeader from "./TableHeader";
 import { onSort } from "../../utils/sortUtils";
-import Animate from "../Animate";
-import TableRow from "./TableBody";
-import HeaderObject from "../../types/HeaderObject";
 import TableBody from "./TableBody";
+import HeaderObject from "../../types/HeaderObject";
+import TableFooter from "./TableFooter";
+import AngleLeftIcon from "../../icons/AngleLeftIcon";
+import AngleRightIcon from "../../icons/AngleRightIcon";
+import "../../styles/simple-table.css";
 
 interface SpreadsheetProps {
   defaultHeaders: HeaderObject[];
-  rows: { [key: string]: any }[];
+  enableColumnResizing?: boolean;
+  height?: string;
+  hideFooter?: boolean;
+  nextIcon?: ReactNode;
+  prevIcon?: ReactNode;
+  rows: { [key: string]: string | number | boolean | undefined | null }[];
+  rowsPerPage?: number;
+  shouldPaginate?: boolean;
 }
 
-const SimpleTable = ({ defaultHeaders, rows }: SpreadsheetProps) => {
+const SimpleTable = ({
+  defaultHeaders,
+  enableColumnResizing = true,
+  height,
+  hideFooter = false,
+  nextIcon = <AngleRightIcon />,
+  prevIcon = <AngleLeftIcon />,
+  rows,
+  rowsPerPage = 10,
+  shouldPaginate = true,
+}: SpreadsheetProps) => {
   const [isWidthDragging, setIsWidthDragging] = useState(false);
-  const [headers, setHeaders] = useState(defaultHeaders);
+  const headersRef = useRef(defaultHeaders);
   const [sortedRows, setSortedRows] = useState(rows);
   const [sortConfig, setSortConfig] = useState<{
     key: HeaderObject;
     direction: string;
   } | null>(null);
+  const [, forceUpdate] = useReducer((x) => x + 1, 0);
+
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const tableRef = useRef<HTMLDivElement>(null);
+
+  const shouldDisplayLastColumnCell = useMemo(() => {
+    if (!tableRef.current) return false;
+    const totalColumnWidth = headersRef.current.reduce(
+      (acc, header) => acc + header.width,
+      0
+    );
+    return totalColumnWidth < tableRef.current.clientWidth;
+  }, []);
 
   const {
     handleMouseDown,
@@ -28,11 +68,12 @@ const SimpleTable = ({ defaultHeaders, rows }: SpreadsheetProps) => {
     isSelected,
     getBorderClass,
     isTopLeftCell,
-  } = useSelection(sortedRows, headers);
+    setSelectedCells,
+  } = useSelection(sortedRows, headersRef.current);
 
   const handleSort = (columnIndex: number) => {
     const { sortedData, newSortConfig } = onSort(
-      headers,
+      headersRef.current,
       sortedRows,
       sortConfig,
       columnIndex
@@ -40,41 +81,83 @@ const SimpleTable = ({ defaultHeaders, rows }: SpreadsheetProps) => {
     setSortedRows(sortedData);
     setSortConfig(newSortConfig);
   };
+
   const onTableHeaderDragEnd = (newHeaders: HeaderObject[]) => {
-    setHeaders(newHeaders);
+    headersRef.current = newHeaders;
+    forceUpdate();
   };
 
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      if (!target.closest(".st-table-cell")) {
+        setSelectedCells([]);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [setSelectedCells]);
+
+  const currentRows = shouldPaginate
+    ? sortedRows.slice(
+        (currentPage - 1) * rowsPerPage,
+        currentPage * rowsPerPage
+      )
+    : sortedRows;
+
   return (
-    <div className="st-table-wrapper">
+    <div
+      ref={tableRef}
+      className="st-table-wrapper"
+      style={height ? { height } : {}}
+    >
       <div
         className="st-table"
         onMouseUp={handleMouseUp}
         onMouseLeave={handleMouseUp}
         style={{
-          gridTemplateColumns: headers
+          gridTemplateColumns: `${headersRef.current
             ?.map((header) => `${header.width}px`)
-            .join(" "),
+            .join(" ")} 1fr`,
         }}
       >
         <TableHeader
-          headers={headers}
+          enableColumnResizing={enableColumnResizing}
+          forceUpdate={forceUpdate}
+          headersRef={headersRef}
+          isWidthDragging={isWidthDragging}
           onSort={handleSort}
           onTableHeaderDragEnd={onTableHeaderDragEnd}
-          setHeaders={setHeaders}
           setIsWidthDragging={setIsWidthDragging}
-          isWidthDragging={isWidthDragging}
+          shouldDisplayLastColumnCell={shouldDisplayLastColumnCell}
         />
         <TableBody
           getBorderClass={getBorderClass}
           handleMouseDown={handleMouseDown}
           handleMouseOver={handleMouseOver}
-          headers={headers}
+          headers={headersRef.current}
           isSelected={isSelected}
           isTopLeftCell={isTopLeftCell}
-          sortedRows={sortedRows}
           isWidthDragging={isWidthDragging}
+          shouldDisplayLastColumnCell={shouldDisplayLastColumnCell}
+          shouldPaginate={shouldPaginate}
+          sortedRows={currentRows}
         />
       </div>
+      {shouldPaginate && (
+        <TableFooter
+          currentPage={currentPage}
+          hideFooter={hideFooter}
+          onPageChange={setCurrentPage}
+          rowsPerPage={rowsPerPage}
+          totalRows={sortedRows.length}
+          nextIcon={nextIcon}
+          prevIcon={prevIcon}
+        />
+      )}
     </div>
   );
 };

package/src/components/SimpleTable/TableBody.tsx

@@ -1,51 +1,79 @@
-import { createRef, forwardRef, LegacyRef } from "react";
+import { createRef, Fragment } from "react";
 import TableCell from "./TableCell";
 import Animate from "../Animate";
 import HeaderObject from "../../types/HeaderObject";
+import TableLastColumnCell from "./TableLastColumnCell";
+import TableRowSeparator from "./TableRowSeparator";
 
-interface TableRowProps {
-  headers: HeaderObject[];
-  isSelected: (rowIndex: number, columnIndex: number) => boolean;
-  isTopLeftCell: (rowIndex: number, columnIndex: number) => boolean;
+interface TableBodyProps {
   getBorderClass: (rowIndex: number, columnIndex: number) => string;
   handleMouseDown: (rowIndex: number, columnIndex: number) => void;
   handleMouseOver: (rowIndex: number, columnIndex: number) => void;
-  sortedRows: { [key: string]: any }[];
+  headers: HeaderObject[];
+  isSelected: (rowIndex: number, columnIndex: number) => boolean;
+  isTopLeftCell: (rowIndex: number, columnIndex: number) => boolean;
   isWidthDragging: boolean;
+  shouldDisplayLastColumnCell: boolean;
+  shouldPaginate: boolean;
+  sortedRows: { [key: string]: any }[];
 }
 
-const TableRow = ({
-  headers,
-  isSelected,
-  isTopLeftCell,
+const TableBody = ({
   getBorderClass,
   handleMouseDown,
   handleMouseOver,
-  sortedRows,
+  headers,
+  isSelected,
+  isTopLeftCell,
   isWidthDragging,
-}: TableRowProps) => {
+  shouldDisplayLastColumnCell,
+  shouldPaginate,
+  sortedRows,
+}: TableBodyProps & { shouldDisplayLastColumnCell: boolean }) => {
   return (
     <>
-      {sortedRows.map((row, rowIndex) => (
-        <Animate key={row.id} pause={isWidthDragging}>
-          {headers.map((header, columnIndex) => (
-            <TableCell
-              borderClass={getBorderClass(rowIndex, columnIndex)}
-              colIndex={columnIndex}
-              content={row[header.accessor]}
-              isSelected={isSelected(rowIndex, columnIndex)}
-              isTopLeftCell={isTopLeftCell(rowIndex, columnIndex)}
-              key={header.accessor}
-              onMouseDown={() => handleMouseDown(rowIndex, columnIndex)}
-              onMouseOver={() => handleMouseOver(rowIndex, columnIndex)}
-              ref={createRef()}
-              rowIndex={rowIndex}
-            />
-          ))}
-        </Animate>
-      ))}
+      {sortedRows.map((row, rowIndex) => {
+        return (
+          <Fragment key={row.id}>
+            <Animate
+              allowHorizontalAnimate={shouldPaginate}
+              pause={isWidthDragging}
+            >
+              {headers.map((header, columnIndex) => {
+                let content = row[header.accessor];
+
+                if (header.cellRenderer) {
+                  content = header.cellRenderer(row);
+                }
+
+                return (
+                  <TableCell
+                    borderClass={getBorderClass(rowIndex, columnIndex)}
+                    colIndex={columnIndex}
+                    content={content}
+                    isSelected={isSelected(rowIndex, columnIndex)}
+                    isTopLeftCell={isTopLeftCell(rowIndex, columnIndex)}
+                    key={header.accessor}
+                    onMouseDown={() => handleMouseDown(rowIndex, columnIndex)}
+                    onMouseOver={() => handleMouseOver(rowIndex, columnIndex)}
+                    ref={createRef()}
+                    rowIndex={rowIndex}
+                    isLastRow={rowIndex === sortedRows.length - 1}
+                  />
+                );
+              })}
+              <TableLastColumnCell
+                isLastRow={rowIndex === sortedRows.length - 1}
+                ref={createRef()}
+                visible={shouldDisplayLastColumnCell}
+              />
+            </Animate>
+            {rowIndex !== sortedRows.length - 1 && <TableRowSeparator />}
+          </Fragment>
+        );
+      })}
     </>
   );
 };
 
-export default TableRow;
+export default TableBody;

package/src/components/SimpleTable/TableCell.tsx

@@ -9,6 +9,7 @@ interface TableCellProps {
   borderClass: string;
   onMouseDown: (rowIndex: number, colIndex: number) => void;
   onMouseOver: (rowIndex: number, colIndex: number) => void;
+  isLastRow: boolean;
 }
 
 const TableCell = forwardRef(
@@ -22,26 +23,26 @@ const TableCell = forwardRef(
       borderClass,
       onMouseDown,
       onMouseOver,
+      isLastRow,
     }: TableCellProps,
     ref: LegacyRef<HTMLTableCellElement>
   ) => {
+    const isOddRow = rowIndex % 2 === 0;
     return (
       <div
         onMouseDown={() => onMouseDown(rowIndex, colIndex)}
         onMouseOver={() => onMouseOver(rowIndex, colIndex)}
         ref={ref}
+        className={`st-table-cell ${
+          isSelected
+            ? isTopLeftCell
+              ? `st-table-cell-selected-first-cell ${borderClass}`
+              : `st-table-cell-selected ${borderClass}`
+            : ""
+        } ${isLastRow ? "st-table-cell-last-row" : ""}
+        ${isOddRow ? "st-table-cell-odd-row" : ""}`}
       >
-        <div
-          className={`st-table-cell ${
-            isSelected
-              ? isTopLeftCell
-                ? `st-table-cell-selected-first-cell ${borderClass}`
-                : `st-table-cell-selected ${borderClass}`
-              : ""
-          }`}
-        >
-          {content}
-        </div>
+        {content}
       </div>
     );
   }