@fto-consult/expo-ui 6.25.1 → 6.25.3

package/app.config.json

@@ -1,6 +1,6 @@
 {
 	"name": "@FTO-CONSULT/EXPO-UI",
-	"version": "6.24.2",
+	"version": "6.25.2",
 	"description": "Bibliothèque de composants UI Expo,react-native",
 	"bin": {
 		"expo-ui": "./bin/index.js"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "6.25.1",
+  "version": "6.25.3",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -92,6 +92,7 @@
     "fs-extra": "^11.1.1",
     "google-libphonenumber": "^3.2.33",
     "htmlparser2-without-node-native": "^3.9.2",
+    "pdfmake": "^0.2.7",
     "process": "^0.11.10",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",

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

@@ -961,7 +961,7 @@ export default class CommonDatagridComponent extends AppComponent {
                 this.setState(state);
             });
         };
-        const max = isMobileOrTabletMedia()? 1000 : 5000;
+        const max = isMobileOrTabletMedia()? 200 : 5000;
         if(this.INITIAL_STATE.data.length > max){
             return this.setIsLoading(true,call,true);
         }
@@ -1706,6 +1706,15 @@ export default class CommonDatagridComponent extends AppComponent {
                 label : "Exporter les entêtes des groupes",
                 defaultValue :1,
             },
