Table.jsx

// option 1
    const TableLeftoverSpace = () => {
        const hasLeftoverSpace = body.length % header.length !== 0;
        
        if(hasLeftoverSpace) {
            return (
                <div className={styles[`table-leftover-space`]} />
            );
        }
    };
    return (
        <div className={styles[`table-wrapper`]} style={{'--columns': header.length}}>
            {header.map(TableHeaderItem)}
            {body.map(TableBodyItem)}
            <TableLeftoverSpace />
        </div>
    )
    
// option 2     
    const hasLeftoverSpace = body.length % header.length !== 0;
    return (
        <div className={styles[`table-wrapper`]} style={{'--columns': header.length}}>
            {header.map(TableHeaderItem)}
            {body.map(TableBodyItem)}
            {hasLeftoverSpace && (
                <div className={styles[`table-leftover-space`]} />
            )}
        </div>
    )
    
// option 3
    return (
        <div className={styles[`table-wrapper`]} style={{'--columns': header.length}}>
            {header.map(TableHeaderItem)}
            {body.map(TableBodyItem)}
            {() => {
                const hasLeftoverSpace = body.length % header.length !== 0;
                if(hasLeftoverSpace) {
                    return (
                        <div className={styles[`table-leftover-space`]} />
                    );
                }
            }}
        </div>
    )