@xaypay/tui 0.0.119 → 0.0.121

package/src/components/table/index.js

@@ -1,789 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import PropTypes from 'prop-types'
-
-import TH from './th'
-import TD from './td'
-
-import SvgUpArrow from './../icon/UpArrow'
-import SvgDownArrow from './../icon/DownArrow'
-
-import { compereConfigs, hasOwnerProperty } from './../../utils'
-
-export const Table = ({
-    getData,
-    dataBody,
-    arrowShow,
-    dataHeader,
-    arrowColumn,
-    tableRowItem,
-    tableRowRadius,
-    tableRowBGColor,
-    tableRowBoxShadow,
-    tableColumnMaxWidth,
-    tableColumnMinWidth,
-
-    tHeadColor,
-    tHeadFamily,
-    tHeadPadding,
-    tHeadFontSize,
-    tHeadTextAlign,
-    tHeadFontWeight,
-    tHeadBorderRadius,
-    tHeadBackgroundColor,
-
-    tBodyColor,
-    tBodyPadding,
-    tBodyFontSize,
-    tBodyTextAlign,
-    tBodyRowBorder,
-    tBodyBoxShadow,
-    tBodyFontWeight,
-    tBodyFontFamily,
-    tBodyRowMarginTop,
-
-    className,
-    openListColor,
-    openListFontSize,
-    openListFontFamily,
-    hideBorder,
-}) => {
-    const [body, setBody] = useState([])
-    const [header, setHeader] = useState([])
-    const [disableArr, setDisableArr] = useState([])
-    const [checkedArray, setCheckedArray] = useState([])
-
-    const configStyles = compereConfigs()
-
-    const handleCheckIfArrow = (bodyData, data) => {
-        let removeItemIndex
-        let headerWithoutArrow = []
-
-        bodyData.map((item, index) => {
-            if (index === data.index) {
-                item.map((innerItem, innerIndex) => {
-                    if (hasOwnerProperty(innerItem, 'arrowComponent')) {
-                        removeItemIndex = innerIndex
-                    }
-                })
-                if (removeItemIndex !== undefined) {
-                    const firstPart = item.slice(0, removeItemIndex)
-                    const secondPart = item.slice(removeItemIndex + 1, item.length)
-                    headerWithoutArrow = [...firstPart, ...secondPart]
-                } else {
-                    headerWithoutArrow.push(item)
-                }
-            }
-        })
-
-        return { removeItemIndex, headerWithoutArrow }
-    }
-
-    const handleHeaderItemClick = (e) => {
-        e.stopPropagation()
-
-        if (!e.target.tagName.startsWith('svg') && e.target.innerText !== undefined && e.target.innerText !== '') {
-            let removeItemIndex
-            let headerWithoutArrow
-
-            header.map((item, index) => {
-                if (hasOwnerProperty(item, 'arrowComponent')) {
-                    removeItemIndex = index
-                }
-            })
-
-            if (removeItemIndex !== undefined) {
-                const firstPart = header.slice(0, removeItemIndex)
-                const secondPart = header.slice(removeItemIndex + 1, header.length)
-                headerWithoutArrow = [...firstPart, ...secondPart]
-            }
-
-            const returnedData = {
-                from: 'header',
-                content: e.target.innerText,
-                row: headerWithoutArrow !== undefined ? headerWithoutArrow : header,
-            }
-
-            getData(returnedData)
-        }
-    }
-
-    const handleBodyActionClick = (e, data) => {
-        e.stopPropagation()
-
-        const { removeItemIndex, headerWithoutArrow } = handleCheckIfArrow(body, data)
-
-        const actionData = {
-            from: 'body',
-            item: data.item,
-            id: data.item.id,
-            items: data.items,
-            type: data.item.type,
-            rowIndex: data.index,
-            row: headerWithoutArrow,
-            itemInnerIndex: data.itemIndex,
-            itemIndex:
-                removeItemIndex !== undefined && removeItemIndex < data.innerIndex
-                    ? data.innerIndex - 1
-                    : data.innerIndex,
-        }
-
-        getData(actionData)
-    }
-
-    const handleSetCheckboxArray = (data) => {
-        let checkedItems = []
-        data.map((item, index) => {
-            item.map((innerItem, innerIndex) => {
-                if (hasOwnerProperty(innerItem, 'checkBox')) {
-                    if (!checkedItems[innerIndex]) {
-                        checkedItems[innerIndex] = []
-                    }
-                    checkedItems[innerIndex].push({
-                        rowCount: index,
-                        columnCount: innerIndex,
-                        checked: innerItem.checkBox.checked,
-                    })
-                }
-            })
-        })
-        return checkedItems
-    }
-
-    const handleSetInsertIndex = (data, count) => {
-        let arrowColumnCount
-        if (typeof count !== 'number') {
-            alert('arrowColumn props must be a number, please check it')
-        } else {
-            if (count <= 0) {
-                arrowColumnCount = 0
-            } else {
-                if (count >= data.length - 1) {
-                    arrowColumnCount = data.length
-                } else {
-                    arrowColumnCount = count
-                }
-            }
-        }
-        return arrowColumnCount
-    }
-
-    const handleInsertArrow = (data, count, arrowObject) => {
-        if (count === 0) {
-            data.unshift(arrowObject)
-        } else if (count >= data.length - 1) {
-            data.push(arrowObject)
-        } else {
-            data.splice(count, 0, arrowObject)
-        }
-        return data
-    }
-
-    const handleTransformDataForInsertArrow = (data, count, type) => {
-        const arrowObject = {
-            status: 'close',
-            checkIndex: null,
-            arrowComponent: true,
-            openArrow: <SvgUpArrow />,
-            closeArrow: <SvgDownArrow />,
-        }
-
-        if (type === 'body') {
-            return data.map((item, index) => {
-                const newObjWithArrow = { ...arrowObject }
-                newObjWithArrow.checkIndex = index
-                return handleInsertArrow(item, count, newObjWithArrow)
-            })
-        } else {
-            const newObjWithArrow = { ...arrowObject }
-            newObjWithArrow.checkIndex = count
-            return handleInsertArrow(data, count, newObjWithArrow)
-        }
-    }
-
-    const handleCheckedHeader = (data, e) => {
-        e.stopPropagation()
-        let removeItemIndex
-        let checkableItemBool
-        let checkableItemIndex
-        let headerWithoutArrow
-        let checkableBodyRowItems = []
-
-        const updatedHeader = header.slice()
-        const updatedBody = body.slice().map((item) => Object.values(item))
-        const newData = updatedHeader.map((item, index) => {
-            if (item.content == data.content) {
-                checkableItemIndex = index
-                checkableItemBool = !item.checkBox.checked
-                item.checkBox.checked = !item.checkBox.checked
-            }
-            if (hasOwnerProperty(item, 'arrowComponent')) {
-                removeItemIndex = index
-            }
-            return item
-        })
-
-        const newUpdatedBody = updatedBody.map((item, index) => {
-            return item.map((innerItem, innerIndex) => {
-                if (checkableItemIndex === innerIndex) {
-                    if (!hasOwnerProperty(innerItem.checkBox, 'disabled') || innerItem.checkBox.disabled !== true) {
-                        innerItem.checkBox.checked = checkableItemBool
-                        checkableBodyRowItems.push({ column: innerIndex, columnItem: innerItem })
-                    }
-                    handleHeaderCheckedUpdate({
-                        row: index,
-                        column: innerIndex,
-                        checked: { checked: checkableItemBool },
-                    })
-                }
-                return innerItem
-            })
-        })
-
-        if (removeItemIndex !== undefined) {
-            const firstPart = newData.slice(0, removeItemIndex)
-            const secondPart = newData.slice(removeItemIndex + 1, newData.length)
-            headerWithoutArrow = [...firstPart, ...secondPart]
-        }
-
-        const returnedData = {
-            from: 'header',
-            content: data.content,
-            checkBox: data.checkBox,
-            columnArray: checkableBodyRowItems,
-            row: headerWithoutArrow !== undefined ? headerWithoutArrow : newData,
-        }
-
-        getData(returnedData)
-
-        setHeader(newData)
-        setBody(newUpdatedBody)
-    }
-
-    const handleCheckedBody = (data, e, dataRowIndex, dataItemIndex) => {
-        e.stopPropagation()
-        const transformedData = { ...data }
-        transformedData.index = dataRowIndex
-        transformedData.innerIndex = dataItemIndex
-        const updatedBody = body.slice().map((item) => Object.values(item))
-        const newData = updatedBody.map((item, index) => {
-            return item.map((innerItem, innerIndex) => {
-                if (
-                    innerItem.id === data.id &&
-                    innerItem.content == data.content &&
-                    hasOwnerProperty(innerItem, 'checkBox')
-                ) {
-                    innerItem.checkBox.checked = !innerItem.checkBox.checked
-                    handleHeaderCheckedUpdate({
-                        row: index,
-                        column: innerIndex,
-                        checked: innerItem.checkBox,
-                    })
-                }
-                return innerItem
-            })
-        })
-        const { removeItemIndex, headerWithoutArrow } = handleCheckIfArrow(body, transformedData)
-
-        const checkedData = {
-            item: data,
-            from: 'body',
-            row: removeItemIndex !== undefined ? headerWithoutArrow : headerWithoutArrow[0],
-            rowIndex: transformedData.index,
-            itemIndex:
-                removeItemIndex !== undefined && removeItemIndex < transformedData.innerIndex
-                    ? transformedData.innerIndex - 1
-                    : transformedData.innerIndex,
-        }
-        getData(checkedData)
-        setBody(newData)
-    }
-
-    const handleHeaderCheckedUpdate = (checkedData) => {
-        const updatedHeader = header.slice()
-        const newCheckedArray = checkedArray.map((item, index) => {
-            return item.map((innerItem, innerIndex) => {
-                if (index === checkedData.column) {
-                    if (innerIndex === checkedData.row) {
-                        innerItem.checked = checkedData.checked.checked
-                    }
-                }
-                return innerItem
-            })
-        })
-
-        const newData = updatedHeader.map((item, index) => {
-            if (newCheckedArray[index]) {
-                const tempCheckedArray = []
-                newCheckedArray[index].map((innerItem) => {
-                    tempCheckedArray.push(innerItem.checked)
-                })
-                if (tempCheckedArray.every((i) => i)) {
-                    item.checkBox.checked = true
-                } else {
-                    item.checkBox.checked = false
-                }
-            }
-            return item
-        })
-
-        setHeader(newData)
-        setCheckedArray(newCheckedArray)
-    }
-
-    const handleCheckArrowAction = (item, rowPosition) => {
-        const status = item.status
-        const checkedOpenableRow = body[rowPosition].map((innerItem) => {
-            if (hasOwnerProperty(innerItem, 'status')) {
-                if (status === 'close') {
-                    innerItem.status = 'open'
-                } else {
-                    innerItem.status = 'close'
-                }
-            }
-            return innerItem
-        })
-        setBody((prev) => {
-            prev[rowPosition] = checkedOpenableRow
-            return [...prev]
-        })
-    }
-
-    const handleOpenCloseRowSingleArrow = (arrowRowIndex, arrowIndex, clickableItem) => {
-        let single = {}
-        const allArrows = []
-        const checkedOpenableRow = body[arrowRowIndex].map((item, index) => {
-            if (index === arrowIndex) {
-                if (item.status === 'close') {
-                    item.status = 'open'
-                } else {
-                    item.status = 'close'
-                }
-
-                single = item
-            }
-
-            if (hasOwnerProperty(item, 'status') && !hasOwnerProperty(item, 'arrowComponent')) {
-                allArrows.push(item)
-            }
-
-            return item
-        })
-
-        const checkedOpenableRowArrow = checkedOpenableRow.map((item) => {
-            if (hasOwnerProperty(item, 'arrowComponent')) {
-                if (single && single.status === 'close') {
-                    item.status = 'close'
-                } else if (single && single.status === 'open') {
-                    if (allArrows.every((i) => i.status === 'open')) {
-                        item.status = 'open'
-                    }
-                }
-            }
-
-            if (
-                hasOwnerProperty(clickableItem, 'theSame') &&
-                hasOwnerProperty(item, 'theSame') &&
-                clickableItem.theSame === item.theSame
-            ) {
-                item.status = clickableItem.status
-            }
-
-            return item
-        })
-
-        setBody((prev) => {
-            prev[arrowRowIndex] = checkedOpenableRowArrow
-            return [...prev]
-        })
-    }
-
-    const handleCheckArrowActionHeader = (e, item) => {
-        e.stopPropagation()
-        const checkedOpenableAllRows = header.map((innerItem, innerIndex) => {
-            if (item.checkIndex === innerIndex) {
-                if (item.status === 'close') {
-                    innerItem.status = 'open'
-                } else {
-                    innerItem.status = 'close'
-                }
-            }
-            return innerItem
-        })
-
-        const checkedOpenableAllRowsBody = body.map((innerItem) => {
-            return innerItem.map((iElem) => {
-                if (hasOwnerProperty(iElem, 'status')) {
-                    if (item.status === 'open') {
-                        iElem.status = 'open'
-                    } else {
-                        iElem.status = 'close'
-                    }
-                }
-                return iElem
-            })
-        })
-        setHeader(() => checkedOpenableAllRows)
-        setBody(() => checkedOpenableAllRowsBody)
-    }
-
-    const handleCheckDots = (e, item, index, innerIndex) => {
-        e.stopPropagation()
-        const checkBodyMore = body.map((elemItem, elemIndex) => {
-            return elemItem.map((elemInnerItem, elemInnerIndex) => {
-                if (elemIndex === index && hasOwnerProperty(elemInnerItem, 'dots')) {
-                    if (elemInnerIndex === innerIndex) {
-                        if (item.dotsStatus === 'deActive') {
-                            elemInnerItem.dotsStatus = 'active'
-                        } else {
-                            elemInnerItem.dotsStatus = 'deActive'
-                        }
-                    }
-                } else if (elemIndex !== index && hasOwnerProperty(elemInnerItem, 'dots')) {
-                    if (elemInnerIndex === innerIndex) {
-                        elemInnerItem.dotsStatus = 'deActive'
-                    }
-                }
-                return elemInnerItem
-            })
-        })
-        setBody(() => checkBodyMore)
-    }
-
-    const handleContentListClick = (e, data) => {
-        e.stopPropagation()
-
-        const { removeItemIndex, headerWithoutArrow } = handleCheckIfArrow(body, data)
-
-        const listData = {
-            from: 'body',
-            item: data.item,
-            rowIndex: data.index,
-            row: headerWithoutArrow,
-            listItemId: data.listContentId,
-            listItemContent: data.listContent,
-            itemIndex:
-                removeItemIndex !== undefined && removeItemIndex < data.innerIndex
-                    ? data.innerIndex - 1
-                    : data.innerIndex,
-            listItemInnerIndex: data.listContentIndex,
-        }
-
-        getData(listData)
-    }
-
-    const handleMoreOptionsClick = (data) => {
-        const { removeItemIndex, headerWithoutArrow } = handleCheckIfArrow(body, data)
-
-        const moreData = {
-            from: 'body',
-            item: data.item,
-            rowIndex: data.index,
-            options: data.options,
-            row: headerWithoutArrow,
-            itemIndex:
-                removeItemIndex !== undefined && removeItemIndex < data.innerIndex
-                    ? data.innerIndex - 1
-                    : data.innerIndex,
-            optionItem: data.optionItem,
-            optionIndex: data.optionIndex,
-        }
-
-        getData(moreData)
-    }
-
-    const handleTableClick = () => {
-        const checkBodyMore = body.map((elemItem) => {
-            return elemItem.map((elemInnerItem) => {
-                if (hasOwnerProperty(elemInnerItem, 'dots')) {
-                    elemInnerItem.dotsStatus = 'deActive'
-                }
-                return elemInnerItem
-            })
-        })
-        setBody(() => checkBodyMore)
-    }
-
-    useEffect(() => {
-        let checkedItems = []
-        const disabledArray = []
-        const checkBodyForChackedItems = dataBody.slice().map((item) => Object.values(item))
-
-        if (arrowShow) {
-            const arrowColumnCount = handleSetInsertIndex(checkBodyForChackedItems[0], arrowColumn)
-
-            const checkForInsertArrow = handleTransformDataForInsertArrow(
-                checkBodyForChackedItems,
-                arrowColumnCount,
-                'body'
-            )
-            const insert = checkForInsertArrow.map((item, index) => {
-                item.map((innerItem, innerIndex) => {
-                    if (hasOwnerProperty(innerItem, 'checkBox')) {
-                        if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
-                            if (innerItem.checkBox.disabled === true) {
-                                if (!disabledArray[innerIndex]) {
-                                    disabledArray[innerIndex] = { rowIndex: index, columnIndex: innerIndex }
-                                }
-                            }
-                        }
-                    }
-                })
-                return item
-            })
-            checkedItems = handleSetCheckboxArray(insert)
-            setBody(() => insert)
-        } else {
-            const insert = checkBodyForChackedItems.map((item, index) => {
-                item.map((innerItem, innerIndex) => {
-                    if (hasOwnerProperty(innerItem, 'checkBox')) {
-                        if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
-                            if (innerItem.checkBox.disabled === true) {
-                                if (!disabledArray[innerIndex]) {
-                                    disabledArray[innerIndex] = { rowIndex: index, columnIndex: innerIndex }
-                                }
-                            }
-                        }
-                    }
-                })
-                return item
-            })
-            checkedItems = handleSetCheckboxArray(insert)
-            setBody(() => insert)
-        }
-
-        setDisableArr(disabledArray)
-        setCheckedArray(() => checkedItems)
-    }, [dataBody, arrowColumn, arrowShow])
-
-    useEffect(() => {
-        if (arrowShow) {
-            const header = dataHeader.slice()
-            const arrowColumnCount = handleSetInsertIndex(header, arrowColumn)
-            const checkForInsertArrow = handleTransformDataForInsertArrow(header, arrowColumnCount, 'header')
-            setHeader(() => checkForInsertArrow)
-        } else {
-            setHeader(() => dataHeader)
-        }
-    }, [dataHeader, arrowColumn, arrowShow, disableArr])
-
-    return (
-        <>
-            <table
-                style={{
-                    width: '100%',
-                    borderCollapse: (tableRowItem ? tableRowItem : configStyles.TABLE.tableRowItem)
-                        ? 'separate'
-                        : 'collapse',
-                    borderSpacing: `0 ${tBodyRowMarginTop ? tBodyRowMarginTop : configStyles.TABLE.tBodyRowMarginTop}`,
-                }}
-                onClick={handleTableClick}
-                className={className ? className : configStyles.TABLE.className}
-            >
-                {header && header.length > 0 && (
-                    <thead>
-                        <tr
-                            style={{
-                                color: tHeadColor ? tHeadColor : configStyles.TABLE.tHeadColor,
-                                backgroundColor: tHeadBackgroundColor
-                                    ? tHeadBackgroundColor
-                                    : configStyles.TABLE.tHeadBackgroundColor,
-                                borderColor: hideBorder ? 'transparent' : '#eeeeee',
-                            }}
-                        >
-                            {header.map((item, index) => {
-                                return (
-                                    <TH
-                                        item={item}
-                                        hideBorder={hideBorder}
-                                        key={`${item}_${index}`}
-                                        handleCheckedHeader={handleCheckedHeader}
-                                        handleHeaderItemClick={handleHeaderItemClick}
-                                        handleCheckArrowActionHeader={handleCheckArrowActionHeader}
-                                        tHeadFamily={tHeadFamily ? tHeadFamily : configStyles.TABLE.tHeadFamily}
-                                        tHeadPadding={tHeadPadding ? tHeadPadding : configStyles.TABLE.tHeadPadding}
-                                        tHeadFontSize={tHeadFontSize ? tHeadFontSize : configStyles.TABLE.tHeadFontSize}
-                                        tHeadTextAlign={
-                                            tHeadTextAlign ? tHeadTextAlign : configStyles.TABLE.tHeadTextAlign
-                                        }
-                                        tHeadFontWeight={
-                                            tHeadFontWeight ? tHeadFontWeight : configStyles.TABLE.tHeadFontWeight
-                                        }
-                                        borderTopLeftRadius={
-                                            index === 0
-                                                ? tHeadBorderRadius
-                                                    ? tHeadBorderRadius
-                                                    : configStyles.TABLE.tHeadBorderRadius
-                                                : '0px'
-                                        }
-                                        borderTopRightRadius={
-                                            index === header.length - 1
-                                                ? tHeadBorderRadius
-                                                    ? tHeadBorderRadius
-                                                    : configStyles.TABLE.tHeadBorderRadius
-                                                : '0px'
-                                        }
-                                        tableColumnMinWidth={
-                                            tableColumnMinWidth
-                                                ? tableColumnMinWidth
-                                                : configStyles.TABLE.tableColumnMinWidth
-                                        }
-                                        tableColumnMaxWidth={
-                                            tableColumnMaxWidth
-                                                ? tableColumnMaxWidth
-                                                : configStyles.TABLE.tableColumnMaxWidth
-                                        }
-                                    />
-                                )
-                            })}
-                        </tr>
-                    </thead>
-                )}
-
-                {body && body.length > 0 && (
-                    <tbody
-                        style={{
-                            boxShadow: tBodyBoxShadow ? tBodyBoxShadow : configStyles.TABLE.tBodyBoxShadow,
-                        }}
-                    >
-                        {body.map((item, index) => {
-                            return (
-                                <tr
-                                    key={`${item}_${index}`}
-                                    style={{
-                                        backgroundColor: tableRowBGColor
-                                            ? tableRowBGColor
-                                            : configStyles.TABLE.tableRowBGColor,
-                                        borderBottom:
-                                            index === body.length - 1
-                                                ? 'none'
-                                                : tBodyRowBorder
-                                                ? tBodyRowBorder
-                                                : configStyles.TABLE.tBodyRowBorder,
-                                        borderColor: hideBorder ? 'transparent' : '#eeeeee',
-                                        boxShadow: (tableRowItem ? tableRowItem : configStyles.TABLE.tableRowItem)
-                                            ? tableRowBoxShadow
-                                                ? tableRowBoxShadow
-                                                : configStyles.TABLE.tableRowBoxShadow
-                                            : 'none',
-                                    }}
-                                >
-                                    {Object.values(item).map((innerItem, innerIndex) => {
-                                        return (
-                                            <TD
-                                                index={index}
-                                                item={innerItem}
-                                                hideBorder={hideBorder}
-                                                innerIndex={innerIndex}
-                                                row={Object.values(item)}
-                                                id={item.id ? item.id : ''}
-                                                handleCheckDots={handleCheckDots}
-                                                key={`${innerItem}_${index}_${innerIndex}`}
-                                                openListColor={
-                                                    openListColor ? openListColor : configStyles.TABLE.openListColor
-                                                }
-                                                tableColumnMinWidth={
-                                                    tableColumnMinWidth
-                                                        ? tableColumnMinWidth
-                                                        : configStyles.TABLE.tableColumnMinWidth
-                                                }
-                                                tableColumnMaxWidth={
-                                                    tableColumnMaxWidth
-                                                        ? tableColumnMaxWidth
-                                                        : configStyles.TABLE.tableColumnMaxWidth
-                                                }
-                                                openListFontSize={
-                                                    openListFontSize
-                                                        ? openListFontSize
-                                                        : configStyles.TABLE.openListFontSize
-                                                }
-                                                openListFontFamily={
-                                                    openListFontFamily
-                                                        ? openListFontFamily
-                                                        : configStyles.TABLE.openListFontFamily
-                                                }
-                                                handleCheckedBody={handleCheckedBody}
-                                                handleBodyActionClick={handleBodyActionClick}
-                                                handleMoreOptionsClick={handleMoreOptionsClick}
-                                                handleContentListClick={handleContentListClick}
-                                                tBodyColor={tBodyColor ? tBodyColor : configStyles.TABLE.tBodyColor}
-                                                rowItem={tableRowItem ? tableRowItem : configStyles.TABLE.tableRowItem}
-                                                rowRadius={
-                                                    tableRowRadius ? tableRowRadius : configStyles.TABLE.tableRowRadius
-                                                }
-                                                tBodyPadding={
-                                                    tBodyPadding ? tBodyPadding : configStyles.TABLE.tBodyPadding
-                                                }
-                                                tBodyFontSize={
-                                                    tBodyFontSize ? tBodyFontSize : configStyles.TABLE.tBodyFontSize
-                                                }
-                                                tBodyTextAlign={
-                                                    tBodyTextAlign ? tBodyTextAlign : configStyles.TABLE.tBodyTextAlign
-                                                }
-                                                tBodyFontFamily={
-                                                    tBodyFontFamily
-                                                        ? tBodyFontFamily
-                                                        : configStyles.TABLE.tBodyFontFamily
-                                                }
-                                                tBodyFontWeight={
-                                                    tBodyFontWeight
-                                                        ? tBodyFontWeight
-                                                        : configStyles.TABLE.tBodyFontWeight
-                                                }
-                                                borderRight={
-                                                    innerIndex === Object.values(item).length - 1
-                                                        ? 'none'
-                                                        : configStyles.TABLE.tBodyRowBorder
-                                                }
-                                                handleCheckArrowAction={handleCheckArrowAction}
-                                                handleOpenCloseRowSingleArrow={handleOpenCloseRowSingleArrow}
-                                            />
-                                        )
-                                    })}
-                                </tr>
-                            )
-                        })}
-                    </tbody>
-                )}
-            </table>
-        </>
-    )
-}
-
-Table.propTypes = {
-    getData: PropTypes.func,
-    dataBody: PropTypes.array,
-    arrowShow: PropTypes.bool,
-    dataHeader: PropTypes.array,
-    arrowColumn: PropTypes.number,
-    tableRowItem: PropTypes.bool,
-    tableRowRadius: PropTypes.string,
-    tableRowBGColor: PropTypes.string,
-    tableRowBoxShadow: PropTypes.string,
-    tableColumnMaxWidth: PropTypes.string,
-    tableColumnMinWidth: PropTypes.string,
-
-    tHeadColor: PropTypes.string,
-    tHeadFamily: PropTypes.string,
-    tHeadPadding: PropTypes.string,
-    tHeadFontSize: PropTypes.string,
-    tHeadTextAlign: PropTypes.string,
-    tHeadFontWeight: PropTypes.number,
-    tHeadBorderRadius: PropTypes.string,
-    tHeadBackgroundColor: PropTypes.string,
-
-    tBodyColor: PropTypes.string,
-    tBodyPadding: PropTypes.string,
-    tBodyFontSize: PropTypes.string,
-    tBodyBoxShadow: PropTypes.string,
-    tBodyTextAlign: PropTypes.string,
-    tBodyFontWeight: PropTypes.string,
-    tBodyFontFamily: PropTypes.string,
-    tBodyRowMarginTop: PropTypes.string,
-
-    className: PropTypes.string,
-    tBodyRowBorder: PropTypes.string,
-    openListColor: PropTypes.string,
-    openListFontSize: PropTypes.string,
-    openListFontFamily: PropTypes.string,
-    hideBorder: PropTypes.bool,
-}