nicolaskruchten / pivottable

Open-source Javascript Pivot Table (aka Pivot Grid, Pivot Chart, Cross-Tab) implementation with drag'n'drop.
https://pivottable.js.org/
MIT License
4.33k stars 1.07k forks source link

Cannot add custom sort to callback function #1331

Open Ivanbk opened 1 year ago

Ivanbk commented 1 year ago

I am trying to create two tables, one master table and one slave table, every change except for the value has to be reflected from table one to table two. But when it comes to the sorters configuration i cannot make it work with a onRefresh function. I am modifying the code from this fiddle link to make it easier to debug and ask questions. my code is the following

`

$(function() { var sortAsFunction = $.pivotUtilities.sortAs(["Yes","No"]); var dataClass = $.pivotUtilities.PivotData; var renderers = $.extend( $.pivotUtilities.renderers, $.pivotUtilities.plotly_renderers, );

var onRefreshCallback = function(config) {
    // Get the current state of the first pivot table
    var config = $("#output1").data("pivotUIOptions");
    var config_copy = JSON.parse(JSON.stringify(config));
    delete config_copy["aggregators"];
    delete config_copy["renderers"];
    config_copy["vals"] = ["total_bill"];
    config_copy["sorters"]["smoker"] = $.pivotUtilities.sortAs(["Yes","No"]);
    var final_config = JSON.stringify(config_copy);
    $("#output3").text(JSON.stringify(config_copy, undefined, 2));
    if (config) {
        $("#output2").pivotUI($.pivotUtilities.tipsData, JSON.parse(final_config) ,true);
    }
}.bind($.pivotUtilities);

// Initialize the first pivot table
$("#output1").pivotUI($.pivotUtilities.tipsData, {
    rows: ["sex"],
    cols: ["smoker"],
    vals: ["tip", "total_bill"],
    sorters: {"smoker": sortAsFunction},
    aggregatorName: "Sum over Sum",
    rendererName: "Table",
    renderers: renderers,
    aggregatorName: "Sum",
    rendererName: "Table",
    onRefresh: onRefreshCallback
});

// Initialize the second pivot table (will be overwritten by the first)
$("#output2").pivotUI($.pivotUtilities.tipsData, {
    rows: ["sex"],
    cols: ["smoker"],
    vals: ["tip", "total_bill"],
    sorters: {"smoker": sortAsFunction},
    aggregatorName: "Sum over Sum",
    rendererName: "Table",
    renderers: renderers,
    aggregatorName: "Sum",
    rendererName: "Table"
}, true);});

`

the sorters: {"smoker": sortAsFunction} does not work with table 2, i have tried everything.