DataGrid Sticky Columns

Pin DataGrid columns to a sticky edge while preserving their configured column order.

Columns

Column example

Sticky Columns Requirements

•Columns marked as "sticky" remain visible during horizontal scrolling
•Ensure the grid is scrollable (enabled by default)
•Set the width option of all columns explicitly

Mark Columns as Sticky

After marking columns as sticky, use the horizontal scrollbar at the bottom of the grid to scroll right and see sticky columns stay pinned.

Loading interactive DataGrid example…

1 sticky column(s) - Use the horizontal scrollbar below the grid to scroll right and see sticky columns stay pinned
© 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.