@fto-consult/expo-ui 2.16.11 → 2.18.0

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

@@ -13,7 +13,7 @@ import Image from "$ecomponents/Image";
 import Icon,{COPY_ICON} from "$ecomponents/Icon";
 import filterUtils from "$cfilters";
 import Hashtag from "$ecomponents/Hashtag";
-import {sortBy,isDecimal,extendObj,isObjOrArray,isOb,defaultNumber,defaultStr,isFunction,defaultBool,defaultArray,defaultObj,isNonNullString,defaultDecimal} from "$utils";
+import {sortBy,isDecimal,extendObj,isObjOrArray,isObj,defaultNumber,defaultStr,isFunction,defaultBool,defaultArray,defaultObj,isNonNullString,defaultDecimal} from "$utils";
 import {Datagrid as DatagridContentLoader} from "$ecomponents/ContentLoader";
 import React from "$react";
 import DateLib from "$lib/date";
@@ -35,6 +35,7 @@ import stableHash from "stable-hash";
 import DatagridProgressBar from "./ProgressBar";
 import {Flag} from "$ecomponents/Countries"
 import View from "$ecomponents/View";
+import {Menu} from "$ecomponents/BottomSheet";
 
 export const arrayValueSeparator = ", ";
 
@@ -68,7 +69,7 @@ export default class CommonDatagridComponent extends AppComponent {
         data = (data && typeof data == 'object')? Object.toArray(data):[];
         let sRows = {}
         Object.map(selectedRows,(row,i)=>{
-            if(isObj(row)){
+            if(this.canSelectRow(row)){
                 sRows[this.getRowKey(row,i)] = {...row};
             }
         });
@@ -107,7 +108,14 @@ export default class CommonDatagridComponent extends AppComponent {
             isLoadingRef : {
                 value : {current:false}
             },
-            currentFilteringColumns : {value:{}}
+            currentFilteringColumns : {value:{}},
+            emptySectionListHeaderValue : {value : uniqid("empty-section-list-header-val").toUpperCase()},
+            getSectionListHeaderProp : {value : typeof this.props.getSectionListHeader =='function'? this.props.getSectionListHeader : undefined},
+            sectionListData : {value : {}},//l'ensemble des données de sectionList
+            hasFoundSectionData : {value : {current: false}},
+            sectionListHeaderFooters : {value : {}},
+            sectionListDataSize : {value : {current : 0}},
+            sectionListColumnsSize : {value : {current:0}}, //la taille du nombre d'éléments de section dans les colonnes
         }) 
         this.isLoading = this.isLoading.bind(this);
         this.getProgressBar = this.getProgressBar.bind(this);
@@ -137,7 +145,8 @@ export default class CommonDatagridComponent extends AppComponent {
         })
         this.state.filteredColumns = defaultObj(this.getSessionData("filteredColumns"+this.getSessionNameKey()),this.props.filters);
         this.filtersSelectors = {selector:this.getFilters()};
-        this.prepareColumns();
+        const {sectionListColumns} = this.prepareColumns();
+        this.state.sectionListColumns = sectionListColumns;
         if(this.canHandleColumnResize()){
             this.state.columnsWidths = this.preparedColumns.widths;
         }
@@ -186,6 +195,27 @@ export default class CommonDatagridComponent extends AppComponent {
             this.currentDataSources = Object.toArray(this.currentDataSources);
         }
     }
+    /*** si une ligne peut être selectionable */
+    canSelectRow(row){
+        return isObj(row) && row.isSectionListHeader !== true ? true : false;
+    }
+    prepareSectionListColumns(props){
+        props = defaultObj(props,this.props);
+        const l = {};
+        (Array.isArray(props.sectionListColumns) ? props.sectionListColumns : []).map((col)=>{
+            if(isNonNullString(col)){
+                l[col.trim()] = {};
+            }
+        })
+        return l;
+    }
+    /*** récupère la liste des colonnes à utiliser pour le rendu des sectionList, ces colonnes doivent figurer dans la liste des colonnes du tableu */
+    getSectionListColumns(){
+        if(!isObj(this.state.sectionListColumns)){
+            return this.prepareSectionListColumns();
+        }
+        return this.state.sectionListColumns;
+    }
     bindResizeEvents(){
         return false;
     }
