@xaypay/tui 0.0.76 → 0.0.77

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.76",
+  "version": "0.0.77",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "STORYBOOK_PATH=../../tui.config.js  start-storybook -p 6006",
+    "storybook": "STORYBOOK_PATH=../../tui.config.js start-storybook -p 6006",
     "build-storybook": "STORYBOOK_PATH=../../tui.config.js build-storybook",
-    "build-lib": "STORYBOOK_PATH=../tui.config.js rollup --config rollup.config.js",
+    "build-lib": "STORYBOOK_PATH=../tui.config.js STORYBOOK_CONFIG_PATH=../../../../tui.config.js rollup --config rollup.config.js",
     "svgr": "svgr --icon --title-prop -d src/components/icon -- src/assets/icons"
   },
   "author": "",

package/src/assets/table-settings-icon.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.8744 20H8.12436C7.87436 20 7.65769 19.9167 7.47436 19.75C7.29103 19.5833 7.18269 19.375 7.14936 19.125L6.84936 16.8C6.63269 16.7167 6.42869 16.6167 6.23736 16.5C6.04536 16.3833 5.85769 16.2583 5.67436 16.125L3.49936 17.025C3.26603 17.1083 3.03269 17.1167 2.79936 17.05C2.56603 16.9833 2.38269 16.8417 2.24936 16.625L0.399361 13.4C0.266027 13.1833 0.224361 12.95 0.274361 12.7C0.324361 12.45 0.449361 12.25 0.649361 12.1L2.52436 10.675C2.50769 10.5583 2.49936 10.4457 2.49936 10.337V9.662C2.49936 9.554 2.50769 9.44167 2.52436 9.325L0.649361 7.9C0.449361 7.75 0.324361 7.55 0.274361 7.3C0.224361 7.05 0.266027 6.81667 0.399361 6.6L2.24936 3.375C2.36603 3.14167 2.54503 2.99567 2.78636 2.937C3.02836 2.879 3.26603 2.89167 3.49936 2.975L5.67436 3.875C5.85769 3.74167 6.04936 3.61667 6.24936 3.5C6.44936 3.38333 6.64936 3.28333 6.84936 3.2L7.14936 0.875C7.18269 0.625 7.29103 0.416667 7.47436 0.25C7.65769 0.0833333 7.87436 0 8.12436 0H11.8744C12.1244 0 12.341 0.0833333 12.5244 0.25C12.7077 0.416667 12.816 0.625 12.8494 0.875L13.1494 3.2C13.366 3.28333 13.5704 3.38333 13.7624 3.5C13.9537 3.61667 14.141 3.74167 14.3244 3.875L16.4994 2.975C16.7327 2.89167 16.966 2.88333 17.1994 2.95C17.4327 3.01667 17.616 3.15833 17.7494 3.375L19.5994 6.6C19.7327 6.81667 19.7744 7.05 19.7244 7.3C19.6744 7.55 19.5494 7.75 19.3494 7.9L17.4744 9.325C17.491 9.44167 17.4994 9.554 17.4994 9.662V10.337C17.4994 10.4457 17.4827 10.5583 17.4494 10.675L19.3244 12.1C19.5244 12.25 19.6494 12.45 19.6994 12.7C19.7494 12.95 19.7077 13.1833 19.5744 13.4L17.7244 16.6C17.591 16.8167 17.4037 16.9627 17.1624 17.038C16.9204 17.1127 16.6827 17.1083 16.4494 17.025L14.3244 16.125C14.141 16.2583 13.9494 16.3833 13.7494 16.5C13.5494 16.6167 13.3494 16.7167 13.1494 16.8L12.8494 19.125C12.816 19.375 12.7077 19.5833 12.5244 19.75C12.341 19.9167 12.1244 20 11.8744 20ZM10.0494 13.5C11.016 13.5 11.841 13.1583 12.5244 12.475C13.2077 11.7917 13.5494 10.9667 13.5494 10C13.5494 9.03333 13.2077 8.20833 12.5244 7.525C11.841 6.84167 11.016 6.5 10.0494 6.5C9.06603 6.5 8.23669 6.84167 7.56136 7.525C6.88669 8.20833 6.54936 9.03333 6.54936 10C6.54936 10.9667 6.88669 11.7917 7.56136 12.475C8.23669 13.1583 9.06603 13.5 10.0494 13.5Z" fill="white"/>
+</svg>

