@fto-consult/expo-ui 6.24.2 → 6.25.1

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,9 @@ 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";
+import {addClassName,removeClassName} from "$cutils/dom";
 
 const propTypes = {
     ...defaultObj(Virtuoso.propTypes),
@@ -29,18 +32,29 @@ 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,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;
+    }
+    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];
         }
     });
     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;
@@ -48,7 +62,10 @@ 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%"};
+    if(renderTable){
+        listStyle.borderCollapse ="collapse";
+    }
     r2["data-test-id"] = testID+"_ListContent";
     if(isObj(estimatedItemSize)){
         if(isNumber(estimatedItemSize.width)){
@@ -95,12 +112,34 @@ const VirtuosoListComponent = React.forwardRef(({onRender,listClassName,componen
             },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 ? {
@@ -112,7 +151,7 @@ const VirtuosoListComponent = React.forwardRef(({onRender,listClassName,componen
         },
         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}
@@ -131,15 +170,24 @@ const VirtuosoListComponent = React.forwardRef(({onRender,listClassName,componen
                 }
             }}
             onScroll={(e) => onScroll && onScroll(normalizeEvent(e))}
-            isScrolling = {(isC,a)=>{
+            isScrolling = {(isC,)=>{
                 if(typeof isScrolling =='function'){
                     return isScrolling(isC);
                 }
+                if(!renderTable) return;
             }}
             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),
+                ...(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>
@@ -147,7 +195,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 +253,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 +283,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/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/index.js

@@ -0,0 +1,34 @@
+// 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 Cell from "./Cell";
+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;

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

@@ -12,4 +12,6 @@ const AutoSizeVerticalList = React.forwardRef(({testID,autoSizerProps,...props},
 })
 
 AutoSizeVerticalList.displayName = "AutoSizeVerticalListComponent";
-export default AutoSizeVerticalList;
+export default AutoSizeVerticalList;
+
+export * from "$ecomponents/List/Virtuoso";

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

@@ -1 +1,2 @@
-export {default} from "$ecomponents/List/FlashList";
+export {default} from "$ecomponents/List/Virtuoso";
+export * from "$ecomponents/List/Virtuoso";

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

@@ -0,0 +1,16 @@
+// 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 {classNames} from "$cutils";
+import { StyleSheet } from "react-native";
+import Label from "$ecomponents/Label";
+
+function TableCellContentComponent({children,style,...rest}){
+    return (<td  {...rest} className={classNames(rest.className,"table-row-cell")} style={StyleSheet.flatten([style])}>
+        {children}
+    </td>);
+}
+//const TableCellContentComponent = React.memo(TableCellContentComponent);;
+export default TableCellContentComponent;
+TableCellContentComponent.displayName = "TableCellContentComponent";

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

@@ -0,0 +1,15 @@
+// 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 "$ecomponents/View";
+import { StyleSheet } from "react-native";
+
+function TableCellContentComponent({children,style,colSpan,...rest}){
+    return (<View testID={"RN_TableRowCellContentComponent"} {...rest} style={style}>
+        {children}
+    </View>);
+}
+//const TableCellContentComponent = React.memo(TableCellContentComponent);;
+export default TableCellContentComponent;
+TableCellContentComponent.displayName = "TableCellContentComponent";

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

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

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

@@ -0,0 +1,7 @@
+import { forwardRef } from "react";
+
+const TableRowWrapperComponent = forwardRef(({children},ref)=>children);
+
+TableRowWrapperComponent.displayName = "TableRowWrapperComponent";
+
+export default TableRowWrapperComponent;

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

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

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

@@ -0,0 +1,38 @@
+// 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 Cell from "./Cell";
+import PropTypes from "prop-types";
+import {isObj} from "$cutils";
+import styles from "../styles";
+import {useTable} from "../hooks";
+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 content = React.useMemo(()=>{
+        if(rowData.isSectionListHeader && typeof renderSectionHeader ==='function'){
+            return <RowWrapper style={[styles.row,theme.styles.pv1]}>
+                <Cell isSectionListHeader colSpan={visibleColsNames.length}>{renderSectionHeader({isSectionListHeader:true,rowData,item:rowData,index,rowIndex:index,isTable:true,rowKey})}</Cell>
+            </RowWrapper> 
+        }
+        return visibleColsNames.map((columnField,cIndex)=>{
+            const columnDef = columns[columnField];
+            if(!isObj(columnDef)) return null;
+            return <Cell rowData={rowData} rowKey={rowKey} children={rowData[columnField]} rowIndex={index} columnDef={columnDef} index={cIndex} key={columnField} columnField={columnField}/>
+        });
+    },[rowKey,index,JSON.stringify(visibleColsNames)]);
+    return <RowWrapper style={[styles.row]}>
+        {content}
+    </RowWrapper>;
+}
+
+TableRowComponent.propTypes = {
+    rowData : PropTypes.object.isRequired,
+}
+
+export {Cell};
+
+TableRowComponent.Cell = Cell;

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

@@ -0,0 +1,10 @@
+import React from "$react";
+import View from "$ecomponents/View";
+
+const RowHeaderComponent = React.forwardRef(({...props},ref)=>{
+
+});
+
+
+RowHeaderComponent.displayName = "TableRowHeaderComponent";
+export default RowHeaderComponent;

package/src/components/Table/RowTemplate/index.web.js

@@ -0,0 +1,9 @@
+import React from "$react";
+
+const RowHeaderComponent = React.forwardRef(({...props},ref)=>{
+
+});
+
+
+RowHeaderComponent.displayName = "TableRowHeaderComponent";
+export default RowHeaderComponent;

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

@@ -0,0 +1,7 @@
+import React from "$react";
+const TableScrollViewNative = React.forwardRef(({children,...props},ref)=>{
+    return children;
+});
+TableScrollViewNative.displayName = "TableScrollViewNative";
+
+export default TableScrollViewNative;

package/src/components/Table/ScrollNative/index.native.js

@@ -0,0 +1,8 @@
+import { ScrollView } from "react-native";
+import React from "$react";
+const TableScrollViewNative = React.forwardRef(({children,...props},ref)=>{
+    return <ScrollView {...props} children={children} ref={ref}/>
+});
+TableScrollViewNative.displayName = "TableScrollViewNative";
+
+export default TableScrollViewNative;

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

@@ -0,0 +1,5 @@
+import { StyleSheet } from "react-native"
+import {classNames} from "$cutils";
+export default function VirtuosoTableComponent({style,className,...props}){
+    return <table{...props} className={classNames(className,"virtuoso-table-component")} style={StyleSheet.flatten([{ borderCollapse: 'separate',width:"100%" },style])} />
+}

package/src/components/Table/VirtuosoTable/index.native.js

@@ -0,0 +1,3 @@
+export default function VirtuosoTableComponent({children}){
+    return children;
+}

package/src/components/Table/hooks.js

@@ -0,0 +1,84 @@
+import React,{useMemo,useContext,createContext} 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 styles from "./styles";
+import theme from "$theme";
+
+export const usePrepareColumns = ({columns,sortedColumn,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 = [];
+        let hasFooters = false;
+        columnProps = defaultObj(columnProps);
+        let columnIndex = 0;
+        const widths = defaultObj(columnsWidths,colsWidths);
+        headerCellContainerProps = defaultObj(headerCellContainerProps);
+        footerCellContainerProps = defaultObj(footerCellContainerProps);
+        filterCellContainerProps = defaultObj(filterCellContainerProps);
+        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);
+            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;
+            }
+            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={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,styles.cell,style]}>
+                    {React.isValidElement(filterCell)? filterCell : null}
+                </HeaderCell>
+            }
+            if(typeof renderFooterCell ==='function') {
+                const footerProps = {...colArgs,containerProps:{}};
+                let cellFooter = renderFooterCell(footerProps);
+                let fContainerProps = {};
+                if(!React.isValidElement(cellFooter,true) && isObj(cellFooter)){
+                    fContainerProps = isObj(cellFooter.containerProps)? cellFooter.containerProps : {};
+                    cellFooter = React.isValidElement(cellFooter.children)? cellFooter.children : React.isValidElement(cellFooter.content)? cellFooter.content : null;
+                } else if(isObj(footerProps.containerProps)){
+                    fContainerProps = footerProps.containerProps;
+                }
+                cellFooter = React.isValidElement(cellFooter,true)? cellFooter : null;
+                if(!hasFooters && cellFooter){
+                    hasFooters = true;
+                }
+                footers[columnField] = <HeaderCell {...rArgs} testID={testID+"_Footer_Cell_"+columnField}  key={columnField} style={[styles.headerItem,styles.headerItemOrCell,footerCellContainerProps.style,style]}>
+                    <Label primary children={cellFooter}/>
+                </HeaderCell>
+          }
+          columnsVisibilities.push(visible);
+          if(visible){
+            visibleColsNames.push(columnField);
+          }
+          columnsNames.push(columnField);
+          cols[columnField] = {
+            ...columnDef,
+            width,
+            index : columnIndex,
+            field : columnField,
+            visible,
+            columnField,
+          };
+          columnIndex++;
+        });
+        return {columns:cols,columnsNames,headers,columnsVisibilities,visibleColsNames,hasFooters,footers,filters};
+      },[columns,sortedColumn,footers,forceRender]);
+}
+
+export const TableContext = createContext(null);
+
+export const useTable = ()=> useContext(TableContext);