ERROR in node_modules/@coreui/react-pro/src/components/table/CTable.tsx:186:21

[damir224]

Hello, CoreUi team,

I deleted node_modules and package-lock.json then run npm run i and after npm run start (react-scripts start) have the following error

here my dependencies

"dependencies": {
  "@coreui/coreui-pro": "^4.3.1",
  "@coreui/icons": "^2.1.0",
  "@coreui/icons-pro": "^2.0.3",
  "@coreui/icons-react": "^2.1.0",
  "@coreui/react-chartjs": "^2.1.0",
  "@coreui/react-pro": "^4.4.0",
  "@coreui/utils": "^1.3.1",
  ...
},

[mrholek]

@damir224 can you show me your table code?

[danielhoegel]

Hi @mrholek , I have the exact same errors as Damir after migrating to Core UI v4 and doing a fresh install. I am using the CTable component only at one place in the following way:

import {
    CTable,
    CTableBody,
    CTableDataCell,
    CTableHead,
    CTableHeaderCell,
    CTableRow,
} from '@coreui/react-pro';
import cn from 'classnames';
import React from 'react';

type TableColumnType<TableItemType> = {
    key: string;
    label?: string | ((items: Array<TableItemType>) => React.ReactNode);
    filter?: boolean;
    sorter?: boolean;
};

type CustomDataTablePropsType<TableItemType> = {
    columns: Array<TableColumnType<TableItemType>>;
    items: Array<TableItemType>;
    striped?: boolean;
    hoverable?: boolean;
    className?: string;
    theadTopSlot?: React.ReactNode;
    noItemsLabel?: React.ReactNode
    children?: (items: Array<TableItemType>) => JSX.Element[];
};

const CustomDataTable: <TableItemType extends Record<string, any>>(
    props: CustomDataTablePropsType<TableItemType>
) => JSX.Element = ({
    columns,
    items,
    striped = true,
    hoverable,
    className,
    theadTopSlot,
    noItemsLabel = 'No items yet',
    children,
}) => {
    return (
        <CTable striped={striped} hover={hoverable} responsive className={cn('mb-0', className)}>
            <CTableHead>
                {theadTopSlot && theadTopSlot}

                <CTableRow>
                    {columns.map((column) => (
                        <CTableHeaderCell scope="col" key={column.key}>
                            {typeof column.label === 'string'
                                ? column.label
                                : column.label && column.label(items)}
                        </CTableHeaderCell>
                    ))}
                </CTableRow>
            </CTableHead>

            <CTableBody>
                {children && children.length ? (
                    React.Children.map(children(items), (child) =>
                        React.cloneElement(child, {
                            className: cn({ 'cursor:pointer': child.props.onClick }),
                        })
                    )
                ) : (
                    <CTableRow>
                        <CTableDataCell colSpan={columns.length}>{noItemsLabel}</CTableDataCell>
                    </CTableRow>
                )}
            </CTableBody>
        </CTable>
    );
};

"dependencies": {
        "@coreui/coreui-pro": "^4.3.2",
        "@coreui/icons": "^2.1.0",
        "@coreui/icons-pro": "^2.0.3",
        "@coreui/icons-react": "^2.1.0",
        "@coreui/react-chartjs": "^2.1.0",
        "@coreui/react-pro": "^4.4.0",
        "@coreui/utils": "^1.3.1",
        "classnames": "^2.3.1",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        ...
}

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions

[danielhoegel]

@mrholek Please reopen the issue as I cannot see that the problem was fixed

[danielhoegel]

@mrholek The problem still exists in @coreui/coreui-prov v4.4.3 and @coreui/react-pro v4.7.2