@fto-consult/expo-ui 2.22.0 → 2.23.0

package/appConfig.txt

@@ -8,4 +8,7 @@
 
     /*** le nombre maximal de courbes qu'on peut afficher sur le même graphe***/
     maxSupportedChartSeries {number}
+
+    /***les fonctions d'aggregations du datagrid**/
+    datagridAggregatorFunctions : {objectOf({code:{string},label:{string},eval:{function}})|| arrayOf({code:{string},label:{string},eval:{function}})}
  }

package/package.json

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

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

@@ -344,7 +344,7 @@ const DatagridFactory = (Factory)=>{
             } = this.props
             chartContainerProps = defaultObj(chartContainerProps);
             const canRenderChart = this.canRenderChart();
-            const hasData = this.state.data.length ? true : false;
+            const hasData = this.getStateDataSize(false) ? true : false;
             testID = defaultStr(testID,"RN_DatagridAccordion");
             backToTopProps = defaultObj(backToTopProps);
             accordionProps = defaultObj(accordionProps);
@@ -445,7 +445,7 @@ const DatagridFactory = (Factory)=>{
                     <View testID={testID+"_HeaderContentCntainer"} style={[styles.table,styles.pullRight]}>
                         {dbSelector}
                         <View testID={testID+"_HeaderQueryLimit"} style={[styles.paginationItem]}>
-                            {this.renderQueryLimit(this.state.data.length.formatNumber())}
+                            {this.renderQueryLimit(this.getStateDataSize().formatNumber())}
                         </View>
                         {this.renderCustomPagination()}
                         {sortedColumnsLength ? <View testID={testID+"_HeaderSortedColumns"} style={[styles.sortableItems,styles.paginationItem,{paddingRight:10}]}>
@@ -519,6 +519,7 @@ const DatagridFactory = (Factory)=>{
                                         ,icon :  showFooters?'view-column':'view-module'
                                         ,text : (showFooters?'Masquer les totaux':'Afficher les totaux')
                                     }:null,
+                                    ...this.getAggregatorFunctionsMenuItems(),
                                     ...this.renderCustomMenu(),
                                     ...restItems,
                                     !canRenderChart && this.canScrollTo() &&  {
@@ -584,6 +585,8 @@ const DatagridFactory = (Factory)=>{
                                                     key = {field}
                                                     testID={testID+"_FooterItem_"+field}
                                                     {...footer}
+                                                    aggregatorFunction = {this.getActiveAggregatorFunction().code}
+                                                    aggregatorFunctions = {this.aggregatorFunctions}
                                                     anchorProps = {{style:[theme.styles.ph1,theme.styles.mh05]}}
                                                 />
                                             })}

package/src/components/Datagrid/Common/Common.js

@@ -24,7 +24,7 @@ import { StyleSheet,Dimensions,useWindowDimensions} from "react-native";
 import Preloader from "$ecomponents/Preloader";
 import Checkbox from "../Checkbox";
 import { TouchableRipple } from "react-native-paper";
-import { evalSingleValue,Footer,getFooterColumnValue } from "../Footer";
+import { evalSingleValue,Footer,getFooterColumnValue,isValidAggregator,extendAggreagatorFunctions} from "../Footer";
 import i18n from "$i18n";
 import { makePhoneCall,canMakePhoneCall as canMakeCall} from "$makePhoneCall";
 import copyToClipboard from "$capp/clipboard";
@@ -39,7 +39,6 @@ import {Menu} from "$ecomponents/BottomSheet";
 import {styles as tableStyles} from "$ecomponents/Table";
 import {DialogProvider} from "$ecomponents/Form/FormData";
 import Chart,{getMaxSupportedSeriesSize} from "$ecomponents/Chart";
-import { aggregatorFunctions} from "../Footer/Footer";
 
 const chart = "chart";
 export const donutChart = {
@@ -198,10 +197,15 @@ export default class CommonDatagridComponent extends AppComponent {
             sectionListDataSize : {value : {current : 0}},
             enablePointerEventsRef : {value : {current:false}},
             configureSectionListSelectedValues : {value : {}},
+            ///la liste des fonctions d'aggregations supportées
+            aggregatorFunctions : {value : extendAggreagatorFunctions(this.props.aggregatorFunctions)},
             ///les types d'affichage
             displayTypes : {value : hasFoundDisplayTypes ? disTypes : Object.clone(displayTypes)},
             sectionListColumnsSize : {value : {current:0}}, //la taille du nombre d'éléments de section dans les colonnes
         }) 
+        const sessionAggregator = defaultStr(this.getSessionData("aggregatorFunction")).trim();
+        const aggregatorProps = defaultStr(this.props.aggregatorFunction).trim();
+        this.state.aggregatorFunction= aggregatorProps && isValidAggregator(this.aggregatorFunctions[aggregatorProps]) ? aggregatorProps ? isNonNullString(sessionAggregator) && isValidAggregator(this.aggregatorFunctions[sessionAggregator]) : sessionAggregator : Object.keys(this.aggregatorFunctions)[0];
         this.isLoading = this.isLoading.bind(this);
         this.getProgressBar = this.getProgressBar.bind(this);
         this.sortRef.current.dir = defaultStr(this.sortRef.current.dir,this.sortRef.current.column == "date"?"desc":'asc')
@@ -1218,6 +1222,64 @@ export default class CommonDatagridComponent extends AppComponent {
             cb({...this.state.chartConfig});
         }
    }
