@fto-consult/expo-ui 6.24.2 → 6.25.0

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

@@ -14,6 +14,7 @@ import RenderType from "../RenderType";
 import Footer from "../Footer/Footer";
 import theme from "$theme";
 import Table from "$ecomponents/Table";
+import DatagridProvider from "../hooks/Provider";
 
 
 const DatagridFactory = (Factory)=>{
@@ -276,57 +277,58 @@ const DatagridFactory = (Factory)=>{
                     </View>
                 </ScrollView>
             </View> : null;
-            return <View style={[styles.container,{flex:1}]} testID={testID+"_TableContainer"} pointerEvents={pointerEvents}>
-                <View ref={this.layoutRef} testID={testID+"_LayoutContainer"}>
-                    {this.props.showActions !== false ? <DatagridActions 
-                        pointerEvents = {pointerEvents}
-                        title = {this.renderDataSourceSelector()}
-                        context = {this}
-                        selectedRows = {Object.assign({},this.selectedRows)}
-                        selectedRowsActions = {this.renderSelectedRowsActions.bind(this)}
-                        actions = {actions}
-                    /> : null}
-                    {rPagination}
-                    {progressBar}  
-                </View>
-                {canRenderChart ?
-                    <View testID={testID+"_ChartContainer"} {...chartContainerProps} style={[theme.styles.w100,chartContainerProps.style]}>
-                        {this.renderChart()}
-                    </View> : 
-                <Table
-                    ref = {this.listRef}
-                    {...rest}
-                    sortedColumn = {sortedColumn}
-                    onRender = {this.onRender.bind(this)}
-                    getItemType = {this.getFlashListItemType.bind(this)}
-                    renderItem = {this.renderFlashListItem.bind(this)}
-                    hasFooters = {hasFootersFields && !canRenderChart ? true : false}
-                    showFilters = {showFilters}
-                    showFooters = {showFooters && !canRenderChart ? true : false}
-                    showHeaders = { canRenderChart ? !!showFilters : true}
-                    headerContainerProps = {{}}
-                    headerCellContainerProps = {{
-                        style : showFilters?{justifyContent:'flex-start'}:null
-                    }}
-                    isRowSelected = {this.isRowSelected.bind(this)}
-                    columns = {this.state.columns}
-                    //renderRow={this.renderRow.bind(this)}
-                    getRowKey = {this.getRowKey.bind(this)}
-                    columnsWidths = {widths}
-                    renderCell={this.renderRowCell.bind(this)}
-                    rowContainerProps = {(props)=>{
-                        return {
-                            style : getRowStyle(props,{selected:this.isRowSelected.bind(this)}),
-                        }
-                    }}
-                    data = {this.state.data}
-                    footers = {this.getFooterValues()}
-                    renderHeaderCell={this.renderHeaderCell.bind(this)}
-                    renderFilterCell={this.renderFilterCell.bind(this)}
-                    renderFooterCell={this.renderFooterCell.bind(this)}
-                    renderEmpty = {this.renderEmpty.bind(this)}
-                />}
-            </View>
+            return <DatagridProvider context={this}>
+                     <View style={[styles.container,{flex:1}]} testID={testID+"_TableContainer"} pointerEvents={pointerEvents}>
+                        <View ref={this.layoutRef} testID={testID+"_LayoutContainer"}>
+                            {this.props.showActions !== false ? <DatagridActions 
+                                pointerEvents = {pointerEvents}
+                                title = {this.renderDataSourceSelector()}
+                                actions = {actions}
+                            /> : null}
+                            {rPagination}
+                            {progressBar}  
+                        </View>
+                        {canRenderChart ?
+                            <View testID={testID+"_ChartContainer"} {...chartContainerProps} style={[theme.styles.w100,chartContainerProps.style]}>
+                                {this.renderChart()}
+                            </View> : 
+                        <Table
+                            ref = {this.listRef}
+                            {...rest}
+                            withDatagridContext
+                            sortedColumn = {sortedColumn}
+                            onRender = {this.onRender.bind(this)}
+                            getItemType = {this.getFlashListItemType.bind(this)}
+                            renderItem = {this.renderFlashListItem.bind(this)}
+                            renderSectionHeader = {this.renderFlashListItem.bind(this)}
+                            hasFooters = {hasFootersFields && !canRenderChart ? true : false}
+                            showFilters = {showFilters}
+                            showFooters = {showFooters && !canRenderChart ? true : false}
+                            showHeaders = { canRenderChart ? !!showFilters : true}
+                            headerCellContainerProps = {{
+                                style : showFilters?{justifyContent:'flex-start'}:null
+                            }}
+                            isRowSelected = {this.isRowSelected.bind(this)}
+                            columns = {this.state.columns}
+                            //renderRow={this.renderRow.bind(this)}
+                            getRowKey = {this.getRowKey.bind(this)}
+                            columnsWidths = {widths}
+                            renderCell={this.renderRowCell.bind(this)}
+                            rowContainerProps = {(props)=>{
+                                return {
+                                    style : getRowStyle(props,{selected:this.isRowSelected.bind(this)}),
+                                }
+                            }}
+                            data = {this.state.data}
+                            footers = {this.getFooterValues()}
+                            renderHeaderCell={this.renderHeaderCell.bind(this)}
+                            renderFilterCell={this.renderFilterCell.bind(this)}
+                            renderFooterCell={this.renderFooterCell.bind(this)}
+                            renderEmpty = {this.renderEmpty.bind(this)}
+                        />}
+                    </View>
+                    
+            </DatagridProvider>
         }
     }
     clx.propTypes = {

package/src/components/Datagrid/Test/index.js

@@ -2,19 +2,26 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-import fields from "./fields";
-import Table from "../Table";
+import Table from "../IndexComponent";
 import React from "$react";
 import { faker } from '@faker-js/faker';
 export default function TestDatagridComponent({count,...props}){
     const data = React.useMemo(()=>{
-        count = typeof count =='number' && count > 10 ? count : 5000;
+        count = typeof count =='number' && count > 10 ? count : 100;
         return faker.helpers.multiple(createRandomUser, {
             count,
         });
     },[count])
     return <Table 
         title = "Utilisateurs"
+        accordion = {({rowData})=>{
+            return {
+                content : `${rowData.email}`,
+                title : rowData?.username,
+                //avatar : rowData.avatar,
+                right : rowData.birthdate,
+            }
+        }}
     columns={{
         userId : {
             primaryKey : true,

package/src/components/Datagrid/events/evx.js

@@ -0,0 +1,7 @@
+export const ON_ROW_TOGGLE = "ON_ROW_TOGGLE";//l'orsqu'on toggle on ligne
+
+export const ON_ALL_ROWS_TOGGLE = "ON_ALL_ROWS_TOGGLE";
+
+export const ON_FETCH_DATA = "ON_FETCH_DATA";
+
+export const ON_UPDATE = "ON_UPDATE";

package/src/components/Datagrid/events/index.js

@@ -0,0 +1,11 @@
+import {isNonNullString} from "$cutils";
+import * as events from "./evx";
+
+export const sanitize = (event)=>{
+    if(!isNonNullString(event)) return "";
+    return event.trim().toSnackCase();
+}
+export * from "./evx";
+
+export default events;
+

package/src/components/Datagrid/hooks/Provider.js

@@ -0,0 +1,6 @@
+
+import { DatagridContext } from "./context";
+import React from "$react";
+export default function DatagridComponentProvider({children,context,...props}){
+    return <DatagridContext.Provider value={{...props,context}} children={children}/>
+}

package/src/components/Datagrid/hooks/context.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+const DatagridContext = createContext(null);
+
+export {DatagridContext};

package/src/components/Datagrid/hooks/index.js

@@ -0,0 +1,104 @@
+import { useContext,useEffect,useMemo,useReducer } from "react";
+import { DatagridContext } from "./context";
+import {isObj,isNonNullString} from "$cutils";
+import events from "../events";
+export const useDatagrid = x=> {
+    const t = useContext(DatagridContext)
+    if(!t || !t?.context || !t?.context?.state || !t?.context?.state?.data){
+        throw "Le composant Datagrid actions doit être enfant d'un contexe de datagrid valide";
+    }
+    return t;
+};
+export const useDatagridContext = ()=>{
+    return useDatagrid()?.context;
+}
+export const useData = ()=>{
+    const {context} = useDatagrid();
+    return Array.isArray(context.state.data) && context.state.data || [];
+}
+export const useSelectedRows = ()=>{
+    const {context} = useDatagrid();
+}
+export const useGetRowKey = ({rowData,rowIndex})=>{
+    const {context} = useDatagrid();
+    return context.getRowKey(rowData,rowIndex);
+};
+/****
+    @param {string|Array} event, l'évènement ou les évènements en question, qui est trigger par le contexte de datagrid
+    @param {function|string} getter, la fonction getter, est la fonction qui prenant en paramètre le contexte, retourne la valeur liée à l'évènement event
+    @param {function} onEvent, la fonction appelée lorsque l'évènement est exécutée
+*/
+export const useOnEvent = (event,getter,onEvent)=>{
+    const {context} = useDatagrid();
+    if((!isNonNullString(event) && !Array.isArray(event)) || !event.length){
+        throw `méthode invalide ${method} supportée par le contexte`;
+    }
+    if(typeof getter !=='function') {
+        throw "méthode getter invalide pour la récupéreration de l'état lié au contexte du datagrid";
+    }
+    const evBack = event;
+    event = Array.isArray(event) ? event : isNonNullString(event)? event.trim().split(",") : [];
+    const [state, dispatch] = useReducer(function(state2,action){
+        if(event.filter(ev=>action.type.toLowerCase() === ev?.toLowerCase().trim()).length){
+            return getter(context,action.type);
+        }
+        return null;
+    }, getter(context,evBack));
+    const callbacks = useMemo((...args)=>{
+        const callbacks = {};
+        event.map((ev)=>{
+            callbacks[ev] = (...args)=>{
+                if(typeof onEvent ==='function' && onEvent(ev,...args) === false) return false;
+                return dispatch({type:ev});
+            }
+        });
+        return callbacks;
+    },[event.join(",")]);
+    useEffect(()=>{
+        Object.map(callbacks,(cb,event)=>{
+            context.on(event,cb);
+        });
+        return ()=>{
+            Object.map(callbacks,(cb,ev)=>{
+                context.off(ev,cb);
+            });
+        }
+    },[]);
+    return state;
+}
+
+
+/****
+    ecoute l'évènement event sur le contexte de datagrid
+    @param {string} event, l'évènement à écouter
+    @param {function} onEvent, la fonction appelée lorsque l'évènement est écoutée
+*/
+export const useBindEvent = (event,onEvent)=>{
+    const {context} = useDatagrid();
+    if(!isNonNullString(event)){
+        throw `impossible d'écouter un évènemet invalide pour le contexte de datagrid`;
+    }
+    useEffect(()=>{
+        context.on(event,onEvent);
+        return ()=>{
+            context.off(event,onEvent);
+        }
+    },[]);
+    return onEvent;
+}
+export const useIsRowSelected = (...args)=>{
+    return useOnEvent([events.ON_ROW_TOGGLE,events.ON_ALL_ROWS_TOGGLE],(context)=>{
+        return context.isRowSelected(...args);
+    });
+};
+
+export const useGetSelectedRowsCount = ()=>{
+    return useOnEvent([events.ON_ROW_TOGGLE,events.ON_ALL_ROWS_TOGGLE],(context)=>{
+        return context.getSelectedRowsCount();
+    });
+}
+export const useIsAllRowsSelected = ()=>{
+    return useOnEvent([events.ON_ROW_TOGGLE,events.ON_ALL_ROWS_TOGGLE],(context)=>{
+        return context.isAllRowsSelected();
+    });
+};

package/src/components/Datagrid/utils.js

@@ -1,4 +1,4 @@
-import theme,{LINE_HEIGHT} from "$theme";
+import theme,{Colors,LINE_HEIGHT} from "$theme";
 import { StyleSheet } from "react-native";
 import {get as getSession} from "./Common/session";
 import appConfig from "$capp/config";
@@ -98,7 +98,9 @@ export const ROW_EVEN_STYLE = {
 }
 
 export const ROW_SELECTED_STYLE = {
-    backgroundColor : ROW_SELECTED_BACKGROUND_COLOR
+    get backgroundColor(){
+        return theme.isDark()? Colors.lighten(theme.colors.surface) : Colors.darken(theme.colors.surface); 
+    }
 }
 
 export const ROW_BORDER_STYLE = {
@@ -119,7 +121,7 @@ export const DATE_COLUMN_WIDTH = 200;
 
 export {LINE_HEIGHT}
 
-export const styles = StyleSheet.create({
+export const styles = ({
     approved : ROW_APPROVED_STYLE,
     archived : ROW_ARCHIVED_STYLE,
     selected : ROW_SELECTED_STYLE,
@@ -167,7 +169,7 @@ export const getRowStyle = ({row,bordered,numColumns,rowData,isAccordion,isTable
     if(rowIndex !== undefined){
         style.push(rowIndex%2===0?styles.even : theme.isDark()?styles.oddDark : styles.odd)
     }
-    if(false && selected){
+    if(selected){
         style.push(styles.selected,{borderBottomWidth:1,borderBottomColor:theme.colors.primary})
     }
     if(paid || row.paid){

package/src/components/Dialog/Dialog.js

@@ -20,7 +20,7 @@ import {ACTION_ICON_SIZE} from "$ecomponents/AppBar";
 import DialogFooter from "./DialogFooter";
 import { Dimensions } from "react-native";
 import Surface from "$ecomponents/Surface";
-import KeyboardAvoidingView from "$ecomponents/KeyboardAvoidingView";
+import DialogContent from "./DialogContent";
 
 export const FOOTER_HEIGHT = 50;
 export const HEADER_HEIGHT = 50;
@@ -198,14 +198,14 @@ const DialogComponent = React.forwardRef((props,ref)=>{
                 testID = {testID}
                 contentContainerProps = {contentContainerProps}
             >
-                <Surface 
-                    testID = {testID+"_Overlay"}
-                    ref={overlayRef}
-                    {...overlayProps} 
-                    style={[styles.overlay,isAlert && styles.overlayAlert,{backgroundColor},overlayProps.style,fullScreenStyle]}
-                >   
-                    <KeyboardAvoidingView>
-                        {(!isAlert && (actions || title || subtitle)) ? <AppBarDialog
+                <DialogContent isFullScreen={isFullScreenDialog} isPreloader={isPreloader}>
+                    <Surface 
+                        testID = {testID+"_Overlay"}
+                        ref={overlayRef}
+                        {...overlayProps} 
+                        style={[styles.overlay,isAlert && styles.overlayAlert,{backgroundColor},overlayProps.style,fullScreenStyle]}
+                    >   
+                     {(!isAlert && (actions || title || subtitle)) ? <AppBarDialog
                             actionsProps = {actionsProps}
                             testID = {testID+"_AppBar"}
                             {...appBarProps}
@@ -269,14 +269,15 @@ const DialogComponent = React.forwardRef((props,ref)=>{
                             isFullScreen = {isFullScreenDialog}
                             fullScreen = {customFullScreen}
                             children = {footer}
-                         /> : null}
-                </KeyboardAvoidingView>
-             </Surface>
+                         /> : null}    
+                    </Surface>
+                </DialogContent>
             </ModalComponent>
         </Portal>
 });
 export default DialogComponent;
 
+
 DialogComponent.propTypes= {
     ...Modal.propTypes,
     isAlert : PropTypes.bool,//si c'est le rendu alert, pour le rendu de l'alerte

package/src/components/Dialog/DialogContent.js

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

package/src/components/KeyboardAvoidingView/index.js

@@ -1,8 +1,12 @@
 import View from "$ecomponents/View";
 import React from "$react";
-const KeyboardAvoidingViewComponent = React.forwardRef(({children,...props},ref)=>{
-  return <View {...props}>{children}</View>
+import {isNonNullString} from "$cutils";
+import theme from "$theme";
+const KeyboardAvoidingViewComponent = React.forwardRef(({children,style,testID,...props},ref)=>{
+  return <View  {...props} style={[theme.styles.flex1,style]} children={children} testID={isNonNullString(testID) ? `${testID.trim()}_KeyboardAvoidingView` : "RN_KeyboardAvoidingView"}/>
 });
 
 KeyboardAvoidingViewComponent.displayName = "KeyboardAvoidingViewComponent";
-KeyboardAvoidingViewComponent.propTypes = Object.assign({},View.propTypes);
+KeyboardAvoidingViewComponent.propTypes = Object.assign({},View.propTypes);
+
+export default KeyboardAvoidingViewComponent;

package/src/components/List/Common.js

@@ -3,7 +3,7 @@ import React from "$react";
 import { prepareItems as customPrepareItems,getBToTopRef } from "./utils";
 import {grid,StylePropTypes} from "$theme";
 import PropTypes from "prop-types";
-import {defaultObj,extendObj,isObj,defaultDecimal,defaultArray,defaultFunc} from "$cutils";
+import {defaultObj,defaultStr,extendObj,isObj,defaultDecimal,defaultArray,defaultFunc} from "$cutils";
 import {isMobileMedia} from "$cplatform/dimensions";
 import BackToTop from "$ecomponents/BackToTop";
 import {FlatList,StyleSheet,View} from "react-native";
@@ -13,7 +13,7 @@ import { useList } from "./hooks";
 
 const CommonListComponent = React.forwardRef((props,ref)=>{
     const context = useList(props);
-    let {responsive,defaultItemHeight,itemHeight,windowWidth,onRender,componentProps,columnWrapperStyle,onViewableItemsChanged,withFlatListItem,Component,withBackToTop,backToTopRef:customBackToTopRef,withBackToTopButton,onScroll,onScrollEnd,onMount,onUnmount,renderScrollViewWrapper,prepareItems,getItemKey,getKey,keyExtractor,items,filter,renderItem,numColumns,containerProps,bindResizeEvents,...rest} = props;
+    let {responsive,testID,defaultItemHeight,itemHeight,windowWidth,onRender,componentProps,columnWrapperStyle,onViewableItemsChanged,withFlatListItem,Component,withBackToTop,backToTopRef:customBackToTopRef,withBackToTopButton,onScroll,onScrollEnd,onMount,onUnmount,renderScrollViewWrapper,prepareItems,getItemKey,getKey,keyExtractor,items,filter,renderItem,numColumns,containerProps,bindResizeEvents,...rest} = props;
     withBackToTopButton = withBackToTop === true || withBackToTopButton == true || isMobileMedia()? true : false;
     rest = defaultObj(rest);
     containerProps = defaultObj(containerProps);
@@ -30,6 +30,7 @@ const CommonListComponent = React.forwardRef((props,ref)=>{
     const hasCustomBackToTop = typeof customBackToTopRef == 'function'? true : false;
     const backToTopRef = React.useRef(null);
     const isFlatList = Component === FlatList;
+    defaultStr(props.testID,"RN_CommonListComponent");
     extendObj(context,{
         getKey : typeof keyExtractor =='function'? keyExtractor : typeof getItemKey =='function'? getItemKey : typeof getKey =='function'? getKey : undefined,
         addItemsRefs : function(ref, itemRef){
@@ -150,12 +151,13 @@ const CommonListComponent = React.forwardRef((props,ref)=>{
     const restP = numColumns > 1 && isFlatList ? {
         columnWrapperStyle : [styles.columnWrapperStyle,props.columnWrapperStyle]
     } : {};
-    return <View {...containerProps} style={[styles.container,containerProps.style]}>
+    return <View testID={testID+"_CommonListContainer"} {...containerProps} style={[styles.container,containerProps.style]}>
         <Component
             onEndReachedThreshold={0}
             scrollEventThrottle={16}
             {...rest}
             {...restP}
+            testID = {testID}
             ref = {listRef}
             onScroll={context.onScroll}
             data = {context.items}

package/src/components/List/FlashList.js

@@ -7,19 +7,19 @@ import View from "$ecomponents/View";
 const FlashListComponent = React.forwardRef((props,ref)=>{
     const {testID} = props
     return (<CommonListComponent
-                testID = {'RN_FlashListComponent'}
-                estimatedItemSize = {50}
-                ListHeaderComponent={() => (
-                    <View testID={(testID||'RN_FlashListComponent')+"_Header"}>{props.children}</View>
-                )}
-                //disableAutoLayout
-                //disableHorizontalListHeightMeasurement = {props.horizontal?undefined : true}
-                {...props}
-                contentContainerStyle = {undefined}
-                style = {undefined}
-                Component = {FlashList}
-                ref={ref}
-            />)
+        testID = {'RN_FlashListComponent'}
+        estimatedItemSize = {50}
+        ListHeaderComponent={() => (
+            <View testID={(testID||'RN_FlashListComponent')+"_Header"}>{props.children}</View>
+        )}
+        //disableAutoLayout
+        //disableHorizontalListHeightMeasurement = {props.horizontal?undefined : true}
+        {...props}
+        contentContainerStyle = {undefined}
+        style = {undefined}
+        Component = {FlashList}
+        ref={ref}
+    />)
 })
 
 FlashListComponent.propTypes = {

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

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-import {Virtuoso,VirtuosoGrid} from "react-virtuoso/dist/index.mjs";
+import {Virtuoso,VirtuosoGrid,TableVirtuoso} from "react-virtuoso/dist/index.mjs";
 import React from "$react";
 import PropTypes from "prop-types";
 import {defaultObj,classNames,defaultNumber,isObj,isDOMElement,isNumber,uniqid,isNonNullString,defaultStr} from "$cutils";
@@ -10,6 +10,8 @@ import { View } from "react-native";
 import {useList} from "../hooks";
 import theme,{grid} from "$theme";
 import Dimensions from "$cdimensions";
+import { StyleSheet } from "react-native";
+import {isMobileNative} from "$cplatform";
 
 const propTypes = {
     ...defaultObj(Virtuoso.propTypes),
@@ -29,12 +31,19 @@ const propTypes = {
     isScrolling : PropTypes.func,
 };
 /***@see : https://virtuoso.dev/virtuoso-api-reference/ */
-const VirtuosoListComponent = React.forwardRef(({onRender,listClassName,components,itemProps,windowWidth,numColumns,responsive,testID,renderItem,onEndReached,onLayout,onContentSizeChange,onScroll,isScrolling,estimatedItemSize,onEndReachedThreshold,containerProps,style,autoSizedStyle,...props},ref)=>{
-    const Component = React.useMemo(()=>responsive?VirtuosoGrid:Virtuoso,[responsive])
+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)=>{
+    if(renderTable){
+        responsive = false;
+    }
+    const Component = React.useMemo(()=>renderTable ? TableVirtuoso : responsive?VirtuosoGrid:Virtuoso,[responsive,renderTable]);
     const context = useList(props);
     itemProps = defaultObj(itemProps);
     const items = context.items;
+    renderTable ? rowProps = defaultObj(rowProps) : null;
     const r2 = {};
+    if(renderTable){
+        r2.fixedHeaderContent = fixedHeaderContent;
+    }
     Object.map(Component.propTypes,(_,i)=>{
         if(i in props){
             r2[i] = props[i];
@@ -48,7 +57,7 @@ const VirtuosoListComponent = React.forwardRef(({onRender,listClassName,componen
     const sizeRef = React.useRef({width:0,height:0});
     const listSize = sizeRef.current;
     const isValid = ()=> listRef.current;
-    const listStyle = {height:'100%',width:"100%",overflowX:'hidden'};
+    const listStyle = {height:'100%',width:"100%",overflowX:renderTable?"auto":"hidden",maxWidth:"100%"};
     r2["data-test-id"] = testID+"_ListContent";
     if(isObj(estimatedItemSize)){
         if(isNumber(estimatedItemSize.width)){
@@ -137,8 +146,10 @@ const VirtuosoListComponent = React.forwardRef(({onRender,listClassName,componen
                 }
             }}
             components = {{
-                Item : responsive ? function(props){return <ItemContainer {...props} style={[itemProps.style,props.style]} numColumns={numColumns}/>} : undefined,
-                //List : responsive ? ResponsiveVirtuosoListItemContainer: undefined,
+                Item : renderTable ? undefined : responsive ? function(props){return <ItemContainer {...props} style={[itemProps.style,props.style]} numColumns={numColumns}/>} : undefined,
+                ...(renderTable ? {
+                    TableRow: TableRowComponent,
+                }:{}),
                 ...defaultObj(components),
             }}
         />
@@ -147,7 +158,10 @@ const VirtuosoListComponent = React.forwardRef(({onRender,listClassName,componen
 
 VirtuosoListComponent.propTypes = {
     ...propTypes,
+    fixedHeaderContent : PropTypes.func,//la fonction rendant le contenu fixe du tableau
+    renderTable : PropTypes.bool,//si le composant Table sera rendu
     numColumns : PropTypes.number,
+    rowProps : PropTypes.object,//les props du TableRow, lorsque le rendu est de type table
     items : PropTypes.oneOfType([
         PropTypes.object,
         PropTypes.array,
@@ -202,7 +216,7 @@ const normalizeEvent = (e)=>{
     },[windowWidth,numColumns]);
     const style = width && {width} || grid.col(windowWidth);
     const dataIntex  = "index" in props ? props.index : "data-index" in props ? props["data-index"] : ""
-    const dataItemIndex = props["data-item-index"];
+    const dataItemIndex = "data-item-index" in props ? props["data-item-index"] : "";
     if(isObj(style)){
         style.paddingRight = style.paddingLeft = style.paddingHorizontal = undefined;
     }
@@ -232,4 +246,11 @@ const normalizeEvent = (e)=>{
         .${gridClassName}{display:flex;flex-direction:row;align-items:flex-start;flex-wrap:wrap;justify-content:flex-start;};
     `;
     document.body.appendChild(style);
-  } 
+}
+
+export const TableRowComponent = ({testID,style,...props}) => {
+    const index = props['data-index'];
+    const isOdd = typeof index =='number' ? index%2 > 0 : false;
+    testID = defaultStr(testID,"_VirtuosoTableRow_"+index);
+    return <tr data-test-id={testID} {...props} style={StyleSheet.flatten(style)} className={classNames(props.className,"virtuoso-table-row",`table-row-${isOdd?"odd":"even"}`)}/>
+};

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

@@ -2,4 +2,9 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-export {default} from "$ecomponents/List/FlashList";
+export {default} from "$ecomponents/List/FlashList";
+
+
+export const TableRowComponent = ({children}) => {
+    return children;   
+};

package/src/components/Table/FiltersOrFooters.js

@@ -4,13 +4,21 @@
 import React from "$react";
 import { View } from "react-native";
 import PropTypes from "prop-types";
-export default function TableFiltersComponent({visible,children:cChildren,...rest}){
+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]);
-    return <View {...rest} style={[rest.style,!visible && {height:0,opacity:0,display:'none'}]}>
+    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}
-    </View>
+    </Component>
 }
 
 TableFiltersComponent.propTypes = {

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

@@ -0,0 +1,10 @@
+import React from "$react";
+import {classNames} from "$cutils";
+import theme from "$theme";
+
+import { StyleSheet } from "react-native";
+const TableHeaderCellComponent = React.forwardRef(({columnDef,className,width,style,children,...props},ref)=>{
+    return <th ref={ref} className={classNames(className,"table-header-cell")} children={children} style={StyleSheet.flatten([style])}/>
+});
+TableHeaderCellComponent.displayName = "TableTableHeaderCellComponent";
+export default TableHeaderCellComponent;

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

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

package/src/components/Table/{Header.js → Header/Component.js}

@@ -1,7 +1,3 @@
-// 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.
-
 // 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.