Data input on the header and first column

Webix JS
1

Hello to everyone!

I’m trying to create a datatable with an array of data, like the example:

[1,“The Shawshank Redemption”,1994,678790,9.2,1]

[2,“The Godfather”,1972,511495,9.2,2]
…

Imagine that I want to have :

  • on the first column, the title of the film (ex : The Shawshank Redemption), ( and this is simple…)

  • on the other columns, I want to see :

  1. on the header, the different years in the data (ex: 1972, 1973, 1994…)

  2. on the cell, the votes for each film, identified by the header and the cell of the first column (ex: for ‘The Godfather’ in the cell of the first column and for 1972 in the header, i want to see 678790.)

Is it possible to have it? How? And in case, could it be possible to have an example of it on snippets?
P.S: I don’t need a pivot table, because i don’t want to have aggregation formula or drag and drop between columns and rows.

Thank you very much!

Alex

2

Hi Alex,

You can generate such columns on datatable ready event (when data has already been loaded). Each column should have a peculiar template. After the refreshColumns() call the grid will be updated.

ready:function(){
  var cols = [], grid = this;
  this.data.each(function(obj){
    grid.config.columns.push({ 
          id:obj.data2, 
          header:obj.data2, 
          template:function(item){
              return (obj.data2==item.data2)? item.data3:"";
          }});
  });
  grid.refreshColumns();
}

http://webix.com/snippet/1972c611

3

Hello Helga!

First of all I would like to say that webix is a fantastic library; however, now I cannot realize my use case that is very similar to the one posted here; in fact I would like to have:

  • unique content of the cell in the first column

  • unique columns

  • an upper column with colspan equals to the number of column ( it represents the ‘title’ of the columns)

Just to understand it better, the snippets shows how the data appears;

http://webix.com/snippet/f03aa297

in order to visualize data, I would like to have these features:

  • the number of rows should be limited to two,

  • the number of columns should be limited to four,

  • the content of the cell should be the one identified by the related row and the column ;

  • there should be an upper column that sorround the other column that represent the dates ( with a colspan equal to the number of date columns);

If you can, could you please show how to realize it?

Thanks in advance,

Best regards,

Faber

4

I see.

There’s no solution out of box, but you write a function similar to the above mentioned that will modify the data and create columns for the datatable.

It’s also problematic ho handle these issues using jsarray, as the final data item (after processing) should look like this:

[1,"The Shawshank Redemption", 66011, 66022, 66033, 66044, 9.2,1]

Same in json looks much better:

{"id":1, "title":"The Shawshank Redemption", 
"1991":66011, "1992":66022, "1993":66033, "1994":66044, 
"rating":9.2, "rank":1}