+   getActiveAggregatorFunction(){
+        if(isNonNullString(this.state.aggregatorFunction) && this.aggregatorFunctions[this.state.aggregatorFunction]){
+            return this.aggregatorFunctions[this.state.aggregatorFunction]
+        }
+        return this.aggregatorFunctions[Object.keys(this.aggregatorFunctions)[0]];
+   }
+   /**** récupère l'item de menu permettant lié à la sélection de la fonction d'aggggrégation */
+   getAggregatorFunctionsMenuItems(withDivider){
+        if(!this.hasFootersFields()) return [];
+        const m = [];
+        const aggregatorFunction = this.getActiveAggregatorFunction().code;
+        Object.map(this.aggregatorFunctions,(ag)=>{
+            const active = ag.code == aggregatorFunction;
+            m.push({
+                ...ag,
+                icon : active?"check":null,
+                onPress : active ? undefined : ()=>{
+                    this.toggleActiveAggregatorFunction(ag);
+                }
+            })
+        });
+        if(m.length){
+            m.unshift({
+                text : "Fonctions d'aggrégation",
+                icon : "material-functions",
+                divider : true,
+            });
+            if(withDivider !== false){
+                m.unshift({divider:true});
+            }
+            if(withDivider !== false){
+                m[m.length-1].divider = true;
+            }
+        }
+        return m;
+   }
+   toggleActiveAggregatorFunction(ag){
+        if(!isValidAggregator(ag) || ag.code == this.state.aggregatorFunction) return null;
+        setTimeout(()=>{
+            this.setIsLoading(true,()=>{
+                this.prepareData({data:this.INITIAL_STATE.data},(state)=>{
+                    this.setState({...state,aggregatorFunction:ag.code},()=>{
+                        this.setSessionData("aggregatorFunction",ag.code);
+                        this.setIsLoading(false,false);
+                    })
+                })
+            },true);
+        },200);
+   }
+   renderAggregatorFunctionsMenu(){
+        const m = this.getAggregatorFunctionsMenuItems(false,false);
+        if(!m.length) return null;
+        return <Menu
+            items = {m}
+            title = "Fonctions d'aggrégations. Veuillez sélectionner la fonction à utiliser par défaut pour la totalisation des données des colonnes de type nombre"
+            anchor = {(p)=><Icon name="material-functions" {...p}/>}
+        />
+   }
    configureChart(refreshChart){
         if(!this.isChartRendable()){
             return Promise.reject({message:'Impossible de configurer le graphe car le type de données ne permet pas de rendu de type graphe'});
@@ -1283,14 +1345,6 @@ export default class CommonDatagridComponent extends AppComponent {
                         items : yItems,
                         multiple : true,
                     },
-                    aggregatorFunction : {
-                        type  : 'select',
-                        text : "Foncton d'aggrégation",
-                        required : true, 
-                        multiple : false,
-                        defaultValue : "sum",
-                        items : aggregatorFunctions,
-                    },
                     stacked : {
                         type : 'switch',
                         text : "Graphe empilé?",
@@ -1438,8 +1492,8 @@ export default class CommonDatagridComponent extends AppComponent {
    getSectionListHeadersChartOptions({chartType,yAxisColumn,xAxisColumn,aggregatorFunction}){
         if(!this.isSectionList()) return null;
         if(!isObj(chartType) || !isObj(yAxisColumn) || !yAxisColumn.field) return null;
-        if(!isObj(aggregatorFunction) || !isNonNullString(aggregatorFunction.code) || !aggregatorFunctions[aggregatorFunction.code]){
-            aggregatorFunction = aggregatorFunctions.sum;
+        if(!isValidAggregator(aggregatorFunction)){
+            aggregatorFunction = this.getActiveAggregatorFunction();
         }
         const code = aggregatorFunction.code;
         const isDonut = chartType.isDonut || chartType.isRadial;
@@ -1544,17 +1598,12 @@ export default class CommonDatagridComponent extends AppComponent {
             }
             xAxisColumn = this.state.columns[config.x];
         }
-        let aggregatorFunction = typeof config.aggregatorFunction =='string' && aggregatorFunctions[config.aggregatorFunction]?aggregatorFunctions[config.aggregatorFunction] :aggregatorFunctions.sum;
+        const aggregatorFunction = this.getActiveAggregatorFunction().eval;
         const emptyValue = this.getEmptyDataValue();
         const indexes = {};
         let series = [],xaxis = {},customConfig = {};
         let count = 0;
         if(!this.isSectionList()){
-            if(isObj(aggregatorFunction) && typeof aggregatorFunction.eval =='function'){
-                aggregatorFunction = aggregatorFunction.eval;
-            } else {
-                aggregatorFunction = aggregatorFunctions.sum.eval;
-            }
             this.state.data.map((data,index)=>{
                 if(!isObj(data))return null;
                 const txt = this.renderRowCell({
@@ -1575,8 +1624,9 @@ export default class CommonDatagridComponent extends AppComponent {
                     const current = indexes[s];
                     current[text] =  typeof current[text] =="number"? current[text] : 0;
                     const value = getFooterColumnValue({data,columnDef,columnField:columnDef.field});
-                    current[text] = aggregatorFunction(value,current[text],count);
-                })
+                    const rArgs = aggregatorFunction =='average'?{sum:current[text]+value,count:count+1} : {};
+                    current[text] = aggregatorFunction({value,total:current[text],data,columnDef,columnField:columnDef.field,count,...rArgs});
+                });
             });
             Object.map(indexes,(values,serieName)=>{
                 const col = this.state.columns[serieName];
@@ -2041,7 +2091,7 @@ export default class CommonDatagridComponent extends AppComponent {
                         result.push(currentSectionListFooter);
                     }
                     Object.map(footersColumns,(columnDef,field)=>{
-                        evalSingleValue({data:d,columnDef,field,result,displayLabel:false})
+                        evalSingleValue({data:d,aggregatorFunction:this.getActiveAggregatorFunction(),aggregatorFunctions:this.aggregatorFunctions,columnDef,field,result,displayLabel:false})
                     });
                 }
                 newData.push(d);
@@ -2152,6 +2202,8 @@ export default class CommonDatagridComponent extends AppComponent {
                                 key = {key}
                                 testID={testID+"_FooterItem_"+key}
                                 {...footer}
+                                aggregatorFunction = {this.getActiveAggregatorFunction().code}
+                                aggregatorFunctions = {this.aggregatorFunctions}
                                 displayLabel = {false}
                                 //anchorProps = {{style:[theme.styles.ph1,theme.styles.mh05]}}
                             />  
@@ -2483,10 +2535,18 @@ export default class CommonDatagridComponent extends AppComponent {
     getMaxSelectedRows(){
         return 0;
     }
+    ///retourne la longueur réelle du nombre d'éléments du tableau en excluant les valerus d'entêtes de section
+    getStateDataSize(includeSectionListDataSize){
+        const dSize = defaultNumber(this.state.data.length);
+        if(!dSize) return 0;
+        if(includeSectionListDataSize === false) return dSize;
+        return Math.max(dSize - this.getSectionListDataSize(),0);
+    }
     getMaxSelectableRows(){
         let max = this.getMaxSelectedRows();
-        if(this.state.data && typeof this.state.data.length ==='number'){
-            max = max ? Math.min(max,this.state.data.length,max) : this.state.data.length;
+        const dataSize = this.getStateDataSize();
+        if(dataSize){
+            max = max ? Math.min(max,dataSize,max) : dataSize;
         }
         return Math.max(max-this.getSectionListDataSize(),0);
     }
@@ -3095,7 +3155,9 @@ CommonDatagridComponent.propTypes = {
     }),
     displayType : chartDisplayType,
     /*** les types d'afichates supportés par l'application */
-    displayTypes : PropTypes.arrayOf(chartDisplayType) 
+    displayTypes : PropTypes.arrayOf(chartDisplayType),
+    /***le code de la fonction d'aggregation à utilier par défaut, dans la liste des fonctions d'aggrégations du composant */
+    aggregatorFunction : PropTypes.string,
 }
 
 const styles = StyleSheet.create({

package/src/components/Datagrid/Footer/Footer.js

@@ -2,66 +2,89 @@ import Menu from "$ecomponents/BottomSheet/Menu";
 import View from "$ecomponents/View";
 import {Pressable,StyleSheet} from "react-native";
 import Label from "$ecomponents/Label";
-import {defaultVal,defaultObj} from "$utils";
+import {defaultVal,defaultObj,isNonNullString,isObj} from "$utils";
 import React from "$react";
 import theme from "$theme"
+import appConfig from "$capp/config";
 
-let methods = {
-    sum : "Somme",
-    average : "Moyenne",
-    min : "Minimum",
-    max : 'Maximum',
-    count : "Nombre",
-}
 /*** les fonction d'aggreations */
 export const aggregatorFunctions = {
     sum : {
         code : "sum",
         label : "Somme",
-        eval : (current,prev,count)=>{
-            current = typeof current =='number'?current : 0;
-            prev = typeof prev =='number'? prev : 0;
-            return current+prev;
+        eval : ({value,total,count})=>{
+            value = typeof value =='number'?value : 0;
+            total = typeof total =='number'? total : 0;
+            return value+total;
         }
     },
-    /*average : {
-        code : "average",
-        label : "Moyenne",
-        eval : ()=>{
-
-        }
-    },*/
     min : {
         code : "min",
         label : "Minimum",
-        eval : (current,prev,count)=>{
-            current = typeof current =='number'?current : 0;
-            prev = typeof prev =='number'? prev : 0;
-            return Math.min(current,prev);
+        eval : ({value,total,count})=>{
+            value = typeof value =='number'?value : 0;
+            total = typeof total =='number'? total : 0;
+            return Math.min(value,total);
         },
     },
     max : {
         code : "max",
         label: 'Maximum',
-        eval : (current,prev,count)=>{
-            current = typeof current =='number'?current : 0;
-            prev = typeof prev =='number'? prev : 0;
-            return Math.max(current,prev);
+        eval : ({value,total,count})=>{
+            value = typeof value =='number'?value : 0;
+            total = typeof total =='number'? total : 0;
+            return Math.max(value,total);
         },
     },
     count : {
         code : "count",
         label : "Nombre",
-        eval : (current,prev,count)=>{
+        eval : ({value,total,count})=>{
             return (typeof count =='number'? count : 0)+1;
         }
     },
+    average : {
+        code : "average",
+        label : "Moyenne",
+        eval : ({count,sum})=>{
+            return typeof count =='number' && count > 0 && typeof sum =='number'? sum/count : 0;
+        }
+    },
+}
+/**** 
+ * Vérifie si la fonction d'aggregation est valide
+*/
+export const isValidAggregator = (aggregatorFunctionObject)=>{
+    return isObj(aggregatorFunctionObject) && isNonNullString(aggregatorFunctionObject.code) && typeof aggregatorFunctionObject.eval =='function' && true || false;
+}
+/*** permet d'étendre les fonction d'aggregations 
+ * @param {object|Array} liste des functions d'aggregation supplémentaires, de la forme 
+ *  {
+ *      code {string} le code de la fonction d'aggrégation
+ *      label {string} le libele
+ *      eval {function} la function a utiiser pour évaluer la données via l'aggregator
+
+ * }
+*/
+export function extendAggreagatorFunctions(aFunctions){
+    const r = {...aggregatorFunctions};
+    loopForAggregator(appConfig.get("datagridAggregatorFunctions"),r);
+    loopForAggregator(aFunctions,r);
+    return r;
+}
+const loopForAggregator = (aggregatorFunctions,result)=>{
+    result = defaultObj(result);
+    Object.map(aggregatorFunctions,(aggregatorObj,key)=>{
+        if(!isValidAggregator(aggregatorObj)) return null;
+        result[aggregatorObj.code] = aggregatorObj;
+    });
 }
-const formatValue = ({value,format,method})=>{
-    return (format === 'money' && method != 'count')? value.formatMoney():value.formatNumber();
+const formatValue = ({value,format,aggregatorFunction})=>{
+    return (format === 'money' && aggregatorFunction != 'count')? value.formatMoney():value.formatNumber();
 }
 export default function DGGridFooterValue (props){
-    let {label,text,displayLabel,style,format,testID,anchorProps} = props;
+    let {label,text,displayLabel,style,aggregatorFunctions,aggregatorFunction,format,testID,anchorProps} = props;
+    aggregatorFunctions = defaultObj(aggregatorFunctions);
     anchorProps = defaultObj(anchorProps);
     testID = defaultStr(testID,"RN_DatagridFooterComponent");
     label = defaultVal(label,text);
@@ -69,27 +92,28 @@ export default function DGGridFooterValue (props){
     if(displayLabel !== false){
         if(!label || !React.isValidElement(label,true)) return null;
     } else label = undefined;
-    const [active,setActive] = React.useState(isNonNullString(props.method) && props.method in methods ? props.method : "sum")
+    const [active,setActive] = React.useState(isNonNullString(aggregatorFunction) && aggregatorFunction in aggregatorFunctions ? aggregatorFunction : aggregatorFunctions[Object.keys(aggregatorFunctions)[0]]?.code)
     React.useEffect(()=>{
-        if(isNonNullString(props.method) && props.method in methods){
-            setActive(props.method)
+        if(aggregatorFunction !== active && isNonNullString(aggregatorFunction) && aggregatorFunction in aggregatorFunctions){
+            setActive(aggregatorFunction)
         }
-    },[props.method])
+    },[aggregatorFunction])
     let title = "";
     let menuItems = []
     const activeStyle = {color:theme.colors.primaryOnSurface};
-    for(let method in methods){
-        let val = defaultDecimal(props[method]);
+    for(let aggregatorFunction in aggregatorFunctions){
+        let val = defaultDecimal(props[aggregatorFunction]);
         if(isDecimal(val)){
-            let fText = formatValue({value:val,format,method});
-            title +=(title? ", ":"")+methods[method]+" : "+fText
+            let fText = formatValue({value:val,format,aggregatorFunction});
+            const mText = defaultStr(aggregatorFunctions[aggregatorFunction].label,aggregatorFunctions[aggregatorFunction].code,aggregatorFunction);
+            title +=(title? ", ":"")+mText +" : "+fText
             menuItems.push({
-                text : methods[method] + " : "+fText,
-                icon : active == method ? "check" : null,
-                style : [{paddingHorizontal:0},active ===method ?activeStyle:null],
+                text : mText + " : "+fText,
+                icon : active == aggregatorFunction ? "check" : null,
+                style : [{paddingHorizontal:0},active ===aggregatorFunction ?activeStyle:null],
                 onPress : (e)=>{
                     React.stopEventPropagation(e);
-                    setActive(method)
+                    setActive(aggregatorFunction)
                 }
             })
         }
@@ -108,7 +132,7 @@ export default function DGGridFooterValue (props){
                     </>
                 : null}
                 <Label testID={testID+"_LabelContent"} primary style={[styles.value]}>
-                    {formatValue({value:defaultDecimal(props[active]),method:active,format})}
+                    {formatValue({value:defaultDecimal(props[active]),aggregatorFunction:active,format})}
                 </Label>
             </Pressable>
         }}

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

@@ -4,7 +4,7 @@ import React from "$react";
 import memoize from "$react/memoize";
 export {default as FooterItem} from "./Footer";
 import {parseDecimal,defaultObj,defaultStr,isNonNullString} from "$utils";
-
+import { aggregatorFunctions as mAggregatorFunctions } from "./Footer";
 export * from "./Footer";
 
 /***évalue la valeur décimale selon les paramètres */
@@ -19,8 +19,9 @@ export const getFooterColumnValue = ({data,columnDef,field,result,columnField})
     return typeof val =='number'? parseDecimal(val.toFixed(12)) : 0;
 }
 
-export const evalSingleValue = ({data,columnDef,field,columnField,withLabel,result,displayLabel,onlyVisible})=>{
-    if(!isNonNullString(field) || !isObj(columnDef)) return result;
+export const evalSingleValue = ({data,columnDef,field,count,columnField,aggregatorFunctions,withLabel,result,displayLabel,onlyVisible})=>{
+    if(!isNonNullString(field) || !isObj(columnDef) || !isObj(data)) return result;
+    aggregatorFunctions = defaultObj(aggregatorFunctions,mAggregatorFunctions);
     onlyVisible = defaultBool(onlyVisible,true);
     if(onlyVisible === true && !(columnDef.visible !== false)) result;
     let val = getFooterColumnValue({data,columnDef,columnField,result,field});
@@ -36,21 +37,27 @@ export const evalSingleValue = ({data,columnDef,field,columnField,withLabel,resu
             }
         }
         const obj = currentResult[field];
-        obj.max = isDecimal(obj.max) ? Math.max(obj.max,val) : val;
-        obj.min = isDecimal(obj.min) ? Math.min(obj.min,val) : val;
-        obj.count = isDecimal(obj.count) ? (obj.count = obj.count +1) : 1;
-        obj.sum = isDecimal(obj.sum) ? (parseDecimal((obj.sum+val).toFixed(10))) : val;
-        obj.average = obj.sum / obj.count;
+        //obj.max = isDecimal(obj.max) ? Math.max(obj.max,val) : val;
+        //obj.min = isDecimal(obj.min) ? Math.min(obj.min,val) : val;
+        //obj.count = isDecimal(obj.count) ? obj.count : 0;
+        //obj.sum = isDecimal(obj.sum) ? (parseDecimal((obj.sum+val).toFixed(10))) : val;
+        Object.map(aggregatorFunctions,(aggegatorFunction,key)=>{
+            const code = aggegatorFunction.code;
+            obj[code] = aggegatorFunction.eval({columnDef,columnField,data,value : val,count,...obj,total:defaultNumber(obj[code])});
+        });
+        if(typeof obj.count =='number' && obj.count >0 && typeof obj.sum =='number'){
+            obj.average = obj.sum / obj.count;
+        }
         return currentResult;
     })
     return result;
 }
-export const evalValues = memoize(({data,columns,onlyVisible,withLabel,displayLabel})=>{
+export const evalValues = memoize(({data,columns,aggregatorFunctions,onlyVisible,withLabel,displayLabel})=>{
     let result = {};
     Object.map(data,(rowData,i)=>{
         if(!isObj(rowData)) return result;
         Object.map(columns,(columnDef,field)=>{
-            result = evalSingleValue({data:rowData,columnDef,field,result,withLabel,displayLabel,onlyVisible})
+            result = evalSingleValue({data:rowData,aggregatorFunctions,columnDef,field,result,withLabel,displayLabel,onlyVisible})
         })
     })
     return result;
@@ -65,7 +72,7 @@ export const evalValues = memoize(({data,columns,onlyVisible,withLabel,displayLa
  * @param : children {func}, fonction permettant de générer le contenu du footer
  */
 export default function DGGridFooters (props){
-    let {columns,children,displayLabel,Component,data,onlyVisible,...rest} = props;
+    let {columns,children,displayLabel,aggregatorFunctions,Component,data,onlyVisible,...rest} = props;
     rest = defaultObj(rest)
     if(Component === false){
         Component = React.Fragment;
@@ -83,7 +90,7 @@ export default function DGGridFooters (props){
     React.useEffect(()=>{
         setState({...state,data:props.data})
     },[props.data]);
-    let footers = evalValues({data:state.data,columns:state.columns,onlyVisible,displayLabel});
+    let footers = evalValues({data:state.data,aggregatorFunctions,columns:state.columns,onlyVisible,displayLabel});
     return <Component {...rest}>
         {children({
             footers,

package/src/components/Datagrid/IndexComponent.js

@@ -18,7 +18,7 @@ const DatagridMainComponent = React.forwardRef((props,ref)=>{
     const AccordionComponent = isTableDataRef.current ? TableDataAccordion : Accordion;
     let Component = TableComponent;
     const canRenderAccordion = (isFunction(props.accordion) || (isObj(props.accordionProps) && isFunction(props.accordionProps.accordion)) || props.accordion === true);
-    let renderType = defaultStr(getRenderType(),isDesk? "fixed":'accordion').trim().toLowerCase()
+    let renderType = defaultStr(getRenderType(),isDesk? "table":'accordion').trim().toLowerCase()
     if(renderType == 'accordion' && canRenderAccordion){
         Component = AccordionComponent;
     } else if(renderType =='table'){

package/src/components/Datagrid/RenderType.js

@@ -18,9 +18,9 @@ const DatagridRenderTypeComponent = (props)=>{
     let type = defaultStr(get(typeKey),isDesk? "fixed":'accordion').toLowerCase().trim();
     const rTypes = [
         {...getActiveProps(type,'accordion'),tooltip:"Les éléments de liste s'affichent de manière optimisé pour téléphone mobile",code:'accordion',icon:accordionIcon,label:'Mobile',labelText:'environnement optimisé pour téléphone mobile'},
-        //{...getActiveProps(type,'table'),tooltip:"Les éléments de listes s'affichent dans un tableau rééel",code:'table',icon:tableIcon,label:'Tableau réel avec pagination'}
+        {...getActiveProps(type,'table'),tooltip:"Les éléments de listes s'affichent dans un tableau",code:'table',icon:tableIcon,label:'Tableau'}
     ]  
-    Object.map(rendersTypes,(t,i)=>{
+    /*Object.map(rendersTypes,(t,i)=>{
         if(isObj(t)){
             if((isDesk && t.desktop) || (!isDesk && t.mobile)){
                 rTypes.push({
@@ -29,7 +29,7 @@ const DatagridRenderTypeComponent = (props)=>{
                 })
             }
         }
-    });
+    });*/
     let typeObj = {};
     Object.map(rTypes,(t)=>{
         if(isObj(t) && t.code == type){

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

@@ -56,10 +56,11 @@ const DatagridFactory = (Factory)=>{
             const footerFields = this.getFootersFields();
             if(isObj(footerFields[columnField])){
                 return <Footer
-                    //{...footerFields[columnField]}
                     {...defaultObj(footersValues[columnField])}
                     displayLabel = {false}
                     style = {[style]}
+                    aggregatorFunction = {this.getActiveAggregatorFunction().code}   
+                    aggregatorFunctions = {this.aggregatorFunctions}                               
                 />
             }
             return null;
@@ -203,7 +204,7 @@ const DatagridFactory = (Factory)=>{
                 <ScrollView horizontal showsHorizontalScrollIndicator={!isLoading} style={styles.paginationContainerStyle} contentContainerStyle={styles.minW100}>
                     <View style={[styles.paginationContent]}>
                         <View testID={testID+"_HeaderQueryLimit"}>
-                            {this.renderQueryLimit(this.state.data.length.formatNumber())}
+                            {this.renderQueryLimit(this.getStateDataSize().formatNumber())}
                         </View>
                         {this.renderCustomPagination()}
                         {!isMobile && <>
@@ -283,12 +284,14 @@ const DatagridFactory = (Factory)=>{
                                     ,icon :  showFooters?'view-column':'view-module'
                                     ,text : (showFooters?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux')
                                 } : null,
+                                ...this.getAggregatorFunctionsMenuItems(),
                                 ...(selectableMultiple ? restItems : [])
                             ] : visibleColumns}
                         
                         />
                         {this.renderSectionListMenu()}
                         {this.renderDisplayTypes()}
+                        {!isMobile && this.renderAggregatorFunctionsMenu() || null}
                         <View testID={testID+"_HeaderPagination"} style = {styles.paginationItem}>
                             <BottomSheetMenu
                                 testID={testID+"_HeaderMenus"}

package/src/components/Snackbar/index.js

@@ -218,7 +218,9 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     flexWrap : "wrap",
     justifyContent: 'space-between',
-    margin: 8,
+    margin: 0,
+    marginHorizontal : 10,
+    paddingRight : 10,
     borderRadius: 4,
     minHeight: 48,
   },