JSFiddle - React, Tailwind, and code Playground

by falconeri

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flexmonster Bug Test</title>
</head>
<body>
    <div id="flexmonster-container"></div>

    <script src="https://cdn.flexmonster.com/flexmonster.js"></script>
</body>
</html>

CSS

:root {
    /* Desired maximum width */
    --column-width: 20px;
}

#fm-pivot-view .fm-grid-column,
#fm-pivot-view .fm-grid-column-mobile {
    width: var(--column-width) !important;
}

#fm-pivot-view .fm-grid-header,
#fm-pivot-view .fm-grid-header-mobile {
    max-width: 10px !important;
}

#fm-pivot-view .fm-scroll-content .fm-grid-column,
#fm-pivot-view .fm-grid-column-mobile {
    width: 100px !important;
}

.fm-cell[data-c]:not([data-c='0']){
    width: var(--column-width) !important;
}

.fm-handle {
    display: none;
}

JavaScript

let pivot = new Flexmonster({
    container: "flexmonster-container",
    componentFolder: "https://cdn.flexmonster.com/",
    toolbar: true,
    height: 520,
    report: {
        dataSourceType: "csv",
        dataSource: {
            filename: "https://raw.githubusercontent.com/falconeri/flexmonsterbug/main/generated_data.csv"
        },
        mapping: {
            "price": {"caption": "PRICE", "type": "number"},
            "day": {"caption": "DAY", "type": "date string"},
            "hour": {"caption": "HOUR"},
            "hour_id": {"caption": "HOUR ID", "type": "string"},
            "operation": {"caption": "OPERATION"},
            "operation_id": {"caption": "OPERATION ID", "type": "string"},
            "country": {"caption": "COUNTRY"},
            "country_id": {"caption": "COUNTRY ID", "type": "string"},
            "operator": {"caption": "OPERATOR"},
            "operator_id": {"caption": "OPERATOR ID", "type": "string"},
            "aggregations": {
                "number": [
                    "sum",
                    "average",
                    "median",
                    "min",
                    "max",
                    "percent",
                    "percentofcolumn",
                    "percentofrow",
                    "percentofparentcolumntotal",
                    "percentofparentrowtotal",
                    "differenceofcolumn",
                    "differenceofrow",
                    "%differenceofcolumn",
                    "%differenceofrow",
                    "runningtotalsofcolumn",
                    "runningtotalsofrow"
                ]
            },
        },
        slice: {
            "reportFilters": [
                {
                    "uniqueName": "country",
                    "filter": {
                        "members": ["country.[india]"]
                    }
                }
            ],
            "rows": [
                {"uniqueName": "day"},
               ...