@fto-consult/expo-ui 1.0.4

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

@@ -0,0 +1,1866 @@
+import theme from "$theme";
+import APP from "$capp";
+import {isMobileOrTabletMedia,isSmallPhoneMedia} from "$cplatform/dimensions";
+import PropTypes from "prop-types";
+import {Component as AppComponent} from "$react"
+import $session from "$session";
+import Auth from "$cauth";
+import Button from "$ecomponents/Button";
+import Tooltip from "$ecomponents/Tooltip";
+import setQueryLimit from "./setQueryLimit";
+import {notify,showConfirm} from "$ecomponents/Dialog";
+import Label from "$ecomponents/Label";
+import Image from "$ecomponents/Image";
+import Icon,{COPY_ICON} from "$ecomponents/Icon";
+//import TableLink from "$containers/TableLink";
+//import filterUtils from "$ccomponents/Filter/utils";
+import Hashtag from "$ecomponents/Hashtag";
+import {sortBy,extendObj,isObjOrArray,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";
+//import dataFileManager from "$database/dataFileManager";
+import Filter,{canHandleFilter} from "$ecomponents/Filter";
+import {CHECKED_ICON_NAME} from "$ecomponents/Checkbox";
+import { COLUMN_WIDTH,DATE_COLUMN_WIDTH } from "../utils";
+import { StyleSheet,Dimensions,useWindowDimensions} from "react-native";
+import Preloader from "$ecomponents/Preloader";
+import Checkbox from "../Checkbox";
+import { TouchableRipple } from "react-native-paper";
+import { evalSingleValue } from "../Footer";
+import i18n from "$i18n";
+import { makePhoneCall,canMakePhoneCall as canMakeCall} from "$capp/MakePhoneCall";
+import copyToClipboard from "$capp/clipboard";
+import { Pressable } from "react-native";
+
+export const arrayValueSeparator = ", ";
+
+const databaseArgs = {};
+export const footerFieldName = "dgrid-fters-fields";
+
+
+/*****
+ * Pour spécifier qu'un champ du datagrid n'existe pas en bd il s'uffit de suffixer le nom du champ par le suffix : "FoundInDB" et de renseigner false comme valeur 
+de l'objet rowData de cette propriété
+ */
+export default class CommonDatagridComponent extends AppComponent {
+    constructor(props){
+        super(props);
+        this.initSession();
+        this.autobind();
+        let {
+            data,
+            selectedRows,
+            ...rest
+        } = props;
+        if(this.bindResizeEvents()){
+            extendObj(this._events,{
+                RESIZE_PAGE : this.onResizePage.bind(this),
+                SET_DATAGRID_QUERY_LIMIT : this.onSetQueryLimit.bind(this),
+            });
+        }
+        rest = defaultObj(rest);
+        this._pagination = defaultObj(rest.pagination);
+        this.hasLocalFilters = false;
+        data = (data && typeof data == 'object')? Object.toArray(data):[];
+        let sRows = {}
+        Object.map(selectedRows,(row,i)=>{
+            if(isObj(row)){
+                sRows[this.getRowKey(row,i)] = {...row};
+            }
+        });
+        selectedRows = sRows;
+        let sData = this.getSessionData()
+        sData.showFooter = defaultVal(sData.showFooter,true);
+        sData.fixedTable = defaultBool(sData.fixedTable,false);
+        extendObj(this.state, {
+            data,
+            sort :defaultObj(props.sort),
+            showFilters : defaultBool(props.showFilters,(sData.showFilter? true : this.isPivotDatagrid())),
+            showFooter : defaultBool(props.showFooter,(sData.showFooter? true : false)),
+            fixedTable : sData.fixedTable
+        });
+        Object.defineProperties(this,{
+            layoutRef : {
+                value : React.createRef(null),
+            },
+            preparedColumns : {
+                value : {},override:false, writable:false,
+            },
+            selectedRows : {
+                value : selectedRows, override : false, writable : false,
+            },
+            selectedRowsRefs : {
+                value : {},override : false, writable : false,
+            },
+            [footerFieldName] : {
+                value : uniqid(footerFieldName),override:false, writable: false
+            },
+        }) 
+        if(!isNonNullString(this.state.sort.column)){
+            this.state.sort.column = "date";
+        }
+        this.state.sort.dir = defaultStr(this.state.sort.dir,this.state.sort.column == "date"?"desc":'asc')
+        this.hasColumnsHalreadyInitialized = false;
+        this.initColumns(props.columns);
+        
+        this.INITIAL_STATE = {
+            data,
+            sort : this.state.sort
+        }
+        this._sort = this.state.sort;
+        this._datagridId = isNonNullString(this.props.id)? this.props.id : uniqid("datagrid-id")
+        this.canDoFilter = true;    
+        this.filters =  {}
+        Object.map(this.getFiltersProps(),(f,v)=>{
+            if(isPlainObject(f)){
+                this.filters[v] = f;
+                this.filters[v].field = defaultStr(f.field,v);
+                this.filters[v].originalValue = defaultVal(this.filters[v].originalValue,f.defaultValue,f.value)
+            } else {
+                this.filters[v] = {
+                    originalValue : f,
+                    field : v
+                }
+            }
+        })
+        this.state.filteredColumns = defaultObj(this.getSessionData("filteredColumns"+this.getSessionNameKey()),this.props.filters);
+        this.filtersSelectors = {selector:this.getFilters()};
+        this.prepareColumns();
+        if(this.canHandleColumnResize()){
+            this.state.columnsWidths = this.preparedColumns.widths;
+        }
+        extendObj(this.state,this.prepareData({data}));
+        const {width:windowWidth,height:windowHeight} = Dimensions.get("window");
+        this.state.layout = {
+            x : 0,
+            y : 0,
+            width : 0,
+            height : 0,
+            windowWidth,
+            windowHeight,
+        }
+        this.selectableColumnRef = React.createRef(null);
+    }
+    bindResizeEvents(){
+        return false;
+    }
+    canHandleColumnResize(){
+        return false;
+    }
+    initSession (){
+        let sessionName = this.props.sessionName;
+        let isDatagrid = this.isDatagrid()
+        if(!isNonNullString(sessionName)){
+            sessionName = 'datagrid';
+        }
+        let userCode = Auth.getLoggedUserCode();
+        Object.defineProperties(this,{
+            getSessionKey : {
+                value : ()=>{
+                    if(!isNonNullString(sessionName) || (!isNonNullString(userCode) && !isDatagrid)) return false;
+                    return this.getSessionPrefix()+sessionName.ltrim(this.getSessionPrefix()).replaceAll(" ",'_')+userCode;
+                }
+            },
+            getSessionData : {
+                value : (sessionKey)=>{
+                    let key = this.getSessionKey();
+                    let dat = {}
+                    if(isNonNullString(key)){
+                        dat = defaultObj($session.get(key));
+                    }
+                    if(isNonNullString(sessionKey)){
+                        return dat[sessionKey]
+                    }
+                    return dat;
+                }
+            },
+            setSessionData : {
+                value : (sessionKey,sessionValue)=>{
+                    if(this.props.session === false) return;
+                    let key = this.getSessionKey();
+                    if(!isNonNullString(key)) return false;
+                    let dat = defaultObj(this.getSessionData());
+                    if(isNonNullString(sessionKey)){
+                        dat[sessionKey] = sessionValue;
+                    } else if(isObj(sessionKey)){
+                        extendObj(dat,sessionKey);
+                    } else {
+                        return dat;
+                    }
+                    $session.set(key,dat);
+                    return dat;
+                }
+            }
+        })
+    }
+    /*** lorsque les filtres locaux changes */
+    onLocalFiltersChange(localFilters){
+        return;
+        let lFilters = {};
+        this.hasLocalFilters = false;
+        Object.map(localFilters,(f,i)=>{
+            if(!isObj(f) || !f.field) return;
+            lFilters[i] = f;
+            this.hasLocalFilters = true;
+        })
+        this.__localFilters = lFilters;
+        this.refresh(true);
+    }
+    /*** effectue un filtre local sur le tableau */
+    doLocalFilter({rowData}){
+        return true;
+        if(!isObj(rowData)) return null;
+        let localFilters = defaultObj(this.__localFilters);
+        let ret = true;
+        for(let i in localFilters){
+            let f = localFilters[i];
+            if(!isObj(f) || !f.field) continue;
+            let {value,operator,field,useRegex} = f;
+            if(!isDecimal(value) && !isBool(value) && !value) continue;
+            if(!filterUtils.match({
+                value : rowData[field],
+                filterText:value,
+                operator,
+                useRegex
+            })) 
+            return false;
+        }
+        return ret;
+    }
+    initPagination(pagination){
+        pagination = defaultObj(pagination);
+        pagination.start = defaultDecimal(pagination.start);
+        pagination.limit = defaultDecimal(pagination.limit,this.getSessionData().paginationLimit,isMobileOrTabletMedia()?5:30);
+        pagination.page = defaultDecimal(pagination.page,pagination.page,1);
+        pagination.rows = 0;
+        return pagination;
+    }
+    /**** archive les documents sélectionnés */
+    archive(args){
+        args = defaultObj(args);
+        let archive = defaultFunc(this.props.archive);
+        let d = [];
+        Object.map(args.selectedRows,(doc)=>{
+            if(isDocUpdate(doc)){
+                d.push(doc)
+            }
+        });
+        args.data = d;
+        args.context = this;
+        if(d.length > 0){
+            let sL = d.length > 1 ? "s":"";
+            let tP = (!sL?" le ":(" les "+d.length.formatNumber()))+" document"+sL+" sélectionné"+sL;
+            showConfirm({
+                title : 'Archiver'+tP,
+                msg : "Attention  il s'agit d'une opération irréversible!!\n"+'Voulez vous réellement archiver '+tP+"?",
+                yes : 'Archiver',
+                no : 'Annuler',
+                onSuccess : ()=>{
+                    archive(args)
+                }
+            })
+        }
+        return ;
+    }
+    canPaginateData(){
+        return false;
+    }
+    getFiltersProps(){
+        return this.props.filters;
+    }
+    getSessionPrefix (){
+        return "datagrid"
+    }
+    isDatagrid(){
+        return false;
+    }
+    callSRowCallback({selected,row,rowIndex,key,cb}){
+        let count = Object.size(this.selectedRows);
+        let sArg = this.getActionsArgs(selected);
+        sArg.count = count;
+        sArg.rowIndex = sArg.index = rowIndex;
+        sArg.rowKey = key;
+        if(count >0){
+            if(selected){
+                if(typeof(this.props.onRowSelected) ==='function'){
+                    sArg.selectedRow = row;
+                    this.props.onRowSelected.call(this,sArg)
+                }
+            } else if(isFunction(this.props.onRowDeselected)) {
+                sArg.deselectedRow = row;
+                this.props.onRowDeselected.call(this,sArg);
+            }
+            if(this.isAllRowsSelected()){
+                if(isFunction(this.props.onRowsSelected)){
+                    this.props.onRowsSelected.call(this,sArg);
+                }
+            }
+        } else {
+            if(count > 0 && isFunction(this.props.onRowsDeselected)){
+                this.props.onRowsDeselected.call(this,{context:this,props:this.props});
+            }
+        }
+        if(isFunction(cb)){
+            cb(selected,row,rowIndex,{context:this})
+        }
+    }
+    toggleSelectableColumnCheckbox(update){
+        if(isObj(this.selectableColumnRef) && isObj(this.selectableColumnRef.current) && typeof this.selectableColumnRef.current.check =='function' && typeof this.selectableColumnRef.current.uncheck =='function'){
+            if(typeof update !=='boolean'){
+                update = this.selectedRowsCount && this.selectedRowsCount === this.getMaxSelectableRows() ? true : false;
+            }
+            if(update){
+                this.selectableColumnRef.current.check(false);
+            } else {
+                this.selectableColumnRef.current.uncheck(false);
+            }
+        }
+    }
+    getSelectedRowsCount(){
+        return isDecimal(this.selectedRowsCount) ? this.selectedRowsCount: 0;
+    }
+    /**** 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(typeof rowKey !=='string' && typeof rowKey !=='number') return;
+        let selectableMultiple = defaultVal(this.props.selectableMultiple,true);
+        rowIndex = defaultNumber(rowIndex,index);
+        cb = defaultFunc(cb,callback,cb2)
+        row = rowData = defaultObj(row,rowData);
+        let size = this.selectedRowsCount;
+        if(selected && !selectableMultiple && size >= 1){
+            return notify.warning("Vous ne pouvez sélectionner plus d'un élément")
+        }
+        if(!selectableMultiple){
+            this.setSelectedRows();
+        }
+        let selectedRows = this.selectedRows;
+        const sRowRef = this.selectedRowsRefs[rowKey];
+        this.selectedRowsCount = isDecimal(this.selectedRowsCount)? this.selectedRowsCount : 0;
+        if(isObj(sRowRef) && typeof sRowRef.check =='function' && typeof sRowRef.uncheck =='function'){
+            selected ? sRowRef.check() : sRowRef.uncheck();
+            sRowRef.checked = !!selected;
+        }
+        if(selected){
+            this.selectedRowsCount +=1;
+            let max = this.getMaxSelectedRows();
+            if(max && size>= max){
+                return notify.warning("Vous avez atteint le nombre maximum d'éléments sélectionnable, qui est de "+max.formatNumber())
+            }
+            selectedRows[rowKey] = row;
+        } else {
+            this.selectedRowsCount = Math.max(this.selectedRowsCount-1,0);
+            delete selectedRows[rowKey];
+        }
+        
+        this.toggleSelectableColumnCheckbox();
+        if(isObj(this.datagridActionsContext) && isFunction(this.datagridActionsContext.setSelectedRows)){
+            this.datagridActionsContext.setSelectedRows(selectedRows,x =>{
+                this.callSRowCallback({selected,row,rowIndex,rowKey,cb})
+            });
+        } else {
+            this.callSRowCallback({selected,rowData,row,rowIndex,rowKey,cb});
+        }
+    }
+    canExportAskDisplayMainContent(){
+        return false;
+    }
+    getExportableProps (){
+        let exportTableProps = this.props.exportTableProps;
+        if(isFunction(exportTableProps)){
+            exportTableProps = exportTableProps({context:this});
+        }
+        exportTableProps = defaultObj(exportTableProps);
+        exportTableProps.fileName = defaultStr(exportTableProps.fileName,this.props.title,this.props.text)
+        if(isFunction(exportTableProps.init)){
+            exportTableProps.init({data,context:this});
+        }
+        exportTableProps.askDisplayMainContent = this.canExportAskDisplayMainContent();
+        delete exportTableProps.init;
+        return exportTableProps;
+    }
+    onAllRowsToggle(){}
+    handleAllRowsToggle(update){
+        if(!defaultVal(this.props.selectableMultiple,true) && this.selectedRowsCount && this.getPaginatedData().length){
+            notify.warning("Vous ne pouvez sélectionner qu'un seul élément à la fois");
+            return;
+        }
+        if(typeof update !=='boolean'){
+            update = this.isAllRowsSelected();
+        }
+        let data = update ? this.getPaginatedData():[];
+        let max = this.getMaxSelectedRows();
+        if(max && data.length){
+            let _d = [],i=0,counter = 0,l = data.length;
+            while(i < max && counter < l ){
+                counter ++;
+                if(isObj(data[i])){
+                    _d.push(data[i]);
+                    i++;
+                }
+            }
+            data = _d;
+        }
+        this.setSelectedRows(data);
+        if(isObj(this.datagridActionsContext) && isFunction(this.datagridActionsContext.setSelectedRows)){
+            this.datagridActionsContext.setSelectedRows(this.selectedRows);
+        }
+    }
+    isAccordion(){
+        return false;
+    }
+    ////vérifie s'il s'agit du composant pivot grid
+    isPivotDatagrid(){
+        return false;
+    }
+    /** peut afficher les numéros de lignes */
+    canHandleIndexColumn(){
+        return this.isDatagrid();
+    }
+    getIndexColumnName(){
+        return "#dg-col-number"
+    }
+    getSelectableColumName(){
+        return "#dg-selectable-colname";
+    }
+    canHandleSelectableColumn(){
+        return false;
+    }
+    getSelectableColumNameStyle(){
+        return {alignItems:'flex-start',marginLeft:0,marginRight:0,paddingLeft:0,paddingRight:0,paddingTop:0,paddingBottom:0};
+    }
+    isSelectableColumn(columnDef,columnField){
+        return isObj(columnDef) && defaultStr(columnDef.field,columnField) === this.getSelectableColumName();
+    }
+    initColumnsCallback(){}
+    initColumns (columns){
+        this.state.columns = {};
+        let colIndex = 0;
+        if(this.canHandleSelectableColumn()){
+            this.state.columns[this.getSelectableColumName()] = {
+                field : this.getSelectableColumName(),
+                style : this.getSelectableColumNameStyle(),
+                width : 40,
+                isSelectableColumnName : true,
+                filter : false,
+                visible : true,
+                text :"Case à cocher",
+                sortable : false,
+            }
+        }
+        if(this.canHandleIndexColumn()){
+            colIndex++;
+            this.state.columns [this.getIndexColumnName()] =  { 
+                filter : false,
+                visible : true,
+                width : 50,
+                frozen : 'left',
+                text : '#',
+                colIndex,
+                field : this.getIndexColumnName(),
+                sortable : false,
+                render : ({rowCounterIndex,columnField})=>{
+                    return <Label primary key={rowCounterIndex+"-col-field-n"}>{rowCounterIndex}</Label>
+                }
+            }
+        }
+        let footers = this.getFooterFields(true);
+        let isAccordion = this.isAccordion();
+        Object.mapToArray(columns,(headerCol1,headerIndex)=>{
+            if(!isObj(headerCol1)) return;
+            const headerCol = Object.clone(headerCol1);
+            if(isAccordion && headerCol.accordion === false) return null;
+            let header = {...headerCol};
+            header.field = 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;
+            }
+            colIndex++;
+            header.visible = defaultVal(header.visible,true);
+            header.colIndex = colIndex;
+            this.state.columns[header.field] = header;
+            /*** les pieds de pages sont les données de type decimal, où qu'on peut compter */
+            if(header.footer !== false && (arrayValueExists(['decimal','number','money'],header.type) || header.format == 'money')){
+                footers[header.field] = header;
+            }
+            if(!this.hasColumnsHalreadyInitialized){
+                this.initColumnsCallback({...header,colIndex,columnField:header.field});
+            }
+        })
+        return footers;
+    }
+    getFooterFields(init){
+        this[this.footerFieldName] = init === true ? {} : defaultObj(this[this.footerFieldName]);
+        return this[this.footerFieldName];
+    }
+    hasFooterFields(){
+        return Object.size(this.getFooterFields(),true) ? true : false;
+    }
+    getActionsArgs(selected){
+        const r = isObj(selected)? selected : {};
+        const ret = {
+            ...databaseArgs,
+            selected : defaultBool(selected,false),
+            ...r,
+            isMobile : isMobileOrTabletMedia(),
+            component:'datagrid',
+            data : this.state.data,
+            rows : this.state.data,
+            allData : this.INITIAL_STATE.data,
+            props : this.props,
+            selectedRows : this.selectedRows,
+            context:this,
+            isMobile : isMobileOrTabletMedia(),
+            Auth,
+        };
+        if(this.props.getActionsArgs){
+            const sArg = this.props.getActionsArgs(ret);
+            if(isObj(sArg)){
+                return {...sArg,...ret};
+            }
+        }
+        return ret;
+    }
+
+    copyToClipboard({selectedRows}){
+        let keys = Object.keys(selectedRows);
+        let row = selectedRows[keys[0]];
+        if(!isObj(row)){
+            return notify.error("Impossible de copier le premier élément sélectionné du tableau car il est invalide");
+        }
+        return copyToClipboard({data:row,fields : this.props.columns,sessionName:defaultStr(this.props.sessionName,"datagrid")});
+    }
+    
+    /*** les actions représentes les différents menus apparaissant lorsqu'une ligne est sélectionnée
+     *   ou pas.
+     */
+    renderSelectedRowsActions(sActions){
+        let {printOptions,makePhoneCallProps,printable,print,archive,canMakePhoneCall,archivable} = this.props;
+        const {size} = sActions;
+        let r = [];
+        let endActs = [];
+        if(size <=0) {
+            return r
+        };
+        let selectedR = this.props.selectedRowsActions;
+        let sArgs = this.getActionsArgs(true);
+        if(isFunction(selectedR)) {
+            selectedR = selectedR.call(this,sArgs)
+        }
+        if(isFunction(print)){
+            if(isFunction(printable)){
+                printable = printable({context:this,props:this.props});
+            }
+            if(printable !== false){
+                r.push({
+                    icon : defaultVal(this.props.printIcon,'printer'),
+                    text : defaultVal(this.props.printButton,this.props.printText,'Imprimer'),
+                    onPress : ()=>{
+                        let {selectedRows}= sArgs;
+                        let d = [];
+                        for(let i in selectedRows){
+                            if(isDocUpdate(selectedRows[i])){
+                                d.push(selectedRows[i])
+                            }
+                        }
+                        print({title:defaultStr(this.props.title),...defaultObj(printOptions),data:d});
+                    },
+                })
+            }
+        }
+        Object.map(sActions,(o,i)=>{
+            if(isObj(o)){
+                let {onPress, ...rest} = o;
+                if(!isObj(rest) || !isFunction(onPress)) return null;
+                rest.onPress = (event)=>{
+                    if(isFunction(onPress)){
+                        onPress.call(this,sArgs);
+                    }
+                }
+                if(o.pos !== 'end'){
+                    r.push(rest)
+                } else {
+                    endActs.push(rest);
+                }
+            }
+        })
+        Object.mapToArray(selectedR,(action,i)=>{
+            if(isObj(action)){
+                let {onPress, ...rest} = action;
+                if(!isObj(rest)) return null;
+                rest.onPress = (event)=>{
+                    if(isFunction(onPress)){
+                        onPress.call(this,sArgs);
+                    }
+                }
+                r.push(rest)
+            }
+        })
+        endActs.map((a)=>{
+            r.push(a);
+        })
+        if(size === 1 && canMakePhoneCall === true && canMakeCall()){
+            const rowKey = Object.keys(this.selectedRows)[0], rowData = defaultObj(this.selectedRows[rowKey]);
+            let callProps = typeof makePhoneCallProps == 'function'? makePhoneCallProps(rowData,rowKey) : makePhoneCallProps;
+            callProps = defaultObj(callProps);
+            r.push({
+                text : defaultStr(callProps.text,callProps.label,'Appeler'),
+                icon : defaultStr(callProps.icon,'phone'),
+                flat : true,
+                onPress : ()=>{
+                    return makePhoneCall(
+                        rowData,
+                        callProps
+                    );
+                }
+            })
+        }
+        if(isObj(this.props.columns) && size ===1){
+            r.push({
+                icon : COPY_ICON,
+                text : 'Copier',
+                tooltip : 'Copier le premier élément sélectionné dans le presse papier',
+                pos:'end',
+                onPress : () =>{
+                    this.copyToClipboard(sArgs)
+                },
+            });
+        }
+        return r;
+    }
+
+    /*** le trie du tableau prend en paramètre 
+        : le nom de la colonne de trie, la direction de la conne de trie
+        par défaut, le trie se fait en ignorant la casse
+        sort : {
+            dir ://la direction : asc,desc
+            column : //le nom de la colonne à laquelle on trie
+            le nom de la colonne de tri doit être définie par défaut, 
+            dans la propriété column du sort prop 
+            ou dans la propriété sortByColumn
+        }
+     */
+    sort (column,dir){
+        let sort = extendObj({},{
+            dir: '',
+            column : '',
+            ignoreCase : true
+        }, this.state.sort);
+        if(isNonNullString(column)){
+            sort.column = column;
+        }
+        if(!isNonNullString(sort.column)){
+            return ;
+        } 
+        if(isNonNullString(dir)){
+            sort.dir = dir;
+        } 
+        if(this.state.sort.column === sort.column){
+            switch(this.state.sort.dir){
+                case 'asc':
+                    sort.dir = 'desc';
+                    break;
+                case 'desc':
+                    sort.dir = 'asc';
+                    break;
+            }
+        } else sort.dir = 'asc';
+
+        if(!isNonNullString(sort.dir)){
+            sort.dir = 'asc';
+        } else {
+            sort.dir = sort.dir.trim().toLowerCase();            
+        }
+        if(sort.dir !== "asc" && sort.dir !== "desc") sort.dir = 'asc';
+        this._previousSortObj = this._sort;
+        this._sort = sort;
+        this.prepareColumns({sortedColumn : this._sort});
+        this.prepareData({data:this.state.data,updateFooters:false},(state)=>{
+            this.setState(state);
+        });
+    }
+
+   /**** pagine l'objet data passé en parmètre de manière a retourner un objet satisfaisant aux paramètres
+        start, limit,page
+   */ 
+   pagin (data,start, limit, page){
+        if(this.props.showPagination === false || this.props.pagin === false) return data;
+        this._pagination = defaultObj(this._pagination);
+        this._pagination.start = start;
+        this._pagination.limit = limit;
+        return data.slice(start, start + limit).filter(d => !!d);
+   }
+
+   _increment (){
+        const rows = this.INITIAL_STATE.data.length
+        const { start,limit, page} = this._pagination;
+        // Only correct multiple of rows per page
+        const max = rows - (rows % limit);
+
+        let newStart = Math.min(start + limit, max);
+        let nextPage = page + 1;
+        let pages = this.countPages();
+        if(nextPage > pages){
+            nextPage  = pages;
+        }
+        this.handlePagination(newStart, limit, nextPage);
+    }
+
+    /*** aller à la dernière page */
+    _goToLastPage(){
+        let { start,limit} = this._pagination;
+        let numPages = this.countPages();
+        if(numPages <=1) return;
+        this.handlePagination((numPages-1)*this._pagination.limit, this._pagination.limit, numPages);
+    }
+
+    _decrement(){
+        let { start,limit,page, } = this._pagination;
+        let newStart = Math.max(0, start - limit);
+        let nextPage = page - 1;
+        if(nextPage < 1) nextPage = 1;
+        this.handlePagination(newStart, limit, nextPage);
+    };
+
+    /*** retourne la liste du nombre de pages */
+    countPages()
+    {
+        return Math.ceil(this.INITIAL_STATE.data.length / this._pagination.limit);
+    }
+
+
+    /*** lorsqu'on clique sur la ligne */
+    onRowPress (row,rowIndex,event){
+        if(isFunction(this.props.onRowPress)){
+            this.props.onRowPress.call(this,{row,allData:this.INITIAL_STATE.data,rowIndex,event,props:this.props,context:this});
+        }
+    }
+    /** lorsqu'on double click sur la ligne */
+    onRowDoubleClick(row,rowIndex,event){
+        if(isFunction(this.props.onRowDoubleClick)){
+            this.props.onRowDoubleClick.call(this,{row,allData:this.INITIAL_STATE.data,rowIndex,event,props:this,context:this});
+        }
+    }
+
+    /*** aller à la première page */
+    _goToFirstPage(){
+        this.handlePagination(0, this._pagination.limit, 1);
+    }
+
+    _setRowsPerPage (value) {
+        if(isObj(value) && isDecimal(value.value)){
+            value = value.value;
+        }
+        value = defaultDecimal(value);
+        this.handlePagination(0, value, 1);
+    };
+
+   showFilters(){
+       if(!this._isMounted()) {
+            this.isUpdating = false;
+            return;
+       }
+       if(this.isUpdating) return false;
+       this.isUpdating = true;
+       this.setState( {showFilters:true},()=>{
+           this.isUpdating = false;
+           this.setSessionData({showFilter:true});
+       })
+   }
+  hideFilters (){
+       if(!this._isMounted()) {
+          this.isUpdating = false;
+          return;
+       }
+       if(this.isUpdating) return false;
+       this.setState({showFilters:false},()=>{
+            this.isUpdating = false;
+            this.setSessionData({showFilter:false})
+       })
+   }
+
+
+    showFooter(){
+        if(!this._isMounted()) {
+            this.isUpdating = false;
+            return;
+        }
+        if(this.isUpdating) return false;
+        this.isUpdating = true;
+        this.setState( {showFooter:true},()=>{
+            this.isUpdating = false;
+            this.setSessionData({showFooter:true})
+        })
+    }
+    hideFooter (){
+        if(!this._isMounted()) {
+             this.isUpdating = false;
+             return;
+        }
+        if(this.isUpdating) return false;
+        this.setState({showFooter:false},()=>{
+            this.isUpdating = false;
+            this.setSessionData({showFooter:false});
+        })
+    }
+   
+   toggleFixedTableState(){
+       const fixedTable = !this.state.fixedTable;
+       this.setState({fixedTable},()=>{
+         this.updateLayout();
+         this.setSessionData("fixedTable",fixedTable);
+       })
+   }
+   getSessionNameKey (){
+        return defaultStr(this.props.table,this.props.tableName,this.props.sessionName);
+   }
+   /*** affiche ou masque une colonne filtrée */
+   toggleFilterColumnVisibility(field){
+        if(!isNonNullString(field)) return;
+        let filteredColumns = {...this.state.filteredColumns};
+        filteredColumns[field] = defaultBool(filteredColumns[field],false) == false ? true : false;
+        this.prepareColumns({filteredColumns});
+        this.setState({filteredColumns},()=>{
+            this.setSessionData("filteredColumns"+this.getSessionNameKey(),filteredColumns);
+            if(!filteredColumns[field]){
+                this.filters[field] = defaultObj(this.filters[field]);
+                this.filters[field].value = this.filters[field].defaultValue = undefined;
+                this.doFilter({value:undefined,field})
+            }
+        });
+    }
+   /*** affiche ou masque une colonne */
+   toggleColumnVisibility(field,removeFocus){
+        if(!isNonNullString(field)) return;
+        let columns = {...this.state.columns};
+        columns[field].visible = !columns[field].visible;
+        let footers = this.getFooterFields();
+        if(isObj(footers[field])){
+            footers[field].visible = columns[field].visible;
+        }
+        this.prepareColumns({columns});
+        this.setState({columns},()=>{
+            if(removeFocus) document.body.click();
+        });
+   }
+
+   renderFilter(props){
+       return <Filter {...props}/>
+   }
+   prepareColumn(){}
+   beforePrepareColumns(){}
+   prepareColumns (args){
+       this.beforePrepareColumns();
+       args = defaultObj(args);
+       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.state.sort);
+       const visibleColumns = [],headerFilters = [],visibleColumnsNames={};
+       const sortable = defaultBool(this.props.sortable,true);
+       const sortedColumns = {};
+       let sortedColumnsLength = 0;
+       let sortedColumn = {icon:"sort"}
+       let filters = defaultBool(this.props.filters,true);
+       if(this.props.toggleFilters ===false){
+           filters = false;
+       }
+       let {filterOrOperator,filterAndOperator} = this.props;
+       const widths = {};
+       let totalWidths = 0;
+       let columnIndex = 0,visibleColumnIndex=0;
+       Object.map(columns,(header,headerIndex) => {
+            let {
+                field,
+                render,
+                readOnly,
+                disabled,
+                visible,
+                defaultValue,
+                id,
+                key,
+                sortType,
+                width,
+                ...restCol
+            } = header;
+            restCol = defaultObj(restCol);
+            let colFilter = defaultVal(restCol.filter,true);
+            field = header.field = defaultStr(header.field,field,headerIndex);
+            delete restCol.filter;
+            width = defaultDecimal(width);
+            if(width <COLUMN_WIDTH/2){
+                width = COLUMN_WIDTH;
+            }
+            const type = defaultStr(header.type).toLowerCase();
+            sortType = defaultStr(sortType,type).toLowerCase();
+            if(type.contains("date")|| type.contains("time")){
+                width = Math.max(width,DATE_COLUMN_WIDTH);
+            }
+            totalWidths +=width;
+            widths[header.field] = width;
+            let colProps = {id,key}
+            colProps.key = isNonNullString(key)?key : (header.field||("datagrid-column-header-"+headerIndex))
+            colProps.style = Object.assign({},StyleSheet.flatten(restCol.style));
+            if(!visible){
+                colProps.style.display = 'none';
+            }
+            visibleColumnsNames[header.field] = visible ? true : false;
+            visibleColumns.push({
+                onPress : ()=>{this.toggleColumnVisibility(header.field);return false},
+                title : header.text||header.title||header.field,
+                icon : visible?CHECKED_ICON_NAME : null,
+            });
+            restCol.field = header.field;
+            restCol.label = defaultStr(header.text,header.label) ;
+            if(!restCol.label){
+                console.error(header," has not label or text in datagrid",columns,this.props)
+            }
+            let isColumnSortable = false,isColumnSorted = false;
+            if(sortable && header.sortable !== false){
+                isColumnSortable = true;
+                if(currentSortedColumn.column ==field){
+                    isColumnSorted = true;
+                    sortedColumn.field = currentSortedColumn.column;
+                    sortedColumn.header = header;
+                    sortedColumn.label = restCol.label;
+                    const isDesc = currentSortedColumn.dir === "desc";
+                    const prefix = (sortType =='number' || sortType == 'decimal') ? "numeric" : sortType =='boolean'?'bool' : sortType =='date'? 'calendar': sortType =='time'? 'clock' : 'alphabetical'; 
+                    sortedColumn.icon = 'sort-'+prefix+'-'+(isDesc ? "descending" : "ascending");
+                    sortedColumn.title = (isDesc ? "Trié par ordre décroissant":"Trié par ordre croissant ")+ " du champ ["+restCol.label+"]";
+                }      
+                sortedColumns[field] = restCol.label;
+                sortedColumnsLength++;
+            }
+            colFilter = colFilter && filters !== false ? true : false;
+            const sortedProps =  isColumnSorted ? {...sortedColumn} : {};
+            let filterProps = {};
+            if(colFilter){
+                let fCol = {...defaultObj(this.filters[header.field])}
+                this.filters[header.field] = fCol;
+                delete restCol.sortable;
+                filterProps = {
+                    ...restCol,
+                    key : header.field,
+                    label : defaultStr(header.label,header.text),
+                    orOperator : filterOrOperator,
+                    andOperator : filterAndOperator,
+                    searchIconTooltip : 'Filtre',
+                    searchIcon : 'filter_list',  
+                    defaultValue : fCol.originalValue,
+                    name : header.field,
+                    onClearFilter : this.onClearFilter.bind(this),
+                    onChange : this.onFilterChange.bind(this),
+                    operator : fCol.operator,
+                    action : defaultStr(fCol.originAction,fCol.action),
+                };
+                this.renderFilter(filterProps,headerFilters); 
+            }
+            this.prepareColumn({
+                visible,
+                columnIndex,
+                visibleColumnIndex,
+                sortable:isColumnSortable,
+                sorted:isColumnSorted,
+                sortedColumn :sortedProps,///les props de la columns triée
+                sortedProps,
+                props:{...restCol,...colProps},
+                field,
+                width,
+                columnField : field,
+                columnDef : header,
+                index : headerIndex,
+                filterProps,
+                key : header.field,
+                filter :colFilter, 
+            },headerFilters)
+            columnIndex++;
+            visibleColumnIndex++;
+            
+        })
+        this.preparedColumns.sortedColumns = sortedColumns;
+        this.preparedColumns.sortedColumn = sortedColumn;
+        this.preparedColumns.sortedColumnsLength = sortedColumnsLength;
+        this.preparedColumns.visibleColumns = visibleColumns;
+        this.preparedColumns.visibleColumnsNames = visibleColumnsNames;
+        this.preparedColumns.filters = headerFilters;
+        this.preparedColumns.filteredColumns = filteredColumns;
+        this.preparedColumns.widths = widths;
+        this.preparedColumns.totalWidths = totalWidths;
+        return this.preparedColumns;
+   }
+   getPaginatedSelectedRows(data){
+        data = isArray(data)? data : this.INITIAL_STATE.data;
+        if(JSON.stringify(this._previousSortObj) !== JSON.stringify(this._sort || JSON.stringify(this._previousPagination) !== JSON.stringify(this._pagination)) && this.getPaginatedData().length !== data.length){
+            return {};
+        }
+        return this.selectedRows;
+   }
+   getFooterValues(){
+        return defaultObj(this.___evaluatedFootersValues);
+   }
+    prepareData(args,cb){
+        let {pagination,data,force,updateFooters} = defaultObj(args);
+        cb = typeof cb ==='function'? cb : typeof args.cb == 'function'? args.cb : undefined;
+        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) {
+            if(canUpdateFooters){
+                this.___evaluatedFootersValues = {}
+            }
+            const newData = [];
+            Object.map(data,(d,i)=>{
+                if(!isObj(d) || (hasLocalFilter && this.doLocalFilter({rowData:d,rowIndex:i}) === false)){
+                    return;
+                }
+                if(canUpdateFooters){
+                    Object.map(footersColumns,(columnDef,field)=>{
+                        evalSingleValue({data:d,columnDef,field,result:this.___evaluatedFootersValues,displayLabel:false})
+                    });
+                }
+                newData.push(d);
+                //push(d,i);
+            });
+            data = newData;
+        }      
+        const beforeS = data;
+        if(this.isDatagrid() && isNonNullString(this._sort.column)){
+            if(isObj(this.state.columns) && this.state.columns[this._sort.column]){
+                let field = this.state.columns[this._sort.column];
+                const cfg = Object.assign({},this._sort);
+                cfg.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
+            }
+        }
+        this.INITIAL_STATE.data = data;
+        if(this.canPaginateData()){
+            pagination = this.initPagination(pagination);
+            pagination.rows = data.length;    
+            this._pagination = pagination;
+            data = this.pagin(data,pagination.start,pagination.limit,pagination.page);
+            this.setSelectedRows(this.getPaginatedSelectedRows(data));
+        } else if(force){
+            this.setSelectedRows();
+        }
+        const state = {data,isLoading:false,sort : this._sort};
+        if((cb)){
+            cb(state);
+        }
+        return state;
+    }
+    isRowSelected(rowKey,rowIndex){
+        if(isObj(rowKey)){
+            rowKey = this.getRowKey(rowKey,rowIndex);
+        }
+        if(isObj(this.selectedRows[rowKey])) return true;
+        if(typeof rowKey !=='string' && typeof rowKey !=='number' || !isObj(this.selectedRowsRefs[rowKey])) return false;
+        return !!this.selectedRowsRefs[rowKey].checked;
+    }
+   /*** permet de définir les lignes sélectionnées du datagrid */
+   setSelectedRows (rows){
+       let obj = this.selectedRows;
+       this.selectedRowsCount = 0;
+       Object.getOwnPropertyNames(obj).forEach((prop)=> {
+            delete obj[prop];
+            const sRowRef = this.selectedRowsRefs[prop];
+            if(isObj(sRowRef) && sRowRef.check && sRowRef.uncheck){
+                sRowRef.uncheck(false);
+            }
+       });
+       Object.map(rows,(row,i)=>{
+            if(isObj(row)) {
+                const rowKey = this.getRowKey(row,i);
+                this.selectedRowsCount++;
+                this.selectedRows[rowKey] = row;
+                const sRowRef = this.selectedRowsRefs[rowKey];
+                if(isObj(sRowRef) && sRowRef.check && sRowRef.uncheck){
+                    sRowRef.check(false);
+                }
+            }
+        });
+        this.toggleSelectableColumnCheckbox();
+       return this.selectedRows;
+   }
+   
+
+    getProgressBar(props){
+        if(!this.isLoading() && props !== true) return null;
+        if(typeof props !=='object' || !props){
+            props = {};
+        }
+        if(React.isValidElement(this.props.progressBar)) return this.props.progressBar ;
+        if(this.props.useLinesProgressBar === true || this.props.useLineProgressBar === true){
+            return CommonDatagridComponent.LineProgressBar(props);
+        }
+        return this.getDefaultPreloader(props);
+    }
+    handlePagination(start, limit, page) {
+        this._previousPagination = this._pagination;
+        this._pagination = {
+            start,
+            limit,
+            page,
+            rows : this.INITIAL_STATE.data.length
+        }
+        let data = this.pagin(this.INITIAL_STATE.data,start, limit,page)
+        this.setSelectedRows(this.getPaginatedSelectedRows());
+        this.setState({data},()=>{
+            setTimeout(()=>{
+                this.setSessionData({paginationLimit:limit})
+            },1)
+        });
+    };
+
+    ///supprime tous les filtres s'ils existenent
+    _clearAllFilters (){
+        let filters = {};
+        let defValue = undefined;
+        Object.map(this.filters,(f,i)=>{
+            if(!isObj(f)) return;
+            defValue = undefined;
+            if(f.type =="select") defValue = [];
+            filters[i] = {...f,value:defValue,defaultValue:defValue,originalValue:defValue}
+        })
+        this.filters = filters;
+        this.refresh(true);
+    }
+    clearAllFilters(){
+        if(isObj(this.state.filteredColumns)){
+            let filteredColumns = {...this.state.filteredColumns};
+            for(let k in filteredColumns){
+                filteredColumns[k] = false;
+            }
+            this.prepareColumns({filteredColumns});
+            this.setState({filteredColumns},()=>{
+                this.setSessionData("filteredColumns"+this.getSessionNameKey(),{});
+                this._clearAllFilters();
+            })
+        } else {
+            this._clearAllFilters();
+        }
+    }
+    onClearFilter (arg){
+        return;
+        let {field,name,type} = defaultObj(arg);
+        field = defaultStr(field,name);
+        if(field){
+            let v = defaultStr(type).toLowerCase() == "select"? []:undefined
+            this.filters[field] = {value:v,defaultValue:v,originalValue:v,originValue:v}
+            this.doFilter({value:v,field,force:true})
+        }
+    }
+    /*** si la valeur de filtre peut être utilisée */
+    canHandleFilterVal(f){
+        return canHandleFilter(f);
+    }
+    onFilterChange(arg){
+        this.filteredValues = defaultObj(this.filteredValues);
+        let {field,operator,action,value} = defaultObj(arg);        
+        if(isNonNullString(field) && isNonNullString(operator) && isNonNullString(action)){
+            this.filteredValues[field] = {
+                operator,action,value,field
+            }
+        }
+        return this.doFilter(arg);
+    }
+    getFilters(){
+        let filters = {}
+        this.filters = extendObj(true,{},this.filteredValues,this.filters)
+        for(let i in this.filters){
+            let f = this.filters[i];
+            if(!this.canHandleFilterVal(f)) {
+                continue;
+            }
+            f.field = defaultStr(f.field,i);
+            if(f.action =="$today"){
+                f.operator = "$and";
+                f.action = "$eq"
+            }
+            filters[f.operator] = defaultArray(filters[f.operator]);
+            let ob = {};
+            ob[f.field] = {}
+            if(f.action == "$period"){
+                let sp = defaultStr(f.value);
+                if(sp){
+                    sp = sp.split("=>");
+                    if(DateLib.isValidSQLDate(sp[0]) && DateLib.isValidSQLDate(sp[1])){
+                        filters[f.operator].push({
+                            [f.field] : {$gte:sp[0]}
+                        })
+                        filters[f.operator].push({
+                            [f.field] : {$lte:sp[1]}
+                        })        
+                    }
+                }
+            } else {
+                ob[f.field][f.action] = f.value;
+                filters[f.operator].push(ob)
+            }
+        }
+        return filters;
+    }
+    fetchData(){}
+    /****  Filtre le tableau */
+    doFilter ({value,field,selector,event,force}){
+        if(!this._isMounted()) return;
+        this.canDoFilter = false;
+        selector = defaultObj(selector);
+        field = defaultStr(field,selector.field);
+        if(!isNonNullString(field)) return;
+        let prevVal = defaultObj(this.filters[field]);
+        this.filters[field] = {...selector,value,event};
+        if(force !== true){
+            let newVal = this.filters[field];
+            let prev = {action : prevVal.action,value:prevVal.value,operator:prevVal.operator},
+                current = {action : newVal.action,value:newVal.value,operator:newVal.operator}
+                if(isObjOrArray(current.value)){
+                    current.value = JSON.stringify(current.value);
+                }
+                if(isObjOrArray(prev.value)){
+                    prev.value = JSON.stringify(prev.value);
+                }
+            if((prev.action === undefined && prev.value === undefined && prev.operator === undefined && (value === undefined || value === '' || value === null)) || (JSON.stringify(prev) === JSON.stringify(current) && prev.value == current.value)){
+                return Promise.resolve([]);
+            }
+        }
+        if(this.canPaginateData()){
+            this._pagination = defaultObj(this._pagination);
+            this._pagination.page = 1;
+            this._pagination.start = 0;
+        }
+        this.filtersSelectors = {selector:this.getFilters()};
+        return this.fetchData(true,null,this.filtersSelectors);
+    }
+    onSetQueryLimit(){
+        if(!this.canSetQueryLimit()) return;
+        const current = this.currentDatagridQueryLimit;
+        const cValue = this.getQueryLimit();
+        if(cValue == current) return;
+        this.refresh(true);
+    }
+    setQueryLimit(){
+        this.currentDatagridQueryLimit = this.getSessionData("databaseQueryLimit");
+        setQueryLimit(this.currentDatagridQueryLimit,(limit)=>{
+            this.setSessionData("databaseQueryLimit",limit)
+            notify.success("Le nombre maximal d'élément a été définit à la valeur "+(limit==0?" infinit ":limit.formatNumber())+". Cette valeur sera prise en compte à la prochaine réactualisation du tableau")
+        });
+    }
+    
+    canSetQueryLimit(){
+        return isDecimal(this.props.queryLimit) && (this.props.queryLimit >=0) ? false : true;
+    }
+    getQueryLimit(){
+        if(isDecimal(this.props.queryLimit) && (this.props.queryLimit >=0)) return this.props.queryLimit 
+        let sLimit = this.getSessionData("databaseQueryLimit");
+        if(isDecimal(sLimit) && sLimit >= 0) return sLimit;
+        return 0;
+    }
+    renderQueryLimit(content){
+        let cLImit = this.getQueryLimit();
+        if(cLImit == 0) cLImit = " infinit"
+        let s = "";
+        let canSetQ = this.canSetQueryLimit();
+        if(canSetQ){
+            s = ".\nPressez pendent quelques secondes pour modifier cette valeur du nombre limite d'éléments de la liste";
+        }
+        else if(isDecimal(cLImit)){
+            cLImit = (" de "+cLImit.formatNumber())
+        }
+        content = isDecimal(content) || typeof content =="string" ? <Label primary textBold style={styles.queryLimit}>{content}</Label> : React.isValidElement(content)? content : null;
+        return <Tooltip title={"Le nombre maximal d'éléments à récupérer depuis la base de données pour la liste est "+cLImit+s} Component={Label} cursorPointer={canSetQ}>
+            <Pressable style={[theme.styles.row]} onLongPress={canSetQ?this.setQueryLimit.bind(this):undefined}>
+                {content}
+                {isDecimal(cLImit) && cLImit > 0 && <Label primary textBold style={styles.queryLimit}> | {cLImit.formatNumber()}</Label>}
+            </Pressable>
+       </Tooltip>
+    }
+    getFetchDataOpts(){
+        return this.props.fetchDataOpts;
+    }
+
+    forceRefresh(){
+        this.refresh(true);
+    }
+    refresh (force,cb){}
+    onResizePage(){}
+    componentDidMount(){
+        super.componentDidMount();
+        APP.on(APP.EVENTS.RESIZE_PAGE,this._events.RESIZE_PAGE);
+        APP.on(APP.EVENTS.SET_DATAGRID_QUERY_LIMIT,this._events.SET_DATAGRID_QUERY_LIMIT);
+    }
+    componentWillUnmount(){
+        super.componentWillUnmount();
+        APP.off(APP.EVENTS.RESIZE_PAGE,this._events.RESIZE_PAGE);
+        APP.off(APP.EVENTS.SET_DATAGRID_QUERY_LIMIT,this._events.SET_DATAGRID_QUERY_LIMIT);
+        this.clearEvents();
+    }
+
+    /*** s'il s'agit d'un datagrid virtualisé, ie à utiliser le composant react-base-table */
+    isVirtual(){
+        return false;
+    }
+
+    getRowKey(row,rowIndex){
+        let k = rowIndex;
+        const rowKey = this.props.rowKey;
+        if(isNonNullString(rowKey) && isObj(row) && (isNonNullString(row[rowKey]) || isDecimal(row[rowKey]))){
+            return row[rowKey];
+        } 
+        if(isFunction(this.props.getRowKey)){
+            k = this.props.getRowKey({row,rowData:row,data:row,rowIndex,item:row,index:rowIndex,context:this});
+        } else if(isObj(row)){
+            return React.getKey(row,rowIndex);
+        } else k = rowIndex;
+        if(isObj(row) && isNonNullString(row.rowKey)){
+            k +=row.rowKey;
+        }
+        return isDecimal(k) ? k : defaultStr(k,uniqid("row-key-datagrid"));
+    }
+    /*** récupère la plage de donnée visible au travers la pagination */
+    getPaginatedData(){
+        return Array.isArray(this.state.data)? this.state.data: []
+    }
+    /*** retourne le nombre maximal d'éléments sélectionnables */
+    getMaxSelectedRows(){
+        return 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;
+        }
+        return max;
+    }
+     /**** met à jour l'état de progression de la mise à jour du tableau */
+     updateProgress(state,cb){
+        state = defaultObj(state);
+        state.isLoading = defaultBool(state.isLoading,!!!this.state.isLoading);
+        this.setState({...state},cb);
+    }
+    isAllRowsSelected(update){
+        return this.selectedRowsCount && this.selectedRowsCount === this.getMaxSelectableRows()? true : false;
+    }
+    getDefaultPaginationRowsPerPageItems (){
+        return [5,10,15,20,25,30,40,50,60,80,100];
+    }
+    measureLayout(cb,force,layoutRef){
+        cb = typeof cb === 'function'? cb : x=>x;
+        layoutRef = layoutRef || this.layoutRef.current;
+        return new Promise((resolve)=>{
+            if(layoutRef && layoutRef.measureInWindow){
+                layoutRef.measureInWindow((x, y, width, height) => {
+                    const r = this.getLayoutState({ x, y, width, height },force);
+                    cb(r);
+                    resolve(r);
+                });
+            }
+        })
+    }
+    getLayoutState(layout,force){
+        layout = defaultObj(layout);
+        const {width,height} = Dimensions.get("window");
+        layout.windowWidth = width;
+        layout.windowHeight = height;
+        const prevLayout = defaultObj(this.state.layout)
+        const prevY = Math.abs(defaultDecimal(prevLayout.y)-defaultDecimal(layout.y));
+        const prevHeight = Math.abs(defaultDecimal(prevLayout.height)-defaultDecimal(layout.height));
+        const prevWindowWidth = Math.abs(defaultDecimal(prevLayout.windowWidth)-defaultDecimal(layout.windowWidth));
+        const prevWindowHeight = Math.abs(defaultDecimal(prevLayout.windowHeight)-defaultDecimal(layout.windowHeight));
+        if(force !== true && prevY < 20 && prevHeight < 20 && prevWindowWidth <= 100 && prevWindowHeight <= 50) return null;
+        return {
+            layout,
+        }
+    }
+    updateLayout(p){
+        this.measureLayout(state=>{
+            if(isObj(state)){
+                if(!this.state.isReady){
+                    state.isReady = true;
+                }
+                this.setState(state);
+            }
+        },isObj(p) && typeof p.force ==='boolean'?p.force : !this.state.isReady)
+    }
+    UNSAFE_componentWillReceiveProps(nextProps){
+        if('data' in nextProps && isObjOrArray(nextProps.data)){
+            this.prepareData({data:nextProps.data,force:true},(state)=>{
+                this.setState(state)
+            });
+        }
+    }
+    getDefaultPreloader(props){
+        return CommonDatagridComponent.getDefaultPreloader();
+    }
+    isLoading (){
+        return this.state.isLoading === true ? true : false;
+    }
+    getLinesProgressBar(){
+        return CommonDatagridComponent.LinesProgressBar(this.props);
+    }
+    isSelectableMultiple(){
+        return defaultBool(this.props.selectableMultiple,true)
+    }
+    renderHeaderCell({columnDef,columnField}){
+        if(this.isSelectableColumn(columnDef,columnField)){
+            return <Checkbox
+                checked  ={this.isAllRowsSelected()?true:false}
+                key = {this.getSelectableColumName()}
+                secondaryOnCheck
+                style = {this.getSelectableColumNameStyle()}
+                ref = {this.selectableColumnRef}
+                onPress = {({checked})=>{
+                    this.handleAllRowsToggle(!checked);  
+                    return;
+                }}
+            />
+        }
+        let ret = columnDef.label || columnDef.text || columnDef.field;
+        const {sortedColumn} = this.preparedColumns;
+        const sortable = columnDef.sortable !== false ? true : false;
+        const isColumnSorted = sortable && sortedColumn.field === columnField && sortedColumn.icon ? true : false;
+        const sortMe = (event)=>{
+            React.stopEventPropagation(event);
+            this.sort(columnField);
+        };
+        return <TouchableRipple disabled={!sortable} style={styles.sortableColumn} onPress={sortMe}>
+            <>
+                {isColumnSorted ? <Icon
+                    {...sortedColumn}
+                    size = {24}
+                    style = {[sortedColumn.style,styles.sortedColumnIcon]}
+                    name = {sortedColumn.icon}
+                    onPress = {sortMe}
+                    primary
+                />: null}
+                <Label primary={isColumnSorted}>{ret}</Label>
+            </>
+        </TouchableRipple>
+    }
+    renderSelectableCheckboxCell(props){
+        const {containerProps} = props;
+        if(isObj(containerProps)){
+            containerProps.style = [this.getSelectableColumNameStyle(),containerProps.style];
+        }
+        return <Checkbox
+            testID = {"RN_SelectableColumnName_"+(props.field||props.columnField+props.index)}
+            {...props}
+            style = {[props.style,this.getSelectableColumNameStyle()]}
+            key = {props.rowKey}
+        />
+    }
+    /*** retourne le rendu d'une cellule de la ligne du tableau 
+    @parm, rowData, object, la ligne à afficher le rendu du contenu
+    @param , rowInidex, l'indice de la ligne dont on affiche le rendu en cours
+    @param, columnDef, l'objet colonne dont on veut afficher le rendu pour la ligne
+    @param, columnField, le nom du champ correspondant à la cellule,
+    //l'objet data peut être un tableau de type string si et seulement si, le tableau dispose d'une seule colonnne
+    //le formatteur de cellule, peut être : 
+            soit une fonction, soit une promesse.
+            qu'il s'agisse d'une fonction où d'une promesse, la valeur retournée est un composant react
+            quant il s'agit d'une fonction, celle-ci se doit de retourner toujours un composant react
+            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;
+        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:{}};
+         let _render = null;
+         columnDef = defaultObj(columnDef);
+         if(this.isSelectableColumn(columnDef,columnField)){
+             rowKey = rowKey ? rowKey : this.getRowKey(rowData,rowIndex);
+             return {render :handleSelectableColumn === false ? null : this.renderSelectableCheckboxCell({
+                ...arg,
+                rowKey,
+                rowData,
+                checked : this.isRowSelected(rowKey,rowIndex),
+                rowsRefs : this.selectedRowsRefs,
+                onChange : ({checked})=>{
+                    this.handleRowToggle({row:rowData,rowData,rowIndex,rowKey,selected:checked})
+                }
+             }),style:{},extra:{style:{}}};
+         } else if(columnField == this.getIndexColumnName()){
+            return {render : rowCounterIndex.formatNumber(),style:{},extra:{}};
+         }
+         let renderProps = undefined;
+         if(isObj(columnDef.datagrid)){
+             renderProps = columnDef.datagrid.renderProps;
+         }
+        const style = Object.assign({},StyleSheet.flatten(columnDef.style));
+        if(columnDef.visible === false){
+            style.display = "none";
+        }
+        let extra = {style},renderArgs = arg;
+        
+        renderArgs.extra = extra;
+        renderArgs.item = rowData;
+        let key = this.getRowKey(rowData,rowIndex)+"-"+columnField,isTagRender = defaultStr(columnDef.table).toLowerCase().contains("tags");
+        if(isObj(columnDef.datagrid) && isFunction(columnDef.datagrid.render)){
+            _render = columnDef.datagrid.render.call(this,renderArgs);
+        } else if(isFunction(columnDef.multiplicater)){
+            _render = defaultDecimal(columnDef.multiplicater({...renderArgs,value:rowData[columnField]}),rowData[columnField]);
+        } else {
+             _render = rowData[columnField];
+             let _type = defaultStr(columnDef.type).trim().toLowerCase();
+             if(false && _type == 'datafile' && !isFunction(columnDef.render)){
+                 columnDef.render = ({rowData,columnField})=>{
+                     let v = rowData[columnField];
+                     let dF = dataFileManager.get(v);
+                     if(dF){
+                         return dF.code.toUpperCase();
+                     }
+                     return isNonNullString(v)? v.toUpperCase() : isArray(v)? v.join(arrayValueSeparator): v;
+                 }
+             }
+             if(defaultStr(columnDef.format).toLowerCase() === 'hashtag'){
+                _render = <Hashtag>{_render}</Hashtag>
+             } else if(typeof columnDef.render === "function"){
+                 _render = columnDef.render.call(this,renderArgs);
+             } else if(arrayValueExists( _type,["date","date2time","time"]) && isNonNullString(rowData[columnField])){
+                 let _dd =DateLib.parse(rowData[columnField],_type === 'time'?DateLib.isoTimeFormat:DateLib.SQLDateFormat);
+                 if(DateLib.isDateObj(_dd)){
+                     _render = DateLib.format(_dd,(_type === 'time'?DateLib.defaultTimeFormat:DateLib.masks.defaultDate));
+                 }
+                 if(!_render) _render = rowData[columnField]
+             } else if(arrayValueExists(_type,['switch','checkbox'])){
+                 let {checkedLabel,checkedTooltip,uncheckedTooltip,checkedValue,uncheckedLabel,uncheckedValue} = columnDef;
+                 checkedLabel = defaultStr(checkedLabel,checkedTooltip,'Désactivé/Désélectionné')
+                 uncheckedLabel = defaultStr(uncheckedLabel,uncheckedTooltip,'Activé/Sélectionné')
+                 checkedValue = defaultVal(checkedValue,1); uncheckedValue = defaultVal(uncheckedValue,0)
+                 let val = defaultVal(rowData[columnField],columnDef.defaultValue,columnDef.value)
+                 if(val === checkedValue){
+                     _render = checkedLabel;
+                 } else _render = uncheckedLabel;
+             } else if(false && arrayValueExists(['piece','selecttabledata','id'],_type)){
+                let _id = rowData[columnField];
+                if(isNonNullString(_id)){
+                    let tableName = defaultStr(columnDef.tableName,columnDef.table).toUpperCase();
+                    let dbName = defaultStr(columnDef.dbName);
+                    if(!dataFileManager.isCommon(dbName) && (columnField == 'code' || _type =='piece')){
+                        dbName = defaultStr(rowData.dbId,dbName);
+                        tableName = defaultStr(rowData.table,tableName)
+                    }
+                    dbName = dataFileManager.sanitizeName(dbName,tableName);
+                    let pref = "";
+                    if(_type !=='piece'){
+                        pref = (tableName+"/").rtrim("/")+"/";
+                        _id = pref+_id.ltrim(pref);
+                    } 
+                    if(rowData[columnField+"FoundInDB"] === false){
+                        let fTitle = "Cet élément n'existe pas en base car n'a pas été trouvé dans un fichier";
+                        _render = <Button icon={"database-remove"} title={fTitle}>
+                            {rowData[columnField]}
+                        </Button> 
+                    } else {
+                        /*_render = <TableLink dbName={dbName} tableName = {tableName} _id = {
+                            _id
+                        }>{rowData[columnField]}</TableLink>*/
+                    }              
+                }
+             } else if((_type.contains('select'))){
+                 let v1 = rowData[columnField];
+                 _render = v1;
+                 if(isObjOrArray(columnDef.items)){
+                     if(columnDef.multiple){
+                         v1 = Object.toArray(v1);
+                         _render = "";
+                         v1.map((v)=>{
+                             for(let i in columnDef.items){
+                                 let it = columnDef.items[i];
+                                 if(isObj(it) && defaultStr(it.code,i) == v){
+                                     _render+=(_render?arrayValueSeparator:"")+defaultStr(it.label,it.text,v);
+                                 } else if(isNonNullString(it) && i == v){
+                                    _render+=(_render?arrayValueSeparator:"")+it;
+                                 }
+                             }
+                         })
+                         if(!_render){
+                             _render = v1.join(arrayValueSeparator);
+                         }
+                     } else {
+                         for(let i in columnDef.items){
+                            let it = columnDef.items[i];
+                            if(isObj(it) && defaultStr(it.code,i) == v1){
+                                _render =defaultStr(it.label,it.text,v1);
+                                break;
+                            } else if(isNonNullString(it) && i == v1){
+                                _render = it;
+                                break;
+                            }
+                        }
+                        if(!_render) _render = v1;
+                        if(isArray(_render)){
+                            _render = _render.join(arrayValueSeparator)
+                        } else if(isObj(_render)){
+                            _render = "";
+                        }
+                     }
+                 }
+             } else if(_type == 'image'){
+                 columnDef = defaultObj(columnDef)
+                 columnDef = {...columnDef,...defaultObj(columnDef.datagrid)};
+                 columnDef.size = defaultDecimal(columnDef.size,50);
+                 columnDef.editable = defaultBool(columnDef.editable,false)
+                 columnDef.rounded = defaultBool(columnDef.rounded,columnDef.round,true);
+                 columnDef.src = rowData[columnField];
+                 _render = <Image {...columnDef}/>
+             } 
+             if(!_render){
+                 _render = rowData[columnField];
+             }
+             if(columnDef.type =="password" && isNonNullString(_render)){
+                 let l = Math.max(_render.length,20);
+                 _render = "";
+                 for(let i=0;i<l;i++){
+                    _render+=".";
+                 }
+             }
+             if(isArray(_render)){
+                if(isTagRender){
+                    let nV = "";
+                    _render.map((v1)=>{
+                        nV +=(nV?arrayValueSeparator:"")+i18n.lang(v1,v1);
+                    })
+                    _render = nV;
+                } else {
+                    _render = _render.join(arrayValueSeparator);
+                }
+             }
+         } 
+         if(_render ===undefined){
+             _render = rowData[columnField];
+         }
+         if(isArray(_render)){
+             _render = _render.join(arrayValueSeparator);
+         } else if(!React.isValidElement(_render) && isPlainObj(_render)){
+             let __r = "";
+             for(let i in _render){
+                 __r+= (isObj(_render[i]) && _render[i]? (_render[i].code? _render[i].code:defaultStr(_render[i].label)):(_render[i]))
+             }
+             _render = __r;
+         }
+         if(isFunction(renderProps)){
+             renderProps = renderProps.call(this,renderArgs);
+         }
+         if(isDecimal(_render)){
+             let fmat = defaultStr(columnDef.format).toLowerCase();
+            if(fmat == "money"){
+                _render = _render.formatMoney();
+            } else if(fmat =="number") {
+                _render = _render.formatNumber();
+            }
+         }
+         if(_render && isObj(renderProps)){
+             let Component = defaultVal(renderProps.Component,Label);
+             delete renderProps.Component;
+             _render = <Component {...renderProps}>{_render}</Component>
+         }
+         if(typeof _render ==='string' || typeof _render =='decimal'){
+             _render = <Label selectable>{_render}</Label>
+         }
+         _render = React.isValidElement(_render)|| Array.isArray(_render)?_render:null;
+         return {render:_render,style,extra,key};
+    }
+    static LinesProgressBar (props){
+        return <DatagridContentLoader {...props}/>
+    }
+    static LineProgressBar (props){
+        return CommonDatagridComponent.LinesProgressBar(props);
+    }
+}
+
+export const ProgressBar = CommonDatagridComponent.LinesProgressBar;
+
+///cette fonction permet de retourner le nom de la base de données à utiliser pour la récupération des données
+export const getDBName = CommonDatagridComponent.getDBName = (arg)=>{
+    if(isNonNullString(arg)){
+        arg = {dbName:arg};
+    }
+    arg = defaultObj(arg);
+    let {dbName} = arg;
+    if(typeof (dbName) =='function'){
+        dbName = dbName(arg)
+    }
+    return defaultStr(dbName);
+}
+
+CommonDatagridComponent.getDefaultPreloader = (props)=>{
+    return <Preloader {...defaultObj(props)}/>
+}
+
+CommonDatagridComponent.propTypes = {
+    canMakePhoneCall : PropTypes.bool,//si l'on peut faire un appel sur la données sélectionnées
+    makePhoneCallProps : PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.func,
+    ]),
+    isLoading : PropTypes.bool,///si les données sont en train d'être chargées
+    session : PropTypes.bool, /// si les données de sessions seront persistées
+    exportTableProps : PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.object,
+    ]),
+    /*** si l'opérateur or de filtre est accepté */
+    filterOrOperator : PropTypes.bool,
+    /*** si l'opérateur and de filtre est accepté */
+    filterAndOperator : PropTypes.bool,
+    /**** les actions qui s'appliquent lorsqu'une où plusieurs lignes sont sélectionnées */
+    selectedRowsActions : PropTypes.oneOfType([PropTypes.object,PropTypes.array,PropTypes.func]),
+    /** Les actions de la barre d'outil du datagrid : il peut s'agit d'une fonction qui lorsqu'elle est appelée retourne l'ensemble des actions du datagrid
+     *  La fonction prend en paramètre : 
+     *  selectedRows : this.selectedRows : les lignes sélectionnées
+        data : this.state.data : les données du datagrid
+        rows : this.state.data : les données du datagrid
+        allData : this.INITIAL_STATE.data : l'ensemble des données du datagrid
+        mobile : bool si le rendu est fait en environnement mobile ou non
+        props : {} les props passés au composant
+        selected : true|| false //bolean pour spécifier s'il s'agit du rendu des actions des lignes sélectionnées
+     * 
+    */
+    actions : PropTypes.oneOfType([PropTypes.object,PropTypes.array,PropTypes.func]), //idem à selectedRowsActions
+    /*** spécifie si les filtres seront affichés */
+    filters : PropTypes.oneOfType([
+        PropTypes.bool,
+        PropTypes.object,
+    ]),
+    /*** affiche ou masque les filtres */
+    showFilters : PropTypes.bool,
+    /*** si le pied de page sera affiché */
+    showFooter : PropTypes.bool,
+    /*** les donnnées peuvent être soient retournées par une fonction, soit par un tableau soit une promesse */
+    data : PropTypes.oneOfType([PropTypes.array, PropTypes.func,PropTypes.object]),//.isRequired,
+    columns:PropTypes.oneOfType([PropTypes.array,PropTypes.object]),//.isRequired,
+    selectable : PropTypes.bool, //si les lignes sont sélectionnables,
+    /*** Si plusieurs lignes peuvent être sélectionnées au même moment */
+    selectableMultiple : PropTypes.bool,
+    showPagination : PropTypes.bool, //la pagination est toujours affichée
+    showPaginationOnTop:PropTypes.bool, //si la pagination sera affiché en haut du tableau,
+    pagin : PropTypes.bool,
+    paginate : PropTypes.bool,
+    sortable : PropTypes.bool,//si le tableau pourra être trié
+    onRowSelected : PropTypes.func, //lorsqu'une ligne est sélectionnée
+    onRowsSelected : PropTypes.func, // lorsque toutes les lignes du tableau sont sélectionnées
+    onRowDeselected : PropTypes.func, //lorsqu'une ligne est désélectionnée
+    onRowsDeselected : PropTypes.func,//lorsque toutes les lignes du datagrid sont désélectionnées
+    onRowDoubleClick : PropTypes.func,//évènement appelé en cas de double clic sur la ligne
+    onRowPress : PropTypes.func, //évènement appelé lorsqu'on clique sur la ligne
+    column : PropTypes.shape({
+        filter_value : PropTypes.any, //la valeur par défaut du champ de filtre de colonne
+        field : PropTypes.string.isRequired,
+        text : PropTypes.string,
+        /*** si le filtre de la colonne sera affiché : default : true*/
+        filter : PropTypes.bool,
+    }),
+    pagination:PropTypes.shape({
+        start: PropTypes.number, //la page initiale : default:1
+        limit: PropTypes.number, //la limite par page
+        rows: PropTypes.number, //le nombre total de ligne dans le tableau
+        page : PropTypes.page,//la page actuelle
+        next: PropTypes.string, //la chaine de caractère pour l'affichage de la page suivante
+        previous: PropTypes.string, //la chaine de caractère pour l'affichage de la page précédente
+        ///....props:PropTypes.object //les props à appliquer à l'objet pagination
+    }),
+    sort : PropTypes.shape({
+        column : PropTypes.string,
+        dir : PropTypes.string,
+        ignoreCase : PropTypes.bool,
+        /**** 
+         *  cette fonction est utilisée pour le rendu de l'item au moment du tri du tableau
+         *  @param : obj : l'objet courrant à trier
+         *  @param : colunmName : string, le nom de la colonne de trie
+         */
+        getItem : PropTypes.func 
+    }),
+    /**** la props filter, permet de filtrer les données qui seront utilisées pour le rendu du composant Dropdown 
+     *  {row,data,allData}
+     *  @param : {
+     *         component : string, le composant qui appelle la fonction de filtre : datagrid dans notre cas
+     *         props : object : les props du composant qui appelle la fonction
+    *          row ou data : la ligne  courant,
+    *          datas ou allData : l'ensemble des données du datagrid
+    *          rowIndex ou index : l'indice de la ligne courante,
+    *          items : la liste de tous les items,
+    *          index : l'indice de l'item,
+    *          _index : le numéro de l'indice : s'il s'agit d'un tableau 
+    *          ,itemIndex
+     *  }
+     * 
+    */
+    filter : PropTypes.func, 
+    /*** la barre de progression */
+    progressBar : PropTypes.node,
+    /*** fonction permettant de retourner l'unique clé des éléments du tableau */
+    getRowKey : PropTypes.func,
+    ///la fonction utilisée pour l'impression du datagrid
+    print : PropTypes.func,
+    printOptions: PropTypes.object,
+    /*** si le datagrid est imprimable */
+    printable : PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.string,
+        PropTypes.bool
+    ]),
+    archive : PropTypes.func,
+    archivable : PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.string,
+        PropTypes.bool
+    ]),
+    /*** si le rendu du datagrid est exportable */
+    exportable : PropTypes.bool,
+    baseId : PropTypes.string,
+    mobile: PropTypes.bool,
+    tablet: PropTypes.bool,
+    ///pour l'affichage où non des filtres
+    toggleFilters : PropTypes.bool,
+    desktop: PropTypes.bool,
+    ///les props à apppliquer à l'accordion
+    /**** l'accordion peut rendre un objet ou un objet react ou null 
+     * 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,
+     *   rowClassName : la class à appliquer à la ligne
+     *   rowProps : les props à appliquer à la ligne de la liste
+     *   headerClassName : la class à appliquer au header de la ligne
+     *   primaryText : //
+     *   primaryTextRigth : 
+     *   secondaryText : 
+     *   secondaryTextRight
+     * }
+    */
+    accordion :PropTypes.func,
+    accordionProps : PropTypes.object,
+    /*** pour le rendu du footer, pied de page en affichage accordion */
+    sessionName : PropTypes.string,
+    onFetchData : PropTypes.func,
+    getActionsArgs : PropTypes.func,//fonction permettant de récupérer les props supplémentaires à passer aux actions du datagrid
+}
+
+const styles = StyleSheet.create({
+    queryLimit : {
+        fontSize : 16
+    },
+    sortableColumn : {
+        flexDirection : 'row',
+        flex : 1,
+        alignItems : 'center',
+    },
+    sortedColumnIcon : {
+        paddingVertical : 0,
+        paddingHorizontal : 0,
+        marginHorizontal : 0,
+        marginVertical : 0,
+        marginLeft : -10,
+        //paddingRight : 2,
+        //width : 27,
+    },
+})