@fto-consult/expo-ui 6.25.0 → 6.25.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "6.25.0",
+  "version": "6.25.1",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -67,7 +67,7 @@
     "@emotion/react": "^11.11.1",
     "@expo/html-elements": "^0.5.1",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^3.27.0",
+    "@fto-consult/common": "^3.28.1",
     "@gorhom/portal": "^1.0.14",
     "@pchmn/expo-material3-theme": "^1.3.1",
     "@react-native-async-storage/async-storage": "1.18.2",
@@ -104,7 +104,7 @@
     "react-native-iphone-x-helper": "^1.3.1",
     "react-native-mime-types": "^2.4.0",
     "react-native-paper": "^5.10.1",
-    "react-native-paper-dates": "^0.18.13",
+    "react-native-paper-dates": "^0.18.14",
     "react-native-reanimated": "~3.3.0",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",

package/readChart.txt

@@ -5,4 +5,7 @@
 Les valeurs pouvant appartenir au séries groupées des charts peuvent être uniquement les valeurs calculées du footer, 
 lorsque les colonnes sont grouépes
 
-Configure git credentialHelper http : credential.useHttpPath true, @see : https://microsoft.github.io/Git-Credential-Manager-for-Windows/Docs/Configuration.html#:~:text=useHttpPath,changes%20the%20behavior%20of%20Git.
+Configure git credentialHelper http : credential.useHttpPath true, @see : https://microsoft.github.io/Git-Credential-Manager-for-Windows/Docs/Configuration.html#:~:text=useHttpPath,changes%20the%20behavior%20of%20Git.
+
+
+il est possible d'ajouter les propriétés css valide en environnemnet web, dans le theme, en utilisant la props customCSS de type fonction ou chaine de caractère

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

