[ui5-table] Responsive Table Inside Dialog?

[chrisl7186]

I am attempting to display a table that behaves responsively inside a regular dialog component.

Is this possible?

I am currently trying the following:

`const tableColumns = ( <>

{'Name - a really long column name to take up more width'}

  <TableColumn>
    <Label>
      {'Age'}
    </Label>
  </TableColumn>
  <TableColumn demandPopin popinText={'City'} minWidth={500}>
    <Label>
      {'City'}
    </Label>
  </TableColumn>
  <TableColumn demandPopin popinText={'Zip'} minWidth={500}>
    <Label>
      {'Zip'}
    </Label>
  </TableColumn>
  <TableColumn demandPopin popinText={'Pet'} minWidth={500}>
    <Label>
      {'Pet'}
    </Label>
  </TableColumn>
</>

);`

However, it does not look like table is collapsing as seen here in the table example.

Here is what is happening currently when i have a table component inside of the dialog component.

I have gotten to this work in other circumstances that i did not fully understand at the time and still do not.

Thanks.

[Lukas742]

Hi @Lettucez

as the Table component is developed by the ui5-webcomponents team, I transferred the issue to them. You can also checkout the AnalyticalTable which offers PopIn columns as well.

I'm also not 100% sure why this is happening, but it's not only happening in a dialog, but also without one. For me it looks like when the table goes into overflow, before the minWidth is reached, it doesn't work anymore.

I created a codesandbox to demonstrate this. If you set the minWidth to e.g. 500 then the popin logic doesn't work, but if you set it to 800 it's working again. Strangely if I set the last column to 1200 and the other two to 800 only the last column pops in.

Edit: The same thing is happening with pure ui5-webcomponents. codesandbox

[kskondov]

Hello @SAP/ui5-webcomponents-topic-rl I am forwarding this issue to you, to check if this is the desired behaviour for the Table component popin logic

[chrisl7186]

I created a codesandbox to demonstrate this. If you set the minWidth to e.g. 500 then the popin logic doesn't work, but if you set it to 800 it's working again. Strangely if I set the last column to 1200 and the other two to 800 only the last column pops in.

Ah, what you are describing is exactly what I experienced when I mentioned "I have gotten to this work in other circumstances that i did not fully understand at the time and still do not.", in that case I kept playing with the min width values and eventually got it to "work"- but it did not collapse at the "minwidth" property values I had set.

Interestingly, it began to "work" when I set the width on the container (in my case, the dialog component) to width: 80%. (Now whether it began to respect the minWidth property values I am not sure.)

[Martotko]

Hi @Lettucez,

I've checked the samples and there you are using ui5-label as a column. The label has a default appearance to nowrap the text which causes the issue. You could handle such cases where the label is too long by setting "wrap" property of the ui5-label. Here is the documentation where this is described - https://sap.github.io/ui5-webcomponents/playground/components/Label/

Best regards, Martin