@@ -367,6 +397,7 @@ export default class CommonDatagridComponent extends AppComponent {
     }
     /**** fonction appelée lorsque l'on clique sur la checkbox permettant de sélectionner la ligne */
     handleRowToggle ({row,rowIndex,rowData,rowKey,index, selected,cb,callback},cb2){
+        if(!this.canSelectRow(row)) return ;
         if(typeof rowKey !=='string' && typeof rowKey !=='number') return;
         let selectableMultiple = defaultVal(this.props.selectableMultiple,true);
         rowIndex = defaultNumber(rowIndex,index);
@@ -477,6 +508,9 @@ export default class CommonDatagridComponent extends AppComponent {
     isSelectableColumn(columnDef,columnField){
         return isObj(columnDef) && defaultStr(columnDef.field,columnField) === this.getSelectableColumName();
     }
+    isIndexColumn(columnDef,columnField){
+        return isObj(columnDef) && defaultStr(columnDef.field,columnField) === this.getIndexColumnName();
+    }
     initColumnsCallback(){}
     initColumns (columns){
         this.state.columns = {};
@@ -516,7 +550,7 @@ export default class CommonDatagridComponent extends AppComponent {
             const headerCol = Object.clone(headerCol1);
             if(isAccordion && headerCol.accordion === false) return null;
             let header = {...headerCol};
-            header.field = header.field || headerIndex
+            header.field = defaultStr(header.field, headerIndex)
             /**** pour ignorer une colonne du datagrid, il suffit de passer le paramètre datagrid à false */
             if(!isNonNullString(header.field) || header.datagrid === false) {
                 return;
@@ -726,7 +760,7 @@ export default class CommonDatagridComponent extends AppComponent {
         if(typeof this.props.onSort =='function' && this.props.onSort({...sort,context:this,sort,data:this.INITIAL_STATE.data,fields:this.state.columns,columns:this.state.columns}) === false){
             return;
         }
-        this.prepareData({data:this.state.data,updateFooters:false},(state)=>{
+        this.prepareData({data:this.INITIAL_STATE.data,updateFooters:false},(state)=>{
             this.setState(state);
         });
     }
@@ -946,13 +980,80 @@ export default class CommonDatagridComponent extends AppComponent {
         }
         return null;
    }
+   toggleColumnInSectionList(columnName){
+        if(!isNonNullString(columnName) || !isObj(this.state.columns[columnName])) return;
+        if(!isObj(this.state.sectionListColumns) || !Array.isArray(this.preparedColumns?.sectionListColumnsMenuItems))return;
+        const menuItems = this.preparedColumns?.sectionListColumnsMenuItems;
+        if(!menuItems.length) return;
+        const sectionListColumns = {...this.state.sectionListColumns};
+        if(isObj(sectionListColumns[columnName])){
+            delete sectionListColumns[columnName];
+        } else {
+            sectionListColumns[columnName] = {};
+        }
+        const {sectionListColumns:pSListColumns} = this.prepareColumns({sectionListColumns});
+        this.setIsLoading(true,()=>{
+            this.prepareData({data:this.INITIAL_STATE.data,sectionListColumns:pSListColumns},(state)=>{
+                this.setState({...state,sectionListColumns:pSListColumns},()=>{
+                    this.setIsLoading(false);
+                });
+            });
+        })
+   }
+   removeAllColumnsInSectionList(){
+        const {sectionListColumns} = this.prepareColumns({sectionListColumns:{}});
+        this.setIsLoading(true,()=>{
+            this.prepareData({data:this.INITIAL_STATE.data,sectionListColumns},(state)=>{
+                this.setState({...state,sectionListColumns},()=>{
+                    this.setIsLoading(false);
+                });
+            });
+        })
+   }
+   /*** permet d'effectuer le rendu des colonnes groupable dans le menu item */
+   renderSectionListMenu(){
+        const m = Array.isArray(this.preparedColumns?.sectionListColumnsMenuItems)? this.preparedColumns?.sectionListColumnsMenuItems : [];
+        if(!m.length){
+            return null;
+        }
+        const isMobile = isMobileOrTabletMedia();
+        return <Menu
+            title = {"Grouper les données du tableau"}
+            testID = {"RN_DatagridSectionListMenu"}
+            anchor = {(props)=>{
+                return <Icon {...props} name='format-list-group' title={"Grouper les éléments du tableau"}></Icon>
+            }}
+            items = {[
+                !isMobile && {
+                    text : "Grouper par",
+                    icon : "group",
+                    closeOnPress : false,
+                    divider : true,
+                },
+                this.sectionListColumnsSize.current && {
+                    text : "Supprimer les groupes",
+                    icon: "ungroup",
+                    divider : true,
+                    onPress : ()=>{
+                        setTimeout(()=>{
+                            this.removeAllColumnsInSectionList();
+                        },300)
+                    }
+                },
+                ...m,
+            ]}
+        />
+   }
    prepareColumns (args){
        this.beforePrepareColumns();
        args = defaultObj(args);
+       const sectionListColumns = {};
+       const sListColumns = isObj(args.sectionListColumns) ? args.sectionListColumns : this.getSectionListColumns();
        const filteredColumns = isObjOrArray(args.filteredColumns)?args.filteredColumns : isObjOrArray(this.state.filteredColumns) ? this.state.filteredColumns : {};
        const columns = args.columns || this.state.columns;
        const currentSortedColumn = isObj(args.sortedColumn) && args.sortedColumn.column? args.sortedColumn : defaultObj(this.sortRef.current);
        const visibleColumns = [],headerFilters = [],visibleColumnsNames={};
+       const sectionListColumnsMenuItems = [];
        const sortable = defaultBool(this.props.sortable,true);
        const sortedColumns = {};
        let sortedColumnsLength = 0;
@@ -965,6 +1066,7 @@ export default class CommonDatagridComponent extends AppComponent {
        const widths = {};
        let totalWidths = 0;
        let columnIndex = 0,visibleColumnIndex=0;
+       this.sectionListColumnsSize.current = 0;
        Object.map(columns,(header,headerIndex) => {
             let {
                 field,
@@ -1011,11 +1113,17 @@ export default class CommonDatagridComponent extends AppComponent {
             const title = header.text = header.text || header.label || header.title||header.field
             visibleColumnsNames[header.field] = visible ? true : false;
             visibleColumns.push({
-                onPress : ()=>{this.toggleColumnVisibility(header.field);return false},
+                onPress : ()=>{
+                    setTimeout(() => {
+                        this.toggleColumnVisibility(header.field);
+                    },300);
+                    return false;
+                },
                 title : title,
                 icon : visible?CHECKED_ICON_NAME : null,
             });
             restCol.field = header.field;
+            
             restCol.label = defaultStr(header.text,header.label) ;
             restCol.type = type;
             if(!restCol.label){
@@ -1037,6 +1145,7 @@ export default class CommonDatagridComponent extends AppComponent {
                 sortedColumns[field] = restCol.label;
                 sortedColumnsLength++;
             }
+            
             colFilter = colFilter && filters !== false ? true : false;
             const sortedProps =  isColumnSorted ? {...sortedColumn} : {};
             let filterProps = {};
@@ -1093,6 +1202,30 @@ export default class CommonDatagridComponent extends AppComponent {
                 key : header.field,
                 filter :colFilter, 
             },headerFilters)
+            
+            if(this.props.groupable !== false && header.groupable !== false && !this.isSelectableColumn(header,header.field) && !this.isIndexColumn(header,header.field)){
+                const isInSectionListHeader = isObj(sListColumns[field]);
+                if(isInSectionListHeader){
+                    sectionListColumns[field] = {
+                        ...header,
+                         width,
+                         type,
+                        ...sListColumns[field],
+                    };///les colonnes de sections
+                    this.sectionListColumnsSize.current++;
+                }
+                sectionListColumnsMenuItems.push({
+                    field,
+                    onPress : ()=>{
+                        setTimeout(()=>{
+                            this.toggleColumnInSectionList(field);
+                        },300)
+                        return false;
+                    },
+                    title : title,
+                    icon : isInSectionListHeader?CHECKED_ICON_NAME : null,
+                });
+            }
             columnIndex++;
             visibleColumnIndex++;
             
@@ -1106,6 +1239,8 @@ export default class CommonDatagridComponent extends AppComponent {
         this.preparedColumns.filteredColumns = filteredColumns;
         this.preparedColumns.widths = widths;
         this.preparedColumns.totalWidths = totalWidths;
+        this.preparedColumns.sectionListColumns = sectionListColumns;
+        this.preparedColumns.sectionListColumnsMenuItems = sectionListColumnsMenuItems;
         return this.preparedColumns;
    }
    getPaginatedSelectedRows(data){
@@ -1118,49 +1253,128 @@ export default class CommonDatagridComponent extends AppComponent {
    getFooterValues(){
         return defaultObj(this.___evaluatedFootersValues);
    }
+   
+   /**** s'il s'agit d'une section list */
+   isSectionList(sectionListColumns){
+        sectionListColumns = isObj(sectionListColumns) ? sectionListColumns : this.state.sectionListColumns;
+        return !this.isPivotDatagrid() && isObj(sectionListColumns) && Object.size(sectionListColumns,true) ? true : false;
+   }
+   /**** si le datagrid admet les sectionDatas */
+   hasSectionListData(){
+    return this.hasFoundSectionData.current;
+   }
+   /*** vérifie si l'on a la colonne passée en paramètre */
+   hasColumn(column){
+        column = isObj(column)? defaultStr(column.field) : defaultStr(column);
+        if(!column) return false;
+        return isObj(this.state.columns) && this.state.columns[column]&& true || false;
+   }
+    formatSectionListHeader(sectionListHeader){
+        if(!isNonNullString(sectionListHeader)) return "";
+        if(this.props.sectoonListHeaderUpperCase !== false){
+            sectionListHeader = sectionListHeader.toUpperCase();
+        }
+        return sectionListHeader.trim();
+    }
+    getSectionListDataSize(){
+        return defaultNumber(this.sectionListDataSize.current)
+    }
     prepareData(args,cb){
-        let {pagination,data,force,updateFooters} = defaultObj(args);
+        let {pagination,data,force,sectionListColumns,updateFooters} = defaultObj(args);
         cb = typeof cb ==='function'? cb : typeof args.cb == 'function'? args.cb : undefined;
+        sectionListColumns = isObj(sectionListColumns) ? sectionListColumns : this.state.sectionListColumns;
         let isArr = Array.isArray(data);
         //let push = (d,index) => isArr ? newData.push(d) : newData[index] = d;
         const hasLocalFilter = this.props.filters !== false && this.hasLocalFilters;
         let footersColumns = this.getFooterFields(),hasFooterFields = Object.size(footersColumns,true);
         const canUpdateFooters = !!(updateFooters !== false && hasFooterFields);
-        if(hasLocalFilter || !isArr || canUpdateFooters) {
+        this.hasFoundSectionData.current = false;
+        this.sectionListDataSize.current = 0;
+        const isSList = this.isSectionList(sectionListColumns);
+        if(hasLocalFilter || !isArr || canUpdateFooters || isSList) {
             if(canUpdateFooters){
                 this.___evaluatedFootersValues = {}
             }
             const newData = [];
-            Object.map(data,(d,i)=>{
+            const columns = sectionListColumns;
+            const sectionListColumnsSize = this.sectionListColumnsSize.current;
+            const hasSectionColumns = this.sectionListColumnsSize.current > 0;
+            if(isSList){
+                Object.map(this.sectionListData,(v,i)=>{
+                    delete this.sectionListData[i];
+                });
+                //on réinnitialise tous les footes
+                Object.map(this.sectionListHeaderFooters,(v,i)=>{
+                    delete this.sectionListHeaderFooters[i];
+                })
+            }
+            let currentSectionListFooter = null;
+            const sectionListData = this.sectionListData;//l'ensemble des données de sectionList
+            Object.map(data,(d,i,rowIndex)=>{
                 if(!isObj(d) || (hasLocalFilter && this.doLocalFilter({rowData:d,rowIndex:i}) === false)){
                     return;
                 }
+                if(hasSectionColumns){
+                    let sHeader = this.getSectionListHeader({data:d,columnsLength : sectionListColumnsSize,fieldsSize:sectionListColumnsSize,sectionListColumnsLength:sectionListColumnsSize,sectionListColumnsSize,allData:data,rowData:d,index:i,rowIndex,context:this,columns,fields:columns});
+                    if(sHeader === false) return;//on omet la donnée si la fonction de récupération de son header retourne false
+                    if(!isNonNullString(sHeader)){
+                        if(this.props.ignoreEmptySectionListHeader !== false){
+                            sHeader = this.emptySectionListHeaderValue;
+                        } else return;
+                    }
+                    let r  = this.formatSectionListHeader(sHeader);
+                    if(!Array.isArray(sectionListData[r])){
+                        sectionListData[r] = [];
+                        this.sectionListDataSize.current++;
+                    }
+                    sectionListData[r].push(d); 
+                    if(canUpdateFooters){
+                        this.sectionListHeaderFooters[r] = defaultObj(this.sectionListHeaderFooters[r]);
+                        currentSectionListFooter = this.sectionListHeaderFooters[r];
+                    }
+                    this.hasFoundSectionData.current = true;
+                }
                 if(canUpdateFooters){
+                    const result = [this.___evaluatedFootersValues]
+                    if(currentSectionListFooter){
+                        result.push(currentSectionListFooter);
+                    }
                     Object.map(footersColumns,(columnDef,field)=>{
-                        evalSingleValue({data:d,columnDef,field,result:this.___evaluatedFootersValues,displayLabel:false})
+                        evalSingleValue({data:d,columnDef,field,result,displayLabel:false})
                     });
                 }
                 newData.push(d);
                 //push(d,i);
             });
             data = newData;
-        }      
+        } 
         if(this.canAutoSort() && isNonNullString(this.sortRef.current.column)){
             if(isObj(this.state.columns) && this.state.columns[this.sortRef.current.column]){
                 let field = this.state.columns[this.sortRef.current.column];
-                const cfg = Object.assign({},this.sortRef.current);
-                cfg.getItem = (item,columnName,{getItem})=>{
+                const sortConfig = Object.assign({},this.sortRef.current);
+                sortConfig.getItem = (item,columnName,{getItem})=>{
                     if(isObj(item) && (field.type =='decimal' || field.type =="number")){
                         const v = item[columnName];
                         return isDecimal(v)? v : isNonNullString(v)? parseDecimal(v) : 0;
                     }
                     return getItem(item,columnName);
                 }
-                data = sortBy(data,cfg);//on trie tout d'abord les données
+                data = sortBy(data,sortConfig);//on trie tout d'abord les données
             }
         }
         this.INITIAL_STATE.data = data;
-        if(this.canPaginateData()){
+        if(this.hasFoundSectionData.current){
+            data = [];
+            for(let i in this.sectionListData){
+                //this.sectionListData[i] = sortConfig ? sortBy(this.sectionListData[i],sortConfig):this.sectionListData[i];
+                //const v = i;// === this.emptySectionListHeaderValue ? "" : i;
+                data.push({isSectionListHeader:true,sectionListHeaderKey:i});
+                this.sectionListData[i].map((d)=>{
+                    data.push(d);
+                })
+            }
+        } 
+        if(!this.hasSectionListData() && this.canPaginateData()){
             pagination = this.initPagination(pagination);
             pagination.rows = data.length;    
             this._pagination = pagination;
@@ -1175,6 +1389,64 @@ export default class CommonDatagridComponent extends AppComponent {
         }
         return state;
     }
+    getSectionListHeader(args){
+        if(this.getSectionListHeaderProp){
+           return this.getSectionListHeaderProp(args);
+        }
+        const {fields,sectionListColumnsSize,data} = args;
+        const d = [];
+        Object.map(fields,(field,i)=>{
+            const txt = this.renderRowCell({
+                ...args,
+                columnDef : field,
+                renderRowCell : false,
+                isSectionListHeader : true,
+                columnField : defaultStr(field.field,i),
+            });
+            if(!isNonNullString(txt) && typeof txt !=='number') return;
+            if(sectionListColumnsSize == 1){
+                d.push(txt);
+            } else {
+                d.push("{0} : {1}".sprintf(defaultStr(field.label,field.txt),txt))
+            }
+        });
+        return d.length ? d.join(arrayValueSeparator) : undefined;
+     }
+    /*** retourne le type d'item à rendre à la fonction flashlist 
+     * @see : https://shopify.github.io/flash-list/docs/guides/section-list
+    */
+    getFlashListItemType(item){
+        return typeof item === "string" || isObj(item) && item.isSectionListHeader === true ? "sectionHeader" : "row";;
+    }
+    /****permet de faire le rendu flashlist */
+    renderFlashListItem(args){
+        if(!this.hasSectionListData()) return null;
+        args = defaultObj(args);
+        let {item,rowProps,rowStyle} = args;
+        if(!isObj(item) || item.isSectionListHeader !== true || !isNonNullString(item.sectionListHeaderKey)) return null;
+        args.isAccordion = this.isAccordion();
+        args.columns = this.preparedColumns.visibleColumns;
+        args.columnsNames = this.preparedColumns.visibleColumnsNames;
+        const key = item.sectionListHeaderKey;
+        const label = key === this.emptySectionListHeaderValue ? defaultStr(this.props.sectionListHeaderEmptyValue,"N/A") : key;
+        const style = typeof this.props.getSectionListHeaderStyle =='function' ? this.props.getSectionListHeaderStyle(args) : null;
+        const cStyle = typeof this.props.getSectionListHeaderContentContainerStyle =="function" ?this.props.getSectionListHeaderContentContainerStyle(args) : undefined;
+        const lStyle = typeof this.props.getSectionListHeaderLabelStyle =='function' ? this.props.getSectionListHeaderLabelStyle(args) : null;
+        
+        rowProps = defaultObj(rowProps);
+        const testID  = rowProps.testID = defaultStr(args.testID,"RN_DatagridSectionListHeader")+"_"+defaultVal(args.rowIndex,args.index)
+        if(Array.isArray(rowStyle)){
+            if(style){
+                rowStyle.push(style);
+            }
+        }
+        if(isObj(this.sectionListHeaderFooters[key])){
+            console.log(this.sectionListHeaderFooters[key]," is value of keyeees");
+        }
+        return <View testID={testID+"_ContentContainer"}  style={[theme.styles.w100,theme.styles,theme.styles.justifyContentCenter,theme.styles.pt1,theme.styles.pb1,theme.styles.alignItemsCenter,theme.styles.ml1,theme.styles.mr1,cStyle]}>
+            <Label testID={testID+"_Label"} splitText numberOfLines={3} textBold style={[theme.styles.w100,lStyle]}>{label}</Label>
+        </View>
+    }
     isRowSelected(rowKey,rowIndex){
         if(isObj(rowKey)){
             rowKey = this.getRowKey(rowKey,rowIndex);
@@ -1195,7 +1467,7 @@ export default class CommonDatagridComponent extends AppComponent {
             }
        });
        Object.map(rows,(row,i)=>{
-            if(isObj(row)) {
+            if(this.canSelectRow(row)) {
                 const rowKey = this.getRowKey(row,i);
                 this.selectedRowsCount++;
                 this.selectedRows[rowKey] = row;
@@ -1477,7 +1749,7 @@ export default class CommonDatagridComponent extends AppComponent {
         if(this.state.data && typeof this.state.data.length ==='number'){
             max = max ? Math.min(max,this.state.data.length,max) : this.state.data.length;
         }
-        return max;
+        return Math.max(max-this.getSectionListDataSize(),0);
     }
     canSetIsLoading(){
         return isObj(this.progressBarRef.current) && typeof this.progressBarRef.current.setIsLoading =='function' ? true : false;
@@ -1626,6 +1898,10 @@ export default class CommonDatagridComponent extends AppComponent {
     }
     canScrollTo(){
         return this.state.data.length? true :false;
+    }
+    /**** permet d'afficher le menu item lié aux champs triables */
+    getSortableMenuMenuItem(){
+
     }
     renderSelectableCheckboxCell(props){
         const {containerProps} = props;
@@ -1652,14 +1928,16 @@ export default class CommonDatagridComponent extends AppComponent {
             différent du td d'un table et ne doit pas être un TableColumn de md
     */
     renderRowCell (arg){
-        let {rowData,rowKey,handleSelectableColumn,rowIndex,index,rowCounterIndex,columnDef,columnField} = arg;
+        let {rowData,renderRowCell:customRenderRowCell,isSectionListHeader,rowKey,handleSelectableColumn,rowIndex,index,rowCounterIndex,columnDef,columnField} = arg;
+        const renderText = isSectionListHeader === true || customRenderRowCell === false ? true : false;
         rowIndex = isDecimal(rowIndex)? rowIndex : isDecimal(index)? index : undefined;
         rowCounterIndex = isDecimal(rowCounterIndex) ? rowCounterIndex : isDecimal(rowIndex)? rowIndex+1 : defaultDecimal(rowCounterIndex);
-        if(!isObj(rowData)) return {render:null,extra:{}};
+        if(!isObj(rowData)) return renderText ? null : {render:null,extra:{}};
          let _render = null;
          columnDef = defaultObj(columnDef);
          let _type = defaultStr(columnDef.jsType,columnDef.type).trim().toLowerCase();
          if(this.isSelectableColumn(columnDef,columnField)){
+            if(renderText) return null;
              rowKey = rowKey ? rowKey : this.getRowKey(rowData,rowIndex);
              return {render :handleSelectableColumn === false ? null : this.renderSelectableCheckboxCell({
                 ...arg,
@@ -1671,7 +1949,8 @@ export default class CommonDatagridComponent extends AppComponent {
                     this.handleRowToggle({row:rowData,rowData,rowIndex,rowKey,selected:checked})
                 }
              }),style:{},extra:{style:{}}};
-         } else if(columnField == this.getIndexColumnName()){
+         } else if((columnField == this.getIndexColumnName())){
+            if(renderText) return null;
             return {render : rowCounterIndex.formatNumber(),style:{},extra:{}};
          }
          let renderProps = undefined;
@@ -1679,7 +1958,7 @@ export default class CommonDatagridComponent extends AppComponent {
              renderProps = columnDef.datagrid.renderProps;
          }
         const style = Object.assign({},StyleSheet.flatten(columnDef.style));
-        if(columnDef.visible === false){
+        if(!renderText && columnDef.visible === false){
             style.display = "none";
         }
         let extra = {style},renderArgs = arg;
@@ -1694,7 +1973,7 @@ export default class CommonDatagridComponent extends AppComponent {
             _render = defaultDecimal(columnDef.multiplicater({...renderArgs,value:rowData[columnField]}),rowData[columnField]);
         } else {
              _render = defaultValue;
-             if(defaultStr(columnDef.format).toLowerCase() === 'hashtag'){
+             if(!renderText && defaultStr(columnDef.format).toLowerCase() === 'hashtag'){
                 _render = <Hashtag>{_render}</Hashtag>
              } else if(typeof columnDef.render === "function"){
                  _render = columnDef.render.call(this,renderArgs);
@@ -1714,11 +1993,11 @@ export default class CommonDatagridComponent extends AppComponent {
                      _render = checkedLabel;
                  } else _render = uncheckedLabel;
              }
-             else if(_type =='select_country' || _type =='selectcountry'){
+             else if(!renderText && (_type =='select_country' || _type =='selectcountry')){
                 _render = <Flag withCode {...columnDef} length={undefined} width={undefined} height={undefined} code={defaultValue}/>
              }
              ///le lien vers le table data se fait via la colonne ayant la propriété foreignKeyTable de type chaine de caractère non nulle
-             else if(isNonNullString(columnDef.foreignKeyTable) || columnDef.primaryKey === true || arrayValueExists(['id','piece'],_type)){
+             else if(!renderText && (isNonNullString(columnDef.foreignKeyTable) || columnDef.primaryKey === true || arrayValueExists(['id','piece'],_type))){
                 const id = rowData[columnField]?.toString();
                 if(isNonNullString(id)){
                     _render = <TableLink 
@@ -1772,6 +2051,7 @@ export default class CommonDatagridComponent extends AppComponent {
                      }
                  }
              } else if(_type == 'image'){
+                if(renderText) return null;
                  columnDef = defaultObj(columnDef)
                  columnDef = {...columnDef,...defaultObj(columnDef.datagrid)};
                  columnDef.size = defaultDecimal(columnDef.size,50);
@@ -1825,7 +2105,7 @@ export default class CommonDatagridComponent extends AppComponent {
                 _render = _render.formatNumber();
             //}
          }
-         if(_render && isObj(renderProps)){
+         if(!renderText && _render && isObj(renderProps)){
              let Component = defaultVal(renderProps.Component,Label);
              delete renderProps.Component;
              _render = <Component {...renderProps}>{_render}</Component>
@@ -1833,9 +2113,13 @@ export default class CommonDatagridComponent extends AppComponent {
          if(typeof _render =='boolean'){
             _render = _render ? "Oui" : "Non";
          }
-         if(typeof _render ==='string' || typeof _render =='number'){
+         if(renderText){
+            return React.getTextContent(_render);
+         }
+         if((typeof _render ==='string' || typeof _render =='number')){
              _render = <Label selectable>{_render}</Label>
          }
+
          _render = React.isValidElement(_render)|| Array.isArray(_render)?_render:null;
          return {render:_render,style,extra,key};
     }
@@ -1986,7 +2270,7 @@ CommonDatagridComponent.propTypes = {
      * si c'est un objet, alors il peut être de la forme :  
      * {
      *   title : PropTypes.node , //le titre du header
-     *   avatar : PropTypes.string(dataUrl,src,other) || PropType.node, ///l'avatar,
+     *   avatar : PropTypes.string(dataUrl,src,other) || PropTypes.node, ///l'avatar,
      *   rowClassName : la class à appliquer à la ligne
      *   rowProps : les props à appliquer à la ligne de la liste
      *   headerClassName : la class à appliquer au header de la ligne
@@ -2007,6 +2291,22 @@ CommonDatagridComponent.propTypes = {
         PropTypes.arrayOf(PropTypes.object),
         PropTypes.objectOf(PropTypes.object),
     ]),
+    sectionListHeaderEmptyValue : PropTypes.string, //la valeur vide par défaut à afficher dans les entêtes du table
+    ignoreCaseOnSectionListHeader : PropTypes.bool,//si l'on ignorera la casse dans le sectionlISThEADER
+    sectoonListHeaderUpperCase : PropTypes.bool, //si le sectionListHeader sera en majuscule
+    getSectionListHeaderLabelStyle : PropTypes.func,//la fonction permettant de récupérer les styles à appliquer sur le composant label de la section header
+    getSectionListHeaderContentContainerStyle : PropTypes.func, //retourne les styles à appliquer sur le contentContainer de la sectionListHeader
+    getSectionListHeaderStyle : PropTypes.func, // la fonction permettant de récupérer les propriétés particulières à appliquer au style passé en paramètre
+    /*** spécifie si le datagrid est groupable et si l'on utilisera les sectionList du composant FLashList pour le rendu du tableau 
+     * si une colonne n'est pas groupable alors elle ne peut pas apparaître dans les sectionList
+    */
+    groupable : PropTypes.bool,
+    /*la fonction permettant de récupérer l'entête de la sectionList pour la données passée en paramètre
+        @param {object : {data:{object},context:{this},allData:[]}}
+        @return {string}
+    */
+    getSectionListHeader : PropTypes.func,
+    ignoreEmptySectionListHeader : PropTypes.bool, // si l'on ignorera les sectionList data dont l'entête, le sectionListHeader est empty
     /**** la fonction permettant de faire le rendu dun contenu paginé, personalisé */
     renderCustomPagination : PropTypes.func,
     getActionsArgs : PropTypes.func,//fonction permettant de récupérer les props supplémentaires à passer aux actions du datagrid