package/src/components/button/button.stories.js

@@ -1,11 +1,13 @@
 import React from 'react';
-import {Button} from './index';
+import { Button } from './index';
+
+import { ReactComponent as ReactSVG } from './../../assets/range-arrow-default.svg';
 
 export default {
     component: Button,
     title: 'Components/Button',
 };
 
-const Template = (args) => <Button label='Button' {...args}/>;
+const Template = (args) => <Button label='Button' icon={<ReactSVG />} {...args}/>;
 
 export const Default = Template.bind({});

package/src/components/button/index.js

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import { compereConfigs } from './../../utils';
 
 export const Button = ({
+  icon,
   size,
   type,
   font,
@@ -34,8 +35,8 @@ export const Button = ({
   const [isHover, setIsHover] = useState(false);
 
   useEffect(() => {
-    if (!label) {
-      alert('Button component: label prop is required, please add it!!!');
+    if (!label && !icon) {
+      alert('Add icon or label props on Button component');
     }
   }, []);
 
@@ -55,11 +56,14 @@ export const Button = ({
   return (
     <button
       style={{
+        display: 'flex',
+        alignItems: 'center',
         fontSize: size ? size : configStyles.BUTTON.size,
         fontFamily: font ? font : configStyles.BUTTON.font,
         height: height ? height : configStyles.BUTTON.height,
         fontWeight: weight ? weight : configStyles.BUTTON.weight,
         padding: padding ? padding : configStyles.BUTTON.padding,
+        justifyContent: icon && label? 'space-between' : 'center',
         borderRadius: radius ? radius : configStyles.BUTTON.radius,
         boxSizing: boxSizing ? boxSizing : configStyles.BUTTON.boxSizing,
         transition: transition ? transition : configStyles.BUTTON.transition,
@@ -88,7 +92,7 @@ export const Button = ({
       className={classProps}
       {...props}
     >
-      {label}
+      {icon && icon} {label && label} {!icon && !label && 'Add icon or label prop on Button component'}
     </button>
   );
 };
@@ -97,10 +101,12 @@ Button.propTypes = {
   type: PropTypes.string,
   size: PropTypes.string,
   font: PropTypes.string,
+  icon: PropTypes.element,
   color: PropTypes.string,
   width: PropTypes.string,
   outline: PropTypes.bool,
   onClick: PropTypes.func,
+  label: PropTypes.string,
   weight: PropTypes.string,
   height: PropTypes.string,
   cursor: PropTypes.string,
@@ -115,7 +121,6 @@ Button.propTypes = {
   textTransform: PropTypes.string,
   disabledColor: PropTypes.string,
   backgroundColor: PropTypes.string,
-  label: PropTypes.string.isRequired,
   disabledLineColor: PropTypes.string,
   disabledBackgroundColor: PropTypes.string
 };

package/src/components/input/index.js

@@ -45,6 +45,7 @@ export const Input = ({
     maxLength,
     labelColor,
     errorColor,
+    borderRight,
     placeholder,
     errorZindex,
     errorBottom,
@@ -62,9 +63,11 @@ export const Input = ({
     labelLineHeight,
     backgroundColor,
     telErrorMessage,
+    borderRightColor,
     labelMarginBottom,
     regexpErrorMessage,
     phoneJustifyContent,
+    borderRightColorHover,
     errorAnimationDuration,
     ...props
 }) => {
@@ -243,7 +246,14 @@ export const Input = ({
                                 borderTopLeftRadius: radius ? radius : configStyles.INPUT.radius,
                                 borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
                                 display: phoneDisplay ? phoneDisplay : configStyles.INPUT.phoneDisplay,
+                                borderRight: borderRight ? borderRight : configStyles.INPUT.borderRight,
                                 alignItems: phoneAlignItems ? phoneAlignItems : configStyles.INPUT.phoneAlignItems,
+                                borderColor:
+                                    isHover
+                                        ?
+                                            borderRightColorHover ? borderRightColorHover : configStyles.INPUT.borderRightColorHover
+                                        :
+                                            borderRightColor ? borderRightColor : configStyles.INPUT.borderRightColor,
                                 color: innerErrorMessage  && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
                                 justifyContent: phoneJustifyContent ? phoneJustifyContent : configStyles.INPUT.phoneJustifyContent,
                                 backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,
@@ -351,6 +361,7 @@ Input.propTypes = {
     maxLength: PropTypes.number,
     errorColor: PropTypes.string,
     labelColor: PropTypes.string,
+    borderRight: PropTypes.string,
     placeholder: PropTypes.string,
     errorZindex: PropTypes.string,
     errorBottom: PropTypes.string,
@@ -368,10 +379,12 @@ Input.propTypes = {
     phoneAlignItems: PropTypes.string,
     errorLineHeight: PropTypes.string,
     labelLineHeight: PropTypes.string,
+    borderRightColor: PropTypes.string,
     labelMarginBottom: PropTypes.string,
     regexpErrorMessage: PropTypes.string,
     regexp: PropTypes.instanceOf(RegExp),
     phoneJustifyContent: PropTypes.string,
+    borderRightColorHover: PropTypes.string,
     errorAnimationDuration: PropTypes.string,
     leftIcon: PropTypes.arrayOf(PropTypes.element),
     rightIcon: PropTypes.arrayOf(PropTypes.element),

package/src/components/newFile/index.js

@@ -85,7 +85,7 @@ export const NewFile = ({
 
     const handleRemoveFile = () => {
         setImage(null);
-        removeFile(singleFile);
+        removeFile && removeFile(singleFile);
     };
 
     const handleChange = (e) => {
@@ -201,7 +201,11 @@ export const NewFile = ({
         if (multiple) {
             setSingleFile(null);
         }
-    }, [multiple, filesArray && filesArray.length, defaultData]);
+
+        if (multiple && !removeFile) {
+            alert('Please add removeFile prop on NewFile component, it is a require in multiple mode');
+        }
+    }, [multiple, removeFile, filesArray && filesArray.length, defaultData]);
 
     useEffect(() => {
         if (errorMessage) {
@@ -215,11 +219,7 @@ export const NewFile = ({
         if (!change) {
             alert('Please add change prop on File component');                    
         }
-
-        if (!removeFile) {
-            alert('Please add removeFile prop on File component');                    
-        }
-    }, [change, removeFile]);
+    }, [change]);
 
     return (
         <div
@@ -413,7 +413,7 @@ export const NewFile = ({
                         status={item.status}
                         size={item.file.size}
                         name={item.file.name}
-                        removeFile={removeFile}
+                        removeFile={removeFile ? removeFile : _ => _}
                         radius={radius ? radius : configStyles.File.radius}
                         fileFormat={item.file.type.split('/')[1].toLowerCase()}
                         progressColor={progressColor ? progressColor : configStyles.File.progressColor}
@@ -449,6 +449,7 @@ NewFile.propTypes = {
     upload: PropTypes.string,
     weight: PropTypes.number,
     maxSize: PropTypes.number,
+    removeFile: PropTypes.func,
     errorSize: PropTypes.string,
     labelSize: PropTypes.string,
     labelColor: PropTypes.string,
@@ -475,7 +476,6 @@ NewFile.propTypes = {
     progressTrackColor: PropTypes.string,
     fileAreaImageWidth: PropTypes.string,
     listItemErrorColor: PropTypes.string,
-    removeFile: PropTypes.func.isRequired,
     fileAreaImageHeight: PropTypes.string,
     progressFailedColor: PropTypes.string,
     progressSuccessColor: PropTypes.string,
@@ -489,6 +489,6 @@ NewFile.propTypes = {
 };
 
 NewFile.defaultProps = {
-    maxSize: 50,
+    maxSize: 10,
     fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
 };

package/src/components/select/index.js

@@ -39,7 +39,6 @@ export const Select = ({
     selectedColor,
     selectedRadius,
     selectedMinHeight,
-    selectedBorder,
     selectedPadding,
     selectedFontSize,
     selectedBoxSizing,
@@ -47,7 +46,6 @@ export const Select = ({
     selectedLineHeight,
     selectedHoverColor,
     selectedTransition,
-    selectedBorderColor,
 
     optionsBoxShadow,
     optionsBorderRadius,
@@ -65,6 +63,9 @@ export const Select = ({
     optionItemMarginBottom,
     optionItemBackgroudColor,
     optionItemBackgroudColorHover,
+
+    boxShadow,
+    boxShadowHover
 }) => {
     const ref = useRef();
     
@@ -222,7 +223,6 @@ export const Select = ({
                         style={{
                             cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.SELECT.cursor,
                             minHeight: selectedMinHeight ? selectedMinHeight : configStyles.SELECT.selectedMinHeight,
-                            border: selectedBorder ? selectedBorder : configStyles.SELECT.selectedBorder,
                             padding: selectedPadding ? selectedPadding : configStyles.SELECT.selectedPadding,
                             borderRadius: selectedRadius ? selectedRadius : configStyles.SELECT.selectedRadius,
                             fontSize: selectedFontSize ? selectedFontSize : configStyles.SELECT.selectedFontSize,
@@ -230,7 +230,7 @@ export const Select = ({
                             fontWeight: selectedFontWeight ? selectedFontWeight : configStyles.SELECT.selectedFontWeight,
                             lineHeight: selectedLineHeight ? selectedLineHeight : configStyles.SELECT.selectedLineHeight,
                             transition: selectedTransition ? selectedTransition : configStyles.SELECT.selectedTransition,
-                            borderColor: errorMessage ? errorColor ? errorColor : configStyles.SELECT.errorColor : selectedBorderColor ? selectedBorderColor : configStyles.SELECT.selectedBorderColor
+                            boxShadow: errorMessage ? errorColor ?  `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.SELECT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.SELECT.boxShadowHover : boxShadow ? boxShadow : configStyles.SELECT.boxShadow
                         }}
                         onClick={disabled ? _ => _ : _ => handleOpenClose()}
                         onMouseEnter={disabled ? _ => _ : _ => handleMouseEnter()}
@@ -378,7 +378,6 @@ Select.propTypes = {
     errorSize: PropTypes.string,
     errorColor: PropTypes.string,
     selectedColor: PropTypes.string,
-    selectedBorder: PropTypes.string,
     selectedRadius: PropTypes.string,
     selectedMinHeight: PropTypes.string,
     selectedPadding: PropTypes.string,
@@ -388,7 +387,6 @@ Select.propTypes = {
     selectedFontWeight: PropTypes.string,
     selectedLineHeight: PropTypes.string,
     selectedTransition: PropTypes.string,
-    selectedBorderColor: PropTypes.string,
 
     optionsBoxShadow: PropTypes.string,
     optionsBorderRadius: PropTypes.string,
@@ -406,4 +404,7 @@ Select.propTypes = {
     optionItemMarginBottom: PropTypes.string,
     optionItemBackgroudColor: PropTypes.string,
     optionItemBackgroudColorHover: PropTypes.string,
+
+    boxShadow: PropTypes.string,
+    boxShadowHover: PropTypes.string,
 };

package/src/components/select/select.module.css

@@ -16,7 +16,7 @@
     position: absolute;
     width: 100%;
     left: 0px;
-    z-index: 1;
+    z-index: 9;
     max-height: 0;
     overflow: hidden;
     animation: select-show 640ms linear forwards;

package/src/components/table/index.js

@@ -1,125 +1,191 @@
-import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
-import classnames from "classnames";
-import styles from "./table.module.css";
-import { Checkbox } from "../checkbox";
-
-export const Table = ({
-    className,
-    onChange,
-    config,
-    jsonData,
-    hearderData,
-    keyNames,
-    actions,
-    ...props
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { compereConfigs } from './../../utils';
+
+const Table = ({
+  tableHeadItems,
+  tableBodyItems,
+
+  tHeadColor,
+  tHeadFamily,
+  tHeadPadding,
+  tHeadFontWeight,
+  tHeadBorderRadius,
+  tHeadBackgroundColor,
+
+  tBodyColor,
+  tBodyPadding,
+  tBodyFontSize,
+  tBodyTextAlign,
+  tBodyFontWeight,
+  tBodyFontFamily,
+
+  tBodyRowBorder,
+  tBodyMarginTop,
 }) => {
-    const classProps = classnames(className);
-    let tbodyData = jsonData.length ? JSON.parse(jsonData) : [];
-
-    useEffect(()=>{
-        tbodyData = jsonData.length ? JSON.parse(jsonData) : [];
-    },[jsonData])
-
-    const [checked,setChecked] = useState(config.isCheckbox && config.isCheckbox.checked ? config.isCheckbox.checked : []);
-
-
-    config.isCheckbox && config.isCheckbox.showCheckbox == undefined
-        ? (config.isCheckbox.showCheckbox = () => {
-              return true;
-          })
-        : "";
-
-    return (
-        <div className={`${styles["table-wrap"]} table-wrap-rem`}>
-            {config.isHeader &&
-                hearderData.map((header, key) => {
-                    return (
-                        <div className={`${styles["table-top"]} table-top-rem`} key={key}>
-                            <div className={`${styles["table-items"]} table-items-rem`}>
-                                {header}
-                            </div>
-                        </div>
-                    );
-                })}
-            <div className={`${styles["table-bottom"]} table-bottom-rem`}>
-                {tbodyData.map((item, key) => {
-                    return (
-                        <div className={`${styles["table-bottom-inner"]} table-bottom-inner-rem`} key={key}>
-                            {keyNames.map((keyName, keyNameKey) => {
-                                return (
-                                    <div
-                                        className={`${styles["table-items"]} table-items-rem`}
-                                        key={keyNameKey}
-                                    >
-                                        {config.isCheckbox &&
-                                            config.isCheckbox.showCheckbox &&
-                                            config.isCheckbox.showCheckbox(
-                                                item
-                                            ) &&
-                                            keyNameKey == 0 && (
-                                                <Checkbox
-                                                    onClick={(e) => {
-                                                        const id = e.target.id;
-                                                        const checkedValue = e.target.checked;
-                                                        let ch = [...checked]
-                                                        checkedValue ? ch.push(Number(id)) : ch.splice(ch.indexOf(id), 1);
-                                                        setChecked(ch);
-                                                        config.isCheckbox.onChange(ch);
-                                                    }}
-                                                    jsonData={`[{"value":"", "name":"", "label":"", "id":${item.id}, "checked":${checked.indexOf(item.id) > -1 ? true : false }}]`}
-                                                />
-                                            )}
-                                        {typeof keyName === "string" ? (
-                                            item[keyName]
-                                        ) : (
-                                            <>
-                                                <i className={keyName.icon} />
-                                                {item[keyName.name]}
-                                            </>
-                                        )}
-                                    </div>
-                                );
-                            })}
-
-                            {actions && (
-                                <div className={`${styles["table-items"]} table-items-rem`}>
-                                    {actions.filter(a => a.show && a.show(item) || a.show === undefined).map((action, key) => {
-                                            return (<div key={key}>
-                                                <i className={action.icon} onClick={action.click? action.click : ()=>{}}>
-                                                    {action.icon}
-                                                </i>
-                                            </div>)
-                                    })}
-                                </div>
-                            )}
-                        </div>
-                    );
-                })}
-            </div>
-        </div>
-    );
+  
+  const configStyles = compereConfigs();
+
+  return (
+    <>
+      <table
+        style={{
+          borderCollapse: 'collapse'
+        }}
+      >
+
+        {
+          tableHeadItems && tableHeadItems.length > 0 && <thead>
+            <tr
+              style={{
+                color: tHeadColor ? tHeadColor : configStyles.TABLE.tHeadColor,
+                backgroundColor: tHeadBackgroundColor ? tHeadBackgroundColor : configStyles.TABLE.tHeadBackgroundColor
+              }}
+            >
+              {
+                tableHeadItems.map((item, index) => {
+                  return (
+                    <th
+                      key={`${item}_${index}`}
+                      style={{
+                        padding: tHeadPadding ? tHeadPadding : configStyles.TABLE.tHeadPadding,
+                        fontFamily: tHeadFamily ? tHeadFamily : configStyles.TABLE.tHeadFamily,
+                        fontWeight: tHeadFontWeight ? tHeadFontWeight : configStyles.TABLE.tHeadFontWeight,
+                        borderTopLeftRadius: index === 0 ? tHeadBorderRadius ? tHeadBorderRadius : configStyles.TABLE.tHeadBorderRadius : '0px',
+                        borderTopRightRadius: index === tableHeadItems.length - 1 ? tHeadBorderRadius ? tHeadBorderRadius : configStyles.TABLE.tHeadBorderRadius : '0px'
+                      }}
+                    >
+                      {item}
+                    </th>
+                  )
+                })
+              }
+            </tr>
+          </thead>
+        }
+
+        {
+          tableBodyItems && tableBodyItems.length > 0 && <tbody
+            style={{
+              boxShadow: '0px 10px 30px rgba(0, 35, 106, 0.06)'
+            }}
+          >
+
+            {
+              
+              tableBodyItems.map((item, index) => {
+                return (
+                  <>
+                    {
+                      tBodyMarginTop ? tBodyMarginTop : configStyles.TABLE.tBodyMarginTop && index === 0 && <tr>
+                        <td
+                          style={{
+                            height: tBodyMarginTop ? tBodyMarginTop : configStyles.TABLE.tBodyMarginTop
+                          }}
+                        >
+                        </td>
+                      </tr>
+                    }
+                    
+                    <tr
+                      key={`${item.id}_${index}`}
+                      style={{
+                        borderBottom: index === tableBodyItems.length - 1 ? 'none' : tBodyRowBorder ? tBodyRowBorder : configStyles.TABLE.tBodyRowBorder
+                      }}
+                    >
+                      {
+                        Object.values(item).map((innerItem, innerIndex) => {
+                          if (innerIndex > 0) { // TODO: 
+                            return (
+                              <td
+                                key={`${innerItem}_${innerIndex}`}
+                                style={{
+                                  color: tBodyColor ? tBodyColor : configStyles.TABLE.tBodyColor,
+                                  padding: tBodyPadding ? tBodyPadding : configStyles.TABLE.tBodyPadding,
+                                  fontSize: tBodyFontSize ? tBodyFontSize : configStyles.TABLE.tBodyFontSize,
+                                  textAlign: tBodyTextAlign ? tBodyTextAlign : configStyles.TABLE.tBodyTextAlign,
+                                  fontFamily: tBodyFontFamily ? tBodyFontFamily : configStyles.TABLE.tBodyFontFamily,
+                                  fontWeight: tBodyFontWeight ? tBodyFontWeight : configStyles.TABLE.tBodyFontWeight,
+                                  borderRight: innerIndex === Object.values(item).length - 1 ? 'none' : configStyles.TABLE.tBodyRowBorder
+                                }}
+                              >
+                                {
+                                  Array.isArray(innerItem)
+                                    ? innerItem.length > 0
+                                      ? innerItem.map((newItem, newIndex) => {
+                                          if (newItem && !Array.isArray(newItem) && typeof newItem === 'object') {
+                                            return Object.values(newItem).map((actionItem, actionIndex) => {
+                                              return (
+                                                <span
+                                                  key={`${actionItem}_${actionIndex}`}
+                                                  style={{
+                                                    cursor: 'pointer'
+                                                  }}
+                                                >
+                                                  { actionItem }
+                                                </span>
+                                              )
+                                            })
+                                          } else {
+                                            return <span
+                                              key={`${newItem}_${newIndex}`}
+                                            >
+                                              {newItem}
+                                            </span>
+                                          }
+                                        })
+                                      : ''
+                                    : innerItem
+                                }
+                              </td>
+                            )
+                          }
+                        })
+                      }
+                    </tr>
+                  </>
+                )
+              })
+            }
+          </tbody>
+        }
+        
+
+        
+
+        <tfoot
+          style={{
+
+          }}
+        >
+          
+        </tfoot>
+      </table>
+    </>
+  );
 };
 
 Table.propTypes = {
-    className: PropTypes.string,
-    onChange: PropTypes.func,
-    config: PropTypes.object,
-    actions: PropTypes.arrayOf(PropTypes.object),
-    jsonData: PropTypes.string,
-    keyNames: PropTypes.arrayOf(
-        PropTypes.oneOf([PropTypes.string, PropTypes.object])
-    ),
-    hearderData: PropTypes.array,
-};
+  tableHeadItems: PropTypes.array,
+  tableBodyItems: PropTypes.array,
+
+  tHeadColor: PropTypes.string,
+  tHeadFamily: PropTypes.string,
+  tHeadPadding: PropTypes.string,
+  tHeadFontWeight: PropTypes.number,
+  tHeadBorderRadius: PropTypes.string,
+  tHeadBackgroundColor: PropTypes.string,
 
-Table.defaultProps = {
-    className: "",
-    onChange: undefined,
-    errorMessage: "",
-    config: { isHeader: true, isCheckbox: {checked:[]} },
-    actions: [],
-    jsonData: "",
-    keyNames: [],
-    hearderData: [],
+  tBodyColor: PropTypes.string,
+  tBodyPadding: PropTypes.string,
+  tBodyFontSize: PropTypes.string,
+  tBodyTextAlign: PropTypes.string,
+  tBodyFontWeight: PropTypes.string,
+  tBodyFontFamily: PropTypes.string,
+
+  tBodyRowBorder: PropTypes.string,
+  tBodyMarginTop: PropTypes.string
 };
+
+export default Table;