Datatable: Remove Expanded 'td' element returned with 'tr'

[diamanthaxhimusa]

Describe the feature you would like to see added

Is there any particular reason on why rowExpansionTemplate returns <tr><td /></tr>?

Is your feature request related to a problem?

I need to have same alignment of the expanded view as in the rows

[melloware]

I don't understand what you are asking? you define rowExpansionTemplate for what you want rowExpansion to look like? Can you elaborate on your issue or provide a Code Sandbox reproducer?

[diamanthaxhimusa]

@melloware sure here you go https://codesandbox.io/s/elastic-rain-s0wcg7

What I want is when the row is expanded to be able to have same table alignment. When you expand a row in the example I want the price xx with the lightblue background to be aligned with the price column.

To cut it short, I need the Row Expansion to render only the tr and the rest to be handled by me. Thanks.

[melloware]

I see what you mean. It fills the table width with a colspan and then you fill in the guts.

 <tr id={id} className="p-datatable-row-expansion" role="row">
                        <td role="cell" colSpan={colSpan}>
                            {content}
                        </td>
</tr>

[melloware]

PR submitted so you will be able to tell the table you want control of the rendering.

This will allow you to take control of the rendering like this..

const rowExpansionTemplate = (data, options) => {
    options.customRendering = true;

    return (
      <>
        <td colSpan={2}>name xx</td>
        <td style={{ background: "lightblue" }}>price template expanded</td>
      </>
    );
  };

[diamanthaxhimusa]

@melloware great!