Frozen Header

22 May 2017 / 2 minutes to read

Allows you to freeze the header of the Grid so that it will be always visible when scrolling the content with a large number of rows or columns providing a precise view.

html

<div id="PivotGrid1"></div>

<script type="text/babel">
    //...
    var frozenHeaderSettings= {enableFrozenHeaders : true}  //To Freeze the both Row and Column headers
    $(function(){
        ReactDOM.render(
        <EJ.PivotGrid id="PivotGrid" frozenHeaderSettings={frozenHeaderSettings}></EJ.PivotGrid>,
        document.getElementById('PivotGrid1')
        );
    });
</script>

We can also freeze the row/column headers individually by setting the below properties.

html

<script type="text/babel">
    //...
    var frozenHeaderSettings= {enableFrozenRowHeaders : true}  //To Freeze the Row headers only
    $(function(){
        ReactDOM.render(
        <EJ.PivotGrid id="PivotGrid" frozenHeaderSettings={frozenHeaderSettings}></EJ.PivotGrid>,
        document.getElementById('PivotGrid1')
        );
    });
</script>

html

<script type="text/babel">
    //...
    var frozenHeaderSettings= {enableFrozenColumnHeaders : true}  //To Freeze the Column headers only
    $(function(){
        ReactDOM.render(
        <EJ.PivotGrid id="PivotGrid" frozenHeaderSettings={frozenHeaderSettings}></EJ.PivotGrid>,
        document.getElementById('PivotGrid1')
        );
    });
</script>