DataGrid Locked Columns

Lock DataGrid columns to the start edge, or right edge in RTL layouts, while the remaining columns scroll.

Columns

Column example

Prerequisites for Locked Columns

•Point 1: Scrolling is enabled
•Point 2: The widths of all Grid columns are explicitly set in pixels
•Point 3: At least one column remains unlocked
•Point 4: Locked columns stay fixed on the left while the grid scrolls horizontally

Lock/Unlock Columns

Use the horizontal scrollbar below the grid to scroll right and see locked columns remain fixed on the left.

Loading interactive DataGrid example…

1 locked column(s) - Use the horizontal scrollbar below the grid to scroll right and see locked columns remain fixed
© 2026 ngbootstrap

This project is not affiliated with ng-bootstrap or ngx-bootstrap. Those projects focus mainly on Bootstrap components for Angular. ngbootstrap focuses on Angular UI for data-heavy apps, especially Data Grid, Angular-native Form Builder, drag and drop workflows, documentation examples, and performance-focused Angular patterns.