[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

    Blazor Row Pinning

    The Ignite UI for Blazor Data Table / Data Grid allows Row Pinning by either using keys or the underlying data source items. When a row is pinned, it will be duplicated at the top of the blazor data grid and remain fixed there with light gray background and its actual row will be rendered with low opacity.

    Blazor Row Pinning Example

    You can pin rows in the Blazor data grid by adding the target row’s underlying data item to the pinnedItems collection of the Blazor grid.

    Code Snippet

    <IgbDataGrid Height="100%" Width="100%"
        @ref="DataGridRef"
        DataSource="DataSource" />
    
    @code {
    
        private IgbDataGrid grid;
        public IgbDataGrid DataGridRef
        {
            get
            {
                return grid;
            }
            set
            {
                grid = value;
                OnGridChanged();
                StateHasChanged();
            }
        }
    
        private void OnGridChanged()
        {
            grid.PinnedItems.Add(this.DataSource[2] as Employee);
            grid.PinnedItems.Add(this.DataSource[4] as Employee);
        }
    }
    

    API References