@fto-consult/expo-ui 6.26.5 → 6.26.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "6.26.5",
+  "version": "6.26.8",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {

package/src/components/Datagrid/Accordion/Row.js

@@ -75,7 +75,7 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
     const wrapStyle = React.useMemo(()=>{
         return getRowStyle({row:item,index,selected,numColumns,isAccordion:true,rowIndex:index});
     },[selected,numColumns]);
-    const viewWrapperStyle = [];
+    const viewWrapperStyle = [selectable !== false && theme.styles.cursorPointer];
     if(selected) {
         const handleAvatarRowToggle = (event)=>{
             React.stopEventPropagation(event);
@@ -122,6 +122,7 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
                     rowProps.style,
                     numColumns > 1 && styles.multiColumns,
                     selected && styles.selected,
+                    selectable !== false && theme.styles.cursorPointer,
                     //style,
                 ]}
                 ref = {React.useMergeRefs(ref,innerRef)}
@@ -230,6 +231,7 @@ const styles = StyleSheet.create({
         alignItems : 'center',
         justifyContent : 'center',
         paddingVertical : 10,
+        width : "100%",
     },
     right : {
         marginHorizontal : 0,

package/src/components/Datagrid/Accordion/index.js

@@ -401,7 +401,7 @@ const DatagridFactory = (Factory)=>{
             const hasFootersFields = this.hasFootersFields();
             const datagridHeader = <View testID={testID+"_HeaderContainer"} pointerEvents={pointerEvents} style={[styles.datagridHeader]}>
                 <ScrollView testID={testID+"_HeaderScrollView"} horizontal  contentContainerStyle={StyleSheet.flatten([styles.contentContainerStyle,styles.minW100])}>
-                    <View testID={testID+"_HeaderContentCntainer"} style={[styles.table,styles.pullRight]}>
+                    <View testID={testID+"_HeaderContentContainer"} style={[styles.table,styles.pullRight]}>
                         {/*this.renderDataSourceSelector()*/}
                         <View testID={testID+"_HeaderQueryLimit"} style={[styles.paginationItem]}>
                             {this.renderQueryLimit(this.getStateDataSize().formatNumber())}
@@ -552,6 +552,7 @@ const DatagridFactory = (Factory)=>{
                         items = {this.state.data}
                         isLoading = {isLoading}
                         ref = {this.listRef}
+                        style = {styles.list}
                         backToTopRef = {backToTopRef?(e)=>{
                             return this.backToTopRef.current;
                         }:false}
@@ -605,13 +606,15 @@ const styles = StyleSheet.create({
         alignItems : 'center',
         maxHeight : 60
     },
+    list : {
+        paddingHorizontal : 5,
+    },
     container : {
         position : 'relative',
         flexDirection :'column',
         justifyContent : 'flex-start',
         width : '100%',
         flex : 1,
-        paddingHorizontal : isNativeMobile()? 5:1,
     },
     accordionHeader : {
         paddingTop : 0,

package/src/components/Datagrid/SWRDatagrid.js

@@ -202,7 +202,13 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
         showError  : false,
         swrOptions : getSWROptions(swrConfig.refreshTimeout)
     });
+    const dataRef = React.useRef(null);
+    const totalRef = React.useRef(0);
+    const loading = (isLoading || isValidating);
     const {data,total} = React.useMemo(()=>{
+        if(loading){
+            return {data:dataRef.current,total:totalRef.current};
+        }
         const {data,total} = (Array.isArray(result) ? {data:result,total:result.length} : isObj(result)? result : {data:[],total:0});
         const dd = Object.size(data);
         if(dd>total){
@@ -211,9 +217,10 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
         if(onFetchData && typeof onFetchData =='function'){
             onFetchData({allData:data,total,data,context:innerRef.current})
         }
+        dataRef.current = data;
+        totalRef.current = total;
         return {data,total};
-    },[result])
-    const loading = (isLoading || isValidating);
+    },[result,loading])
     React.useEffect(()=>{
         setTimeout(x=>{
             if(error && innerRef.current && innerRef.current.isLoading && innerRef.current.isLoading()){

package/src/components/Datagrid/Table/index.js

@@ -13,7 +13,7 @@ import {Menu as BottomSheetMenu} from "$ecomponents/BottomSheet"
 import RenderType from "../RenderType";
 import Footer from "../Footer/Footer";
 import theme from "$theme";
-import Table from "$ecomponents/Table";
+import Table,{styles as tableStyles} from "$ecomponents/Table";
 import DatagridProvider from "../hooks/Provider";
 
 
@@ -64,17 +64,25 @@ const DatagridFactory = (Factory)=>{
             return null;
         }
         renderFilterCell(props){
-            const {columnField,style} = props;
+            const {columnField,style,...rest} = props;
             const filterC = this.currentFilteringColumns[columnField];
+            const rest2 = {};
+            ["defaultValue","action","operator"].map((i)=>{
+               if(i in rest){
+                 rest2[i] = rest[i];
+               }
+            });
             if(isObj(filterC)){
-                return <Filter 
+                return <Filter
+                    {...rest}
                     {...filterC}
+                    {...rest2}
                     withLabel = {false}
-                    style = {[styles.filter,theme.styles.pv0,theme.styles.mv0]}
+                    style = {[styles.filter,tableStyles.filter,theme.styles.pv0,theme.styles.mv0]}
                     anchorProps  ={{size:20}}
                     mode = "flat"
                     inputProps = {{
-                        style : [styles.filter],
+                        style : [styles.filter,tableStyles.filter],
                         mode : "flat",
                     }}
                 />
@@ -406,12 +414,9 @@ const styles = StyleSheet.create({
     filter : {
         marginHorizontal:0,
         paddingHorizontal:0,
-        maxHeight : 40,
-        height : 40,
         width : "100%",
         alignSelf : 'flex-start',
         flexGrow : 1,
-        minHeight : 40,
         backgroundColor : 'transparent'
     },
     layoutContent : {

package/src/components/Dropdown/index.js

@@ -845,7 +845,7 @@ class DropdownComponent extends AppComponent {
         textInputProps.style.backgroundColor = backgroundColor;
         progressBarProps = defaultObj(progressBarProps);
 
-        const loadingElement = !canHandle ? (<View testID={testID+"_DropdownActivityIndicatorContainer"} style = {[{paddingRight : 20}]}>
+        const loadingElement = !canHandle && !this.props.isFilter ? (<View testID={testID+"_DropdownActivityIndicatorContainer"} style = {[{paddingRight : 20}]}>
             <ActivityIndicator 
                 color={error?theme.colors.error:theme.colors.secondary} 
                 animating={true} 

package/src/components/Filter/context.js

@@ -0,0 +1,9 @@
+import {createContext,useContext,useRef,useMemo} from "react";
+
+export const FiltersContext = createContext(null);
+
+export const useFilters = x=>useContext(FiltersContext);
+
+export const FiltersProvider = ({})=>{
+    const filtersValuesRef = useRef({});
+}

package/src/components/Filter/index.js

@@ -187,17 +187,10 @@ export default class Filter extends AppComponent {
           value = undefined;
         }
       }
-      const prev = JSON.stringify(defaultObj(this.previousRef.current)), current = {value,operator,action,ignoreCase};
-          let tV = isArray(value) && value.length <= 0 ? undefined : value;
-      
-      this.isInitializedRef.current = this.props.dynamicRendered || this.isInitializedRef.current;
-      if(prev == "{}" && (isNullOrEmpty(tV) || value === 0) && (!this.isInitializedRef.current) && (force !== true))  {
-        return this;
-      }
+      const prev = JSON.stringify(this.previousRef.current), current = {value,operator,action,ignoreCase};
       if(prev == JSON.stringify(current) && (force !== true)){
           return this;
       }
-      this.isInitializedRef.current = true;
       this.previousRef.current = current;
       if(isFunction(this.props.onChange)){
           let selector = {};
@@ -415,6 +408,23 @@ export default class Filter extends AppComponent {
       }
       return value;
   }
+  UNSAFE_componentWillReceiveProps(nexProps){
+    const state = {};
+    const defaultValue = nexProps.defaultValue == null || nexProps.defaultValue =="" ? undefined : nexProps.defaultValue;
+    const stateValue = this.state.defaultValue == null || this.state.defaultValue ==""? undefined : this.state.defaultValue;
+    if('defaultValue' in nexProps && defaultValue != stateValue){
+      state.defaultValue = defaultValue;
+    }
+    if(isNonNullString(nexProps.operator) && nexProps.operator in this.state.operators){
+      state.operator = nexProps.operator;
+    }
+    if(isNonNullString(nexProps.action) in nexProps && nexProps.action in this.state.actions){
+      state.action = nexProps.action;
+    }
+    if(Object.size(state,true)){
+      this.setState(state,()=>{});
+    }
+  }
   render (){
     let {
       filter,

package/src/components/Form/Fields/SelectTableData/Component.js

@@ -196,14 +196,6 @@ const TableDataSelectField = React.forwardRef(({foreignKeyColumn,isStructData,ge
             }
         }
     }
-    const prevIsUpdate = React.usePrevious(isUpdate);
-    const prevDefaultValue = React.usePrevious(foreignKeyColumnValue);
-    /*if(!isFilter){
-        React.useEffect(()=>{
-            if(prevIsUpdate === isUpdate && JSON.stringify(prevDefaultValue) === JSON.stringify(foreignKeyColumnValue)) return;
-            context.refresh();
-        },[isUpdate,foreignKeyColumnValue])
-    }*/
     dropdownActions = isObj(dropdownActions)? {...dropdownActions} : isArray(dropdownActions)? [...dropdownActions] : []
     const isDropdonwsActionsArray = isArray(dropdownActions);
     const refreshItem = {

package/src/components/Form/Form.js

@@ -7,6 +7,7 @@ import KeyboardAvoidingView from "$ecomponents/KeyboardAvoidingView";
 import { StyleSheet } from "react-native";
 import APP from "$capp/instance";
 import PropTypes from "prop-types";
+import View from "$ecomponents/View";
 
 /**** règles d'utilisation : 
     1. les forms doivent toujours avoir un nom : chaine de caractère unique pour l'application et non null
@@ -105,9 +106,9 @@ export default class FormComponent extends React.AppComponent {
             ...rest
         } = this.props;
         testID = defaultStr(testID,"RN_FormComponent");
-        return <KeyboardAvoidingView  {...rest} testID={testID+"_FormKeyboardAvoidingView"} style={[styles.container,rest.style]}>
+        return <View  {...rest} testID={testID+"_FormKeyboardAvoidingView"} style={[styles.container,rest.style]}>
             {this.props.children}
-        </KeyboardAvoidingView>
+        </View>
     }
 }
 const isField  = (Component)=>{

package/src/components/Form/FormData/componentsTypes.js

@@ -79,7 +79,6 @@ export const getFilterComponentProps = (_props)=>{
         filterType,
         getValidValue,
         validate,
-        onValidate,
         onValidatorValid,///il s'agit de la fonction de rappel appelée immédiatement après que le validateur ait réuissie la validation
         onValidateField,
         onNoValidate,

package/src/components/Table/Header/CellWrapper.js

@@ -0,0 +1,26 @@
+import React from "$react";
+import {useTable,useGetColumnProps} from "../hooks";
+import {defaultObj,defaultVal} from "$cutils";
+import styles from "../styles";
+import HeaderCell from "./Cell";
+import Label from "$ecomponents/Label";
+import theme from "$theme";
+
+export default function HeaderCellWrapper({columnField,isFilter,isFooter}){
+    const {render,sortedColumn,filtersValues,...props} = useGetColumnProps({columnField,isFilter,isFooter});
+    const columnDef = props.columnDef;
+    const rProps = isFilter ? sortedColumn : undefined;
+    const isHeader = !isFilter && !isFooter;
+    const width = props.width;
+    const {containerProps,...rest} = props;
+    return React.useMemo(()=>{
+        let content = typeof render ==='function' ? render(props) : isHeader ? defaultVal(columnDef?.text,columnDef?.label,columnField):null;
+        const wStyle = width && {width} || null;
+        if(isHeader){
+            content = <Label splitText numberOfLines={1} style={[theme.styles.w100,theme.styles.h100,styles.headerCellLabel,wStyle]} textBold primary>{content}</Label>
+        } else if(isFooter){
+            content = <Label primary textBold children={content}/>
+        }
+        return <HeaderCell {...containerProps} width={width} columnDef={columnDef} columnField={columnField} style={[styles.headerItem,styles.headerItemOrCell,styles.filterCell,containerProps.style,styles.cell,columnDef.style]} children={content}/>
+    },[columnField,width,rProps]);
+}

package/src/components/Table/Header/filters.old.js

@@ -0,0 +1,8 @@
+if(isFilter){
+    console.log(forceRender,"is force render heeeeein manaa",rest.style);
+    return colsNames.map((columnField,index)=>{
+        const visible = columnsVisibilities[index];
+        if(!visible) return null;
+        return <CellWrapper isFilter key={columnField} columnField={columnField} columIndex={index}/>
+    })
+}

package/src/components/Table/Header/index.js

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-import Cell from "./Cell";
 import React from "$react";
 import { View } from "react-native";
 import PropTypes from "prop-types";
@@ -13,20 +12,20 @@ const isNative = isMobileNative();
 const Component = isNative ? View : "tr";
 import { useTable } from "../hooks";
 import styles from "../styles";
-import CellHeader from "./CellHeader";
+import CellWrapper from "./CellWrapper";
 
 export default function RowHeaderComponent({isFilter,isFooter,isHeader,className,children:cChildren,...rest}){
-    const {showHeaders,visibleColsNames,visibleColsNamesStr,headerContainerProps,footerContainerProps,filtersContainerProps,showFilters,footers,headers,filters,showFooters} = useTable();
+    const {showHeaders,visibleColsNames,visibleColsNamesStr,headerContainerProps,footerContainerProps,filtersContainerProps,showFilters,filters,showFooters} = useTable();
     const canV = showHeaders === false ? false : Array.isArray(children)? !!children.length : true;
     const visible = canV && (isHeader ?  true : isFilter ? !!showFilters : isFooter ? !!showFooters: true);
     const containerProps = defaultObj( isHeader ? headerContainerProps : isFooter ? footerContainerProps : filtersContainerProps);
     const style = filters ? styles.filters : isFooter ? styles.footer : null;
-    const children = React.useMemo(()=>{
-        const contents = isFilter ? filters : isFooter ? footers : headers;
-        return visibleColsNames.map((columnField,cIndex)=>{
-            return contents[columnField] || null;
+    const children = React.useMemo(()=>{    
+        return visibleColsNames.map((columnField,index)=>{
+            return <CellWrapper isFilter={isFilter} isFooter={isFooter} key={columnField} columnField={columnField} columIndex={index}/>
         });
     },[visibleColsNamesStr]);
+    if(!visible) return null;
     const rP = isNative ? rest : {className:classNames(className,"table-footer-or-header-row")}
     return <Component {...rP} {...containerProps} style={StyleSheet.flatten([styles.header,style,rest.style,containerProps.style,!visible && hStyle.hidden])}>
         {children}
@@ -37,12 +36,6 @@ RowHeaderComponent.propTypes = {
     visible : PropTypes.bool,
 }
 
-export {Cell};
-
-RowHeaderComponent.Cell = Cell;
-RowHeaderComponent.CellHeader = CellHeader;
-
-export {CellHeader};
 
 const hStyle = StyleSheet.create({
     hidden : {height:0,opacity:0,display:'none'}

package/src/components/Table/hooks.js

@@ -1,19 +1,16 @@
-import React,{useMemo} from "$react";
-import {defaultStr,isObj,uniqid} from "$cutils";
+import {useMemo,useRef,useStableMemo} from "$react";
+import {defaultStr,isObj} from "$cutils";
 import {DEFAULT_COLUMN_WIDTH} from "./utils";
-import Label from "$ecomponents/Label";
-import HeaderCell from "./Header/Cell";
-import MainHeaderCell from "./Header/CellHeader";
-import styles from "./styles";
 
-export const usePrepareColumns = ({columns,forceRender,testID,renderFooterCell,renderHeaderCell,renderFilterCell,columnsWidths,headerCellContainerProps,colsWidths,columnProps,footers,footerCellContainerProps,filterCellContainerProps})=>{
+export const usePrepareColumns = ({columns,testID,columnsWidths,headerCellContainerProps,colsWidths:cColsWidths,columnProps,footerCellContainerProps,filterCellContainerProps})=>{
+   const filtersValuesRef = useRef({});
    return useMemo(()=>{
         testID = defaultStr(testID,"RN_TableColumns")
-        const cols = {},headers = {},footers = {},filters = {},visibleColsNames = [],columnsVisibilities=[],columnsNames = [],colsWidths={};
-        let hasFooters = false;
+        const cols = {},visibleColsNames = [],columnsVisibilities=[],columnsNames = [],colsWidths={};
         columnProps = defaultObj(columnProps);
+        //const colsNames=[];
         let columnIndex = 0;
-        const widths = defaultObj(columnsWidths,colsWidths);
+        const widths = defaultObj(columnsWidths,cColsWidths);
         headerCellContainerProps = defaultObj(headerCellContainerProps);
         footerCellContainerProps = defaultObj(footerCellContainerProps);
         filterCellContainerProps = defaultObj(filterCellContainerProps);
@@ -21,59 +18,62 @@ export const usePrepareColumns = ({columns,forceRender,testID,renderFooterCell,r
         Object.map(columns,(columnDef,field)=>{
             if(!isObj(columnDef)) return;
             const columnField = defaultStr(columnDef.field,field);
-            let {visible,width,type,style} = columnDef;
+            let {visible,width,type} = columnDef;
             visible = typeof visible =='boolean'? visible : true;
             type = defaultStr(type,"text").toLowerCase().trim();
             width = colsWidths[columnField] = defaultDecimal(widths[columnField],width,DEFAULT_COLUMN_WIDTH);
-            const colArgs = {width,type,columnDef,containerProps:{},columnField,index:columnIndex,columnIndex};
-            const hContainerProps = defaultObj(colArgs.containerProps);
             totalWidths+=width;
-            const rArgs = {columnDef,width};
-            headers[columnField] = <MainHeaderCell colArgs={colArgs} {...rArgs} columnField={columnField} width={width} testID={testID+"_HeaderCell_"+columnField} {...headerCellContainerProps} {...hContainerProps} key={columnField} style={[styles.headerItem,styles.headerItemOrCell,headerCellContainerProps.style,hContainerProps.style,style]}/>
-            if(typeof renderFilterCell =='function'){
-                const filterCell = renderFilterCell(colArgs);
-                filters[columnField] = <HeaderCell {...rArgs} width={width} testID={testID+"_Filter_Cell_"+columnField} {...filterCellContainerProps} key={columnField} style={[styles.headerItem,styles.headerItemOrCell,styles.filterCell,filterCellContainerProps.style,styles.cell,style]}>
-                    {React.isValidElement(filterCell)? filterCell : null}
-                </HeaderCell>
+            columnsVisibilities.push(visible);
+            //colsNames.push(columnField);
+            if(visible){
+              visibleColsNames.push(columnField);
             }
-            if(typeof renderFooterCell ==='function') {
-                const footerProps = {...colArgs,containerProps:{}};
-                let cellFooter = renderFooterCell(footerProps);
-                let fContainerProps = {};
-                if(!React.isValidElement(cellFooter,true) && isObj(cellFooter)){
-                    fContainerProps = isObj(cellFooter.containerProps)? cellFooter.containerProps : {};
-                    cellFooter = React.isValidElement(cellFooter.children)? cellFooter.children : React.isValidElement(cellFooter.content)? cellFooter.content : null;
-                } else if(isObj(footerProps.containerProps)){
-                    fContainerProps = footerProps.containerProps;
-                }
-                cellFooter = React.isValidElement(cellFooter,true)? cellFooter : null;
-                if(!hasFooters && cellFooter){
-                    hasFooters = true;
-                }
-                footers[columnField] = <HeaderCell {...rArgs} width={width} testID={testID+"_Footer_Cell_"+columnField}  key={columnField} style={[styles.headerItem,styles.headerItemOrCell,footerCellContainerProps.style,style]}>
-                    <Label primary children={cellFooter}/>
-                </HeaderCell>
-          }
-          columnsVisibilities.push(visible);
-          if(visible){
-            visibleColsNames.push(columnField);
-          }
-          columnsNames.push(columnField);
-          cols[columnField] = {
-            ...columnDef,
-            width,
-            index : columnIndex,
-            field : columnField,
-            visible,
-            columnField,
-          };
-          columnIndex++;
+            columnsNames.push(columnField);
+            cols[columnField] = {
+              ...columnDef,
+              width,
+              index : columnIndex,
+              field : columnField,
+              visible,
+              columnField,
+            };
+            columnIndex++;
         });
-        return {columns:cols,columnsNames,headers,colsWidths,columnsVisibilities,totalWidths,totalColsWidths:totalWidths,visibleColsNamesStr:JSON.stringify(visibleColsNames),visibleColsNames,hasFooters,footers,filters};
-      },[columns,footers,forceRender]);
+        return {columns:cols,columnsNames,filtersValues:filtersValuesRef.current,colsWidths,columnsVisibilities,totalWidths,totalColsWidths:totalWidths,visibleColsNamesStr:visibleColsNames.join(","),visibleColsNames};
+      },[columns]);
 }
+import useTable from "./useTable";
 
+export const useGetColumnProps = ({columnField,isFilter,isFooter})=>{
+  const {renderFilterCell,renderFooterCell,filtersValues,renderHeaderCell,sortedColumn,columns,filterCellContainerProps,footerCellContainerProps,headerCellContainerProps,testID,colsWidths} = useTable();
+  const columnDef = columns[columnField];
+  const props = isFilter ? {
+    containerProps : defaultObj(filterCellContainerProps),
+    render : renderFilterCell,
+  } : isFooter ? {
+    containerProps : defaultObj(footerCellContainerProps),
+    render : renderFooterCell,
+  } : {
+    containerProps : defaultObj(headerCellContainerProps),
+    render : renderHeaderCell
+  }
+  props.width = colsWidths[columnField];
+  props.columnField = columnField;
+  props.columnDef = columnDef;
+  props.type = defaultStr(columnDef?.type,"text").toLowerCase().trim();
+  props.sortedColumn = sortedColumn;
+  props.testID = `${testID}-HeaderCell${isFilter?"Filter":isFooter?"Footer":"Header"}_${columnField}`;
+  if(isFilter){
+    props.onValidate = ({action,defaultValue,operator})=>{
+      filtersValues[columnField] = {action,defaultValue,operator};
+    }
+    Object.map(filtersValues[columnField],(v,i)=>{
+      props[i] = v;
+    });
+  }
+  return props;
+}
 
-export {default as useTable} from "./useTable";
+export {useTable};
 
 export * from "./useTable";

package/src/components/Table/index.js

@@ -60,7 +60,7 @@ const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRe
     footerScrollViewProps = defaultObj(footerScrollViewProps);
     const listRef = React.useRef(null),scrollViewRef = React.useRef(null),headerScrollViewRef = React.useRef(null);
     const layoutRef = React.useRef({});
-    const {testID,withDatagridContext,filters,getRowByIndex,itemsChanged,hasFooters:stateHasFooters,bordered,totalWidths,keyExtractor,items,data} = useTable();
+    const {testID,withDatagridContext,getRowByIndex,itemsChanged,hasFooters:stateHasFooters,bordered,totalWidths,keyExtractor,items,data} = useTable();
     const hasData = !!Object.size(data,true);
     const emptyData = !hasData && renderListContent === false ?null : typeof renderEmpty =='function' ? renderEmpty() : null;
     const hasEmptyData = emptyData && React.isValidElement(emptyData);
@@ -70,7 +70,7 @@ const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRe
     const scrollContentContainerStyle = {flex:1,width:listWidth,minWidth:totalWidths,height:'100%'};
     const scrollEventThrottle = isMobileNative()?200:50;
     const scrollViewFlexGrow = {flexGrow:0};
-    const maxScrollheight = 170;//footersContent.length && fFilters.length ? 170  : footersContent.length ?120 :  fFilters.length ? 140 : 80;
+    const maxScrollheight = 170;
     const allScrollViewProps = {
         scrollEventThrottle,
         horizontal : true,
@@ -142,11 +142,13 @@ const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRe
             }
         }
     };
-    const headerFootersFilters = <>
-        <Header isHeader={true} testID={testID+"_Header"}/>
-        <Header isFilter={true} testID={testID+"_Filters"} style={[styles.header,styles.footers,theme.styles.pt0,theme.styles.pb0,theme.styles.ml0,theme.styles.mr0]}/>
-        <Header isFooter testID={testID+"_Footer"}  style={[styles.header,styles.footers,theme.styles.pt0,theme.styles.pb0,theme.styles.ml0,theme.styles.mr0]}/>
-    </>
+    const headerFootersFilters = React.useMemo(()=>{
+        return <>
+            <Header isHeader={true} testID={testID+"_TableHeader"}/>
+            <Header isFilter={true} testID={testID+"_TableFilters"} style={[styles.header,styles.filters,theme.styles.pt0,theme.styles.pb0,theme.styles.ml0,theme.styles.mr0]}/>
+            <Header isFooter testID={testID+"_TableFooter"}  style={[styles.header,styles.footers,theme.styles.pt0,theme.styles.pb0,theme.styles.ml0,theme.styles.mr0]}/>
+        </>
+    },[])
     return <View testID= {testID+"_Container"}  {...containerProps} onLayout={(e)=>{
         layoutRef.current = e.nativeEvent.layout;
         if(containerProps.onLayout){
@@ -285,9 +287,6 @@ const ColumnType = PropTypes.shape({
     label : PropTypes.text,
     text : PropTypes.string,
 });
-const RowType = PropTypes.shape({
-
-});
 
 
 TableComponent.popTypes = {

package/src/components/Table/styles.js

@@ -8,6 +8,7 @@ const styles = StyleSheet.create({
     contentContainer : {
         flex:1,
     },
+    headerCellLabel : {maxHeight:70},
     container : {
         width : '100%',
         minHeight : 300,
@@ -35,7 +36,7 @@ const styles = StyleSheet.create({
         minHeight : 40,
     },
     filters : {
-       height : 50,
+       maxHeight : 50,
     },
     footers : {
         minHeight : 40,
@@ -45,9 +46,6 @@ const styles = StyleSheet.create({
         flexDirection : 'row',
         flexWrap : 'wrap',
     },
-    footers : {
-        minHeight : 40,
-    },
     headerItemOrCell : {
         alignItems: 'flex-start',
         alignSelf : 'center',
@@ -65,8 +63,12 @@ const styles = StyleSheet.create({
         paddingVertical : 0,
         marginVertical : 0,
         marginHorizontal : 0,
+        maxHeight : 40,
         justifyContent : 'flex-start',
     },
+    filter : {
+        minHeight : 30,
+    },
     headerItem: {
         minHeight: 30,
     },

package/src/components/Table/Header/CellHeader.js

@@ -1,21 +0,0 @@
-import React from "$react";
-import Cell from "./Cell";
-import useTable from "../useTable";
-import Label from "$ecomponents/Label";
-import {defaultVal} from "$cutils";
-import theme from "$theme";
-import styles from "../styles";
-
-export default function TableCellMainHeaderComponent({columnField,columnDef,style,colArgs,...props}){
-    const {sortedColumn,renderHeaderCell,colsWidths} = useTable();
-    const width = colsWidths[columnField];
-    const children = React.useMemo(()=>{
-        const content = typeof renderHeaderCell =='function'? renderHeaderCell(colArgs) : defaultVal(columnDef.text,columnDef.label,columnField);
-        if(!React.isValidElement(content,true)){
-            console.error(content," is not valid element of header ",columnDef," it could not be render on table");
-            return null;
-        }
-        return <Label splitText numberOfLines={1} style={[theme.styles.w100,theme.styles.h100,{maxHeight:70},width&&{width}]} textBold primary>{content}</Label>
-    },[sortedColumn,columnField])
-    return <Cell {...props} style={[styles.headerItem,style]} children={children}/>
-}