Span in cell of Datatble

Hello community,

Actually I working in a schedule to all subject of a school. Some materias have 2 hours concecutive, so I use the propiety span to put together these materias using a little function that @AlenaLisava shered me.

         function spans_column(data_bloque){ 
            let columns = [
               {id:"dia_2",   header:"Lunes",    },
               {id:"dia_3",   header:"Martes",   },
               {id:"dia_4",   header:"Miércoles",},
               {id:"dia_5",   header:"Jueves",   },
               {id:"dia_6",   header:"Viernes",  },
               {id:"dia_7",   header:"Sábado",   },
            ];
            
            let idArr  = [];
            
            columns.forEach(element => {
               idArr.push(element.id);
            });

            let newArr = [];
            idArr.forEach(columnId => {
               let arr = [];
               data_bloque.forEach(element => {
                     arr.push(element[columnId]);
               });

               let id=0;
               let height = 1;
               let temp = [];
   
               for (i=1; i<arr.length; i++){
                  if (arr[i-1] == arr[i]){
                     console.log(arr[i-1] + '-'+  '-' +arr[i]);
                     if(height == 1){
                        id = i - 1;
                     }
                     height ++;
                  }
                  else if((height != 1) && (arr[i-1] !== arr[i])){
                     if (arr[id] !== '') {temp = [id + 1, columnId, 1, height, arr[id], arr[id].includes('hr') ? 'css_span_hr' : "css_span"];}
                     newArr.push(temp);
                     height = 1;
                  }
               }
            });
            // console.log(newArr);
            return newArr;
         }

The problem is thar some casesm, could be two diferent subject in the same hour. When this happen the result in the cell of the datable is just de first subject.


This is my result.

I need show someting like this:
1

I tried to use differents tools like rowHeight, but also only shows the first subject.
This is part of JSON (specifically the field that you indicate in the images).

[
 {
    "id": "3",
    "hora": "09:00-09:55",
    "id": "3",
    "dia2": "I8950T (63914)<hr class='divider'>I8960T (63895)",
    "id": "3",
    "dia3": "",
    "id": "3",
    "dia4": "I8950T (63914)<hr class='divider'>I8960T (63895)",
    "id": "3",
    "dia5": "",
    "id": "3",
    "dia6": "I8950T (63914)",
    "id": "3",
    "dia7": "",
    "id": "3",
    "dia_2": "<63914 (I8950/T)<hr class='divider'><63895 (I8960/T)",
    "id": "3",
    "dia_3": "",
    "id": "3",
    "dia_4": "<63914 (I8950/T)<hr class='divider'><63895 (I8960/T)",
    "id": "3",
    "dia_5": "",
    "id": "3",
    "dia_6": "<63914 (I8950/T)",
    "id": "3",
    "dia_7": "",
    "id": "3",
    "color2": "background:rgba(102, 255, 102, 0.3)",
    "id": "3",
    "color3": "#FFFFFF",
    "id": "3",
    "color4": "background:rgba(102, 255, 102, 0.3)",
    "id": "3",
    "color5": "#FFFFFF",
    "id": "3",
    "color6": "background:rgba(102, 255, 102, 0.3)",
    "id": "3",
    "color7": "#FFFFFF",
    "id": "3",
    "span2": "0",
    "id": "3",
    "span3": "0",
    "id": "3",
    "span4": "0",
    "id": "3",
    "span5": "0",
    "id": "3",
    "span6": "0",
    "id": "3",
    "span7": "0"
 }
]

Someone knows hows can i do this?

Thank you so much!!

Hi @CesarCTA ,
Span property works good for this case. You should pass the data in a different way though. You pass two different values into one row, but they should be placed in separate rows. And the function will work correctly then.
Please, check the snippet and pay attention to the data: Code Snippet

For this purpose it might have sense to consider Webix scheduler component in the week mode