vyas-react-table/dist/index.js

A simple yet highly configurable table component

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("react/jsx-runtime");!function(e,t){void 0===t&&(t={});var a=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===a&&r.firstChild?r.insertBefore(s,r.firstChild):r.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("*{--vyas-react-table-grey-1:#d1d1d1;--vyas-react-table-grey-2:#f3f3f3;--vyas-react-table-grey-3:#979797;--vyas-react-table-bg-color:#fff;--vyas-thumb-scroll-color:#888;--container-padding:5px;--min-column-width:170px;--cell-border-radius:2px;--cell-padding:8px}.table-header{align-items:center;color:var(--vyas-react-table-grey-3);display:flex;flex-direction:row;justify-content:space-between;padding:0 var(--cell-padding)}.table-name{color:#000;font-size:24px;font-weight:700}.button{background-color:var(--vyas-react-table-bg-color);border:1px solid #000;border-radius:16px;cursor:pointer;margin-left:5px;padding:4px 8px;transition:all .3s ease-in-out}.button:hover{background-color:#000;color:var(--vyas-react-table-bg-color)}.container{background-color:var(--vyas-react-table-bg-color);border-radius:var(--cell-border-radius);box-shadow:0 2px 8px 0 rgba(99,99,99,.2);display:inline-block;padding:var(--container-padding)}.statsContainer{align-items:center;box-sizing:border-box;display:flex;flex-direction:row;justify-content:space-between;overflow-x:scroll;padding:var(--cell-padding);width:100%}.statsContainer::-webkit-scrollbar{height:0}.stats-div{align-items:center;display:flex;flex-direction:row;justify-content:flex-start}.stats-div>div{margin-right:16px}.stats-input{border:1px solid var(--vyas-react-table-grey-1);border-radius:var(--cell-border-radius);margin:0 5px;outline:none;padding:5px;transition:all .3s ease-in-out;width:42px}.stats-input:focus{box-shadow:0 0 1px #000}.table{border-collapse:separate}.filterContainer{cursor:default;text-align:left}.vyasInput{background-color:var(--vyas-react-table-bg-color);border:1px solid var(--vyas-react-table-grey-1);border-radius:var(--cell-border-radius);box-sizing:border-box;font-size:16px;outline:none;padding:var(--cell-padding);transition:all .3s ease-in-out;width:var(--min-column-width);width:100%}.vyasInput:focus{box-shadow:0 0 2px #000}.headRow{cursor:default;text-align:left}.th{background-color:var(--vyas-react-table-grey-1);border-radius:var(--cell-border-radius);padding:var(--cell-padding)}.resizable{min-width:var(--min-column-width)!important;overflow:auto;resize:horizontal}.tr{cursor:pointer;transition:all .3s ease-in-out}.td{border-radius:var(--cell-border-radius);max-width:200px;overflow-x:scroll;padding:var(--cell-padding);text-align:left}.td::-webkit-scrollbar{height:2px}.td::-webkit-scrollbar-thumb{background:var(--vyas-thumb-scroll-color);border-radius:2px}.tr:nth-child(2n){background-color:#f3f3f3}.tr:hover{background-color:var(--vyas-react-table-grey-1)}");const a=(e,t,a)=>{if(!e)return!1;switch(a){case"text":case"number":return e.toString().toLowerCase().includes(t.toString().toLowerCase());case"date":const a=new Date(e),r=new Date(t);return a.getTime()===r.getTime();default:return e===t}};exports.Table=({tableName:r="Data",data:s,tableHeaders:l,allowFilters:i=!0,showSerialNo:n=!1,borderSpacing:o="4px",itemsPerPage:d=10,allowDownload:c=!1,filename:u="data",nullDataPlaceholder:b="-",onRowClick:p=(e=>{})})=>{const[v,x]=e.useState(s),[h,g]=e.useState({}),[m,y]=e.useState(d),[f,j]=e.useState(1),[w,N]=e.useState(Math.ceil(v.length/m)),[k,S]=e.useState({sliceStartIdx:0,sliceEndIdx:m});e.useEffect((()=>{I()}),[h]);const C=(e,t)=>{const a={...h};if(""===e.target.value)return delete a[t.key],void g(a);g({...a,[t.key]:e.target.value})},I=()=>{const e=s.filter((e=>{for(const t in h)if(!a(e[t],h[t],l[t].type))return!1;return!0}));x(e)},E=e=>e?.toString()??b;return t.jsxs("section",{className:"container",children:[t.jsxs("div",{className:"table-header",children:[t.jsx("div",{className:"table-name",children:r}),t.jsxs("span",{children:["Total ",v.length," rows"]})]}),t.jsxs("div",{className:"statsContainer",children:[t.jsxs("div",{className:"stats-div",children:[t.jsxs("div",{children:["Show",t.jsx("input",{type:"number",min:"1",value:m,onChange:e=>""===e.target.value?(y(e.target.value),j(1),void S({sliceStartIdx:0,sliceEndIdx:v.length})):Number.isInteger(parseInt(e.target.value))&&e.target.value>0?(y(e.target.value),j(1),S({sliceStartIdx:0,sliceEndIdx:e.target.value}),void N(Math.ceil(v.length/e.target.value))):void 0,className:"stats-input"}),"rows per page"]}),t.jsxs("div",{children:["Show",t.jsx("input",{type:"number",min:"1",max:w,value:f,onChange:e=>{if(""!==e.target.value)return Number.isInteger(parseInt(e.target.value))&&e.target.value>0?(j(e.target.value),void S({sliceStartIdx:(e.target.value-1)*m,sliceEndIdx:e.target.value*m})):void 0;j(e.target.value)},className:"stats-input"}),"of ",w," pages"]})]}),t.jsxs("div",{children:[c&&t.jsx("button",{onClick:()=>{((e,t,a="data")=>{let r="data:text/csv;charset=utf-8,";r+=Object.keys(t).map((e=>t[e].title)).join(",")+"\r\n",e.forEach((e=>{r+=Object.keys(t).map((t=>Array.isArray(e[t])?e[t].join(" "):e[t])).join(",")+"\r\n"}));const s=encodeURI(r),l=document.createElement("a");l.setAttribute("href",s),l.setAttribute("download",`${a}.csv`),document.body.appendChild(l),l.click()})(v,l,u)},className:"button",children:"Download"}),t.jsx("button",{onClick:()=>{g({})},className:"button",children:"Clear All Filters"})]})]}),t.jsxs("table",{style:{borderSpacing:o},className:"table",children:[t.jsxs("thead",{className:"thead",children:[t.jsxs("tr",{className:"headRow",children:[n&&t.jsx("th",{className:"th",children:t.jsx("div",{className:"resizable",children:"Serial No."})}),Object.keys(l).map(((e,a)=>t.jsx("th",{className:"th",children:t.jsx("div",{className:"resizable",children:l[e].title})},a)))]}),i&&t.jsxs("tr",{className:"filterContainer",children:[n&&t.jsx("th",{}),Object.keys(l).map(((e,a)=>t.jsx("th",{children:void 0===l[e].options?t.jsx("input",{className:"vyasInput",type:l[e].type,value:h[e]??"",placeholder:`Filter by ${l[e].title}...`,onChange:t=>C(t,l[e])}):t.jsxs("select",{value:h[e]??"",onChange:t=>C(t,l[e]),className:"vyasInput",children:[t.jsx("option",{value:"",children:"None Selected"}),l[e].options.map(((e,a)=>t.jsx("option",{value:e.value,children:e.label},a)))]})},a)))]})]}),t.jsx("tbody",{className:"tbody",children:v.slice(k.sliceStartIdx,k.sliceEndIdx).map(((e,a)=>t.jsxs("tr",{className:"tr",onClick:()=>p(e),children:[n&&t.jsx("td",{className:"td",children:(f-1)*m+a+1}),Object.keys(l).map(((a,r)=>t.jsx("td",{className:"td",children:Array.isArray(e[l[a].key])?e[l[a].key].map(((e,a)=>t.jsx("div",{children:E(e)},a))):E(e[l[a].key])},r)))]},a)))})]})]})};