Primeng scroll table Scroller requires items as the data to display, itemSize for the dimensions of an item and item template are required on component. Angular PrimeNG Table Jan 14, 2020 · 3 am trying to show the data using p-table of primeng with frozen columns. Here is an example of how it looks like in PrimeNG JSF components, but Aug 7, 2024 · Environment When virtualScroll = true, the scroll bar moves backwards while scrolling, causing the table to frick. This only occurs if scrolling a bit within the table. 3. . If kept in initial scrolling state resizing works fine. lets say 20k rows and 500 columns. Nov 5, 2021 · I made a directive to handle not only the navigation of the PrimeNG table rows with arrow keys, but also the scrolling. The button is now a child of p-button and p-button has the z May 28, 2020 · I am having a p-table with and body. 0, we want to use scrollable, with only horizontal direction. Column Widths of a Scrollable Table Scrollable table uses flex layout so there are a couple of rules to consider when Flexible Flex scroll feature makes the scrollable viewport section dynamic instead of a fixed value so that it can grow or shrink relative to the parent size of the table. 4. primefaces. Aug 26, 2024 · Answer by Zayn Donovan A directive that can set a PrimeNG Datatable header to sticky when scrolling the page. How to get scroll event in my method. Environment Angular version: 13. Scroll Options The properties of scroller component can be used like an object in it. Imagine a product table with thousands of entries. This article Jul 9, 2020 · I also made sure to have a min-height on flex-sized parent elements of the table. Jan 8, 2019 · I'm using a PrimeNG TurboTable component on an Angular 7 application and there's a button to add new rows to it. This has to be used with a combination of a set scrollHeight and/or scrollWidth. Below is my code that I have tried but it is giving performance issues: Aug 7, 2022 · Describe the bug This behavior seems a regression from the previous virtualscroll implementation. iam not been able to get scroll event. mov After Scrolling again the content reappears. ui-table- Jul 23, 2025 · Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. Mar 12, 2023 · When I use a table with non-virtual scrolling, the function I mentioned earlier works as expected. Scrolling makes the Table component more interactive and responsive on devices with different screen sizes. This article will show us how to use Table Scroll in Angular PrimeNG. In cases where the viewport should adjust itself according to the table parent's height instead of a fixed viewport height, set the scrollHeight option as flex. In this article, we are going to learn Angular PrimeNG Table Properties. The problem is that, when a new row is added, the user has to scroll down to the bot Sep 10, 2021 · I am using PrimeNG in my Angular project. (PrimeNG version being used is 4 Sep 16, 2020 · 2 I am trying to implement both [scrollable]="true" and stick header in p-table of PrimeNg. Angular PrimeNG Table Scrolling is used to make the Table component scrollable. It looks like lazy load is not implemented on Jan 16, 2025 · Describe the bug In the recent PrimeNG 19 version, the Frozen Column feature on Tables is not working anymore. 0-rc. Is there a similar method for virtual scroll tables in the current version of PrimeNG? Mar 22, 2025 · The scrolltop is disappearing under the PrimeNG table (and probably other components) as the z-index: 1002 style no longer works correctly with v19 as the button element is not a direct child of p-scrolltop as it was in previous version. 2 Jan 25, 2019 · I have a primeng VirtualScroller and it has a property scrollHeight that fixes some height. I am able to implement it but while implementing lazy loading. 16. I have added [scrollable]="true" but it does not work for [scrollHeight]="'100%'" or [scrollHeight]="'100hv'" so I have to fix the height of the table in order to make the scroll work. Jul 26, 2023 · This is still an issue on PrimeNg 16. The scrollbar appears as expected and as needed with a p-table having [scrollable]="true" and scrollHeight="flex", without the need to enable virtual scrolling. templateRows" [value]="this. Jul 23, 2025 · In this article, we will see Angular PrimeNG Table Horizontal and Vertical Scrolling. 0 Browser (s) Chrome 127. This article will show us how to use Table Flex Scroll in Angular PrimeNG. VirtualScroller is an efficient approach to handling data effectively. Aug 23, 2019 · I'm trying to create a p-table that has grouped rows but I'm not able to correctly apply the virtual scroll feature. This is where lazy loading and sorting come into play as essential techniques to streamline May 4, 2024 · Answer by Adelyn Li PrimeNG DataTable provides a [scrollable] property to define vertical and/or horizontal scrolling. io Current behavior When a [(selection)] value is passed into a scroll table, the scrollbar position doesn't change to reflect where the currently highlighted item is. Does anyone know what I'm missing? Apr 9, 2021 · Explore solutions and discussions on implementing horizontal scroll in p-splitter and p-table using Stack Overflow's community expertise. Mar 2, 2022 · The table loads super and editing is also slow to start when rowexpansion is added for large data 2000 rows by 64 columns and 10000 rows by 5 columns. ---This video is based Jan 20, 2022 · When we pass [scrollable]="true" primeng applies certain styles, from what I've seen, overflow auto is applied to p-datatable-wrapper thus binding the vertical sticky stylings to that overflow, instead of having horizontal scroll on the tbody and thead and keeping vertical scroll on page so sticky headers would be bound to the page's scroll. 7. Header should be always visible even if I scroll my table to the bottom (like fixed menu on the top of Sep 19, 2017 · It seems that the table doesn't trigger the (onLazyLoad) after a certain amount of scroll. Without virtualScroll the scroll capability functions as intended. Does anyone has any solution for this? Nov 28, 2017 · PrimeNG provides Lazy loading which refresh data on scrollDown as well as on ScrollUp. p-table is part of the PrimeNg framework. Dec 27, 2024 · Go to the Frozen Column demo: https://v17. Jul 23, 2025 · Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. If optionValue is omitted and the object has no value property, the object itself becomes the value of an Feb 1, 2022 · The point is that I want to be able to use this table as a child component and make sure that it will not get bigger than the container component. Feb 5, 2019 · My fix is the following, and not sure why this isn't how it's done in primeng? ui-table-scrollable-view set this to overflow:auto; remove overflow from ui-table-scrollable-header and ui-table-scrollable-body @sgentile Thank you very much, this works. 1. Also rows don't get populated when div is stretched as it should with scroll height flex Jan 20, 2022 · When we pass [scrollable]="true" primeng applies certain styles, from what I've seen, overflow auto is applied to p-datatable-wrapper thus binding the vertical sticky stylings to that overflow, instead of having horizontal scroll on the tbody and thead and keeping vertical scroll on page so sticky headers would be bound to the page's scroll. When the content of the expanded area is quite high, you cannot scroll to the end of the table when there May 11, 2018 · I am implementing primeNG turbo table. Environment MacOS 15. Oct 24, 2024 · Describe the bug Hello, I'm using p-table with expandable row groups and virtual scrolling. Feb 28, 2023 · I have a table with lots of columns, when I switch to a laptop all the text bumps into each other. Default property name for the optionLabel is label and value for the optionValue. In this article, we will see Angular PrimeNG Table Horizontal Scrolling. The Table Component shows some data to the user in tabular form. Flex scroll feature makes the scrollable viewport section dynamic instead of a fixed value so that it can grow or shrink relative to the parent size of the table. However, since only the first 4 items are shown, there is Dec 6, 2022 · 0 using primeng virtual scroll table in angular to handle huge set of data [array], here i want to use scrollToIndex is there any thing like cdk-virtual-scroll-viewport in primeng table, if user clicks on a button I need to scroll to a particular index (eg 100) AnimateOnScroll AnimateOnScroll is used to apply animations to elements when entering or leaving the viewport during scrolling. In this article, we are going to learn Angular PrimeNG Table Methods. In this article, we will see the Angular PrimeNG Table Component. I am trying to make the table elements show in "stack" mode when responsive, which should be a simple thing according to the documentation. This article will show us how to use Table Column Widths of a Scrollable Table in Angular PrimeNG. If you do not have a PrimeNG PRO Support subscription, fill-in the report below. In addition, an initial array is required based on the total number of items to display. We'll delve into both client-side and server-side sorting strategies to optimize your PrimeNG tables for large datasets. Lazy loading retrieves data in chunks on demand, ensuring a smooth user experience by avoiding initial page load overload. 18. This behaviour seems to be worse whe Mar 15, 2021 · Hello I am using PrimeNG p-table which has both horizontal scroll and vertical scroll. Jul 24, 2024 · I would like to scroll to a specific row in my table, whether by identifing the row by index, or via p-table's property selection. 4, we cant change table scroll height once table got rendered first time. Feb 9, 2022 · I'm trying to set up a primeng table that scrolls horizontally (scrolldirection="both"), has a sticky column to the right (pFrozenColumn alignFrozen="right") and resizable column widths ([resizableColumns]="true"). But after adding [scrollable]=true and scrollHeight="200px" Dec 23, 2024 · Describe the bug Depending on the scrollHeight (in comparison to the columnHeight and rows settings I guess) the second page of data gets never loaded in a Virtual Scroll Lazy Loading Table setup: Dec 2, 2021 · The second table in the demo project above is using the regular scroll, as you can see the sticky header/footer remain in place and the header no longer "jumps" when scrolling. I need to make the scrollbar visible at all times similar to a browser scrollbar without requiring the user to scroll to the bottom of the table. org/primeng/v9-lts/#/table/scroll. Adding my own style to the elements like for example Oct 17, 2017 · I'm using Angular 4 in pair with PrimeNG 4. Click the button below to display a maximizable Dialog where data viewport adjusts itself according to the size changes. Mar 16, 2021 · I'm trying to make the p-table scrollbar scroll to a certain position. Jul 23, 2025 · This article will show us how to use Table Scrolling in Angular PrimeNG. May 2, 2020 · where our team will respond within 4 business hours. the scroll bar keeps jumping up and down and the Nov 5, 2023 · Sometimes when scrolling to end (almost bottom) the table flickers and scrollbar thumb goes moves in weird position. 90 Jul 6, 2018 · I want to click on a menu item, navigate to a different page that has a PrimeNG p-dataTable, and scroll to the item on the p-dataTable that the link corresponds to. com/primefaces/primeng/issues/5510#issuecomment-432155295 Flex scroll feature makes the scrollable viewport section dynamic instead of a fixed value so that it can grow or shrink relative to the parent size of the table. table. Jul 23, 2025 · Angular PrimeNG is an open-source library that consists of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. I want to use sticky header for the table for which I have tried following 2 methods - [scrollable]="true Jul 23, 2025 · This article explains the pFrozenColumn properties of Angular PrimeNG Table for creating fixed columns in a table while scrolling. I use virual scroll for the rows to render dynamically. Sometimes, when i search for a specific item into the table via search (e. PrimeNG-Lazy-Table-VirtualScrolling-scrollHeight-flex-Firefox. The Table Component is used to show some data to the user in the tabular form. If someone has come up with the such a solution, it would really helpful. If no event available, how to add a custom event. Apr 19, 2022 · Edit primeng sticky demo and add the property responsiveLayout="scroll" to the table I also tried to set [scrollable]="true" and scrollHeight="flex" as discuss in #11099. Feb 12, 2024 · Angular/PrimeNG table cell content rendering over frozen columns on scroll Asked 1 year, 9 months ago Modified 1 year, 9 months ago Viewed 698 times Aug 2, 2023 · Describe the bug I have a p-table with virtual scroll and into the caption a search input. tableData" [scrollable]="true" scrollHeight="100px" scrollWidth="100px" scrollDirection="both" > However, the horizontal scroll isn't working, which means my columns are all bunched up with text overlapping. 1 Firefox 132. I need to stick table header on the screen while scrolling its content. Here is the stackblitz Nov 20, 2021 · I have the following attributes in my p-table: <p-table [columns]="this. We can fix the scrollheight, but if the number of rows are less table again adjusts to a smaller height. While PrimeNG tables provide a powerful and Dec 20, 2022 · I have an old v12 angular/primeng based app that I am trying to retro fit checkbox selections on a table with virtual scrolling and lazy loading. If the Frozen column data does not fit in one line then the frozen column and scrollable column data is getting misaligned (show below):- Code:- Nov 15, 2017 · How to listen to the scroll event of primeng data table which has fixed header. If I try to customise the data table code, it also has many side affects. The issue is when scrolling and doin Sep 25, 2024 · Describe the bug Creating table and using Virtual scrolling with frozen columns (1 or more) doesn't scroll up if you are at the bottom of the table. Jul 5, 2023 · Besides,if I initialize the table array with 10000 elements and filter down to only 10 records, for example, the records are updated correctly immediately but the scroll remains of a table of 10000 rows, which is huge, with empty rows. Been running into an issue with virtual scroll on multiple primeng components (p-table and p-multiselect) where the scroll viewport keeps jumping back several rows upon a certain point in scrolling. When you arrived at the end of your loaded data, a new ca Feb 28, 2018 · PrimeNG Team, Can we have at least some method,which we can trigger manually to recalculate scroll height & render table according to scroll height variable. scrollTo ( {'top': 200}) } &quo Scroller is a performance-approach to handle huge data efficiently. Sep 5, 2022 · enter image description herehow to keep horizontal scroll for prime Ng table body ,as horizontal scroll bar is not visible only right and left arrows are showing as below :host ::ng-deep . The scroll bar keeps jumping up and down and the table is always at the last Jul 23, 2025 · The Angular PrimeNG ScrollPanel Component provides a customized scrollable container to enhance the user interface in Angular applications. I used the following css from primeng for the sticky header. Total number of records need to be with totalRecords property. May 24, 2024 · PrimeNG is a popular UI component library for Angular development, offering a rich set of data table components for displaying and managing information. It provides a lot of templates, components, theme design, an extensive icon library, and much more. Once, I scroll past the first "page", all entries after it are stuck in a loading state, and the scroll bar jumps around. The table is smooth when there are 20k ro Jul 23, 2025 · Angular PrimeNG TreeTable Flex Scroll enables Flex Scroller in the TreeTable component. So using a scroll, we can easily customize the TreeTable component and show Table Data according to the best user experience. Nov 21, 2024 · PrimeNG table with virtual scroll and frozen columns (1 or more) doesn't scroll up if you are at the bottom of the table. Any ideas? Mar 12, 2023 · When I use a table with non-virtual scrolling, the function I mentioned earlier works as expected. Flexible Flex scroll feature makes the scrollable viewport section dynamic instead of a fixed value so that it can grow or shrink relative to the parent size of the table. MultiSelect is used as a controlled component with ngModel property along with an options collection. Here's my code: ngAfterViewInit (): void { this. When scrolling down, the sticky header works well, but when scrolling up, it start jumping, the faster scroll, the bigger jump. Default template includes a dropdown to change the rows so rowsPerPageOptions is also necessary for the dropdown options. What is the motivation/use case for changing the behaviour? We have large tables with 10000+ rows so we use the virtual scroll feature to improve the table's performance. Or any alternative option to recalculate table scrollheight manually & render accordingly. Aug 25, 2022 · I am using primeng p-table and I want to freeze the first column from horizontal scrolling. If I implement both, scrollable is working but sticky header is not working. The scroll bar keeps jumping up and down and the table is always at the las Jul 23, 2025 · Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. Mar 24, 2023 · Type: New Feature on Mar 24, 2023 schokolateur changed the title p-table: Restore scroll position p-table: Restore scroll position or disable auto scroll on Mar 24, 2023 Jan 6, 2019 · I want to try out the scrollable table from PrimeNG. Jan 29, 2022 · We use primeng table in our project, and now we updated the package to v13. The vertical one is working fine. How ca Oct 9, 2024 · Turns out, creating an HTML table that has both horizontal scroll and fixed headers can be a tricky problem. Scrolling can be enabled vertically and horizontally when orientation is set as both. 11 PrimeNG version: 1 Jul 3, 2024 · How to do an Infinite scrolling table using Angular and TanStack Query. It doesn't seem to do anything at all. Mar 2, 2022 · Primeng table very slow with virtual scroll and expanded rows #11261 Closed wondie opened on Mar 2, 2022 Sep 26, 2017 · When using the table with virtual scroll, if you scroll down the table with mousewheel and scroll slowly, it's still flickering and jumping. On the screenshot you can se May 19, 2022 · 0 I have a large set of data that needs virtual scrolling and I use PrimeNg v13. Dec 6, 2017 · So, I would require a virtual scroll for that purpose, but I cannot make virtual scroll and pagination work together in the grid. Nothing will display. ,I don't know if this fits exactly your case, but I solved my issue by setting the scrollHeight datatable property to:,But it only solves the responsive width problem. I have tested on three different components Table TreeTable Tree Se Jul 6, 2021 · 8 I'm currently working on a project with PrimeNG 12 tables using Angular 12, but I'm having a bit of trouble with Angular's change detection and table updates, specifically with trying to prevent a PrimeNG p-table from scrolling back to the top on data refresh. Its robust data table component offers exceptional solutions for managing and displaying large datasets. Aug 28, 2024 · Describe the bug When item/row is removed from the table that uses virtual scrolling then table scrolls to the top. Jun 4, 2020 · <p-table [columns]="myCols" [value]="myList" [scrollable]="true" scrollHeight="300px" [responsive]="true"> Here, I am adding rows to the table dynamically which creates scrollbar at runtime and at that time the header becomes misaligned. Following is the data table properties: <p-dataTable #dt [value]=" Nov 14, 2024 · on Firefox the content is hidden and the scrolling jumps to the top if resizing. Setting virtualScroll property as true and providing a virtualScrollItemSize in pixels would be enough to enable this functionality. 0 Virtual Scroll, Lazy Load, rows has been set to a given number Scroll from the top of the table to the bottom, then scroll to the middle The middle of the table will be stuck in a loading state indefinitely A work around I’ve found it not setting the rows, however, this will cause another set of issues, such as p-table: Virtual Scroll, Lazy Load table Nov 30, 2022 · Is there any atribute of the PrimeNg 15 p-table component that will make make table fit to the screen and not generate a horizontal scrool no matter how many columns there are to be displayed? In PrimeNg 12 I used to use the [scrollable] atribute but it seems not to work this way in the newer version of the library. The Table component is used to Sep 26, 2024 · Describe the bug Combining Virtual Scroll with Row Expansion does not always seem to work. primeng. 0 with angular/cdk v13. Virtual Scroll Preload VirtualScroller is a performance-approach to handle huge data efficiently. Jul 24, 2025 · Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. Reproducer No response Angular version 18. stackblitz. What I'm trying to create is datatable with fixed header. According to docs I am quoting over here. Also tried to add style or class to component to set Sep 6, 2023 · I use prime ng table, p-table, to display large amounts of data. 8. In this article, we will see how to use Table Sticky in Angular PrimeNG. If you turn off the scrollable property, column width definitions are not respected. In this mode, itemSize should be an array where first value is the height of an item and second is the width. I do have a config( isPK: true) that came from data on which I want Nov 5, 2021 · StackBlitz Case (Bug Reports) https://primeng-tabledynamic-demo-wpvcnt. Scrollbars of the ScrollPanel has a scrollbar role along with the aria-controls attribute that refers to the id of the scrollable content container and the aria-orientation to indicate the orientation of scrolling. g get 2 results) and then clear the search , the scroll height does not 4 days ago · PrimeNG table with virtual scroll and frozen columns (1 or more) doesn't scroll up if you are at the bottom of the table. Scrollable Adding scrollable property displays navigational buttons at each side to scroll between tabs. 0. But sticky header works fine if I won't use the scrollable. Note that, when options are simple primitive values such as a string array, no optionLabel and optionValue would be necessary. Mar 28, 2023 · Describe the bug When having a large dataset and using the Table component with Virtual Scrolling and Lazy Loading combined, the table sometimes "jumps" a bit when a new section of the data is loaded. Oct 18, 2024 · Describe the bug When a table is created with virtual scroll and filter at the same time it works fine until the filter does not match any value The table just explodes and even if you change the filter it wont go back to normal, seems l Dropdown also known as Select, is used to choose an item from a collection of options. 7 Build / Runtime Angular CLI App Language TypeScript Node version (for AoT issues node --version) v20. Is there a similar method for virtual scroll tables in the current version of PrimeNG? Jun 28, 2017 · I'm using PrimeNG 4. So it only has scrollbar on body. Flex scroll feature makes the scrollable viewport section dynamic instead of a fixed value so that it can grow or shrink relative to the parent size of the table. I want a TurboTable to occupy the whole parent's height (and resize when the parent is resized), so only the content of the table is scrollable and no scrollbars are added to the parents component. If it has scrollbar at page load then it works fine but has issue when we have scrollbar at runtime. For the moment I'd just like to display some data and let the user edit these. Note : In 5. In this article, we will know how to use the Angular PrimeNG VirtualScroller Lazy Loading. I want to implement infinite scrolling which fetch data from server page by page on scrollDown and retain that data if I scrollUp. While running the stackblitz, scroll through the p-table and when you're about to hit a lazyLoadingEvent, start scrolling up and down really fast, the table header should start to move. In the stackblitz below, the default product is item 6 in the table array (product [5]). I have tested on three different components Table TreeTable Tree Se Dec 17, 2024 · Describe the bug Whenever you are using a virtualScroll together with scrollHeight: flex it will not work. May 17, 2021 · I was looking for help to add the frozen columns feature in my primeng table where the columns and rows are dynamically rendered. The ScrollPanel Component is a lightweight, cross-browser replacement to the built-in browser scrollbar. Jul 23, 2025 · Angular PrimeNG TreeTable Scrolling enables scroll in the TreeTable component. Reproduction scenario: You can already reproduce this on your own website: https://pri Jan 4, 2021 · I am trying to implement full page scroll in primeng table similar to one given at https://www. You can verify in the PrimeNg demo that when scrolling a table with lazy loading and virtual scroll Jun 30, 2022 · Describe the bug If I turn on the scrollable property, colspan is not working for table headers. As another developer said about… Jul 23, 2025 · Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. However, handling massive amounts of data can lead to performance bottlenecks. This article will show us how to use ScrollPanel Styling in Angular PrimeNG. The header, body and footer first columns does not scroll when the table is scrolled horizontally. This article will show us how to use Table Full Page Scroll in Angular PrimeNG. May 24, 2024 · Lazy loading and sorting revolutionize performance for PrimeNG tables handling massive datasets. Oct 26, 2018 · PrimeNG comes out of the box with horizontal scroll working with the scroll bar located below the table. Learn how to resolve the `p-table` horizontal scroll not displaying issue in PrimeNG with simple adjustments to your table attributes. May 3, 2025 · PrimeNg Tables: A Tale of Two Paginations Ever found yourself stuck between the server and the client? No, I’m not talking about your awkward position as a middle-manager — I’m talking about … Sep 20, 2021 · I used the primeNG official demo fork to reproduce this problem, I also added some html/css and inline styling to set the height of the p-table. Jul 18, 2023 · styleClass="p-datatable" or selecting another styleClass primeNG provides (p-datatable-scrollable) does not solve the problem. Changing the virtualScrollItemSize doesn't seem to make a difference, and is only resolved when setting the scrollHeight to a fixed number of pixels https Dec 7, 2021 · I see there is a PrimeNG issue commenting on this, but are there any workarounds I can use to get set column widths when using [scrollable]? https://github. 9 and has made virtual scrolling tables, completely unusable. Is there an easy way of doing this ? Jul 11, 2023 · Besides,if I initialize the table array with 10000 elements and filter down to only 10 records, for example, the records are updated correctly immediately but the scroll remains of a table of 10000 rows, which is huge, with empty rows. Before enabling the scroll, checkboxes in header and body and other header alignments were perfect. I have exactly the same issue with PrimeNg demo. So I wanted to start off with a table that contains a header and Dec 17, 2024 · Describe the bug Whenever you are using a virtualScroll together with scrollHeight: flex it will not work. 6533. I couldn't figure the exact pattern. 2. This works on any single selectable table including when a filter is being used. For PrimeNG, just need to add the following sass: Using the infinite scroll component: The PrimeNG infinite scroll component can be used to implement lazy loading by loading the next page of data when the user scrolls to the bottom of the table. Before row is removed: After remove is removed: Notice that table scroll position is suddenly on the top. Expected behavior Load the data to the table without flickering and jumping. Yet i I am having trouble getting virtual scrolling working on a table using Flex Scroll with scrollHeight='flex' I have an outer element set with a fixed height like so: Jul 23, 2025 · Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. Below is what i have Flexible Flex scroll feature makes the scrollable viewport section dynamic instead of a fixed value so that it can grow or shrink relative to the parent size of the table. Select is used as a controlled component with ngModel property along with an options collection. Angular PrimeNG Table is Jul 23, 2025 · Angular PrimeNG Table VirtualScroll is used to enable virtual scroll in the Table component. I've tried to set 100% at value but it doesn't accept. The Table Sticky implements sticky headers relative to the body scroll position. So much so that you feel the content is not loaded properly. ScrollTop gets displayed after a certain scroll position and used to navigates to the top of the page quickly. if the number of group headers can't fit within the virtual scroll height initially, as you scroll down e Jan 6, 2023 · Hi, Describe the bug In the version 11-LTS of PrimeNG, a <p-table> with lazyLoading + Scroller did not require an array length at the init. I tried using responsiveLayout="scroll" but it creates 2 scrollbars one for the table (w Aug 16, 2024 · I can confirm that it's completely broken on PrimeNG 17. Minimal reproduction of the problem with instructions See #3377 Mar 19, 2020 · In this case, virtual scroll ignores defined scroll height, and "collapses" (shrinks vertically to assumed total height of rows) - but it does not account for own horizontal scroll bar, and, as the result, I'm getting vertical scroll on very small table. This article will show us how to use Angular PrimeNG Table Scroll Layout. I can initially toggle to select all the visible rows, but when performing a scroll to lazy load more items, the main checkbox header control doesnt stay selected, and the new rows that appear dont Paginator is used as a controlled component with first, rows and onPageChange properties to manage the first index and number of records to display per page. But I am not getting the horizontal scroll bar. Please note that your issue will be added to the waiting list of community issues and will be reviewed on a first-come first-serve basis, as a result, the support Mar 7, 2018 · Currently the default behavior of PrimeNG DataTable is that it adjusts its height according to the number of rows to display. So, whenever we implement sticky, the Aug 2, 2024 · PrimeNG, a popular UI component library for Angular, empowers developers to build dynamic and feature-rich applications. org/table#frozen-columns Lock the balance column and horizontally scroll the table to verify that the column is fixed. 5 PrimeNG version 17. Label and value of an option are defined with the optionLabel and optionValue properties respectively.