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

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

"use strict";var e=require("react"),t=require("react-native"),n=function(){return n=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},n.apply(this,arguments)};function r(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:o}=t.Dimensions.get("window"),l=t.StyleSheet.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:o-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"}});module.exports=function(o){var i,a,c,u,d,s,f=o.initialData,m=void 0===f?[]:f,p=o.isFilter,y=void 0===p||p,b=o.sortByColumn,g=void 0===b||b,h=o.isSearch,C=void 0===h||h,x=o.cellStyle,v=void 0===x?{}:x,w=o.headerStyle,S=void 0===w?{}:w,T=o.ignoredHeaders,E=void 0===T?[]:T,B=o.filterButtonStyle,k=o.filterButtonTextStyle,O=o.filterContainerStyle,V=o.filterContainerApplyButtonStyle,I=o.filterContainerApplyButtonTextStyle,R=o.filterContainerResetButtonStyle,z=o.filterContainerResetButtonTextStyle,N=o.contentPaddingBottom,j=o.emptyMessage,L=o.filterTitle,W=o.activeTabButtonColor,M=o.showApplyButton,A=void 0===M||M,D=o.filterContainerFieldOptionStyle,F=o.filterContainerFieldOptionTextStyle,P=o.filterContainerFieldOptionActiveTextStyle,H=o.filterContainerValueOptionStyle,q=o.filterContainerValueOptionTextStyle,U=o.filterContainerValueOptionActiveTextStyle,G=e.useMemo((function(){if(0===m.length)return[];var e=m[0];return Object.keys(e).filter((function(e){return!(null==E?void 0:E.includes(e))}))}),[m,E]),J=e.useMemo((function(){var e={};return G.forEach((function(t){var n=r([],new Set(m.map((function(e){return String(e[t])}))),!0);e[t]=n})),e}),[G,m]),K=e.useMemo((function(){var e={};return G.forEach((function(t){var n=10*t.length+20;m.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}),[G,m]),Q=e.useMemo((function(){return Object.values(K).reduce((function(e,t){return e+t}),0)}),[K]),X=e.useState(m),Y=X[0],Z=X[1],$=e.useState(""),_=$[0],ee=$[1],te=e.useState({field:null,order:null}),ne=te[0],re=te[1],oe=e.useState(!1),le=oe[0],ie=oe[1],ae=e.useState(null),ce=ae[0],ue=ae[1],de=e.useState({}),se=de[0],fe=de[1],me=e.useRef(null),pe=e.useRef(null),ye=e.useCallback((function(e){var t=e.nativeEvent.contentOffset.x;me.current&&me.current.scrollTo({x:t,animated:!1})}),[]),be=e.useCallback((function(e){var t=r([],e,!0);Object.entries(se).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})))))})),ne.field&&(t=he(t,ne.field,ne.order)),Z(t)}),[se,ne.field,ne.order]);e.useEffect((function(){if(""===_.trim())be(m);else{var e=m.filter((function(e){return G.some((function(t){return String(e[t]).toLowerCase().includes(_.toLowerCase())}))}));be(e)}}),[_,m,G,be]);var ge=function(e){var t="asc";ne.field===e&&"asc"===ne.order&&(t="desc"),re({field:e,order:t});var n=he(r([],Y,!0),e,t);Z(n)},he=function(e,t,n){return r([],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}))},Ce=e.useCallback((function(e,t){var r=!isNaN(Number(m[0][e]));fe(r?function(t){var r;return n(n({},t),((r={})[e]={min:t[e]&&"object"==typeof t[e]?t[e].min:null,max:t[e]&&"object"==typeof t[e]?t[e].max:null},r))}:function(r){var o;return n(n({},r),((o={})[e]=r[e]===t?null:t,o))})}),[m]),xe=e.useCallback((function(e,t,r){fe((function(o){var l,i;return n(n({},o),((l={})[e]=n(n({},o[e]||{min:null,max:null}),((i={})[t]=""===r?null:Number(r),i)),l))}))}),[]),ve=e.useCallback((function(){be(m),ie(!1)}),[be,m]),we=e.useCallback((function(){fe({}),Z(m),ie(!1)}),[m]),Se=e.useCallback((function(e){return m.length>0&&!isNaN(Number(m[0][e]))}),[m]),Te=e.useCallback((function(){return e.createElement(t.View,{style:[l.headerRow,{width:Q}]},G.map((function(n,r){return e.createElement(t.TouchableOpacity,{disabled:!g,key:n,activeOpacity:.8,style:[S,l.headerCell,{width:K[n],borderTopWidth:1,borderBottomWidth:1,borderColor:"#e0e0e0"},0===r&&{borderLeftWidth:1},r===G.length-1&&{borderRightWidth:1}],onPress:function(){return ge(n)}},e.createElement(t.Text,{style:l.headerText,numberOfLines:1,ellipsizeMode:"tail"},n.charAt(0).toUpperCase()+n.slice(1)),ne.field===n&&e.createElement(t.Text,null,"asc"===ne.order?"▲":"▼"))})))}),[G,ne,K,Q,g,S,ge]),Ee=e.useCallback((function(n){var r=n.item;return e.createElement(t.View,{style:[l.row,{width:Q},v]},G.map((function(n){return e.createElement(t.TouchableOpacity,{onPress:function(){console.log({column:n,item:r})},key:"".concat(r.id,"-").concat(n)},e.createElement(t.Text,{style:[l.cell,{width:K[n]}],numberOfLines:2,ellipsizeMode:"tail"},r[n]))})))}),[G,K,Q,v]),Be=e.useCallback((function(e){return e.id.toString()}),[]);return e.createElement(t.SafeAreaView,{style:l.container},e.createElement(t.View,{style:l.header},C?e.createElement(t.View,{style:l.searchContainer},e.createElement(t.Text,{style:l.searchIcon},"🔍"),e.createElement(t.TextInput,{style:l.searchInput,placeholder:"Search",value:_,onChangeText:ee})):null,y?e.createElement(t.TouchableOpacity,{style:[B||l.filterButton],onPress:function(){ue(G[0]),ie(!0)}},e.createElement(t.Text,{style:k||l.filterButtonText},"Filter")):null),e.createElement(t.View,{style:[l.tableContainer,{padding:20}]},e.createElement(t.ScrollView,{ref:me,horizontal:!0,scrollEnabled:!1,showsHorizontalScrollIndicator:!1},e.createElement(Te,null)),e.createElement(t.ScrollView,{ref:pe,horizontal:!0,onScroll:ye,scrollEventThrottle:16,bounces:!1,showsHorizontalScrollIndicator:!1},e.createElement(t.FlatList,{bounces:!1,data:Y,renderItem:Ee,keyExtractor:Be,initialNumToRender:10,maxToRenderPerBatch:10,windowSize:10,removeClippedSubviews:!0,ListEmptyComponent:e.createElement(t.View,{style:l.emptyState},e.createElement(t.Text,{style:l.emptyStateText},j||"No results found")),contentContainerStyle:{paddingBottom:null!=N?N:120},showsVerticalScrollIndicator:!0}))),e.createElement(t.Modal,{visible:le,transparent:!0,animationType:"slide"},e.createElement(t.TouchableWithoutFeedback,{onPress:function(){ie(!1)}},e.createElement(t.View,{style:l.modalOverlay},e.createElement(t.View,{style:[l.modalContent,O]},e.createElement(t.View,{style:l.modalHeader},e.createElement(t.Text,{style:l.modalTitle},null!=L?L:"Filter"),e.createElement(t.ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,style:l.tabsContainer},G.map((function(n){return e.createElement(t.TouchableOpacity,{key:n,style:[D||l.tabButton,ce===n&&{backgroundColor:W||"#5C6B73"}],onPress:function(){return ue(n)}},e.createElement(t.Text,{style:[null!=F?F:null,ce===n?{color:P||"#fff"}:{}]},n.charAt(0).toUpperCase()+n.slice(1)))})))),ce&&e.createElement(t.View,{style:l.filterContent},Se(ce)?e.createElement(t.View,{style:l.rangeFilterContainer},e.createElement(t.Text,{style:l.filterLabel},"Range"),e.createElement(t.View,{style:l.rangeInputs},e.createElement(t.TextInput,{style:l.rangeInput,placeholder:"Min",keyboardType:"numeric",value:"object"==typeof se[ce]&&null!==(null===(i=se[ce])||void 0===i?void 0:i.min)&&void 0!==(null===(a=se[ce])||void 0===a?void 0:a.min)?String(null===(c=se[ce])||void 0===c?void 0:c.min):"",onChangeText:function(e){return xe(ce,"min",e)}}),e.createElement(t.Text,null," - "),e.createElement(t.TextInput,{style:l.rangeInput,placeholder:"Max",keyboardType:"numeric",value:"object"==typeof se[ce]&&null!==(null===(u=se[ce])||void 0===u?void 0:u.max)&&void 0!==(null===(d=se[ce])||void 0===d?void 0:d.max)?String(null===(s=se[ce])||void 0===s?void 0:s.max):"",onChangeText:function(e){return xe(ce,"max",e)}}))):e.createElement(t.View,{style:l.optionsFilterContainer},e.createElement(t.Text,{style:l.filterLabel},"Select ",ce),e.createElement(t.View,{style:l.optionsList},J[ce].map((function(n){return e.createElement(t.TouchableOpacity,{key:n,style:[H||l.optionButton,se[ce]===n&&l.selectedOption],onPress:function(){return Ce(ce,n)}},e.createElement(t.Text,{style:[se[ce]===n&&{color:U||"#fff"},q||l.optionText],numberOfLines:1,ellipsizeMode:"tail"},n))}))))),e.createElement(t.View,{style:l.modalButtons},e.createElement(t.TouchableOpacity,{style:R||l.modalButton,onPress:we},e.createElement(t.Text,{style:z||null},"Reset")),A?e.createElement(t.TouchableOpacity,{style:[V||l.modalButton],onPress:ve},e.createElement(t.Text,{style:I||null},"Apply")):null))))))};
//# sourceMappingURL=index.js.map