FixedColumns and RowGroup aproach sollution

rodriformiga

Hey, @allan
In your documentation, there is an incompatibility between the FixedColumn and RowGroup extensions.
Well, I have this implementation in my system (still using DataTable v1.10 but migrating to 2.x).
In a very specific case of mine, I really need these two plugins to work together, so by analyzing the code I was able to make it work with a few extra lines of code.
In my RowGroup render, I create the entire grouping row with all the columns, according to the number of columns in the DataTable
Therefore, if in the _fixColumn function, there was a callback function or a trigger at the point where I indicated in my example, I could easily identify the cells to fix and thus the DataTable would be compatible for my case, and it would also be possible to handle other cases that require another approach.

I would like you to evaluate the possibility of applying this approach in the official version of Datatable

Thanks

Link to test case: https://live.datatables.net/nirohuxu/2/edit?js,output

allan

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

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

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

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