Html Question posted in
Some basic documentation can be found here.

How to make specific columns in a nested html table horizontally scrollable?

When there is 3 or more currency column, I want to make it horizontally scrollable like this:
enter image description here

Currently, my table looks like this:
enter image description here

The first 6 columns is fixed and will take 80% of the parent table width. The remaining 20% are for the PDO currencies column. Each currency column should have a minimum width 10% of parent table width. So if there is only one currency = 20% width, two currency = 10% width each, 3 or more currency = 10% width each and will be horizontally scrollable.

Example:

Parent table width: 2445px

Currencies: [PHP, USD, AUD]

Then each currencies will have a column width of 244px (10% of parent table width) and will be horizontally scrollable.

I’m using angular 14, any advice on how I can achieve this?

Update: Migrated code to stackblitz per @NarenMurali suggestion

https://stackblitz.com/edit/stackblitz-starters-xoyvyr?file=src%2Fapp%2Freports-table%2Freports-table.component.html

I used nested table to group each row by pdoName, then by advocacy, then by program.

Tags:

2

Answers


  1. 0

    I doubt you’ll get a complete solution on stack overflow.
    My first recommendation would be to use colspan/rowspan to get rid of the subtables.
    You could then use position: sticky on the respective <th> and <td> elements to make them float over the remaining elements.

    https://stackblitz.com/edit/stackblitz-starters-7tvh4v

    Login or Signup to reply.
  2. 0

    Now try to updating your HTML template to include Angular directives for dynamic rendering of columns and data. You can use Angular’s *ngFor directive to loop through your data and generate the necessary table structure.

    E.x.

    <table class="outer-table">
    <thead>
        <tr>
            <!-- Fixed columns -->
            <th>Column 1</th>
            <th>Column 2</th>
            <!-- Add more fixed columns as needed -->
            
            <!-- Dynamic currency columns -->
            <ng-container *ngFor="let currency of currencies">
                <th>{{ currency }}</th>
            </ng-container>
        </tr>
    </thead>
    <tbody>
        <!-- Use Angular directives to loop through data and generate rows -->
        <tr *ngFor="let row of data">
            <!-- Fixed data cells -->
            <td>{{ row.column1 }}</td>
            <td>{{ row.column2 }}</td>
            <!-- Add more fixed data cells as needed -->
            
            <!-- Dynamic currency data cells -->
            <ng-container *ngFor="let currency of currencies">
                <td>{{ row[currency] }}</td>
            </ng-container>
        </tr>
    </tbody>
</table>

    In your Angular component, define the necessary properties like currencies and data to hold the column names and table data respectively. Make sure to populate these properties with your actual data.

    E.x.

    export class ReportsTableComponent implements OnInit {
    currencies: string[] = ['PHP', 'USD', 'AUD']; // Example currencies
    data: any[] = []; // Example data, populate as per your application logic

    ngOnInit() {
        // Fetch or generate data as needed and assign to this.data
    }
}

    If you want the currency columns to adjust dynamically based on the number of currencies, you can calculate the width percentages in your component and apply them to the CSS classes dynamically.

    export class ReportsTableComponent implements OnInit {
    currencies: string[] = ['PHP', 'USD', 'AUD']; // Example currencies
    data: any[] = []; // Example data, populate as per your application logic
    currencyColWidth: string; // Dynamic width for currency columns

    ngOnInit() {
        const numCurrencies = this.currencies.length;
        this.currencyColWidth = numCurrencies >= 3 ? (10 / numCurrencies) + '%' : '20%';
    }
}

    Then, update the HTML template to use currencyColWidth dynamically:

    <ng-container *ngFor="let currency of currencies">
    <th [style.min-width]="currencyColWidth">{{ currency }}</th>
</ng-container>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search