@fto-consult/expo-ui 6.25.0 → 6.25.2

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.0",
+  "version": "6.25.2",
   "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()? 200 : 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/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,22 @@
+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 isSelectableColumnName = columnDef.isSelectableColumnName;
+    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

@@ -3,10 +3,47 @@
 // 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,defaultObj} from "$cutils";
+const isNative = isMobileNative();
+const Component = isNative ? View : "tr";
+import { useTable } from "../hooks";
+import styles from "../styles";
+import CellHeader from "./CellHeader";
+
+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(()=>{
+        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")}
+    return <Component {...rP} {...containerProps} style={StyleSheet.flatten([styles.header,style,rest.style,containerProps.style,!visible && hStyle.hidden])}>
+        {children}
+    </Component>
+}
+
+RowHeaderComponent.propTypes = {
+    visible : PropTypes.bool,
+}
 
 export {Cell};
 
 RowHeaderComponent.Cell = Cell;
+RowHeaderComponent.CellHeader = CellHeader;
+
+export {CellHeader};
 
-export default RowHeaderComponent;
+const hStyle = StyleSheet.create({
+    hidden : {height:0,opacity:0,display:'none'}
+});

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

@@ -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={StyleSheet.flatten(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

@@ -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,columnField,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,columnField,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}
+    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,8 +1,17 @@
-import { forwardRef } from "react";
-import View from "$ecomponents/View"
+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} 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]}>
@@ -21,10 +22,10 @@ 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]}>
+    },[rowKey,index,visibleColsNamesStr]);
+    return <RowWrapper {...rest} rowKey={rowKey} rowData={rowData} rowIndex={index} style={[styles.row]}>
         {content}
     </RowWrapper>;
 }

package/src/components/Table/hooks.js

@@ -1,16 +1,15 @@
-import React,{useMemo,useContext,createContext} from "$react";
+import React,{useMemo} from "$react";
 import {defaultStr,isObj} from "$cutils";
 import {DEFAULT_COLUMN_WIDTH} from "./utils";
 import Label from "$ecomponents/Label";
 import HeaderCell from "./Header/Cell";
-import { StyleSheet } from "react-native";
+import MainHeaderCell from "./Header/CellHeader";
 import styles from "./styles";
-import theme from "$theme";
 