@@ -956,11 +956,16 @@ export default class CommonDatagridComponent extends AppComponent {
         if(typeof this.props.onSort =='function' && this.props.onSort({context:this,sort,data:this.INITIAL_STATE.data,fields:this.state.columns,columns:this.state.columns}) === false){
             return;
         }
-        this.setIsLoading(true,()=>{
+        const call = ()=>{
             this.prepareData({data:this.INITIAL_STATE.data,updateFooters:false},(state)=>{
                 this.setState(state);
             });
-        },true);
+        };
+        const max = isMobileOrTabletMedia()? 1000 : 5000;
+        if(this.INITIAL_STATE.data.length > max){
+            return this.setIsLoading(true,call,true);
+        }
+        return call();
     }
 
    /**** pagine l'objet data passé en parmètre de manière a retourner un objet satisfaisant aux paramètres
@@ -3631,7 +3636,7 @@ export default class CommonDatagridComponent extends AppComponent {
                 toggleAll
                 key = {this.getSelectableColumName()}
                 secondaryOnCheck
-                style = {style}
+                style = {[style]}
                 onPress = {({checked})=>{
                     this.handleAllRowsToggle(!checked);  
                     return;
@@ -3647,7 +3652,7 @@ export default class CommonDatagridComponent extends AppComponent {
             this.sort(columnField);
         };
         return <TouchableRipple disabled={!sortable} style={styles.sortableColumn} onPress={sortMe}>
-            <>
+            <View testID={"RN_DatagridHeaderCellContainer_"+columnField} style={[tableStyles.cell,theme.styles.row,theme.styles.flex1,theme.styles.justifyContentFlexStart,theme.styles.alignItemsCenter]}>
                 {isColumnSorted ? <Icon
                     {...sortedColumn}
                     size = {24}
@@ -3656,8 +3661,8 @@ export default class CommonDatagridComponent extends AppComponent {
                     onPress = {sortMe}
                     primary
                 />: null}
-                <Label textBold style={[{fontSize:13}]} primary={isColumnSorted}>{ret}</Label>
-            </>
+                <Label testID={"RN_DatagridHeaderCellLabel_"+columnField} textBold style={[{fontSize:13}]} primary={isColumnSorted}>{ret}</Label>
+            </View>
         </TouchableRipple>
     }
     canScrollTo(){

package/src/components/Datagrid/utils.js

@@ -113,7 +113,8 @@ export const ROW_BORDER_STYLE = {
     borderRightColor : ROW_BORDER_COLOR,
     borderRightWidth : 0,
     borderTopColor : ROW_BORDER_COLOR,
-    borderTopWidth : 0
+    borderTopWidth : 0,
+    borderStyle : "solid",
 }
 
 

package/src/components/Label/index.js

@@ -42,6 +42,7 @@ const LabelComponent = React.forwardRef(({ children,role,color,upperCase,fontSiz
     }
     
     style = Object.assign({},StyleSheet.flatten(style));
+    let hasP = Object.size(style,true);
     testID = defaultStr(testID,"RN_LabelComponent");
     const restProps = {id};
     if(splitText){
@@ -54,6 +55,9 @@ const LabelComponent = React.forwardRef(({ children,role,color,upperCase,fontSiz
     if(wrap){
         r1.flexWrap = "wrap";
     }
+    if(disabled){
+        r1.pointerEvents = "none";
+    }
     if(isNonNullString(children) || isText || typeof children ==='number'){
         if(!isText){
             children +="";
@@ -69,7 +73,6 @@ const LabelComponent = React.forwardRef(({ children,role,color,upperCase,fontSiz
             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>)
     }
-    let hasP = false;
     if(isObj(rest)){
         for(let i in rest){
             if(rest[i]!== undefined) {
@@ -81,14 +84,15 @@ const LabelComponent = React.forwardRef(({ children,role,color,upperCase,fontSiz
     if(children == undefined){
         return null;
     }
+    const viewStyle = [bold?styles.bold:null,r2,style,r1];
     if(React.isValidElement(children)){
         if(!hasP) {
             if(id || ref){
-                return <View ref = {ref} testID = {testID} id={id}>{children}</View>
+                return <View ref = {ref} testID = {testID} id={id} style={viewStyle}>{children}</View>
             }
-            return <>{children}</>
+            return children;
         }
-        return <View ref = {ref} selectable={defaultSelectable} {...rest} {...restProps} testID = {testID} style={[bold?styles.bold:null,r2,style,r1]} disabled={disabled} pointerEvents={disabled?'none':'auto'}>{children}</View>
+        return <View ref = {ref} selectable={defaultSelectable} {...rest} {...restProps} testID = {testID} style={viewStyle} disabled={disabled}>{children}</View>
     }
     return null;
 })

package/src/components/List/Virtuoso/index.js

@@ -12,6 +12,7 @@ import theme,{grid} from "$theme";
 import Dimensions from "$cdimensions";
 import { StyleSheet } from "react-native";
 import {isMobileNative} from "$cplatform";
+import {addClassName,removeClassName} from "$cutils/dom";
 
 const propTypes = {
     ...defaultObj(Virtuoso.propTypes),
@@ -31,7 +32,7 @@ const propTypes = {
     isScrolling : PropTypes.func,
 };
 /***@see : https://virtuoso.dev/virtuoso-api-reference/ */
