Tradeshift / tradeshift-ui

The Tradeshift UI Library & Framework
https://ui.tradeshift.com
Other
33 stars 45 forks source link

[Table] support combining cells #537

Open jmredfern opened 6 years ago

jmredfern commented 6 years ago

Choose the section that applies to you and use the template to help us figure out how we can help you.


Bug report

Tradeshift UI version affected

v9.2.0

Expected Behavior

Actual Behavior

Steps to reproduce

Screenshots (optional)


Feature request

Please see the screenshot below, from v9.3.13.

The third column is in fact two columns with the vertical separator hidden. This allows multiple icons to be placed in the third column - in fact the switch is in the 3rd column and the edit icon is in the 4th column.

We would like to be able to combine the 3rd and 4th columns in the title row so that the description can span two columns.

Description of feature

Example use cases and/or Prototype links

Designs and/or Prototype screenshots

image

wiredearp commented 6 years ago

I imagine that this Table layout might be just as easily implemented via support for multiple "extras" in a single cell, for example by collecting the JSON objects in an array structure. In this case:

[
  {
    item: 'Switch',
    checked: true
  },
  {
    item: 'Icon',
    type: 'ts-icon-edit',
    color: 'blue'
  }
]

As a temporary workaround, perhaps you can add the classname 'ts-table-list' to the Table and simply use two columns for now (using an empty string as header text for the Edit column). This classname will remove the vertical lines from the Table so that perhaps you won't notice that these are actually two columns :question: and this layout will by the way become default when we switch to the "white design" in an upcoming overhaul.