Configuring the minimum width in the ASP.NET CORE Pivot Table control

27 Mar 20252 minutes to read

The pivot table control allows you to configure its minimum width using the minWidth property. This property is useful for ensuring the component maintains a consistent layout and responsiveness across different screen sizes.

When the pivot table has the Grouping Bar enabled, the minWidth property is set to 400 pixels by default to accommodate the grouping bar UI elements. Without the Grouping Bar, the minWidth property defaults to 310 pixels.

To customize the minimum width, set the minWidth property to your desired value (in pixels) as shown below:

CSHTML

<ejs-pivotview id="PivotView" width="250" load="onLoad">
    <e-datasourcesettings dataSource="@ViewBag.DataSource">
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasourcesettings>
</ejs-pivotview>

<script>
    function onLoad(args) {
        var pivotTableObj = document.getElementById('PivotView').ej2_instances[0];
        pivotTableObj.minWidth = 250;
    }
</script>

MinWidth.cs

public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}