Tradeshift / tradeshift-ui

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

Set visible attribute to row #866

Open renato-b opened 5 years ago

renato-b commented 5 years ago

I am having hard time to implement a table with rows that can be collapsed. I have to either grab the HTML tr element from the DOM and set the ts-hidden class or insert/remove the rows to collapse and re-render the table.

It would make things easier if it was possible to programmatically set the attribute visible to rows as it is currently possible for columns.

Having that feature I could simply hide the rows with few clean lines of code:

const tbl = ts.ui.get('#myTable');
tbl.rows()[rowIndex].visible = false;

Alternatively it would be handy to be able to have a reference to the tr element and set the class ts-hidden

Table with collapsable rows are useful to group items that correlate together like invoices, credit notes and short payments.

Cheers, Renato

Screenshot 2019-10-03 at 13 43 33
zdlm commented 5 years ago

Hi, @renato-b , This is not such easy like add hide and show in the table. The data structure is totally different. It is like a List tree instead of a table. We are making common components for all the teams. We might spend triple time than you to make sure all scenario are working perfect. I think you can make your own table or list to show this. You can reuse pager and some css in the table. https://github.com/Tradeshift/tradeshift-ui/blob/master/src/runtime/less/ts-tables.less
That would be faster to implement.