+            fields : {
+                text : "Champs à exporter",
+                items : this.state.columns,
+                type : "select",
+                itemValue : ({item,index})=>index,
+                filter : ({item,index})=> isObj(item) && item.exportable !== false,
+                renderItem : ({item,index})=> item?.label || item?.text || index,
+                multiple : true,
+            },
             /*abreviateValues : {
                 text : "Abréger les valeurs numériques",
                 type : "switch",
@@ -1718,147 +1727,164 @@ export default class CommonDatagridComponent extends AppComponent {
             },
         }
    }
-   /***@see : https://docs.sheetjs.com/docs/api/utilities */
-   exportToExcel(){
-        const skey = "export-to-excel";
+   SetExportOptions({excel}){
+        const skey = excel ? "export-to-excel":"export-to-other";
         const isOnlytotal = this.state.displayOnlySectionListHeaders;
-        let displayOnlyHeader = this.canDisplayOnlySectionListHeaders() && isOnlytotal;
+        const displayOnlyHeader = this.canDisplayOnlySectionListHeaders() && isOnlytotal;
         const sData = defaultObj(this.getSessionData(skey));
-        return DialogProvider.open({
-            title : "Paramètre d'export excel",
-            data : sData,
-            fields : {
-                ...this.getExportableFields(),
-                sheetName : {
-                    label : 'Nom de la feuille excel',
-                    format : "hashtag",
-                    required : true,
+        return new Promise((resolve,reject)=>{
+            return DialogProvider.open({
+                title : `Paramètre d'export ${excel?"excel":"pdf"}`,
+                data : sData,
+                fields : {
+                    ...this.getExportableFields(),
+                    sheetName : excel && {
+                        label : 'Nom de la feuille excel',
+                        format : "hashtag",
+                        required : true,
+                    },
+                    exportOnlyTotal : displayOnlyHeader && {
+                        label : "Exporter uniquemnt les totaux",
+                        defaultValue : 0,
+                        type : "switch",
+                    },
+                    aggregatedValues : displayOnlyHeader ? {
+                        label : "Exporter uniquement les totaux aggrégées",
+                        defaultValue : 0,
+                        type : "switch",
+                    }  : null,
                 },
-                exportOnlyTotal : displayOnlyHeader && {
-                    label : "Exporter uniquemnt les totaux",
-                    defaultValue : 0,
-                    type : "switch",
+                actions : [{text:'Exporter',icon : "check"}],
+                onSuccess: (args)=>{
+                    args.sessionKeyName = skey;   
+                    args.displayOnlyHeader = displayOnlyHeader;
+                    args.isOnlytotal = isOnlytotal;
+                    args.sessionData = sData;
+                    DialogProvider.close();
+                    resolve(args);
+                    return args;
                 },
-                aggregatedValues : displayOnlyHeader ? {
-                    label : "Exporter uniquement les totaux aggrégées",
-                    defaultValue : 0,
-                    type : "switch",
-                }  : null,
-            },
-            actions : [{text:'Exporter',icon : "check"}],
-            onSuccess:({data:config})=>{
-                this.setSessionData(skey,config);
-                config.fileName = sprintf(config.fileName);
-                config.sheetName = sanitizeSheetName(config.sheetName);
-                const data = [];
-                let totalColumns = 0;
-                const cols = {};
-                DialogProvider.close();
-                Preloader.open("préparation des données...");
-                const footers = this.getFooters();
-                if(displayOnlyHeader && config.aggregatedValues){
-                    const fValues = this.getFooterValues();
-                    const headers = ["Fonction d'agrégation"];
-                    const aggregatorFunctions = this.aggregatorFunctions;
-                    Object.map(footers,(f,i)=>{
-                        const col = this.state.columns[i];
-                        if(!col || col.visible === false) return;
-                        headers.push(defaultStr(col.label,col.text));
-                        cols[i] = col;
+                onCancel : reject,
+            })
+        })
+   }
+   /***@see : https://docs.sheetjs.com/docs/api/utilities */
+   exportToExcel(){
+        return this.SetExportOptions({excel:true}).then(({sessionKeyName,isOnlytotal,displayOnlyHeader,data:config})=>{
+            this.setSessionData(sessionKeyName,config);
+            config.fileName = sprintf(config.fileName);
+            config.sheetName = sanitizeSheetName(config.sheetName);
+            const data = [];
+            let totalColumns = 0;
+            const cols = {};
+            Preloader.open("préparation des données...");
+            const footers = this.getFooters();
+            const hasFields = !!config.fields.length;
+            const fields = config.fields;
+            if(displayOnlyHeader && config.aggregatedValues){
+                const fValues = this.getFooterValues();
+                const headers = ["Fonction d'agrégation"];
+                const aggregatorFunctions = this.aggregatorFunctions;
+                Object.map(footers,(f,i)=>{
+                    if(hasFields && !fields.includes(i)) return;
+                    const col = this.state.columns[i];
+                    if(!col || col.visible === false) return;
+                    headers.push(defaultStr(col.label,col.text));
+                    cols[i] = col;
+                });
+                data.push(headers);
+                Object.map(aggregatorFunctions,(ag,i)=>{
+                    const d = [defaultStr(ag.label,ag.text,i)];
+                    Object.map(fValues,(footer,field)=>{
+                        if(!cols[field]) return;
+                        d.push(defaultNumber(footer[i]))
                     });
-                    data.push(headers);
-                    Object.map(aggregatorFunctions,(ag,i)=>{
-                        const d = [defaultStr(ag.label,ag.text,i)];
-                        Object.map(fValues,(footer,field)=>{
-                            if(!cols[field]) return;
-                            d.push(defaultNumber(footer[i]))
-                        });
-                        data.push(d);
-                    })
-                } else {
-                    const headers = [];
-                    const hFooters = defaultObj(this.sectionListHeaderFooters);
-                    const agFunc = this.state.aggregatorFunction;
-                    const canExportOnlyTotal = isOnlytotal || (config.exportOnlyTotal && displayOnlyHeader);
-                    if(canExportOnlyTotal){
-                        headers.push("");
-                    }
-                    Object.map(this.state.columns,(col,i)=>{
-                        if(!isObj(col) || col.visible === false || this.isSelectableColumn(col,i) || i === this.getIndexColumnName()) return;
-                        if(canExportOnlyTotal && !(i in footers)) return;
-                        cols[i] = col;
-                        headers.push(defaultStr(col.label,col.text));
-                        totalColumns++;
-                    })
-                    data.push(headers);
-                    Object.map(this.state.data,(dat,index)=>{
-                        ///si l'on a a faire à une colonne de type entete
-                        const d = [];
-                        if(dat.isSectionListHeader){
-                            if(!config.displayTotals && !canExportOnlyTotal) return;
-                            const {sectionListHeaderKey:key} = dat;
-                            const val = key === this.emptySectionListHeaderValue ? this.getEmptySectionListHeaderValue() : key;
-                            d.push(val);
-                            if(!canExportOnlyTotal){
-                                for(let i = 1;i<totalColumns;i++){
-                                    d.push(null);
-                                }
-                                data.push(d);
-                            } else {
-                                const hF = hFooters[key];
-                                if(isObj(hF) && isNonNullString(agFunc)){
-                                    const dd = [];
-                                    Object.map(cols,(col,i)=>{
-                                        if(i in hF){
-                                                const ff = hF[i];
-                                                dd.push(defaultNumber(ff[agFunc]));
-                                            } else {
-                                                dd.push(null);
-                                            }
-                                    });
-                                    if(canExportOnlyTotal){
-                                        dd.unshift(val);
-                                        data.push(dd);
-                                    } else {
-                                        data.push(d);
-                                        data.push(dd);
-                                    }
+                    data.push(d);
+                })
+            } else {
+                const headers = [];
+                const hFooters = defaultObj(this.sectionListHeaderFooters);
+                const agFunc = this.state.aggregatorFunction;
+                const canExportOnlyTotal = isOnlytotal || (config.exportOnlyTotal && displayOnlyHeader);
+                if(canExportOnlyTotal){
+                    headers.push("");
+                }
+                Object.map(this.state.columns,(col,i)=>{
+                    if(hasFields && !fields.includes(i)) return;
+                    if(!isObj(col) || col.visible === false || this.isSelectableColumn(col,i) || i === this.getIndexColumnName()) return;
+                    if(canExportOnlyTotal && !(i in footers)) return;
+                    cols[i] = col;
+                    headers.push(defaultStr(col.label,col.text));
+                    totalColumns++;
+                })
+                data.push(headers);
+                Object.map(this.state.data,(dat,index)=>{
+                    ///si l'on a a faire à une colonne de type entete
+                    const d = [];
+                    if(dat.isSectionListHeader){
+                        if(!config.displayTotals && !canExportOnlyTotal) return;
+                        const {sectionListHeaderKey:key} = dat;
+                        const val = key === this.emptySectionListHeaderValue ? this.getEmptySectionListHeaderValue() : key;
+                        d.push(val);
+                        if(!canExportOnlyTotal){
+                            for(let i = 1;i<totalColumns;i++){
+                                d.push(null);
+                            }
+                            data.push(d);
+                        } else {
+                            const hF = hFooters[key];
+                            if(isObj(hF) && isNonNullString(agFunc)){
+                                const dd = [];
+                                Object.map(cols,(col,i)=>{
+                                    if(i in hF){
+                                            const ff = hF[i];
+                                            dd.push(defaultNumber(ff[agFunc]));
+                                        } else {
+                                            dd.push(null);
+                                        }
+                                });
+                                if(canExportOnlyTotal){
+                                    dd.unshift(val);
+                                    data.push(dd);
                                 } else {
                                     data.push(d);
+                                    data.push(dd);
                                 }
+                            } else {
+                                data.push(d);
                             }
-                        } else if(!canExportOnlyTotal) {
-                            Object.map(cols,(col,i)=>{
-                                const isDateField = defaultStr(col.type).toLowerCase().contains("date");
-                                d.push(this.renderRowCell({
-                                    data : dat,
-                                    rowData : dat,
-                                    rowCounterIndex : index,
-                                    rowIndex : index,
-                                    formatValue : false,
-                                    renderRowCell : false,
-                                    columnField : defaultStr(col.field,i),
-                                    columnDef :{
-                                        ...col,
-                                        ...(isDateField?{format:config.dateFormat}:{})
-                                    }
-                                }));
-                            })   
-                            data.push(d);
                         }
-                    });
-                }
-                const wb = XLSX.utils.book_new();
-                const ws = XLSX.utils.aoa_to_sheet(data);
-                XLSX.utils.book_append_sheet(wb, ws, config.sheetName);
-                FileSystem.writeExcel({...config,workbook:wb}).then(({path})=>{
-                    if(isNonNullString(path)){
-                        notify.success("Fichier enregistré dans le répertoire {0}".sprintf(path))
+                    } else if(!canExportOnlyTotal) {
+                        Object.map(cols,(col,i)=>{
+                            const isDateField = defaultStr(col.type).toLowerCase().contains("date");
+                            d.push(this.renderRowCell({
+                                data : dat,
+                                rowData : dat,
+                                rowCounterIndex : index,
+                                rowIndex : index,
+                                formatValue : false,
+                                renderRowCell : false,
+                                columnField : defaultStr(col.field,i),
+                                columnDef :{
+                                    ...col,
+                                    ...(isDateField?{format:config.dateFormat}:{})
+                                }
+                            }));
+                        })   
+                        data.push(d);
                     }
-                 }).finally(()=>{
-                    Preloader.close();
-                })
+                });
             }
+            const wb = XLSX.utils.book_new();
+            const ws = XLSX.utils.aoa_to_sheet(data);
+            XLSX.utils.book_append_sheet(wb, ws, config.sheetName);
+            FileSystem.writeExcel({...config,workbook:wb}).then(({path})=>{
+                if(isNonNullString(path)){
+                    notify.success("Fichier enregistré dans le répertoire {0}".sprintf(path))
+                }
+             }).finally(()=>{
+                Preloader.close();
+            })
         })
    }
    exportToPdf(){

package/src/components/Dialog/DialogContent.js

@@ -2,10 +2,10 @@ import KeyboardAvoidingView from "../KeyboardAvoidingView";
 import React  from "$react";
 import { useWindowDimensions } from "react-native";
 
-const DialogContentComponent = ({isPreloader,isFullScreen,...props})=>{
+const DialogContentComponent = ({isPreloader,title,children,isFullScreen,...props})=>{
     const isFull = isFullScreen();
     //useWindowDimensions();
-    const content = React.useMemo(()=>props.children,[isPreloader]);
+    const content = React.useMemo(()=>children,[isPreloader,title,children]);
     return isPreloader || !isFull ? content : <KeyboardAvoidingView>{content}</KeyboardAvoidingView>
 }
 export default DialogContentComponent;

package/src/components/Dropdown/index.js

@@ -967,7 +967,6 @@ class DropdownComponent extends AppComponent {
         const renderingItems = this.getItems();
         const isDisabled = readOnly || disabled?true:false;
         const isBigList = this.isBigList;
-        const ListComponent = isBigList ? BigList : List;
         const autoFocus = canAutoFocusSearchField({visible,items:renderingItems});
         dialogProps = defaultObj(dialogProps);
         if(this.props.name =="RG_Compta"){
@@ -1063,7 +1062,7 @@ class DropdownComponent extends AppComponent {
                     {isMob && helperText ? <View testID = {testID+"_HelperText"} style={[styles.helperText]}>
                         {helperText}
                     </View>: null}
-                    <ListComponent
+                    <BigList
                         testID = {testID+"_List"}
                         {...listProps}
                         ref = {this.listRef}

package/src/components/Label/index.js

@@ -10,7 +10,7 @@ const defaultSelectable = canTextBeSelectable();
 
 export const EllipsizeMode = {'head':'head','middle':'middle', 'tail':'tail' , 'clip':'clip'}
 
-const LabelComponent = React.forwardRef(({ children,role,color,upperCase,fontSize,testID,wrap,id,wrapText,error,underlined,splitText,secondary,primary,bold,textBold,disabled,text,style,...rest},ref)=> {
+const LabelComponent = React.forwardRef(({ children,selectable,role,color,upperCase,fontSize,testID,wrap,id,wrapText,error,underlined,splitText,secondary,primary,bold,textBold,disabled,text,style,...rest},ref)=> {
     children = defaultVal(children,text);
     let isText = false;
     if(!React.isValidElement(children) && Array.isArray(children) && children.length){
@@ -58,6 +58,8 @@ const LabelComponent = React.forwardRef(({ children,role,color,upperCase,fontSiz
     if(disabled){
         r1.pointerEvents = "none";
     }
+    selectable = !!(selectable || defaultSelectable);
+    r2.userSelect = selectable?"none":"all";
     if(isNonNullString(children) || isText || typeof children ==='number'){
         if(!isText){
             children +="";
@@ -68,7 +70,10 @@ const LabelComponent = React.forwardRef(({ children,role,color,upperCase,fontSiz
         if(fontSize){
             r1.fontSize = fontSize;
         }
-        return (<Text  allowFontScaling = {true} ref = {ref} selectable={defaultSelectable} 
+        if(selectable){
+            r2.userSelect = "text";
+        }
+        return (<Text  allowFontScaling = {true} ref = {ref} 
             {...rest} {...restProps} testID={testID} disabled={disabled} 
             role={typeof role =='string' && role && supportedRoles.includes(role.trim()) && role.trim() || undefined}
             style={[styles.label,splitText?styles.wrap:null,splitText?styles.w100:null,bold?styles.bold:null,r2,style,r1,styles.webFontFamilly]}>{children}</Text>)
@@ -92,7 +97,7 @@ const LabelComponent = React.forwardRef(({ children,role,color,upperCase,fontSiz
             }
             return children;
         }
-        return <View ref = {ref} selectable={defaultSelectable} {...rest} {...restProps} testID = {testID} style={viewStyle} disabled={disabled}>{children}</View>
+        return <View ref = {ref}  {...rest} {...restProps} testID = {testID} style={viewStyle} disabled={disabled}>{children}</View>
     }
     return null;
 })
@@ -114,7 +119,10 @@ LabelComponentExported.propTypes = {
     color : PropTypes.string,
     selectable : PropTypes.bool, //si le texte est sélectionnable
     underlined : PropTypes.bool,//si le style underlined sera appliqué au label
-    splitText : PropTypes.bool,///si le texte lorsqu'il est long sera splité
+    splitText : PropTypes.bool,///si le texte lorsqu'il est long sera splité,
+    /*useSelect : PropTypes.oneOfType([
+        'auto', 'text', 'none', 'contain', 'all'
+    ])*/
 }
 
 export default LabelComponentExported;

package/src/components/List/hooks.js

@@ -10,17 +10,14 @@ export const useList = ({items,filter,prepareItems,...props})=>{
     const context = contextRef.current;
     context.itemsRefs = Array.isArray(context.itemsRefs) && context.itemsRefs || [];
     context.prepareItems = defaultFunc((prepareItems === false ? (items)=> items:null),prepareItems,customPrepareItems);
-    contextRef.prevItems = React.usePrevious(items);
-    const getItems = React.useCallback(()=>{
-        if(items === context.prevItems && context.items) {
-            return context.items;
+    const canPrepareItems = prepareItems === false ? false : true;
+    context.items = contextRef.items = React.useMemo(()=>{
+        const r = context.prepareItems(items,filter);
+        if(!Array.isArray(r)){
+            console.error(r," is not valid list data array",items,props);
+            return [];
         }
-        return context.prepareItems(items,filter);
-    },[items]);
-    context.items = contextRef.items = prepareItems === false ? items : getItems();
-    if(!Array.isArray(context.items)){
-        console.error(context.items," is not valid list data array",items,props);
-        context.items = [];
-    }
+        return r;
+    },[items,canPrepareItems]);
     return context;
 }

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

@@ -1,7 +1,8 @@
 import View from "$ecomponents/View";
 import React from "$react";
+import styles from "../../styles";
 const TableHeaderCellComponent = React.forwardRef(({width,style,...props},ref)=>{
-    return <View ref={ref} {...props} style={[style,width && {width}]}/>
+    return <View ref={ref} {...props} style={[styles.cell,style,width && {width}]}/>
 });
 TableHeaderCellComponent.displayName = "TableTableHeaderCellComponent";
 export default TableHeaderCellComponent;

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

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

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

@@ -8,19 +8,27 @@ import { View } from "react-native";
 import PropTypes from "prop-types";
 import { StyleSheet } from "react-native";
 import {isMobileNative} from "$cplatform";
-import {classNames} from "$cutils";
+import {classNames,defaultObj} from "$cutils";
 const isNative = isMobileNative();
 const Component = isNative ? View : "tr";
-import theme from "$theme";
+import { useTable } from "../hooks";
+import styles from "../styles";
+import CellHeader from "./CellHeader";
 
-export default function RowHeaderComponent({visible,className,children:cChildren,...rest}){
+export default function RowHeaderComponent({isFilter,isFooter,isHeader,className,children:cChildren,...rest}){
+    const {showHeaders,visibleColsNames,visibleColsNamesStr,headerContainerProps,footerContainerProps,filtersContainerProps,showFilters,footers,headers,filters,showFooters} = useTable();
+    const canV = showHeaders === false ? false : Array.isArray(children)? !!children.length : true;
+    const visible = canV && (isHeader ?  true : isFilter ? !!showFilters : isFooter ? !!showFooters: true);
+    const containerProps = defaultObj( isHeader ? headerContainerProps : isFooter ? footerContainerProps : filtersContainerProps);
+    const style = filters ? styles.filters : isFooter ? styles.footer : null;
     const children = React.useMemo(()=>{
-        return cChildren;
-    },[cChildren]);
+        const contents = isFilter ? filters : isFooter ? footers : headers;
+        return visibleColsNames.map((columnField,cIndex)=>{
+            return contents[columnField] || null;
+        });
+    },[visibleColsNamesStr]);
     const rP = isNative ? rest : {className:classNames(className,"table-footer-or-header-row")}
-    if(!isNative && !visible) return null;
-    //const backgroundColor = theme.isDark()? theme.Colors.lighten(theme.surfaceBackgroundColor):theme.Colors.darken(theme.surfaceBackgroundColor);
-    return <Component {...rP} style={StyleSheet.flatten([rest.style,!visible && {height:0,opacity:0,display:'none'}])}>
+    return <Component {...rP} {...containerProps} style={StyleSheet.flatten([styles.header,style,rest.style,containerProps.style,!visible && hStyle.hidden])}>
         {children}
     </Component>
 }
@@ -32,3 +40,10 @@ RowHeaderComponent.propTypes = {
 export {Cell};
 
 RowHeaderComponent.Cell = Cell;
+RowHeaderComponent.CellHeader = CellHeader;
+
+export {CellHeader};
+
+const hStyle = StyleSheet.create({
+    hidden : {height:0,opacity:0,display:'none'}
+});

package/src/components/Table/Row/Cell/Content.js

@@ -6,8 +6,8 @@ import {classNames} from "$cutils";
 import { StyleSheet } from "react-native";
 import Label from "$ecomponents/Label";
 
-function TableCellContentComponent({children,style,...rest}){
-    return (<td  {...rest} className={classNames(rest.className,"table-row-cell")} style={StyleSheet.flatten([style])}>
+function TableCellContentComponent({children,columnDef,testID,columnField,style,...rest}){
+    return (<td  data-test-id={testID||"RN_TableCellComoponent"} className={classNames(rest.className,"table-row-cell")} style={StyleSheet.flatten([style])}>
         {children}
     </td>);
 }

package/src/components/Table/Row/Cell/Content.native.js

@@ -3,10 +3,11 @@
 // license that can be found in the LICENSE file.
 import React from "react";
 import View from "$ecomponents/View";
-import { StyleSheet } from "react-native";
-
-function TableCellContentComponent({children,style,colSpan,...rest}){
-    return (<View testID={"RN_TableRowCellContentComponent"} {...rest} style={style}>
+import {useTable} from "../../hooks";
+function TableCellContentComponent({children,columnField,style,colSpan,...rest}){
+    const {colsWidths} = useTable();
+    const width = columnField ? colsWidths[columnField] : 0;
+    return (<View testID={"RN_TableRowCellContentComponent"} {...rest} style={[style,width && {width}]}>
         {children}
     </View>);
 }

package/src/components/Table/Row/Cell/index.js

@@ -4,7 +4,7 @@ import { useTable } from "../../hooks";
 import {defaultObj} from "$cutils";
 import Label from "$ecomponents/Label";
 import styles from "../../styles";
-const TableRowCellComponent = React.forwardRef(({children,columnDef,rowData,colSpan,isSectionListHeader,rowIndex,style,...rest},ref)=>{
+const TableRowCellComponent = React.forwardRef(({children,columnDef,columnField,rowData,colSpan,isSectionListHeader,rowIndex,style,...rest},ref)=>{
     if(isSectionListHeader){
         return <CellContent colSpan={colSpan} ref={ref} style={[styles.sectionListHeader,style]} >
             {children}
@@ -12,14 +12,14 @@ const TableRowCellComponent = React.forwardRef(({children,columnDef,rowData,colS
     }
     const {renderCell} = useTable();
     const {content,containerProps} = React.useMemo(()=>{
-        const rArgs = {...rest,columnDef,rowData,rowIndex,containerProps : {}};
+        const rArgs = {...rest,columnDef,columnField,rowData,rowIndex,containerProps : {}};
         const r = typeof renderCell =='function' && renderCell (rArgs) ||  children;
         return {
             content : r && React.isValidElement(r,true)? r : children,
             containerProps : defaultObj(rArgs.containerProps)
         }
     },[children]);
-    return (<CellContent ref={ref}  {...containerProps} style={[style,containerProps.style]} >
+    return (<CellContent ref={ref}  {...containerProps} columnField={columnField} style={[style,containerProps.style]} >
         {columnDef.isSelectableColumnName ? content : <Label testID="RN_TableRowCell" style={[styles.cell]}>{content}</Label>}
     </CellContent>);
 });

package/src/components/Table/Row/RowWrapper.native.js

@@ -1,9 +1,17 @@
-import { forwardRef } from "react";
+import { forwardRef,useMemo } from "react";
 import View from "$ecomponents/View";
 import styles from "../styles";
+import { useTable } from "../hooks";
+import {useIsRowSelected} from "$ecomponents/Datagrid/hooks";
+import { getRowStyle } from "$ecomponents/Datagrid/utils";
 
 const TableRowWrapperComponent = forwardRef(({children,colSpan,...props},ref)=>{
-    return <View ref={ref} {...props} style={[styles.row,props.style]} children={children}/>
+    const {bordered,withDatagridContext} = useTable();
+    const selected = withDatagridContext ? useIsRowSelected(props) : false;
+    const rowStyle = useMemo(()=>{
+        return getRowStyle({...props,bordered});
+    },[selected])
+    return <View ref={ref} {...props} style={[styles.row,rowStyle,props.style]} children={children}/>
 });
 
 TableRowWrapperComponent.displayName = "TableRowWrapperComponent";

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

@@ -11,7 +11,8 @@ import RowWrapper from "./RowWrapper";
 import React from "$react";
 import theme from "$theme";
 export default function TableRowComponent({cells,rowKey,rowData,index,...rest}){
-    const {visibleColsNames,renderItem,renderSectionHeader,columns} = useTable();
+    const {visibleColsNames,visibleColsNamesStr,renderSectionHeader,columns} = useTable();
+    if(!isObj(rowData)) return null;
     const content = React.useMemo(()=>{
         if(rowData.isSectionListHeader && typeof renderSectionHeader ==='function'){
             return <RowWrapper style={[styles.row,theme.styles.pv1]}>
@@ -23,8 +24,8 @@ export default function TableRowComponent({cells,rowKey,rowData,index,...rest}){
             if(!isObj(columnDef)) return null;
             return <Cell rowData={rowData} rowKey={rowKey} children={rowData[columnField]} rowIndex={index} columnDef={columnDef} index={cIndex} key={columnField} columnField={columnField}/>
         });
-    },[rowKey,index,JSON.stringify(visibleColsNames)]);
-    return <RowWrapper style={[styles.row]}>
+    },[rowKey,index,visibleColsNamesStr]);
+    return <RowWrapper {...rest} rowKey={rowKey} rowData={rowData} rowIndex={index} style={[styles.row]}>
         {content}
     </RowWrapper>;
 }