How to transpose a datatable?

Webix JS
#1

Hi,

I have datatable with long list of columns, therefore I want to transpose the table so that the columns are vertically arranged on the side instead of horizontally above.

Datatable snippet : https://snippet.webix.com/0lo1kv4y

Please help if there is any way to achieve it.

Thanks.

#2

Hello,

You can achieve a transposed datatable by converting its data in the following way: Code Snippet. But please note that you will not be able to use header sorters and filters in this way, and will have to implement custom ones by API.

#3

It is of the following structure:

 $('#myDataTable tbody').on('click', 'tr.group + tr td.details-control', function () {
            //console.log($(this).closest('tr'));
            var tr = $(this).closest('tr');
            var row = table.row(tr);
            //console.log(table.row(tr).data());
            if (row.child.isShown())
            {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child(format(row.data())).show();
                tr.addClass('shown');
              var batata=  $('#myDataTablex').DataTable({
                    "info":false,
                    "bFilter": false,
                    "bSort": false,
                    "bPaginate":false

              });

              $('#myDataTablex').dataTable().makeEditable({

                  "aoColumns": [
                 ......columnByColumnDefinitions here...]
              });
            }
        });

    });
#4

Hi Helga,

It is working fine for me. However, if the maintable columns and value changes (lets say for a particular case or input) then the transposed table is not able to show the data , it is only showing the table columns on the LHS.
I noticed that for me there is no source[i].id, it is only webix.uid(), so the values are not coming. Even in your snippet if I only use var id = webix.uid() instead of the ternary operator, it is not working . Please see this snippet : https://snippet.webix.com/h86ziezh

Hi gracylayla , could you please explain little bit what is this $(’#myDataTable tbody’) or may be a snippet?

Thanks both of you.

#5

Hi Helga,

If I do not have any ‘id’ as key and using the webix.uid() , the values are not rendering, what should I do in that case? Snippet : https://snippet.webix.com/h86ziezh

#6

you must not use plain webix.uid(); in your case.
your id should be common for row.
use array index or set row id if it is absent
https://snippet.webix.com/yvbx87hh