-export const usePrepareColumns = ({columns,sortedColumn,forceRender,testID,renderFooterCell,renderHeaderCell,renderFilterCell,columnsWidths,headerCellContainerProps,colsWidths,columnProps,footers,footerCellContainerProps,filterCellContainerProps})=>{
+export const usePrepareColumns = ({columns,forceRender,testID,renderFooterCell,renderHeaderCell,renderFilterCell,columnsWidths,headerCellContainerProps,colsWidths,columnProps,footers,footerCellContainerProps,filterCellContainerProps})=>{
    return useMemo(()=>{
         testID = defaultStr(testID,"RN_TableColumns")
-        const cols = {},headers = {},footers = {},filters = {},visibleColsNames = [],columnsVisibilities=[],columnsNames = [];
+        const cols = {},headers = {},footers = {},filters = {},visibleColsNames = [],columnsVisibilities=[],columnsNames = [],colsWidths={};
         let hasFooters = false;
         columnProps = defaultObj(columnProps);
         let columnIndex = 0;
@@ -18,27 +17,22 @@ export const usePrepareColumns = ({columns,sortedColumn,forceRender,testID,rende
         headerCellContainerProps = defaultObj(headerCellContainerProps);
         footerCellContainerProps = defaultObj(footerCellContainerProps);
         filterCellContainerProps = defaultObj(filterCellContainerProps);
+        let totalWidths = 0;
         Object.map(columns,(columnDef,field)=>{
             if(!isObj(columnDef)) return;
             const columnField = defaultStr(columnDef.field,field);
             let {visible,width,type,style} = columnDef;
             visible = typeof visible =='boolean'? visible : true;
             type = defaultStr(type,"text").toLowerCase().trim();
-            width = defaultDecimal(widths[columnField],width,DEFAULT_COLUMN_WIDTH);
+            width = colsWidths[columnField] = defaultDecimal(widths[columnField],width,DEFAULT_COLUMN_WIDTH);
             const colArgs = {width,type,columnDef,containerProps:{},columnField,index:columnIndex,columnIndex};
-            const content = typeof renderHeaderCell =='function'? renderHeaderCell(colArgs) : defaultVal(columnDef.text,columnDef.label,columnField);
             const hContainerProps = defaultObj(colArgs.containerProps);
-            if(!React.isValidElement(content,true)){
-                console.error(content," is not valid element of header ",columnDef," it could not be render on table");
-                return null;
-            }
+            totalWidths+=width;
             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>
-            </HeaderCell>;
+            headers[columnField] = <MainHeaderCell colArgs={colArgs} {...rArgs} columnField={columnField} width={width} testID={testID+"_HeaderCell_"+columnField} {...headerCellContainerProps} {...hContainerProps} key={columnField} style={[styles.headerItem,styles.headerItemOrCell,headerCellContainerProps.style,hContainerProps.style,style]}/>
             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} width={width} 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>
             }
@@ -56,7 +50,7 @@ export const usePrepareColumns = ({columns,sortedColumn,forceRender,testID,rende
                 if(!hasFooters && cellFooter){
                     hasFooters = true;
                 }
-                footers[columnField] = <HeaderCell {...rArgs} testID={testID+"_Footer_Cell_"+columnField}  key={columnField} style={[styles.headerItem,styles.headerItemOrCell,footerCellContainerProps.style,style]}>
+                footers[columnField] = <HeaderCell {...rArgs} width={width} testID={testID+"_Footer_Cell_"+columnField}  key={columnField} style={[styles.headerItem,styles.headerItemOrCell,footerCellContainerProps.style,style]}>
                     <Label primary children={cellFooter}/>
                 </HeaderCell>
           }
@@ -75,10 +69,11 @@ export const usePrepareColumns = ({columns,sortedColumn,forceRender,testID,rende
           };
           columnIndex++;
         });
-        return {columns:cols,columnsNames,headers,columnsVisibilities,visibleColsNames,hasFooters,footers,filters};
-      },[columns,sortedColumn,footers,forceRender]);
+        return {columns:cols,columnsNames,headers,colsWidths,columnsVisibilities,totalWidths,totalColsWidths:totalWidths,visibleColsNamesStr:JSON.stringify(visibleColsNames),visibleColsNames,hasFooters,footers,filters};
+      },[columns,footers,forceRender]);
 }
 
-export const TableContext = createContext(null);
 
-export const useTable = ()=> useContext(TableContext);
+export {default as useTable} from "./useTable";
+
+export * from "./useTable";

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();
@@ -51,7 +51,7 @@ const getOnScrollCb = (refs,pos,cb2)=>{
     return isMobileNative()? cb : debounce(cb,200);
 }
 
-const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRender,height,progressBar,renderListContent,children,renderEmpty,renderItem,isRowSelected,headerScrollViewProps,footerScrollViewProps,scrollViewProps,showFooters,renderFooterCell,footerCellContainerProps,filterCellContainerProps,headerContainerProps,headerCellContainerProps,headerProps,rowProps:customRowProps,cellContainerProps,hasFooters,renderHeaderCell,renderFilterCell,columnProps,getRowKey,columnsWidths,colsWidths,footerContainerProps,showHeaders,showFilters,columns,...props},tableRef)=>{
+const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRender,height,progressBar,renderListContent,children,renderEmpty,renderItem,isRowSelected,headerScrollViewProps,footerScrollViewProps,scrollViewProps,renderFooterCell,footerCellContainerProps,filterCellContainerProps,headerCellContainerProps,headerProps,rowProps:customRowProps,cellContainerProps,hasFooters,renderHeaderCell,renderFilterCell,columnProps,getRowKey,columnsWidths,colsWidths,columns,...props},tableRef)=>{
     containerProps = defaultObj(containerProps);
     cellContainerProps = defaultObj(cellContainerProps);
     scrollViewProps = defaultObj(scrollViewProps);
@@ -59,39 +59,23 @@ const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRe
     footerScrollViewProps = defaultObj(footerScrollViewProps);
     const listRef = React.useRef(null),scrollViewRef = React.useRef(null),headerScrollViewRef = React.useRef(null);
     const layoutRef = React.useRef({});
-    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 {testID,withDatagridContext,filters,getRowByIndex,itemsChanged,hasFooters:stateHasFooters,bordered,totalWidths,keyExtractor,items,data} = useTable();
+    const hasData = !!Object.size(data,true);
+    const emptyData = !hasData && renderListContent === false ?null : typeof renderEmpty =='function' ? renderEmpty() : null;
     const hasEmptyData = emptyData && React.isValidElement(emptyData);
-    
-    const {fFilters,headersContent,footersContent,totalWidths} = React.useMemo(()=>{
-        const headersContent = [],footersContent = [],fFilters = [];
-        let totalWidths = 0;
-        visibleColsNames.map((i,index)=>{
-            headersContent.push(headers[i]);
-            totalWidths+=cols[i].width;
-            if(showFooters && stateHasFooters){
-                footersContent.push(footers[i]);
-            }
-            if(showFilters && filters[i]){
-                fFilters.push(filters[i]);
-            }
-        });
-        
-        return {headersContent,totalWidths,footersContent,fFilters};
-    },[visibleColsNames,showFilters,showFooters,layoutRef.current]);
-
-    
+    const emptyContent = <View onRender={onComponentRender} testID={testID+"_EmptyData"} style={styles.hasNotData}>
+        {emptyData}
+    </View> 
     const scrollContentContainerStyle = {flex:1,width:listWidth,minWidth:totalWidths,height:'100%'};
     const scrollEventThrottle = isMobileNative()?200:50;
     const scrollViewFlexGrow = {flexGrow:0};
-    const maxScrollheight = footersContent.length && fFilters.length ? 170  : footersContent.length ?120 :  fFilters.length ? 140 : 80;
+    const maxScrollheight = 170;//footersContent.length && fFilters.length ? 170  : footersContent.length ?120 :  fFilters.length ? 140 : 80;
     const allScrollViewProps = {
         scrollEventThrottle,
         horizontal : true,
         ...scrollViewProps,
-        style : [{maxHeight:maxScrollheight},scrollViewProps.style],
+        style : [{maxHeight:maxScrollheight},
+        scrollViewProps.style],
         contentContainerStyle : [styles.scrollView,scrollViewProps.contentContainerStyle,scrollViewFlexGrow,scrollContentContainerStyle]
     }
     const listWidth = '100%';
@@ -125,7 +109,6 @@ const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRe
         get scrollViewContext(){ return scrollViewRef.current},
         get headerScrollViewContext(){return headerScrollViewRef.current},
     }
