[SalesForce] Text doesn’t wrap in

and

I have assumed, that data in criterion will be in this format.

{
    field1: "value"
    field2:223,
    ...
    ...
}

As we can't use expressions in LWC HTML, you need to preprocess the table data into an array. Basically a two-dimensional array. Instead of having each row as an object, I changed it to an array of key, fieldApiName, and value because we need generic field identifiers.

let criterionDataArray = [];
this.criterionArray.forEach((criterionRow, index) => {
    let newRow = Object.keys(criterionRow).map((currentValue, key) => {
        return {
            fieldApiName: key,
            value: currentValue,
            key: `${index}${key}`
        }
    });
    criterionDataArray.push({ Id: index, data: newRow });
});
this.tableData = criterionDataArray;

This is how you can iterate that.

HTML

<template if:true={tableData} for:each={tableData} for:item="criterion" for:index="index">
    <tr key={criterion.Id}>
        <td>{index}</td>
        <template if:true={criterion.data} for:each={criterion.data} for:item="row">
            <td data-field-api-name={row.fieldApiName} key={row.key}>{row.value}</td>
        </template>
    </tr>
</template>

When you need to save the data back, you need to convert this into an original format. You can do the same using array.map method.

You wont be able to display fields in the datatable from related objects by traversing with . What you can do is transform the resulting list of getPriceBookEntry into another array of objects using the map function like below.

@track data;
@track columns = columns;
@api recordId;
error;

const columns = [
    {
        label: 'PRODUCT NAME',
        fieldName: 'productName',
        type: 'text',
        cellAttributes: { alignment: 'left' }

    }
];

@wire(getPriceBookEntry, {idProduct:'$recordId' })
 myPriceBooks(result) {
     if (result.data) {
         this.data = result.data.map(row=>{
             return{...row, productName: row.Product2.Name}
         })
         this.error = undefined;

     } else if (result.error) {
         this.error = result.error;
         this.data = undefined;
     }

 }

    <template>
            <lightning-card title="Products" icon-name="standard:product" > <br/>
               <div style="width: auto;">
                   <template if:true={data}>
                           <div class="slds-grid slds-gutters">
                                <lightning-datatable data={data}
                                            columns={columns}
                                            key-field="id"
                                            hide-checkbox-column="true"
                                            onrowaction={handleRowActions}
                                            onsave={handleSave}
                                </lightning-datatable>
                           </div>
                   </template>
               </div>
           </lightning-card>   
    </template>