react-smart-data-table/dist/react-smart-data-table.umd.js

A smart data table component for React.js meant to be configuration free

(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react`),require(`clsx`),require(`linkifyjs`),require(`flat`),require(`escape-string-regexp`),require(`change-case`),require(`react/jsx-runtime`)):typeof define==`function`&&define.amd?define([`exports`,`react`,`clsx`,`linkifyjs`,`flat`,`escape-string-regexp`,`change-case`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.SmartDataTable={},e.React,e.clsx,e.linkifyjs,e.flat,e.escapeStringRegexp,e.changeCase,e.ReactJSXRuntime))})(this,function(e,t,n,r,i,a,o,s){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var c=Object.create,l=Object.defineProperty,u=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty,m=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=d(t),a=0,o=i.length,s;a<o;a++)s=i[a],!p.call(e,s)&&s!==n&&l(e,s,{get:(e=>t[e]).bind(null,s),enumerable:!(r=u(t,s))||r.enumerable});return e},h=(e,t,n)=>(n=e==null?{}:c(f(e)),m(t||!e||!e.__esModule?l(n,`default`,{value:e,enumerable:!0}):n,e));t=h(t),n=h(n),a=h(a);var g=`ase.art.bmp.blp.cd5.cit.cpt.cr2.cut.dds.dib.djvu.egt.exif.gif.gpl.grf.icns.ico.iff.jng.jpeg.jpg.jfif.jp2.jps.lbm.max.miff.mng.msp.nitf.ota.pbm.pc1.pc2.pc3.pcf.pcx.pdn.pgm.PI1.PI2.PI3.pict.pct.pnm.pns.ppm.psb.psd.pdd.psp.px.pxm.pxr.qfx.raw.rle.sct.sgi.rgb.int.bw.tga.tiff.tif.vtf.xbm.xcf.xpm.3dv.amf.ai.awg.cgm.cdr.cmx.dxf.e2d.egt.eps.fs.gbr.odg.svg.stl.vrml.x3d.sxd.v2d.vnd.wmf.emf.art.xar.png.webp.jxr.hdp.wdp.cur.ecw.iff.lbm.liff.nrrd.pam.pcx.pgf.sgi.rgb.rgba.bw.int.inta.sid.ras.sun.tga`.split(`.`),ee=`data`,_=`URL detected by the renderer`,v=`Select All`,y=`Unselect All`,te=`Data type is invalid, expected string or array !`,b=`Response type is invalid, expected JSON !`,ne=`Sampling percentage should be withing the [0, 100] range.`,re=`Something went wrong !`,ie=`DESC`,x=`false`,S={key:`default`,text:``,invisible:!1,sortable:!1,filterable:!1,isImg:!1},C=([e])=>e,w=e=>typeof e==`string`||e instanceof String,T=e=>Array.isArray(e),E=e=>e&&typeof e==`object`&&e.constructor===Object||!1,D=e=>Array.isArray(e)&&`length`in e?!e.length:E(e)?!Object.keys(e).length:!1,O=e=>typeof e==`function`,k=e=>typeof e==`number`&&Number.isFinite(e),A=e=>e===void 0,j=e=>{if(w(e)){let t=e.search(/[a-z]/);return t===-1?e.toUpperCase():e.substring(0,t+1).toUpperCase()+e.substring(t+1)}return``},M=(e,t,n)=>{let r=typeof n==`function`?n:(e,n)=>e[t]>n[t]?1:n[t]>e[t]?-1:0;return[...e].sort(r)},N=e=>!(e&&/^\d+$/.test(e)),P=(...e)=>{console.error(...e)};function F(e=1,t=1,n=1){let r=e-1>0?e-1:1,i=e+1>t?t:e+1,a=1+2*n,o=2+a,s=[{active:!1,value:1,text:`<<`},{active:!1,value:r,text:`<`}];if(t>o){e>=a&&(s.push({active:!1,value:1,text:`1`}),e>a&&s.push({active:!1,value:void 0,text:`...`}));for(let r=-n;r<2*n;r+=1){let n=e+r;n>0&&n<=t&&s.push({active:e===n,value:n,text:`${n}`})}t-e>n&&(t-e-1>n&&s.push({active:!1,value:void 0,text:`...`}),s.push({active:!1,value:t,text:`${t}`}))}else for(let n=1;n<=t;n+=1)s.push({active:e===n,value:n,text:`${n}`});return s.push({active:!1,value:i,text:`>`}),s.push({active:!1,value:t,text:`>>`}),s}async function I(e,{dataKey:t=ee,dataKeyResolver:n,options:r={}}={}){if(T(e))return e;if(w(e)){let i=await fetch(e,r),{headers:a,ok:o,status:s,statusText:c}=i;if(o){let e=a.get(`content-type`);if(e&&e.includes(`application/json`)){let e=await i.json();return typeof n==`function`?n(e):t?e[t]:e}throw Error(b)}throw Error(`${s} - ${c}`)}else throw Error(te)}function L(e){return e.map(j).join(` `).trim()}function ae(e){return w(e)?L((0,o.snakeCase)(e).split(`_`).filter(N)):``}function R(e,t){return A(e)?t:e}function z(e,t={}){let{text:n,invisible:r,sortable:i,filterable:a}={...t[e]};return{key:e,text:R(n,ae(e)),invisible:R(r,!1),sortable:R(i,!0),filterable:R(a,!0),isImg:R(r,!1)}}function B(e=[],t=0){if(!t)return(0,i.flatten)(C(e));if(t<0||t>100)throw Error(ne);return(0,i.flatten)(e.slice(0,Math.ceil(t/100*e.length)).reduce((e,t)=>({...e,...t}),{}))}function V(e=[],t={},n=[],r=!1,i=0){let a=[],o=[];if(e&&T(e)&&!D(e)){let s=B(e.filter(e=>!!e),i);if(D(n)||n.forEach(e=>{a.includes(e)||(o.push(z(e,t)),a.push(e))}),!r&&E(s)){let e=[...Object.keys(s),...Object.keys(t)];for(let n of e)a.includes(n)||(o.push(z(n,t)),a.push(n))}}return o}function H(e=[]){let t=[];return e&&T(e)&&!D(e)&&(t=e.filter(e=>E(e)&&!D(e)).map(e=>(0,i.flatten)(e))),t}function U(e,t,n){let r=e.toLowerCase();return t.filter(e=>{let t=Object.keys(e);for(let i=0,a=t.length;i<a;i+=1){let a=t[i];if(n[a]?.filterable!==!1&&String(e[a]).toLowerCase().includes(r))return!0}return!1})}function W(e,t,n){return e?U(e,t,n):t}function G(e,t,n){if(k(n)&&Math.sign(n)){let r=n*(t-1),i=n*t;return e.slice(r,i)}return e}function K(e){let t=/^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/;if(typeof e==`string`){let[n,r]=e.split(`:`);if(n&&n===`data`&&r){let[e,n]=r.split(`;`);if(e){let[r,i]=e.split(`/`),[a]=i.split(`+`);if(r===`image`&&typeof a==`string`&&n){let[e,r]=n.split(`,`);if(e===`base64`&&t.test(r))return g.includes(a.toLowerCase())}}}}return!1}function q(e){let t=K(e);if(t)return t;let n=document.createElement(`a`);n.href=String(e);let{pathname:r}=n,i=r.search(/[:?&#]/);i!==-1&&(r=r.substring(0,i));let a=r.split(`.`).pop().toLowerCase();return g.includes(a)}function J(e,t){let n={first:void 0,highlight:void 0,last:void 0,value:e};if(!t)return n;if(RegExp(`.*?${(0,a.default)(t)}.*?`,`i`).test(e)){let n=C(e.toLowerCase().split(t.toLowerCase())).length,r=t.length;return{first:e.substring(0,n),highlight:e.substring(n,n+r),last:e.substring(n+r),value:e}}return n}function oe({children:e,content:t,parseBool:n}={}){if(n){let{noWord:r=`No`,yesWord:i=`Yes`}=typeof n==`object`?n:{};if(t===!0||e===!0)return i;if(t===!1||e===!1)return r}if(t===0||e===0)return`0`;if(t===!1||e===!1)return x;let r=``;return t?r=t:e&&(r=e),`${r}`}var se=({children:e,filterValue:n=``,"data-testid":r=`highlight-value`})=>{let{first:i,highlight:a,last:o}=(0,t.useMemo)(()=>J(String(e),n),[e,n]);return!i&&!a&&!o?e:(0,s.jsxs)(`span`,{"data-testid":r,children:[i,(0,s.jsx)(`span`,{className:`rsdt rsdt-highlight`,children:a}),o]})},Y=(0,t.memo)(({children:e,content:n=``,filterable:i=!0,filterValue:a=``,isImg:o=!1,parseBool:c=!1,parseImg:l=!1,withLinks:u=!1})=>{let d=(0,t.useMemo)(()=>oe({children:e,content:n,parseBool:c}),[e,n,c]),f=(0,t.useCallback)(()=>i?(0,s.jsx)(se,{filterValue:a,"data-testid":`cell-value`,children:d}):d,[a,i,d]),p=(0,t.useCallback)(({bypass:e=!1}={})=>{if(o||e||q(d)){let{style:e,className:t}=typeof l==`boolean`?{style:void 0,className:void 0}:l;return(0,s.jsx)(`img`,{src:d,style:e,className:t,alt:_,"data-testid":`cell-value`})}return null},[o,l,d]),m=(0,t.useCallback)(()=>{let e=(0,r.find)(d),t=f();if(D(e))return K(d)?p({bypass:!0}):t;let n=C(e),i=null;return l&&n.type===`url`&&(i=p()),(0,s.jsx)(`a`,{href:n.href,onClick:e=>e.stopPropagation(),children:i||t})},[f,l,p,d]);return u?m():l&&p()||f()}),X=({children:e,...t})=>(0,s.jsx)(`table`,{...t,children:e}),ce=(0,t.memo)(({children:e,...t})=>(0,s.jsx)(`tbody`,{...t,children:e})),le=(0,t.memo)(({children:e,...t})=>(0,s.jsx)(`td`,{...t,children:e})),ue=(0,t.memo)(({children:e,...t})=>(0,s.jsx)(`tfoot`,{...t,children:e})),de=(0,t.memo)(({children:e,...t})=>(0,s.jsx)(`thead`,{...t,children:e})),fe=(0,t.memo)(({children:e,...t})=>(0,s.jsx)(`th`,{...t,children:e})),pe=(0,t.memo)(({children:e,...t})=>(0,s.jsx)(`tr`,{...t,children:e}));X.Body=ce,X.Cell=le,X.Footer=ue,X.Header=de,X.HeaderCell=fe,X.Row=pe;var me=t.memo;function he({row:e,rowIndex:r,columns:i,colProperties:a,withLinks:o,filterValue:c,parseBool:l,parseImg:u,onRowClick:d,rowClassName:f,tableData:p}){let m=(0,t.useCallback)(t=>{d(t,e,r,p)},[d,e,r,p]);return(0,s.jsx)(X.Row,{onClick:m,className:(0,n.default)(f?.(e,r,p)),children:i.map(t=>{let n=a[t.key],i=!n?.invisible,d=n?.transform;return i?(0,s.jsx)(X.Cell,{"data-column-name":t.key,children:O(d)?d(e[t.key],r,e):(0,s.jsx)(Y,{withLinks:o,filterValue:c,parseBool:l,parseImg:u,filterable:n?.filterable,isImg:n?.isImg,children:e[t.key]})},`row-${r}-${t.key}`):null})})}var ge=me(he),Z=class extends t.Component{static{this.defaultProps={logError:()=>null,fbComponent:null}}constructor(e){super(e),this.state={hasError:!1,error:null,errorInfo:null}}componentDidCatch(e,t){let{logError:n}=this.props;this.setState({hasError:!0,error:e,errorInfo:t}),typeof n==`function`&&n(e,t)}renderDefaultFB(){let{error:e,errorInfo:t}=this.state;return(0,s.jsxs)(`div`,{children:[(0,s.jsx)(`h2`,{children:re}),(0,s.jsxs)(`details`,{style:{whiteSpace:`pre-wrap`},children:[(0,s.jsx)(`summary`,{children:e&&e.toString()}),(0,s.jsx)(`p`,{children:t.componentStack})]})]})}render(){let{hasError:e}=this.state,{children:t,fbComponent:n}=this.props;return e?n||this.renderDefaultFB():t}},_e=(0,t.memo)(({active:e,value:r,text:i,onPageChange:a})=>{let o=(0,t.useCallback)(e=>{a(e,{activePage:r})},[a,r]);return(0,s.jsx)(`button`,{className:(0,n.default)(`rsdt`,`rsdt-paginate`,{active:e},`button`),type:`button`,onClick:o,disabled:A(r),"data-testid":`paginator-item`,children:i})},({active:e,value:t,text:n},{active:r,value:i,text:a})=>e===r&&t===i&&n===a),ve=(0,t.memo)(({activePage:e,totalPages:n,onPageChange:r})=>{let i=(0,t.useMemo)(()=>F(e,n),[e,n]),a=(0,t.useMemo)(()=>typeof r==`function`?r:()=>null,[r]);return(0,s.jsx)(`div`,{className:`rsdt rsdt-paginate`,children:i.map(({active:e,value:t,text:n},r)=>(0,s.jsx)(_e,{active:e,value:t,text:n,onPageChange:a},A(t)?`ellipsis-${r}`:n))})},({activePage:e,totalPages:t},{activePage:n,totalPages:r})=>e===n&&t===r),Q=({locale:{selectAllWord:e=v,unSelectAllWord:n=y}={},handleToggleAll:r,ref:i})=>{let[a,o]=(0,t.useState)(!1),c=(0,t.useCallback)(()=>{typeof r==`function`&&r(a),o(!a)},[r,a]);return(0,t.useImperativeHandle)(i,()=>({setUnchecked:()=>{a&&o(!1)}})),(0,s.jsx)(`span`,{className:`rsdt rsdt-column-toggles toggle`,children:(0,s.jsxs)(`label`,{htmlFor:`select-all`,children:[(0,s.jsx)(`input`,{type:`checkbox`,id:`select-all`,value:`select-all`,name:`select-all`,checked:a,onChange:c,"data-testid":`select-all`}),a?n:e]})})};Q.displayName=`SelectAll`;var ye=({columns:e,colProperties:n,handleColumnToggle:r,handleColumnToggleAll:i,selectAll:a=!1})=>{let o=typeof a==`object`?a:{},c=(0,t.useRef)(null),l=(0,t.useCallback)(({target:{value:e}})=>{r(String(e)),c?.current&&e&&c.current.setUnchecked()},[r]),u=(0,t.useCallback)(e=>{let t=n[e];return!t||!t.invisible},[n]);return(0,s.jsxs)(`nav`,{className:`rsdt rsdt-column-toggles`,children:[a&&(0,s.jsx)(Q,{locale:o?.locale,handleToggleAll:typeof o?.handleToggleAll==`function`?o?.handleToggleAll:i,ref:c}),e.map(({key:e,text:t}=S)=>(0,s.jsx)(`span`,{className:`rsdt rsdt-column-toggles toggle`,children:(0,s.jsxs)(`label`,{htmlFor:e,children:[(0,s.jsx)(`input`,{type:`checkbox`,id:e,value:e,name:t,checked:u(e),onChange:l}),t]})},e))]})},be={activePage:1,asyncData:[],colProperties:{},columns:[],isLoading:!1,prevFilterValue:``,sorting:{key:``,dir:``}},xe=(0,t.createContext)(be),Se=()=>(0,t.use)(xe),$=function(e){return e.FetchStart=`FETCH_START`,e.FetchSuccess=`FETCH_SUCCESS`,e.FetchError=`FETCH_ERROR`,e.SetSorting=`SET_SORTING`,e.SetActivePage=`SET_ACTIVE_PAGE`,e.ToggleColumn=`TOGGLE_COLUMN`,e.ToggleAllColumns=`TOGGLE_ALL_COLUMNS`,e.ResetPageForFilter=`RESET_PAGE_FOR_FILTER`,e}($||{});function Ce(e,t){switch(t.type){case $.FetchStart:return{...e,isLoading:!0};case $.FetchSuccess:return{...e,asyncData:t.asyncData,columns:t.columns,isLoading:!1};case $.FetchError:return{...e,isLoading:!1};case $.SetSorting:{let{key:n}=t.column,r=e.sorting.key===n?e.sorting.dir:``,i;return i=r?r===`ASC`?ie:``:`ASC`,{...e,sorting:{key:n,dir:i}}}case $.SetActivePage:return{...e,activePage:t.activePage};case $.ToggleColumn:{let{key:n}=t,r=e.colProperties[n]??{...S,key:n};return{...e,colProperties:{...e.colProperties,[n]:{...r,invisible:!r.invisible}}}}case $.ToggleAllColumns:{let n={...e.colProperties};for(let{key:e}of t.columns)n[e]={...n[e]??{...S,key:e},invisible:t.isChecked};return{...e,colProperties:n}}case $.ResetPageForFilter:return{...e,activePage:1,prevFilterValue:t.filterValue};default:return e}}function we(e={}){return(0,t.useReducer)(Ce,{...be,colProperties:e})}function Te({data:e,dataKey:n,dataKeyResolver:r,dataRequestOptions:i,headers:a,orderedHeaders:o,hideUnordered:s,dataSampling:c,dispatch:l}){let u=(0,t.useRef)({headers:a,orderedHeaders:o,hideUnordered:s,dataSampling:c});u.current={headers:a,orderedHeaders:o,hideUnordered:s,dataSampling:c},(0,t.useEffect)(()=>{w(e)&&(async()=>{l({type:$.FetchStart});try{let t=await I(e,{dataKey:n,dataKeyResolver:r,options:i}),a=u.current,o=V(t,a.headers,a.orderedHeaders,a.hideUnordered,a.dataSampling);l({type:$.FetchSuccess,asyncData:t,columns:o})}catch(e){l({type:$.FetchError}),P(e)}})()},[e,n,r,i,l])}function Ee({resolvedData:e,stateColumns:n,headers:r,orderedHeaders:i,hideUnordered:a,dataSampling:o,dynamic:s}){return(0,t.useMemo)(()=>!s&&!D(n)?n:V(e,r,i,a,o),[e,n,r,i,a,o,s])}function De({resolvedData:e,sorting:n,colProperties:r,filterValue:i,activePage:a,perPage:o}){let s=(0,t.useMemo)(()=>H(e),[e]),c=(0,t.useMemo)(()=>{let{dir:e,key:t}=n;if(!e)return s;let i=M(s,t,typeof r[t]?.sortable==`function`&&r[t].sortable);return e===`ASC`?i:i.reverse()},[s,n,r]),l=(0,t.useMemo)(()=>W(i,c,r),[i,c,r]);return{filteredRows:l,visibleRows:(0,t.useMemo)(()=>G(l,a,o),[l,a,o])}}var Oe={},ke=[],Ae={},je=()=>null;function Me({className:e=``,data:r,dataKey:i=ee,dataKeyResolver:a=null,dataRequestOptions:o=Ae,dataSampling:c=0,dynamic:l=!1,emptyTable:u=null,filterValue:d=``,headers:f=Oe,hideUnordered:p=!1,loader:m=null,name:h=`reactsmartdatatable`,onRowClick:g=je,orderedHeaders:_=ke,paginator:v=ve,parseBool:y=!1,parseImg:te=!1,perPage:b=0,rowClassName:ne,sortable:re=!1,withFooter:ie=!1,withHeader:x=!0,withLinks:S=!1,withToggles:C=!1}){let[T,E]=we(f),{activePage:O,asyncData:k,colProperties:A,columns:j,isLoading:M,sorting:N}=T,P=(0,t.useRef)(d);(0,t.useEffect)(()=>{d!==P.current&&(P.current=d,E({type:$.ResetPageForFilter,filterValue:d}))},[d,E]),Te({data:r,dataKey:i,dataKeyResolver:a,dataRequestOptions:o,headers:f,orderedHeaders:_,hideUnordered:p,dataSampling:c,dispatch:E});let F=(0,t.useMemo)(()=>w(r)?k:r,[r,k]),I=Ee({resolvedData:F,stateColumns:j,headers:f,orderedHeaders:_,hideUnordered:p,dataSampling:c,dynamic:l}),{filteredRows:L,visibleRows:ae}=De({resolvedData:F,sorting:N,colProperties:A,filterValue:d,activePage:O,perPage:b}),R=(0,t.useCallback)((e,{activePage:t})=>{E({type:$.SetActivePage,activePage:t})},[E]),z=(0,t.useCallback)(e=>{E({type:$.SetSorting,column:e})},[E]),B=(0,t.useCallback)(e=>{E({type:$.ToggleColumn,key:e})},[E]),V=(0,t.useCallback)(e=>t=>{E({type:$.ToggleAllColumns,columns:e,isChecked:t})},[E]),H=(0,t.useCallback)((e,t,n,r)=>{typeof g==`function`&&g(e,{rowData:t,rowIndex:n,tableData:r})},[g]),U=(0,t.useMemo)(()=>b>0?Math.ceil(L.length/b):0,[L.length,b]),W=(0,t.useMemo)(()=>V(I),[V,I]),G=e=>{let{key:t,dir:r}=N,i=`rsdt-sortable-icon`;return t===e.key&&r&&(i=r===`ASC`?`rsdt-sortable-asc`:`rsdt-sortable-desc`),(0,s.jsx)(`i`,{className:(0,n.default)(`rsdt`,i),onClick:()=>z(e),onKeyDown:()=>z(e),role:`button`,tabIndex:0,"aria-label":`sorting column`})},K=()=>{let e=I.map(e=>{let t=A[e.key];return!t||!t.invisible?(0,s.jsxs)(X.HeaderCell,{"data-column-name":e.key,children:[(0,s.jsx)(`span`,{children:e.text}),(0,s.jsx)(`span`,{className:`rsdt rsdt-sortable`,children:re&&e.sortable?G(e):null})]},e.key):null});return(0,s.jsx)(X.Row,{children:e})},q=()=>{let e=ae.map((e,t)=>(0,s.jsx)(Z,{children:(0,s.jsx)(ge,{row:e,rowIndex:t,columns:I,colProperties:A,withLinks:S,filterValue:d,parseBool:y,parseImg:te,onRowClick:H,rowClassName:ne,tableData:L})},`row-${t}`));return(0,s.jsx)(X.Body,{children:e})},J=()=>{let e=typeof C==`object`?C:{};return C?(0,s.jsx)(Z,{children:(0,s.jsx)(ye,{columns:I,colProperties:A,handleColumnToggle:B,handleColumnToggleAll:W,selectAll:e?.selectAll})}):null},oe=()=>!b||b<=0||!U?null:(0,s.jsx)(Z,{children:(0,s.jsx)(v,{totalPages:U,activePage:O,onPageChange:R})});return M?m:D(L)?u:(0,s.jsx)(xe,{value:T,children:(0,s.jsxs)(`section`,{className:`rsdt rsdt-container`,children:[J(),(0,s.jsxs)(X,{"data-table-name":h,className:e,children:[x&&(0,s.jsx)(X.Header,{children:K()}),q(),ie&&(0,s.jsx)(X.Footer,{children:K()})]}),oe()]})})}var Ne=Me;e.CellValue=Y,e.TableCell=Y,e.ErrorBoundary=Z,e.HighlightValue=se,e.Paginator=ve,e.SelectAll=Q,e.Toggles=ye,e.default=Ne,e.useSmartDataTableContext=Se});