-    const showTableHeaders = showHeaders !== false || showFilters ;
     const absoluteScrollViewRefCanScroll = React.useRef(true);
     React.setRef(tableRef,context);
     const cStyle = {width:listWidth}
@@ -159,15 +142,9 @@ 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]}>
-            {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]}>
-            {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]}>
-            {footersContent}
-        </FiltersOrFooters>
+        <Header isHeader={true} testID={testID+"_Header"}/>
+        <Header isFilter={true} testID={testID+"_Filters"} style={[styles.header,styles.footers,theme.styles.pt0,theme.styles.pb0,theme.styles.ml0,theme.styles.mr0]}/>
+        <Header isFooter testID={testID+"_Footer"}  style={[styles.header,styles.footers,theme.styles.pt0,theme.styles.pb0,theme.styles.ml0,theme.styles.mr0]}/>
     </>
     return <View testID= {testID+"_Container"}  {...containerProps} onLayout={(e)=>{
         layoutRef.current = e.nativeEvent.layout;
@@ -191,9 +168,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){
@@ -277,11 +252,11 @@ const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRe
                                 const index = props['data-index'];
                                 const item = getRowByIndex(index) || props?.item || null;
                                 if(!item) return null;
-                                const args = {rowData:item,rowIndex:index,bordered:true,isTable:true};
+                                const args = {rowData:item,rowIndex:index,bordered,isTable:true};
                                 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',
@@ -31,6 +32,13 @@ const styles = StyleSheet.create({
         paddingVertical : 7,
         alignItems : 'center',
         width : '100%',
+        minHeight : 40,
+    },
+    filters : {
+       height : 50,
+    },
+    footers : {
+        minHeight : 40,
     },
     footerContainer : {
         width : '100%',
@@ -70,7 +78,7 @@ const styles = StyleSheet.create({
     row : {
         flexDirection : "row",
         justifyContent : "flex-start",
-        alignItems : 'flex-start',
+        alignItems : 'center',
         width : '100%',
     },
     rowNoPadding : {
@@ -83,6 +91,21 @@ const styles = StyleSheet.create({
         width : '100%',
         justifyContent : 'center',
         alignItems : 'center'
+    },
+    cell : isMobileNative()? {
+        paddingLeft:10,
+        paddingRight : 5,
+        paddingBottom : 2,
+        paddingTop : 2,
+    } : {
+        paddingLeft: 10,
+        paddingTop:5,
+        paddingBottom:5,
+        paddingRight: 10
+    },
+    sectionListHeader : {
+        paddingVertical : 10,
+        paddingHorizontal : 10,
     }
 });
 export default styles;

package/src/components/Table/useTable.js

@@ -0,0 +1,7 @@
+import {createContext,useContext} from "react";
+
+export const TableContext = createContext(null);
+
+const useTable = ()=> useContext(TableContext);
+
+export default useTable;

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/screens/Help/openLibraries.js

@@ -1 +1 @@
-module.exports = {"@fto-consult/expo-ui":{"name":"@fto-consult/expo-ui","version":"6.24.2","repository":{"type":"git","url":"git+https://github.com/borispipo/expo-ui.git"},"homepage":"https://github.com/borispipo/expo-ui#readme"}};
+module.exports = {"@FTO-CONSULT/EXPO-UI":{"name":"@FTO-CONSULT/EXPO-UI","version":"6.25.2","homepage":"https://github.com/borispipo/expo-ui#readme"}};

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)
-}