-const VirtuosoListComponent = React.forwardRef(({onRender,fixedHeaderContent,rowProps,renderTable,listClassName,components,itemProps,windowWidth,numColumns,responsive,testID,renderItem,onEndReached,onLayout,onContentSizeChange,onScroll,isScrolling,estimatedItemSize,onEndReachedThreshold,containerProps,style,autoSizedStyle,...props},ref)=>{
+const VirtuosoListComponent = React.forwardRef(({onRender,id,fixedHeaderContent,rowProps,renderTable,listClassName,components,itemProps,windowWidth,numColumns,responsive,testID,renderItem,onEndReached,onLayout,onContentSizeChange,onScroll,isScrolling,estimatedItemSize,onEndReachedThreshold,containerProps,style,autoSizedStyle,...props},ref)=>{
     if(renderTable){
         responsive = false;
     }
@@ -50,6 +51,10 @@ const VirtuosoListComponent = React.forwardRef(({onRender,fixedHeaderContent,row
         }
     });
     containerProps = defaultObj(containerProps);
+    const idRef = React.useRef(defaultStr(id,uniqid("virtuoso-list-id")));
+    id = idRef.current; 
+    const containerId = `${id}-container`;
+    const headId = `${id}-table-head`;
     testID = defaultStr(testID,containerProps.testID,"RN_VirtuosoListComponent");
     const listIdRef = React.useRef(uniqid("virtuoso-list-id"));
     const listId = listIdRef.current;
@@ -58,6 +63,9 @@ const VirtuosoListComponent = React.forwardRef(({onRender,fixedHeaderContent,row
     const listSize = sizeRef.current;
     const isValid = ()=> listRef.current;
     const listStyle = {height:'100%',width:"100%",overflowX:renderTable?"auto":"hidden",maxWidth:"100%"};
+    if(renderTable){
+        listStyle.borderCollapse ="collapse";
+    }
     r2["data-test-id"] = testID+"_ListContent";
     if(isObj(estimatedItemSize)){
         if(isNumber(estimatedItemSize.width)){
@@ -104,12 +112,34 @@ const VirtuosoListComponent = React.forwardRef(({onRender,fixedHeaderContent,row
             },100)
         }
     }
+    const scrolledTopRef = React.useRef(0);
+    const updateTableHeadCss = ()=>{
+        const newScrollTop = scrolledTopRef.current;
+        const head = document.querySelector(`#${headId}`);
+        if(!head || typeof newScrollTop !='number') return;
+        const scrolled = newScrollTop > 50
+        head.style.background = !scrolled ? "transparent":theme.isDark()? theme.Colors.lighten(theme.surfaceBackgroundColor):theme.Colors.darken(theme.surfaceBackgroundColor);
+        head.style.border = !scrolled ? "none" : `1px solid ${theme.colors.divider}`
+    }
     React.useEffect(()=>{
+        const handleScroll = (e)=>{
+            if(!isDOMElement(e?.target)) return;
+            const target = e?.target;
+            const container = document.querySelector(`#${containerId}`);
+            if(!container) return;
+            if(container !== target && !container.contains(target)) return;
+            if(!target.hasAttribute("data-virtuoso-scroller")) return;
+            scrolledTopRef.current = typeof target?.scrollTop =="number"? target.scrollTop : undefined;
+            updateTableHeadCss();
+        }
+        window.addEventListener('scroll', handleScroll,true);
         return ()=>{
             React.setRef(ref,null);
+            window.removeEventListener('scroll', handleScroll,true);
         }
     },[]);
     React.useOnRender((a,b,c)=>{
+        updateTableHeadCss();
         if(onRender && onRender(a,b,c));
     },Math.max(Array.isArray(items) && items.length/10 || 0,500));
     const listP = responsive ? {
@@ -121,7 +151,7 @@ const VirtuosoListComponent = React.forwardRef(({onRender,fixedHeaderContent,row
         },
         defaultItemHeight : typeof estimatedItemSize=='number' && estimatedItemSize || undefined,
     };
-    return <View {...containerProps} {...props} style={[{flex:1},containerProps.style,style,autoSizedStyle,{minWidth:'100%',height:'100%',maxWidth:'100%'}]} onLayout={onLayout} testID={testID}>
+    return <View {...containerProps} {...props} id={containerId} className={classNames("virtuoso-list-container",renderTable&& "virtuoso-list-container-render-table")} style={[{flex:1},containerProps.style,style,autoSizedStyle,{minWidth:'100%',height:'100%',maxWidth:'100%'}]} onLayout={onLayout} testID={testID}>
         <Component
             {...r2}
             {...listP}
@@ -140,10 +170,11 @@ const VirtuosoListComponent = React.forwardRef(({onRender,fixedHeaderContent,row
                 }
             }}
             onScroll={(e) => onScroll && onScroll(normalizeEvent(e))}
-            isScrolling = {(isC,a)=>{
+            isScrolling = {(isC,)=>{
                 if(typeof isScrolling =='function'){
                     return isScrolling(isC);
                 }
+                if(!renderTable) return;
             }}
             components = {{
                 Item : renderTable ? undefined : responsive ? function(props){return <ItemContainer {...props} style={[itemProps.style,props.style]} numColumns={numColumns}/>} : undefined,
@@ -151,6 +182,12 @@ const VirtuosoListComponent = React.forwardRef(({onRender,fixedHeaderContent,row
                     TableRow: TableRowComponent,
                 }:{}),
                 ...defaultObj(components),
+                ...(renderTable ? {
+                    TableHead : React.forwardRef((props,ref)=>{
+                        const restProps = {id:headId,className:classNames(props.className,"virtuoso-list-render-table-thead")};
+                        return <thead ref={ref} {...props} {...restProps}/>
+                    })
+                } : {})
             }}
         />
     </View>

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

@@ -3,10 +3,32 @@
 // license that can be found in the LICENSE file.
 
 import Cell from "./Cell";
-import RowHeaderComponent from "./Header";
+import React from "$react";
+import { View } from "react-native";
+import PropTypes from "prop-types";
+import { StyleSheet } from "react-native";
+import {isMobileNative} from "$cplatform";
+import {classNames} from "$cutils";
+const isNative = isMobileNative();
+const Component = isNative ? View : "tr";
+import theme from "$theme";
+
+export default function RowHeaderComponent({visible,className,children:cChildren,...rest}){
+    const children = React.useMemo(()=>{
+        return cChildren;
+    },[cChildren]);
+    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'}])}>
+        {children}
+    </Component>
+}
+
+RowHeaderComponent.propTypes = {
+    visible : PropTypes.bool,
+}
 
 export {Cell};
 
 RowHeaderComponent.Cell = Cell;
-
-export default RowHeaderComponent;

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

@@ -4,7 +4,7 @@
 import React from "react";
 import {classNames} from "$cutils";
 import { StyleSheet } from "react-native";
-import theme from "$theme";
+import Label from "$ecomponents/Label";
 
 function TableCellContentComponent({children,style,...rest}){
     return (<td  {...rest} className={classNames(rest.className,"table-row-cell")} style={StyleSheet.flatten([style])}>
@@ -13,5 +13,4 @@ function TableCellContentComponent({children,style,...rest}){
 }
 //const TableCellContentComponent = React.memo(TableCellContentComponent);;
 export default TableCellContentComponent;
-TableCellContentComponent.displayName = "TableCellContentComponent";
-const styles = {paddingLeft:"10px",paddingTop:"5px",paddingBottom:"5px",paddingRight:"10px"};
+TableCellContentComponent.displayName = "TableCellContentComponent";

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

@@ -6,7 +6,7 @@ import View from "$ecomponents/View";
 import { StyleSheet } from "react-native";
 
 function TableCellContentComponent({children,style,colSpan,...rest}){
-    return (<View testID={"RN_TableRowCellContentComponent"} {...rest} style={StyleSheet.flatten(style)}>
+    return (<View testID={"RN_TableRowCellContentComponent"} {...rest} style={style}>
         {children}
     </View>);
 }

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

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

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

@@ -1,8 +1,9 @@
 import { forwardRef } from "react";
-import View from "$ecomponents/View"
+import View from "$ecomponents/View";
+import styles from "../styles";
 
 const TableRowWrapperComponent = forwardRef(({children,colSpan,...props},ref)=>{
-    return <View ref={ref} {...props} children={children}/>
+    return <View ref={ref} {...props} style={[styles.row,props.style]} children={children}/>
 });
 
 TableRowWrapperComponent.displayName = "TableRowWrapperComponent";

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

@@ -21,7 +21,7 @@ export default function TableRowComponent({cells,rowKey,rowData,index,...rest}){
         return visibleColsNames.map((columnField,cIndex)=>{
             const columnDef = columns[columnField];
             if(!isObj(columnDef)) return null;
-            return <Cell rowData={rowData} rowKey={rowKey} children={columnDef[columnField]} rowIndex={index} columnDef={columnDef} index={cIndex} key={columnField} columnField={columnField}/>
+            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]}>

package/src/components/Table/hooks.js

@@ -34,11 +34,11 @@ export const usePrepareColumns = ({columns,sortedColumn,forceRender,testID,rende
             }
             const rArgs = {columnDef,width};
             headers[columnField] = <HeaderCell {...rArgs} testID={testID+"_HeaderCell_"+columnField} {...headerCellContainerProps} {...hContainerProps} key={columnField} style={[styles.headerItem,styles.headerItemOrCell,headerCellContainerProps.style,hContainerProps.style,style]}>
-                <Label splitText numberOfLines={2} style={[theme.styles.w100,theme.styles.h100,{maxHeight:70}]} textBold primary>{content}</Label>
+                <Label splitText numberOfLines={1} style={[theme.styles.w100,theme.styles.h100,{maxHeight:70},width&&{width}]} textBold primary>{content}</Label>
             </HeaderCell>;
             if(typeof renderFilterCell =='function'){
                 const filterCell = renderFilterCell(colArgs);
-                filters[columnField] = <HeaderCell {...rArgs} testID={testID+"_Filter_Cell_"+columnField} {...filterCellContainerProps} key={columnField} style={[styles.headerItem,styles.headerItemOrCell,styles.filterCell,filterCellContainerProps.style,style]}>
+                filters[columnField] = <HeaderCell {...rArgs} testID={testID+"_Filter_Cell_"+columnField} {...filterCellContainerProps} key={columnField} style={[styles.headerItem,styles.headerItemOrCell,styles.filterCell,filterCellContainerProps.style,styles.cell,style]}>
                     {React.isValidElement(filterCell)? filterCell : null}
                 </HeaderCell>
             }

package/src/components/Table/index.js

@@ -8,13 +8,13 @@ import theme from "$theme";
 import AbsoluteScrollView from "./AbsoluteScrollView";
 import Row from "./Row";
 import List,{TableRowComponent} from "./List";
-import FiltersOrFooters from "./FiltersOrFooters";
+import Header from "./Header";
 import { usePrepareColumns,TableContext,useTable} from "./hooks";
 import styles from "./styles";
 import {useIsRowSelected} from "$ecomponents/Datagrid/hooks";
 import {getRowStyle} from "$ecomponents/Datagrid/utils";
 import ScrollNative from "./ScrollNative";
-import VituosoTableComonent from "./VirtuosoTable";
+import VirtuosoTableComponent from "./VirtuosoTable";
 export {styles};
 
 const isSCrollingRef = React.createRef();
@@ -62,9 +62,12 @@ const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRe
     const {columns:cols,testID,headers,footers,getItem,withDatagridContext,filters,getRowByIndex,itemsChanged,hasFooters:stateHasFooters,visibleColsNames,keyExtractor,items,data} = useTable();
     headerContainerProps = defaultObj(headerContainerProps);
     footerContainerProps = defaultObj(footerContainerProps);
-    const emptyData = renderListContent === false ?null : typeof renderEmpty =='function' && !Object.size(data,true)? renderEmpty() : null;
+    const hasData = !!Object.size(data,true);
+    const emptyData = !hasData && renderListContent === false ?null : typeof renderEmpty =='function' ? renderEmpty() : null;
     const hasEmptyData = emptyData && React.isValidElement(emptyData);
-    
+    const emptyContent = <View onRender={onComponentRender} testID={testID+"_EmptyData"} style={styles.hasNotData}>
+        {emptyData}
+    </View> 
     const {fFilters,headersContent,footersContent,totalWidths} = React.useMemo(()=>{
         const headersContent = [],footersContent = [],fFilters = [];
         let totalWidths = 0;
@@ -159,15 +162,15 @@ const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRe
         }
     };
     const headerFootersFilters = <>
-        <FiltersOrFooters visible={!!(showTableHeaders &&  headersContent.length)} testID={testID+"_Header"} {...headerContainerProps} style={[styles.header,headerContainerProps.style,footersContent.length]}>
+        <Header visible={!!(showTableHeaders &&  headersContent.length)} testID={testID+"_Header"} {...headerContainerProps} style={[styles.header,headerContainerProps.style,footersContent.length]}>
             {headersContent}
-        </FiltersOrFooters>
-        <FiltersOrFooters visible = {!!fFilters.length} testID={testID+"_Filters"} style={[styles.header,styles.footers,theme.styles.pt0,theme.styles.pb0,theme.styles.ml0,theme.styles.mr0]}>
+        </Header>
+        <Header visible = {!!fFilters.length} {...headerContainerProps} testID={testID+"_Filters"} style={[styles.header,styles.footers,theme.styles.pt0,theme.styles.pb0,theme.styles.ml0,theme.styles.mr0,headerContainerProps.style]}>
             {fFilters}
-        </FiltersOrFooters>
-        <FiltersOrFooters visible={!!(showTableHeaders && footersContent.length)} testID={testID+"_Footer"} {...footerContainerProps} style={[styles.header,styles.footers,footerContainerProps.style,theme.styles.pt0,theme.styles.pb0,theme.styles.ml0,theme.styles.mr0]}>
+        </Header>
+        <Header visible={!!(showTableHeaders && footersContent.length)} testID={testID+"_Footer"} {...footerContainerProps} style={[styles.header,styles.footers,headerContainerProps.style,footerContainerProps.style,theme.styles.pt0,theme.styles.pb0,theme.styles.ml0,theme.styles.mr0]}>
             {footersContent}
-        </FiltersOrFooters>
+        </Header>
     </>
     return <View testID= {testID+"_Container"}  {...containerProps} onLayout={(e)=>{
         layoutRef.current = e.nativeEvent.layout;
@@ -191,9 +194,7 @@ const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRe
                     </View>
                 </ScrollView>
             </RNView>}
-            {hasEmptyData ? <View onRender={onComponentRender} testID={testID+"_Empty"} style={styles.hasNotData}>
-                    {emptyData}
-            </View> : <ScrollNative {...scrollViewProps} scrollEventThrottle = {scrollEventThrottle} horizontal contentContainerStyle={[scrollContentContainerStyle,scrollViewProps.contentContainerStyle,{height:'100%'}]} showsVerticalScrollIndicator={false}  
+            {hasEmptyData && isNative ? emptyContent : <ScrollNative {...scrollViewProps} scrollEventThrottle = {scrollEventThrottle} horizontal contentContainerStyle={[scrollContentContainerStyle,scrollViewProps.contentContainerStyle,{height:'100%'}]} showsVerticalScrollIndicator={false}  
                     onScroll = {getOnScrollCb([headerScrollViewRef,footerScrollViewRef],null,(args)=>{
                         const nativeEvent = args.nativeEvent;
                         if(absoluteScrollViewRef.current && absoluteScrollViewRef.current.checkVisibility){
@@ -281,7 +282,7 @@ const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRe
                                 args.isSelected = withDatagridContext ? isRowSelected(args) : false;
                                 return <TableRowComponent {...props} style={[getRowStyle(args),props.style]}/>
                             },
-                            Table: VituosoTableComonent,
+                            Table: VirtuosoTableComponent,
                         }}
                     />
                     {isNative ? <AbsoluteScrollView

package/src/components/Table/styles.js

@@ -1,4 +1,5 @@
 import { StyleSheet } from "react-native";
+import {isMobileNative} from "$cplatform";
 
 const styles = StyleSheet.create({
     datagrid : {
@@ -11,7 +12,7 @@ const styles = StyleSheet.create({
         width : '100%',
         minHeight : 300,
         paddingBottom : 10,
-        paddingLeft : 10,
+        paddingLeft : 0,
         paddingRight : 0,
         flex : 1,
         position : 'relative',
@@ -83,6 +84,21 @@ const styles = StyleSheet.create({
         width : '100%',
         justifyContent : 'center',
         alignItems : 'center'
+    },
+    cell : isMobileNative()? {
+        paddingLeft:10,
+        paddingRight : 5,
+        paddingBottom : 5,
+        paddingTop : 5,
+    } : {
+        paddingLeft: 10,
+        paddingTop:5,
+        paddingBottom:5,
+        paddingRight: 10
+    },
+    sectionListHeader : {
+        paddingVertical : 10,
+        paddingHorizontal : 10,
     }
 });
 export default styles;

package/src/context/Provider.js

@@ -3,7 +3,7 @@ import appConfig from "$capp/config";
 import {MD3LightTheme,MD3DarkTheme} from "react-native-paper";
 import { useMaterial3Theme } from '@pchmn/expo-material3-theme';
 import {colorsAlias,Colors} from "$theme";
-import {isObj,isNonNullString} from "$cutils";
+import {isObj,isNonNullString,defaultStr} from "$cutils";
 import eMainScreens from "$escreens/mainScreens";
 import {ExpoUIContext} from "./hooks";
 import Login from "$eauth/Login";
@@ -78,8 +78,22 @@ const Provider = ({children,getTableData,navigation,components,convertFiltersToS
         }
         theme.fonts = newTheme.fonts;
         const r = typeof extendAppTheme == 'function'? extendAppTheme(theme)  : theme;
+        const _theme = (isObj(r) ? r : theme);
+        const customCSS = _theme.customCSS;
         return {
-          ...(isObj(r) ? r : theme),
+          ..._theme,
+          get customCSS(){
+             const prevCSS = defaultStr(typeof customCSS ==='function'? customCSS(theme) : customCSS);
+             return `
+                .virtuoso-table-component,
+                .virtuoso-table-component th,
+                .virtuoso-table-component tr,
+                .virtuoso-table-component td{
+                  border-collapse : collapse!important;
+                }
+                ${prevCSS}
+             `;
+          },
           get textFieldMode (){
             /***** possibilité de charger le mode d'affichage par défaut des champs textuels dans le theme de l'application */
             if(typeof theme.textFieldMode =='string' && theme.textFieldMode && modes[theme.textFieldMode]){

package/src/components/Table/FiltersOrFooters.js

@@ -1,26 +0,0 @@
-// Copyright 2023 @fto-consult/Boris Fouomene. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-import React from "$react";
-import { View } from "react-native";
-import PropTypes from "prop-types";
-import { StyleSheet } from "react-native";
-import {isMobileNative} from "$cplatform";
-import {classNames} from "$cutils";
-const isNative = isMobileNative();
-const Component = isNative ? View : "tr";
-
-export default function TableFiltersComponent({visible,className,children:cChildren,...rest}){
-    const children = React.useMemo(()=>{
-        return cChildren;
-    },[cChildren]);
-    const rP = isNative ? rest : {className:classNames(className,"table-footer-or-header-row")}
-    if(!isNative && !visible) return null;
-    return <Component {...rP} style={StyleSheet.flatten([rest.style,!visible && {height:0,opacity:0,display:'none'}])}>
-        {children}
-    </Component>
-}
-
-TableFiltersComponent.propTypes = {
-    visible : PropTypes.bool,
-}

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

@@ -1,21 +0,0 @@
-// Copyright 2023 @fto-consult/Boris Fouomene. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-import React from "$react";
-import { View } from "react-native";
-import PropTypes from "prop-types";
-export default function TableHeaderComponent({cells,columns,...rest}){
-    const children = React.useMemo(()=>{
-        if(Array.isArray(cells)){
-            return null;
-        }
-        return cells;
-    },[cells,columns]);
-    return <View {...rest}>
-        {children}
-    </View>
-}
-
-TableHeaderComponent.propTypes = {
-    columns : PropTypes.arrayOf(PropTypes.bool)
-}

package/src/components/Table/Header/Component.native.js

@@ -1,21 +0,0 @@
-// Copyright 2023 @fto-consult/Boris Fouomene. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-import React from "$react";
-import { View } from "react-native";
-import PropTypes from "prop-types";
-export default function TableHeaderComponent({cells,columns,...rest}){
-    const children = React.useMemo(()=>{
-        if(Array.isArray(cells)){
-            return null;
-        }
-        return cells;
-    },[cells,columns]);
-    return <View {...rest}>
-        {children}
-    </View>
-}
-
-TableHeaderComponent.propTypes = {
-    columns : PropTypes.arrayOf(PropTypes.bool)
-}