Answers

• allan Posts: 63,494Questions: 1Answers: 10,470 Site admin

  October 16

  Hi,

  Thanks for posting this! The issue as I see it is that the most common use case for RowGroup is to have a single cell spanning over the whole width of the table (e.g. like this).

  Fundamentally that is incompatible with FixedColumns, which applies position: sticky to the fixed columns.

  It does however make a lot more sense in your use case. Could you do it on draw (and a few other events)? That is when the function you linked to is called.

  Allan
• rodriformiga Posts: 47Questions: 12Answers: 0

  October 16 edited October 16

  Hi Allan, that's right, I understood the basics, and that's why I suggested creating a callback in the original DataTable function, where in this callback I could include new elements to apply the CSS sticky.

  If you look at my example, there is a point where the callback could be placed, and in my case I fixed the code by searching for the tags according to my specific need.
  If there was this callback directly in the component, I would simply place my selector to return the elements. Other approaches could be taken depending on each case,

  
• rodriformiga Posts: 47Questions: 12Answers: 0

  October 16 edited October 16

  PS: complementary.

  As callback I think in a new option in FixedColumn, as example cellCallback:

  var tab = new DataTable('#example', {
    rowGroup: { dataSrc: 3, startRender: rowGrpIni},
    fixedColumns: {start: 2, cellCallback: function(settings){ return $("#example td.my_td_to_sticky"); } },
    //....
  });
  

  And, in the FixedColumn extension code:

              ........
  
              applyStyles(dt.column(idx + ':visible', { page: 'current' }).nodes().to$(), 'body');
              if (footer) {
                  footer.forEach(function (row) {
                      if (row[idx]) {
                          applyStyles($$1(row[idx].cell), 'footer');
                      }
                  });
              }
  
              //
              //MY CODE
              var callbackNodes;
              if (_this.cellCallback){
                if (typeof _this.cellCallback === "string") {
                  callbackNodes = $$1(_this.cellCallback, _this.s.dt.table().node());
                }else if (typeof _this.cellCallback === "function"){
                  callbackNodes = _this.cellCallback(_this.s.dt.settings /*think others useful parameter to pass*/);
                }
              }
              if (callbackNodes && callbackNodes.length > 0){
                applyStyles(callbackNodes, 'body');
              }
              //END MY CODE
              //
  
              ........
  

  something like that....
• allan Posts: 63,494Questions: 1Answers: 10,470 Site admin

  October 17 Answer ✓

  I was wondering why there needs a to be a new callback - when draw could perhaps have been listened for, but I see now that you are modifying the td_groups object.

  I might be wrong, but I feel it is very unlikely many other developers will make use of that ability. However, I see little harm in adding such an option - I think an event might be a better option that a callback in this case, using trigger() to fire the event off, and pass in the groups. I'd take a PR for that.

  Allan