Utilizing Sticky First Column and Row Scroll in `ngx-datatable`

Is there a way to implement a scroll feature in a table to ensure that the first column and row remain fixed while scrolling, even when the number of rows or columns increases?

<ngx-datatable id="table" #table class="" [rows]="tt">
    <ngx-datatable-column name="b" prop="ff" ></ngx-datatable-column>
    <ngx-datatable-column *ngIf="q" name="Site No" prop="ff"></ngx-datatable-column>
    <ngx-datatable-column name="q" prop="r" ></ngx-datatable-column>
    <ngx-datatable-column name="ww" prop="ww" >
        <ng-template ngx-datatable-cell-template let-row="row">
                                                  {{ row.qw| currency:'USD':'symbol':'1.2-2' }}
                                                </ng-template>
    </ngx-datatable-column>
</ngx-datatable>

I experimented with SCSS properties such as z-index and wrap.

cssangularbootstrap-4sass

Answer №1

Hey Mohsin, I recommend implementing the code provided below.

<!-- begin snippet: js hide: false console: true babel: false babelPresetReact: false babelPresetTS: false -->



      ngAfterViewChecked(): void {
        // Check if the table size has changed,
        if (
          this.table &&
          this.table.recalculate &&
          this.tableWrapper.nativeElement.clientWidth !== this.currentComponentWidth
        ) {
          this.currentComponentWidth = this.tableWrapper.nativeElement.clientWidth;
          this.table.recalculate();
          this.changeDetectorRef.detectChanges();
        }
      }
      @ViewChild(your own datatable reference ) tableWrapper;
      @ViewChild(DatatableComponent) table: DatatableComponent;

