dynamic-table-builder
Version:
A dynamic table library with backend-driven configuration
3 lines (2 loc) • 13.8 kB
JavaScript
import e,{useState as t,useCallback as n,useRef as r,useEffect as o,useMemo as a}from"react";import{DatePicker as i,Input as l,Select as s,Button as c,Table as u,Alert as d,Space as f,message as p}from"antd";import v from"dayjs";import*as y from"@ant-design/icons";import{SearchOutlined as m}from"@ant-design/icons";var g=function(){return g=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},g.apply(this,arguments)};function h(e,t,n,r){return new(n||(n=Promise))(function(o,a){function i(e){try{s(r.next(e))}catch(e){a(e)}}function l(e){try{s(r.throw(e))}catch(e){a(e)}}function s(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n(function(e){e(t)})).then(i,l)}s((r=r.apply(e,t||[])).next())})}function b(e,t){var n,r,o,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]},i=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return i.next=l(0),i.throw=l(1),i.return=l(2),"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function l(l){return function(s){return function(l){if(n)throw new TypeError("Generator is already executing.");for(;i&&(i=0,l[0]&&(a=0)),a;)try{if(n=1,r&&(o=2&l[0]?r.return:l[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,l[1])).done)return o;switch(r=0,o&&(l=[2&l[0],o.value]),l[0]){case 0:case 1:o=l;break;case 4:return a.label++,{value:l[1],done:!1};case 5:a.label++,r=l[1],l=[0];continue;case 7:l=a.ops.pop(),a.trys.pop();continue;default:if(!(o=a.trys,(o=o.length>0&&o[o.length-1])||6!==l[0]&&2!==l[0])){a=0;continue}if(3===l[0]&&(!o||l[1]>o[0]&&l[1]<o[3])){a.label=l[1];break}if(6===l[0]&&a.label<o[1]){a.label=o[1],o=l;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(l);break}o[2]&&a.ops.pop(),a.trys.pop();continue}l=t.call(e,a)}catch(e){l=[6,e],r=0}finally{n=o=0}if(5&l[0])throw l[1];return{value:l[0]?l[1]:void 0,done:!0}}([l,s])}}}"function"==typeof SuppressedError&&SuppressedError;var w=function(t,n){if(void 0===n&&(n="internal"),"external"===n)return e.createElement("img",{src:t,alt:"icon",className:"button-icon"});var r=y[t];return r?e.createElement(r):null},k=i.RangePicker,S=function(e){var t=v();switch(e){case"today":default:return t;case"thisWeekStart":return t.startOf("week");case"thisMonthStart":return t.startOf("month");case"lastQuarterStart":return t.subtract(3,"month").startOf("month")}},E=function(i){var y,E,x,z,N,C,F,I,O=i.config,R=i.onDataFetch,j=i.onExport,M=i.defaultFilters,P=i.className,T=i.style,A=O.tableConfig,K=O.data,L=O.columns,Y=O.pagination,D=O.tableFeatures,B=function(){var e,t={};return null===(e=A.globalFilters)||void 0===e||e.forEach(function(e){void 0!==e.defaultValue&&(t[e.key]=e.defaultValue)}),M&&Object.keys(M).forEach(function(e){var n;void 0!==(null===(n=M[e])||void 0===n?void 0:n.defaultValue)&&(t[e]=M[e].defaultValue)}),t},J=function(e){var r=e.storageKey,o=e.enabled,a=e.config,i=e.initialFilters,l=function(){if(!o)return{filters:i||{},pagination:{current:1,pageSize:10,total:0},sortInfo:{},selectedRows:[]};try{var e=sessionStorage.getItem(r);if(e){var t=JSON.parse(e);return g(g({},t),{filters:g(g({},i||{}),t.filters)})}}catch(e){console.error("Error loading table state:",e)}return{filters:i||{},pagination:{current:1,pageSize:10,total:0},sortInfo:{},selectedRows:[]}},s=t(l().filters),c=s[0],u=s[1],d=t(l().pagination),f=d[0],p=d[1],v=t(l().sortInfo),y=v[0],m=v[1],h=t(l().selectedRows),b=h[0],w=h[1],k=n(function(){if(o)try{var e={filters:(null==a?void 0:a.persistFilters)?c:{},pagination:(null==a?void 0:a.persistPagination)?f:{current:1,pageSize:10,total:0},sortInfo:(null==a?void 0:a.persistSort)?y:{},selectedRows:b};sessionStorage.setItem(r,JSON.stringify(e))}catch(e){console.error("Error saving table state:",e)}},[o,a,c,f,y,b,r]),S=n(function(){if(o)try{var e=sessionStorage.getItem(r);if(e){var t=JSON.parse(e);(null==a?void 0:a.persistFilters)&&u(t.filters),(null==a?void 0:a.persistPagination)&&p(t.pagination),(null==a?void 0:a.persistSort)&&m(t.sortInfo),w(t.selectedRows)}}catch(e){console.error("Error loading table state:",e)}},[o,a,r]);return{filters:c,setFilters:u,pagination:f,setPagination:p,sortInfo:y,setSortInfo:m,selectedRows:b,setSelectedRows:w,saveState:k,loadState:S}}({storageKey:(null===(y=null==D?void 0:D.stateManagement)||void 0===y?void 0:y.storageKey)||"dynamic_table_state",enabled:(null===(E=null==D?void 0:D.stateManagement)||void 0===E?void 0:E.enabled)||!1,config:null==D?void 0:D.stateManagement,initialFilters:B()}),V=J.filters,U=J.setFilters,W=J.sortInfo,_=J.setSortInfo,Q=J.selectedRows,H=J.setSelectedRows,q=J.loadState,G=J.saveState,X=t([]),Z=X[0],$=X[1],ee=t(!1),te=ee[0],ne=ee[1],re=t(null),oe=re[0],ae=re[1],ie=t({pageNumber:1,pageSize:(null==Y?void 0:Y.pageSize)||A.defaultPageSize||10,total:(null==Y?void 0:Y.totalCount)||0}),le=ie[0],se=ie[1],ce=function(e){return h(void 0,void 0,void 0,function(){var t,n,r,o,a,i;return b(this,function(l){switch(l.label){case 0:if(!R)return[2];ne(!0),l.label=1;case 1:return l.trys.push([1,3,4,5]),t={pageSize:(null===(o=null==e?void 0:e.pagination)||void 0===o?void 0:o.pageSize)||le.pageSize,pageNumber:(null===(a=null==e?void 0:e.pagination)||void 0===a?void 0:a.pageNumber)||le.pageNumber},[4,R({pagination:t,filters:(null==e?void 0:e.filters)||V,sorter:null==e?void 0:e.sorter})];case 2:return(null==(n=l.sent())?void 0:n.data)&&($(n.data),void 0!==(null===(i=n.pagination)||void 0===i?void 0:i.totalCount)&&se(function(e){return g(g({},e),{total:n.pagination.totalCount})}),G()),[3,5];case 3:return r=l.sent(),console.error("Error fetching data:",r),ae(r instanceof Error?r.message:"Failed to fetch data"),[3,5];case 4:return ne(!1),[7];case 5:return[2]}})})},ue=(C=ce,F=500,I=r(),n(function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];I.current&&clearTimeout(I.current),I.current=setTimeout(function(){C.apply(void 0,e)},F)},[C,F]));o(function(){Array.isArray(K)&&$(K)},[K]),o(function(){R&&ce({pagination:{pageNumber:1,pageSize:A.defaultPageSize||10},filters:B()})},[]);var de=function(){return h(void 0,void 0,void 0,function(){var e,t,n,r,o,a,i;return b(this,function(l){switch(l.label){case 0:if(!j)return p.error("Export functionality is not configured"),[2];ne(!0),l.label=1;case 1:return l.trys.push([1,3,4,5]),[4,j({filters:V,sort:W}).catch(function(e){throw new Error((null==e?void 0:e.message)||"Export request failed")})];case 2:if((e=l.sent())instanceof Blob){if(0===e.size)throw new Error("Received empty file");t=window.URL.createObjectURL(e),(n=document.createElement("a")).href=t,n.setAttribute("download",A.exportFileName||"export.csv"),document.body.appendChild(n),n.click(),n.remove(),window.URL.revokeObjectURL(t),p.success((null===(a=A.messages)||void 0===a?void 0:a.exportSuccess)||"Export successful")}else{if(!1===(null==e?void 0:e.success))throw new Error(e.message||"Export failed");p.success((null===(i=A.messages)||void 0===i?void 0:i.exportSuccess)||"Export successful")}return[3,5];case 3:return r=l.sent(),o=r instanceof Error?r.message:"Export failed",p.error(o),[3,5];case 4:return ne(!1),[7];case 5:return[2]}})})},fe=function(e,t){var n,r=g(g({},V),((n={})[e]=t,n));Object.keys(r).forEach(function(e){void 0!==r[e]&&null!==r[e]&&""!==r[e]||delete r[e]}),U(r),ue()},pe=function(e,t){var n,r=g(g({},V),((n={})[e]=t,n));U(r),ce({pagination:{pageSize:le.pageSize,pageNumber:1},filters:r})},ve=function(){U({}),se(function(e){return g(g({},e),{pageNumber:1})}),ce({pagination:{pageSize:le.pageSize,pageNumber:1},filters:{}})},ye=a(function(){return(null==L?void 0:L.map(function(t){var n={title:t.title,dataIndex:t.dataIndex||t.key,key:t.key,width:t.width,fixed:t.fixed,filteredValue:t.filter?V[t.key]?[V[t.key]]:[]:null,sorter:t.sortable||!1,onFilter:t.filter?function(e,n){var r=n[t.key];return!!r&&(Array.isArray(e)?e.some(function(e){return r.toString().toLowerCase().includes(e.toLowerCase())}):r.toString().toLowerCase().includes(e.toString().toLowerCase()))}:void 0};if(t.filter&&(n.filterDropdown=function(n){var r,o,a=n.setSelectedKeys,i=n.selectedKeys,u=n.confirm,d=n.clearFilters;return e.createElement("div",{style:{padding:8}},"search"===(null===(r=t.filter)||void 0===r?void 0:r.type)&&e.createElement(l,{placeholder:t.filter.placeholder,value:i[0],onChange:function(e){var t=e.target.value;a(t?[t]:[])},onPressEnter:function(){u(),pe(t.key,i[0])},style:{width:188,marginBottom:8,display:"block"}}),"select"===(null===(o=t.filter)||void 0===o?void 0:o.type)&&e.createElement(s,{mode:t.filter.mode,style:{width:188,marginBottom:8,display:"block"},placeholder:t.filter.placeholder,options:t.filter.options,value:t.filter.mode?i:i[0],onChange:function(e){a(Array.isArray(e)?e:e?[e]:[])},allowClear:!0,styles:{popup:{root:{minWidth:"188px"}}}}),e.createElement("div",{style:{display:"flex",justifyContent:"space-between",gap:"8px"}},e.createElement(c,{type:"primary",onClick:function(){u(),pe(t.key,i[0])},size:"small",style:{flex:1}},"Filter"),e.createElement(c,{onClick:function(){null==d||d(),pe(t.key,void 0)},size:"small",style:{flex:1}},"Reset")))},n.filterIcon=function(t){return e.createElement(m,{style:{color:t?"#1890ff":void 0}})}),t.render){var r=t.render;n.render=function(t,n){var o,a,i;switch(r.type){case"link":var l=null===(o=r.urlTemplate)||void 0===o?void 0:o.replace(/{(\w+)}/g,function(e,t){return n[t]});return e.createElement("a",{href:l,style:r.style,target:"external"===r.urlType?"_blank":"_self",rel:"noopener noreferrer"},t);case"status":var s=(null===(a=r.colorMapping)||void 0===a?void 0:a[t])||"default",c=(null===(i=r.textMapping)||void 0===i?void 0:i[t])||t;return e.createElement("span",{className:"status-tag ".concat(s)},c);case"datetime":return t?v(t).format(r.format||"DD-MM-YYYY HH:mm:ss"):"";case"number":return null!=t?Number(t).toFixed(r.format?parseInt(r.format):2):"";case"array":return(null==t?void 0:t.join(", "))||"";default:return t}}}return n}))||[]},[L,V]);o(function(){q()},[]);return e.createElement("div",{className:"dyn-table-container ".concat(P||""),style:T},e.createElement("div",{className:"dyn-table-header"},A.title&&e.createElement("h2",{className:"dyn-table-title"},A.title)),e.createElement("div",{className:"dyn-table-filters"},function(){var t;return e.createElement("div",{className:"dyn-table-global-filters-container"},e.createElement(f,{className:"dyn-table-global-filters",size:"middle"},null===(t=A.globalFilters)||void 0===t?void 0:t.map(function(t){var n;switch(t.type){case"dateRange":var r=V[t.key]?[V[t.key][0]?v(V[t.key][0]):null,V[t.key][1]?v(V[t.key][1]):null]:null,o=null===(n=t.presets)||void 0===n?void 0:n.map(function(e){var t=e.value,n=t[0],r=t[1];return{label:e.label,value:["string"==typeof n?S(n):v(n),"string"==typeof r?S(r):v(r)]}});return e.createElement(k,{key:t.key,format:t.format||"DD-MM-YYYY",showTime:t.showTime,presets:o,value:r,onChange:function(e){e&&e[0]&&e[1]?fe(t.key,[e[0],e[1]]):fe(t.key,null)},allowEmpty:[!0,!0],disabledDate:function(e){return e&&e>v().endOf("day")}});case"select":return e.createElement(s,{key:t.key,mode:t.mode,placeholder:t.placeholder,options:t.options,value:V[t.key],onChange:function(e){return fe(t.key,e)},style:{minWidth:120},allowClear:!0});case"search":return e.createElement(l,{key:t.key,placeholder:t.placeholder,value:V[t.key],onChange:function(e){return fe(t.key,e.target.value)},prefix:t.icon&&w(t.icon,t.iconSource),style:{minWidth:200},allowClear:!0});default:return null}})))}()),(null!==(z=null===(x=A.actionButtons)||void 0===x?void 0:x.length)&&void 0!==z?z:0)>0&&e.createElement("div",{className:"dyn-table-actions-container"},function(){var t,n,r=(null===(t=A.actionButtons)||void 0===t?void 0:t.filter(function(e){return"left"===e.position||!e.position}))||[],o=(null===(n=A.actionButtons)||void 0===n?void 0:n.filter(function(e){return"right"===e.position}))||[],a=Object.keys(V).length>0;return e.createElement("div",{className:"dyn-table-actions"},e.createElement(f,{className:"dyn-table-left-buttons"},r.map(function(t){return e.createElement(c,{key:t.key,type:t.type||"default",icon:w(t.icon||"",t.iconSource),disabled:"clearFilters"===t.key?!a:!t.enabled,onClick:t.onClick||function(){"export"===t.key?de():"refresh"===t.key?ce():"clearFilters"===t.key&&ve()}},t.title)})),e.createElement(f,{className:"dyn-table-right-buttons"},o.map(function(t){return e.createElement(c,{key:t.key,type:t.type||"default",icon:w(t.icon||"",t.iconSource),disabled:"clearFilters"===t.key?!a:!t.enabled,onClick:t.onClick||function(){"export"===t.key?de():"refresh"===t.key?ce():"clearFilters"===t.key&&ve()}},t.title)})))}()),e.createElement(u,{dataSource:Z,columns:ye,loading:te,rowKey:(null==D?void 0:D.rowKey)||function(e,t){return String(t)},onChange:function(e,t,n,r){var o={pageNumber:e.current||1,pageSize:e.pageSize||A.defaultPageSize||10,total:le.total};se(o);var a=Array.isArray(n)?n[0]:n;_({field:"string"==typeof a.field?a.field:void 0,order:null===a.order?void 0:a.order}),ce({pagination:{pageSize:o.pageSize,pageNumber:o.pageNumber}})},pagination:function(){if(!Y)return!1;var e=Y.pageSizeOptions,t=Y.showQuickJumper,n=Y.showTotal,r=Y.position,o=Y.showSizeChanger,a=Y.totalCount;return{current:le.pageNumber,pageSize:le.pageSize,total:a||le.total,pageSizeOptions:e,showQuickJumper:t,showSizeChanger:null==o||o,position:r||["bottomRight"],showTotal:n?function(e){return"Total ".concat(e," items")}:void 0}}(),rowSelection:(null===(N=null==D?void 0:D.rowSelection)||void 0===N?void 0:N.enabled)?{type:D.rowSelection.type,selectedRowKeys:Q,onChange:function(e){return H(e)}}:void 0,scroll:{x:"max-content"}}),oe&&e.createElement(d,{message:"Error",description:oe,type:"error",showIcon:!0}))};export{E as DynamicTable};
//# sourceMappingURL=index.esm.js.map