react-native-dynamic-table-component/dist/index.mjs

A customizable and dynamic table component for React Native that supports flexible layouts, dynamic column rendering, and user interactions such as sorting and filter.

import e,{useMemo as t,useState as n,useRef as r,useCallback as o,useEffect as l}from"react";import{Dimensions as i,StyleSheet as a,View as c,TouchableOpacity as u,Text as d,SafeAreaView as f,TextInput as s,ScrollView as m,FlatList as p,Modal as g,TouchableWithoutFeedback as y}from"react-native";var h=function(){return h=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},h.apply(this,arguments)};function b(e,t,n){if(n||2===arguments.length)for(var r,o=0,l=t.length;o<l;o++)!r&&o in t||(r||(r=Array.prototype.slice.call(t,0,o)),r[o]=t[o]);return e.concat(r||Array.prototype.slice.call(t))}"function"==typeof SuppressedError&&SuppressedError;const{width:C}=i.get("window"),v=a.create({container:{flex:1,paddingVertical:10,backgroundColor:"#f5f5f5"},header:{flexDirection:"row",marginBottom:16,alignItems:"center",justifyContent:"flex-end",paddingHorizontal:15},searchContainer:{flex:1,flexDirection:"row",alignItems:"center",backgroundColor:"#fff",borderRadius:8,padding:8,marginRight:8},searchIcon:{fontSize:16,color:"#666",marginRight:4},searchInput:{flex:1,fontSize:16,padding:4},sortButton:{flexDirection:"row",alignItems:"center",backgroundColor:"#fff",borderRadius:8,padding:10,marginRight:8,borderWidth:1,borderColor:"#e0e0e0"},sortButtonText:{marginRight:4,fontSize:16},iconText:{fontSize:12},filterButton:{backgroundColor:"#5C6B73",borderRadius:8,padding:10,alignItems:"center",justifyContent:"center"},filterButtonText:{color:"#fff",fontSize:16},tableContainer:{borderRadius:8,overflow:"hidden"},headerRow:{flexDirection:"row",height:50,backgroundColor:"#fff",alignItems:"center",paddingVertical:8,elevation:2,shadowColor:"#000",shadowOffset:{width:0,height:1},shadowOpacity:.1,shadowRadius:1,zIndex:10},headerCell:{padding:16,paddingVertical:12,flexDirection:"row",alignItems:"center",justifyContent:"space-between",height:50},headerText:{fontWeight:"bold",fontSize:16,flex:1},row:{flexDirection:"row",borderBottomWidth:1,borderBottomColor:"#e0e0e0",height:50},cell:{padding:16,fontSize:16,textAlignVertical:"center",height:50},emptyState:{width:C-32,padding:20,alignItems:"center",justifyContent:"center"},emptyStateText:{fontSize:16,color:"#666"},modalOverlay:{flex:1,justifyContent:"center",alignItems:"center",backgroundColor:"rgba(0, 0, 0, 0.5)"},modalContent:{width:"90%",backgroundColor:"#fff",borderRadius:8,padding:16,maxHeight:"80%"},modalHeader:{marginBottom:16},modalTitle:{fontSize:18,fontWeight:"bold",marginBottom:12},tabsContainer:{flexDirection:"row",marginBottom:8},tabButton:{paddingVertical:8,paddingHorizontal:16,marginRight:8,borderRadius:16,backgroundColor:"#f0f0f0"},activeTabButton:{backgroundColor:"#5C6B73"},activeTabText:{color:"#fff"},filterContent:{marginBottom:16},filterLabel:{fontSize:16,marginBottom:8},rangeFilterContainer:{marginBottom:16},rangeInputs:{flexDirection:"row",alignItems:"center"},rangeInput:{width:80,padding:8,borderWidth:1,borderColor:"#e0e0e0",borderRadius:4},optionsFilterContainer:{marginBottom:16},optionsList:{flexDirection:"row",flexWrap:"wrap"},optionButton:{padding:8,margin:4,borderWidth:1,borderColor:"#e0e0e0",borderRadius:4,maxWidth:"47%"},optionText:{maxWidth:120},selectedOption:{backgroundColor:"#5C6B73",borderColor:"#5C6B73"},selectedOptionText:{color:"#fff"},modalButtons:{flexDirection:"row",justifyContent:"flex-end"},modalButton:{padding:10,marginLeft:8,borderRadius:4,borderWidth:1,borderColor:"#e0e0e0"},applyButton:{backgroundColor:"#5C6B73",borderColor:"#5C6B73"},applyButtonText:{color:"black"}});var x=function(i){var a,C,x,E,S,B,w=i.initialData,T=void 0===w?[]:w,I=i.isFilter,O=void 0===I||I,R=i.sortByColumn,z=void 0===R||R,k=i.isSearch,N=void 0===k||k,j=i.cellStyle,L=void 0===j?{}:j,W=i.headerStyle,A=void 0===W?{}:W,D=i.ignoredHeaders,P=void 0===D?[]:D,F=i.filterButtonStyle,H=i.filterButtonTextStyle,M=i.filterContainerStyle,V=i.filterContainerApplyButtonStyle,U=i.filterContainerApplyButtonTextStyle,q=i.filterContainerResetButtonStyle,G=i.filterContainerResetButtonTextStyle,J=i.contentPaddingBottom,K=i.emptyMessage,Q=i.filterTitle,X=i.activeTabButtonColor,Y=i.showApplyButton,Z=void 0===Y||Y,$=i.filterContainerFieldOptionStyle,_=i.filterContainerFieldOptionTextStyle,ee=i.filterContainerFieldOptionActiveTextStyle,te=i.filterContainerValueOptionStyle,ne=i.filterContainerValueOptionTextStyle,re=i.filterContainerValueOptionActiveTextStyle,oe=t((function(){if(0===T.length)return[];var e=T[0];return Object.keys(e).filter((function(e){return!(null==P?void 0:P.includes(e))}))}),[T,P]),le=t((function(){var e={};return oe.forEach((function(t){var n=b([],new Set(T.map((function(e){return String(e[t])}))),!0);e[t]=n})),e}),[oe,T]),ie=t((function(){var e={};return oe.forEach((function(t){var n=10*t.length+20;T.forEach((function(e){var r=String(e[t]).length;n=Math.max(n,8*r+20)})),e[t]=Math.max(100,Math.min(n,200))})),e}),[oe,T]),ae=t((function(){return Object.values(ie).reduce((function(e,t){return e+t}),0)}),[ie]),ce=n(T),ue=ce[0],de=ce[1],fe=n(""),se=fe[0],me=fe[1],pe=n({field:null,order:null}),ge=pe[0],ye=pe[1],he=n(!1),be=he[0],Ce=he[1],ve=n(null),xe=ve[0],Ee=ve[1],Se=n({}),Be=Se[0],we=Se[1],Te=r(null),Ie=r(null),Oe=o((function(e){var t=e.nativeEvent.contentOffset.x;Te.current&&Te.current.scrollTo({x:t,animated:!1})}),[]),Re=o((function(e){var t=b([],e,!0);Object.entries(Be).forEach((function(e){var n=e[0],r=e[1];null!=r&&("object"!=typeof r||null===r.min&&null===r.max?""!==r&&(t=t.filter((function(e){return String(e[n])===String(r)}))):(null!==r.min&&(t=t.filter((function(e){return null!==r.min&&Number(e[n])>=r.min}))),null!==r.max&&(t=t.filter((function(e){return null!==r.max&&Number(e[n])<=r.max})))))})),ge.field&&(t=ke(t,ge.field,ge.order)),de(t)}),[Be,ge.field,ge.order]);l((function(){if(""===se.trim())Re(T);else{var e=T.filter((function(e){return oe.some((function(t){return String(e[t]).toLowerCase().includes(se.toLowerCase())}))}));Re(e)}}),[se,T,oe,Re]);var ze=function(e){var t="asc";ge.field===e&&"asc"===ge.order&&(t="desc"),ye({field:e,order:t});var n=ke(b([],ue,!0),e,t);de(n)},ke=function(e,t,n){return b([],e,!0).sort((function(e,r){var o=e[t],l=r[t];if(!isNaN(Number(o))&&!isNaN(Number(l)))return"asc"===n?Number(o)-Number(l):Number(l)-Number(o);var i=String(o).toLowerCase(),a=String(l).toLowerCase();return"asc"===n?i>a?1:-1:i<a?1:-1}))},Ne=o((function(e,t){var n=!isNaN(Number(T[0][e]));we(n?function(t){var n;return h(h({},t),((n={})[e]={min:t[e]&&"object"==typeof t[e]?t[e].min:null,max:t[e]&&"object"==typeof t[e]?t[e].max:null},n))}:function(n){var r;return h(h({},n),((r={})[e]=n[e]===t?null:t,r))})}),[T]),je=o((function(e,t,n){we((function(r){var o,l;return h(h({},r),((o={})[e]=h(h({},r[e]||{min:null,max:null}),((l={})[t]=""===n?null:Number(n),l)),o))}))}),[]),Le=o((function(){Re(T),Ce(!1)}),[Re,T]),We=o((function(){we({}),de(T),Ce(!1)}),[T]),Ae=o((function(e){return T.length>0&&!isNaN(Number(T[0][e]))}),[T]),De=o((function(){return e.createElement(c,{style:[v.headerRow,{width:ae}]},oe.map((function(t,n){return e.createElement(u,{disabled:!z,key:t,activeOpacity:.8,style:[A,v.headerCell,{width:ie[t],borderTopWidth:1,borderBottomWidth:1,borderColor:"#e0e0e0"},0===n&&{borderLeftWidth:1},n===oe.length-1&&{borderRightWidth:1}],onPress:function(){return ze(t)}},e.createElement(d,{style:v.headerText,numberOfLines:1,ellipsizeMode:"tail"},t.charAt(0).toUpperCase()+t.slice(1)),ge.field===t&&e.createElement(d,null,"asc"===ge.order?"▲":"▼"))})))}),[oe,ge,ie,ae,z,A,ze]),Pe=o((function(t){var n=t.item;return e.createElement(c,{style:[v.row,{width:ae},L]},oe.map((function(t){return e.createElement(u,{onPress:function(){console.log({column:t,item:n})},key:"".concat(n.id,"-").concat(t)},e.createElement(d,{style:[v.cell,{width:ie[t]}],numberOfLines:2,ellipsizeMode:"tail"},n[t]))})))}),[oe,ie,ae,L]),Fe=o((function(e){return e.id.toString()}),[]);return e.createElement(f,{style:v.container},e.createElement(c,{style:v.header},N?e.createElement(c,{style:v.searchContainer},e.createElement(d,{style:v.searchIcon},"🔍"),e.createElement(s,{style:v.searchInput,placeholder:"Search",value:se,onChangeText:me})):null,O?e.createElement(u,{style:[F||v.filterButton],onPress:function(){Ee(oe[0]),Ce(!0)}},e.createElement(d,{style:H||v.filterButtonText},"Filter")):null),e.createElement(c,{style:[v.tableContainer,{padding:20}]},e.createElement(m,{ref:Te,horizontal:!0,scrollEnabled:!1,showsHorizontalScrollIndicator:!1},e.createElement(De,null)),e.createElement(m,{ref:Ie,horizontal:!0,onScroll:Oe,scrollEventThrottle:16,bounces:!1,showsHorizontalScrollIndicator:!1},e.createElement(p,{bounces:!1,data:ue,renderItem:Pe,keyExtractor:Fe,initialNumToRender:10,maxToRenderPerBatch:10,windowSize:10,removeClippedSubviews:!0,ListEmptyComponent:e.createElement(c,{style:v.emptyState},e.createElement(d,{style:v.emptyStateText},K||"No results found")),contentContainerStyle:{paddingBottom:null!=J?J:120},showsVerticalScrollIndicator:!0}))),e.createElement(g,{visible:be,transparent:!0,animationType:"slide"},e.createElement(y,{onPress:function(){Ce(!1)}},e.createElement(c,{style:v.modalOverlay},e.createElement(c,{style:[v.modalContent,M]},e.createElement(c,{style:v.modalHeader},e.createElement(d,{style:v.modalTitle},null!=Q?Q:"Filter"),e.createElement(m,{horizontal:!0,showsHorizontalScrollIndicator:!1,style:v.tabsContainer},oe.map((function(t){return e.createElement(u,{key:t,style:[$||v.tabButton,xe===t&&{backgroundColor:X||"#5C6B73"}],onPress:function(){return Ee(t)}},e.createElement(d,{style:[null!=_?_:null,xe===t?{color:ee||"#fff"}:{}]},t.charAt(0).toUpperCase()+t.slice(1)))})))),xe&&e.createElement(c,{style:v.filterContent},Ae(xe)?e.createElement(c,{style:v.rangeFilterContainer},e.createElement(d,{style:v.filterLabel},"Range"),e.createElement(c,{style:v.rangeInputs},e.createElement(s,{style:v.rangeInput,placeholder:"Min",keyboardType:"numeric",value:"object"==typeof Be[xe]&&null!==(null===(a=Be[xe])||void 0===a?void 0:a.min)&&void 0!==(null===(C=Be[xe])||void 0===C?void 0:C.min)?String(null===(x=Be[xe])||void 0===x?void 0:x.min):"",onChangeText:function(e){return je(xe,"min",e)}}),e.createElement(d,null," - "),e.createElement(s,{style:v.rangeInput,placeholder:"Max",keyboardType:"numeric",value:"object"==typeof Be[xe]&&null!==(null===(E=Be[xe])||void 0===E?void 0:E.max)&&void 0!==(null===(S=Be[xe])||void 0===S?void 0:S.max)?String(null===(B=Be[xe])||void 0===B?void 0:B.max):"",onChangeText:function(e){return je(xe,"max",e)}}))):e.createElement(c,{style:v.optionsFilterContainer},e.createElement(d,{style:v.filterLabel},"Select ",xe),e.createElement(c,{style:v.optionsList},le[xe].map((function(t){return e.createElement(u,{key:t,style:[te||v.optionButton,Be[xe]===t&&v.selectedOption],onPress:function(){return Ne(xe,t)}},e.createElement(d,{style:[Be[xe]===t&&{color:re||"#fff"},ne||v.optionText],numberOfLines:1,ellipsizeMode:"tail"},t))}))))),e.createElement(c,{style:v.modalButtons},e.createElement(u,{style:q||v.modalButton,onPress:We},e.createElement(d,{style:G||null},"Reset")),Z?e.createElement(u,{style:[V||v.modalButton],onPress:Le},e.createElement(d,{style:U||null},"Apply")):null))))))};export{x as default};
//# sourceMappingURL=index.mjs.map