<!-- language: lang-css -->


    th:first-child,td:first-child{
        left: 0;
        z-index: 2;
        position: sticky;
        position: -webkit-sticky;
        background-color: #fff;
    }
    table{
        border-collapse: collapse;
        overflow: scroll;
        }
    thead{
        position: sticky;
        position: -webkit-sticky;
        z-index: 9;
        top: 0;
        left: 0;
        background-color: #fff;
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular's "change" output automatically triggers input events to propagate implicitly

Encountering an unusual behavior, I have a basic component that wraps a text input: export class InplaceInputComponent { @Input() value: string; @Output() change = new EventEmitter<string>(); editedValue: string; inputChange(event: any) { ...

angular

The Art of GSAP: Creating Seamless Performance and Structural Integrity

GSAP boasts about its ability to create stunning animations for the web using HTML5, but it's important to note that they specifically mention on Greensock.com that they do not rely on the canvas framework in HTML5. Although their code includes JavaSc ...

javascriptjquerycsshtmlcanvas

Tips for showing just one table data cell (<td>) with identical class:

I'm facing a challenge with jQuery, HTML, and CSS. I'm currently in the process of designing a website for a railway company. The Home page is completed, but I've hit a roadblock on the tickets page. Using just HTML, CSS, and jQuery to build ...

htmljquerycss

Creating a two-column layout in React with Material-UI to display repeated information

I'm currently developing a component using Grid, and I would like the information to display in two columns instead of just one. I'm having trouble figuring out how to achieve this. I understand that I could potentially add another Grid section w ...

javascriptcssreactjsmaterial-uigrid

Display an array in Angular HTML by calling a function

I am currently working on an app that involves displaying cars retrieved from a database. Each car has a string of tags separated by commas, and I have created a function to split these tags into individual words and display them as tags. However, I am str ...

javascriptangular

"Optimizing Text Display on MAC Computers through Word Wrap

While constructing a form using Bootstrap3, I encountered an issue where only one word in a checkbox label wraps to the next line specifically on MAC safari/chrome browsers. Interestingly, this problem doesn't occur with other browsers such as IE or o ...

htmlcss

Steps for declaring CSS values with fallbacks in case of unsupported values

I'm looking to utilize the overflow: overlay property in Chrome, and overflow: scroll in Firefox. Simply declaring the overlay value causes Firefox not to scroll at all, even though I know it's not standard. My question is: what's the optim ...

javascriptcssfallback

What is the best way to arrange these containers in a horizontal stack?

Check out the code snippet at: https://codepen.io/shayaansiddiqui/pen/YzGzeOj I'm looking to align these boxes horizontally, how can I achieve that? <div> <div class="container"> <img src="#" ...

htmlcss

Is the variable empty outside of the subscribe block after it's been assigned?

Why is a variable assigned inside subscribe empty outside subscribe? I understand that subscribe is asynchronous, but I'm not sure how to use await to render this variable. Can someone please help me and provide an explanation? I am attempting to retr ...

javascriptnode.jsangulartypescriptsubscribe

Troubleshooting problem with Angular ngx-bootstrap datepicker positioning on mobile devices

Having an issue with ngx-bootstrap/datepicker, it works fine on larger screens but not on mobile screens. Any assistance would be appreciated. https://i.sstatic.net/ZGdyQ.png When the screen size is reduced to mobile (even on actual mobile devices), it o ...

cssangulardatepickerngx-bootstrap

Configuring ui-router in Angular2 across multiple modules: A step-by-step guide

Looking to set up ui-router in angular 4 to utilize components from various modules? I'm facing an issue where the uiRouter isn't responding when attempting to change state using the uiSref directive. { name: 'app', abstract: t ...

angularangular-ui-routerangular2-routingangular-module

Set a predefined height for an element, yet ensure it adjusts to fit within its container (with the option to overflow only if it reaches a minimum specified height)

Consider this setup: A heading text a main content block All inside a single parent container. .outer { max-height: 200px; background-color: green; } .inner { min-height: 50px; /*for illustration, default height is set higher than ou ...

htmlcssposition

Is there a way to create a table cell that occupies zero space?

I have a very intricate table setup that resembles a tree structure, with only a few cells on the left and many on the right. I am looking to completely hide specific cells, along with their entire rows, using JavaScript based on their class. Using visibi ...

htmlcssfontscss-tables

Display or conceal information in a distinct container in AngularJS by selecting any cell in a table

In the following demonstration, I am displaying multiple values in a single cell of a table. If a particular row's cell has only one value, there is no action needed. However, if it contains more than one value, we can hide and show these values withi ...

javascriptjqueryhtmlcssangularjs

Is there a way to include captions within a bootstrap carousel-item without compromising the responsiveness and alignment of the indicators and controls?

<div id="myUniqueCarousel" className="carousel slide" data-bs-ride="true"> <div className="unique-carousel-indicators"> <button type="button" data-bs-target="#myUniqueCarousel" data-bs-slide-to="0" className="active" aria-curre ...

htmlcssbootstrap-5

Achieving Right Alignment of SVG Next to an <h4> in Bootstrap 5

I'm encountering an issue where I am attempting to align an SVG icon to the right of an H4 element and center it vertically using Bootstrap 5, but it's not working as intended. <div class="container-fluid"> <div class="r ...

cssflexboxbootstrap-5right-align

What is the best way to retrieve the previously chosen item from an array?

I have successfully implemented dynamic pill tabs with one minor issue remaining. The most crucial aspect is that when I remove a pill, I want it to return to the previously opened tab. I have provided a StackBlitz example without routes on this page: -> ...

javascripthtmlcssangularangular-material

Unable to access due to CORS policy restriction in Ionic 5 Angular platform

Encountering an error, seeking guidance on the issue. Configuration has been done in proxy.conf.json. Headers with base url have been set in user.service.ts. import { Injectable } from '@angular/core'; import { Http, Headers, RequestOptions } fr ...

androidangularionic5

Creating an Innovative Grid Design with Varying Column Widths for Each Row

Seeking advice on achieving a specific layout using HTML. I have attempted to use HTML tables but struggled with creating rows with varying columns. Does anyone have recommendations for grid tools that may be more helpful? Thank you ...

htmlcsslayout

Validating Inputs with an Array of Values in my Angular 2 Application

I have been exploring ways to retrieve data from an array of values instead of a single value when using [(ngModel)] binding in my Angular 2 application. The current setup functions perfectly with a single value, as shown below. The data is pulled from the ...

javascriptangulartypescript