vyas-react-table/dist/index.es.js

A simple yet highly configurable table component

import{useState as e,useEffect as t}from"react";import{jsxs as a,jsx as r}from"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],l=document.createElement("style");l.type="text/css","top"===a&&r.firstChild?r.insertBefore(l,r.firstChild):r.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.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 l=(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}},i=({tableName:i="Data",data:n,tableHeaders:o,allowFilters:s=!0,showSerialNo:d=!1,borderSpacing:c="4px",itemsPerPage:u=10,allowDownload:b=!1,filename:p="data",nullDataPlaceholder:v="-",onRowClick:h=(e=>{})})=>{const[g,m]=e(n),[y,x]=e({}),[f,w]=e(u),[N,k]=e(1),[C,I]=e(Math.ceil(g.length/f)),[S,j]=e({sliceStartIdx:0,sliceEndIdx:f});t((()=>{E()}),[y]);const z=(e,t)=>{const a={...y};if(""===e.target.value)return delete a[t.key],void x(a);x({...a,[t.key]:e.target.value})},E=()=>{const e=n.filter((e=>{for(const t in y)if(!l(e[t],y[t],o[t].type))return!1;return!0}));m(e)},A=e=>e?.toString()??v;return a("section",{className:"container",children:[a("div",{className:"table-header",children:[r("div",{className:"table-name",children:i}),a("span",{children:["Total ",g.length," rows"]})]}),a("div",{className:"statsContainer",children:[a("div",{className:"stats-div",children:[a("div",{children:["Show",r("input",{type:"number",min:"1",value:f,onChange:e=>""===e.target.value?(w(e.target.value),k(1),void j({sliceStartIdx:0,sliceEndIdx:g.length})):Number.isInteger(parseInt(e.target.value))&&e.target.value>0?(w(e.target.value),k(1),j({sliceStartIdx:0,sliceEndIdx:e.target.value}),void I(Math.ceil(g.length/e.target.value))):void 0,className:"stats-input"}),"rows per page"]}),a("div",{children:["Show",r("input",{type:"number",min:"1",max:C,value:N,onChange:e=>{if(""!==e.target.value)return Number.isInteger(parseInt(e.target.value))&&e.target.value>0?(k(e.target.value),void j({sliceStartIdx:(e.target.value-1)*f,sliceEndIdx:e.target.value*f})):void 0;k(e.target.value)},className:"stats-input"}),"of ",C," pages"]})]}),a("div",{children:[b&&r("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 l=encodeURI(r),i=document.createElement("a");i.setAttribute("href",l),i.setAttribute("download",`${a}.csv`),document.body.appendChild(i),i.click()})(g,o,p)},className:"button",children:"Download"}),r("button",{onClick:()=>{x({})},className:"button",children:"Clear All Filters"})]})]}),a("table",{style:{borderSpacing:c},className:"table",children:[a("thead",{className:"thead",children:[a("tr",{className:"headRow",children:[d&&r("th",{className:"th",children:r("div",{className:"resizable",children:"Serial No."})}),Object.keys(o).map(((e,t)=>r("th",{className:"th",children:r("div",{className:"resizable",children:o[e].title})},t)))]}),s&&a("tr",{className:"filterContainer",children:[d&&r("th",{}),Object.keys(o).map(((e,t)=>r("th",{children:void 0===o[e].options?r("input",{className:"vyasInput",type:o[e].type,value:y[e]??"",placeholder:`Filter by ${o[e].title}...`,onChange:t=>z(t,o[e])}):a("select",{value:y[e]??"",onChange:t=>z(t,o[e]),className:"vyasInput",children:[r("option",{value:"",children:"None Selected"}),o[e].options.map(((e,t)=>r("option",{value:e.value,children:e.label},t)))]})},t)))]})]}),r("tbody",{className:"tbody",children:g.slice(S.sliceStartIdx,S.sliceEndIdx).map(((e,t)=>a("tr",{className:"tr",onClick:()=>h(e),children:[d&&r("td",{className:"td",children:(N-1)*f+t+1}),Object.keys(o).map(((t,a)=>r("td",{className:"td",children:Array.isArray(e[o[t].key])?e[o[t].key].map(((e,t)=>r("div",{children:A(e)},t))):A(e[o[t].key])},a)))]},t)))})]})]})};export{i as Table};