I implement this on the p-table component, although unsure if it will function properly with the p-datatable component.

[scrollHeight]="'calc(100vh - 204px)'"

Flex mode was recently added to the Prime NG table for adjusting viewport height

scrollHeight="flex"

This feature allows the table to dynamically adjust its height based on the parent element.

Sharing my experience:

Ever since version 9.1.0, the component has been automatically reconstructed based on the window size. However, in my situation, the window size remained constant but changes were made to the DOM structure by removing extra elements.

Here's how I tackled it:

scrollHeight='flex';

The above solution didn't solve my problem as I had a unique pagination feature linked to scrolling. Eventually, I resorted to triggering the resize event whenever there was a change in the DOM.

setTimeout(() => window.dispatchEvent(new Event('resize')));

To retrieve the inner height and width within a typescript file, you can utilize the following method:

setInnerWidthHeightValues()
  {
    this.innerWidth = window.innerWidth;
    this.innerHeight = window.innerHeight * 0.70;
  }

You can then apply these values dynamically by using the following syntax:

[scrollDimensions]="innerHeight +'px'"

This approach has proven to be effective in my experience.

For those looking for solutions to similar issues, I tackled it in the following manner:

1. Identify the PARENT division in the template with a unique identifier like #leftSidebar

2. In the component, utilize ViewChild :

   @ViewChild('leftSidebar', { static: true }) leftSidebar: ElementRef;

3. You can now access it and retrieve its position and dimensions as shown below:

   let rect: any = this.leftSidebar.nativeElement.getBoundingClientRect(); let x: number = rect.x; let y: number = rect.y; let width: number = rect.width; let height: number = rect.height;

4. Follow Arthur's instructions mentioned earlier and define:

   [scrollHeight]="height+'px'"

Ensure that the ScrollHeight is set to 100% for optimal performance.

The benefits of implementing this solution include:

1. Creating a dynamic table height based on available space
2. If the table's content exceeds the height, a scrollbar will appear allowing users to scroll within the table component.

Here are the steps to achieve this:

1. Ensure that the parent element cannot expand. Set a fixed height or use "flex" with "overflow: hidden".
2. Add "display: flex" to the parent element.
3. Include the following HTML and CSS:

HTML:

<p-table scrollable="true"
         scrollHeight="flex"
         ...>
...
</p-table>

CSS:

p-table {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: hidden;
}

::ng-deep .p-datatable.p-component.p-datatable-hoverable-rows.p-datatable-scrollable.p-datatable-flex-scrollable {
    flex: 1 1 auto;
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
}

I hope this information proves useful.

Spent the entire morning creating a basic directive. The directive is designed for scrollable height, but can also be used for horizontal scrolling if needed. Simply import the directive and wrap your table in an element with the style of position: relative.

The code for table-scroll-height.directive.ts is as follows:

@Directive({
  selector: 'p-table' // You may want to specify more
})
export class TableScrollHeightDirective {

  readonly changeDetectorRef = inject(ChangeDetectorRef);
  readonly destroyRef = inject(DestroyRef);
  readonly table = inject(Table, { self: true, host: true });
  readonly $elementResize = this.$getElementResize();

  constructor() {
    this.maintainScrollHeight();
  }

  private maintainScrollHeight() {
    const table = this.table;
    table.scrollHeight = `0px`;
    const element = table.el.nativeElement as HTMLElement;
    const throwError = () => { throw new Error('Table must be wrapped inside an element with no other children and given a position of relative'); }
    if (element.parentElement?.children.length !== 1) throwError();
    setTimeout(() => getComputedStyle(element.parentElement!).position !== 'relative' ?? throwError());
    element.style.flex = '1';
    element.style.position = 'absolute';
    element.style.top = '0';
    element.style.right = '0';
    element.style.bottom = '0';
    element.style.left = '0';
    effect(() => {
      const size = this.$elementResize();
      table.scrollHeight = `${size.height}px`;
      this.changeDetectorRef.detectChanges();
    });
  }

  $getElementResize() {
    const destroyRef = this.destroyRef;
    const $result = signal(element.getBoundingClientRect());
    const resizeObserver = new ResizeObserver((entries) => {
      for (const entry of entries) {
        setTimeout(() => $result.set(entry.contentRect));
      }
    });
    resizeObserver.observe((this.table.el.nativeElement as HTMLElement).parentElement!);
    destroyRef.onDestroy(() => resizeObserver.disconnect());
    return $result;
  }
}

@NgModule({
  declarations: [TableScrollHeightDirective],
  exports: [TableScrollHeightDirective]
})
export class TableScrollHeightModule { }

In your app.module.ts:

@NgModule({
  imports: [
    TableScrollHeightModule,
  ],
})
export default class AppModule {}

Your app.component.html should look like this:

<div class="table-wrapper">
  <p-table [scrollable]="true">
</div>

In your app.component.scss:

.table-wrapper {
  position: relative;
}