FluentDataGrid - Fixed Column & Header

[InCerryGit]

Hi everyone:

Since there are many columns, I want to fix the first and last columns, similar to the functionality in Element UI's Table with Fixed Column. How can I achieve this?

[vnbaaij]

We currently have no way to do that

[hml-coder]

For a pure CSS solution you could try something like this although this is as far as I went with testing and it's possible that a future release of the FluentDataGrid may break these css styles.

The th { display: table-cell!important; } is required for now to prevent the header text from shrinking but a fix was added in #3156 so that style override won't be needed for long.

Make sure the z-index of the fixed columns is at least 3 since the current z-index of column headers is 2.

<div class="table-container">
    <FluentDataGrid TGridItem="Test" Items="items.AsQueryable()">
        <TemplateColumn Sortable="true" Title="First Column" Class="fixed-column first-column" >
            @context.ColumnFirstFixed
        </TemplateColumn>
        <TemplateColumn Sortable="true" Title="Second Column">
            @context.Column2
        </TemplateColumn>
        <TemplateColumn Sortable="true" Title="Third Column ">
            @context.Column3
        </TemplateColumn>
            <TemplateColumn Sortable="true" Title="Fourth Column" >
            @context.Column4
        </TemplateColumn>
            <TemplateColumn Sortable="true" Title="Fifth Column" >
            @context.Column5
        </TemplateColumn>
        <TemplateColumn Sortable="true" Title="Last Column" Class="fixed-column last-column">
            @context.ColumnLastFixed
        </TemplateColumn>
    </FluentDataGrid>
</div>
@code {
    class Test
    {
        public string ColumnFirstFixed = "First Fixed";
        public string Column2 = "Column 2";
        public string Column3 = "Column 3";
        public string Column4 = "Column 4";
        public string Column5 = "Column 5";
        public string ColumnLastFixed = "Last Fixed";
    }

    private List<Test> items = new()
    {
        new(),
    };

}

<style>

    th {
        display: table-cell!important;
    }

    .table-container {
        width: 100%;
        overflow-x: auto;
        position: relative;
    }

    .fixed-column {
        position: sticky;
        background-color: #f9f9f9;
        z-index: 3!important;
    }

    .first-column {
        left: 0;
    }

    .last-column {
        right: 0;
    }

</style>

[hml-coder]

Need to use .fixed-column { position: sticky!important ... } when ResizableColumns="true"