Data Grid 2 - Freeze Pane for Excel Like feeling

0
I need 13 attributes displayed in my Data Grid 2. The first five attributes should remain fixed as columns, while the remaining columns should move with horizontal scrolling. The first five columns must stay locked on the left side, similar to Excel’s Freeze Panes functionality.
asked
1 answers
0

Hi Amol,


Add a 'freeze-grid' class to your datagrid.

Then in your theme/web/custom.scss

.freeze-grid {
    .mx-datagrid-client {
        overflow-x: auto;

        table {
            border-collapse: separate;
            border-spacing: 0;
        }

        thead tr th:nth-child(1), tbody tr td:nth-child(1) { position: sticky; left: 0px; z-index: 2; background-color: #ffffff; }
        thead tr th:nth-child(2), tbody tr td:nth-child(2) { position: sticky; left: 150px; z-index: 2; background-color: #ffffff; }
        thead tr th:nth-child(3), tbody tr td:nth-child(3) { position: sticky; left: 300px; z-index: 2; background-color: #ffffff; }
        thead tr th:nth-child(4), tbody tr td:nth-child(4) { position: sticky; left: 450px; z-index: 2; background-color: #ffffff; }
        thead tr th:nth-child(5), tbody tr td:nth-child(5) { position: sticky; left: 600px; z-index: 2; background-color: #ffffff; }

        thead tr th:nth-child(-n+5) { z-index: 3; }
    }
}

Adjust the width as per your requirement.

answered