Show a table containing dynamic information, featuring 10 rows for each column. The header should be present for each additional column that is added

I have incoming dynamic data that I need to display in columns, with 10 records in each row. Currently, I am able to display 10 rows as expected. However, I want the header to repeat each time an additional column is added. How can I achieve this using the Angular framework?

HTML Code

<div class="section3BG" id="section3"
        style="margin-top: 24.9px;margin-left: 18px;margin-bottom: 23.9px;margin-right: 27px;">
        <div class="row" style="margin-left: 41px;padding-top: 23px;" *ngFor="let fac of facilities11">
            <div class="col-md-2 col-lg-2" class="Facility-Name-Heading">
                Facility Name
            </div>
            <div class="col-md-2 col-lg-2" class="Equipment" style="margin-left: 107px;">
                Equipment
            </div>
        </div>
        <div *ngFor="let facility of facilities">
            <div class="Rectangle-2001">
                <div class="row" style="margin-left: 21px;padding-top: 23px;">
                    <div class="col-md-2 col-lg-2" class="Facility-Name-1">
                        Facility Name 1
                    </div>
                    <div class="col-md-2 col-lg-2" class="number" style="margin-left: 90px;">
                        10
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS

.section3BG {
        width: 1785px;
        height: 825.1px;
        border-radius: 20px;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.04);
        background-color: #ffffff;
        display: flex;
        flex-flow: column wrap;
        align-content: flex-start; 
      }

.Facility-Name-Heading {
        opacity: 0.5;
        font-family: Lato;
        font-size: 18px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.22;
        letter-spacing: 0.9px;
        text-align: left;
        color: #0d0d0d;
      }

.Equipment {
        //width: 94px;
        //height: 22px;
        opacity: 0.5;
        font-family: Lato;
        font-size: 18px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.22;
        letter-spacing: 0.9px;
        text-align: left;
        color: #000000;
      }

.Rectangle-2001 {
        width: 374px;
        height: 57px;
        border-radius: 10px;
        border: solid 1px #e9e9e9;
        background-color: rgba(236, 236, 236, 0.22);
        margin-left: 20px;
    margin-top: 15px;
      }
      .Facility-Name-1 {
        width: 134px;
        height: 22px;
        font-family: Lato;
        font-size: 18px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.22;
        letter-spacing: 0.9px;
        text-align: left;
        color: #487217;
      }
      .number{
            width: 22px;
            height: 22px;
            font-family: Lato;
            font-size: 18px;
            font-weight: 500;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.22;
            letter-spacing: 0.9px;
            text-align: left;
            color: #487217;
      }

Expected Image

https://i.sstatic.net/oVqlO.png

Current Output

https://i.sstatic.net/MAa5O.png

htmlcssdynamicbootstrap-4flexbox

Answer №1

To resolve this issue, I made the necessary changes to my code by including the header within the foreach loop. Here is the updated code snippet:


    <div *ngFor="let wareHouse of wareHouseList; let i = index">
        <div class="row facilityNameHeading" *ngIf="i % 10 == 0">
            <div class="col-md-2 col-lg-2" class="Facility-Name-Heading">
                Facility Name
            </div>
            <div class="col-md-2 col-lg-2" class="Equipment">
                Equipment
            </div>
        </div>
        <div class="Rectangle-2001" (click)="navigateToDevicedashboard(wareHouse.id)">
            <div class="row wareHouseName">
                <div class="col-md-2 col-lg-2" class="Facility-Name-1">
                    {{ wareHouse.name }}
                </div>
                <div class="col-md-2 col-lg-2" class="number">
                    {{ wareHouse.noOfDevices }}
                </div>
            </div>
        </div>
    </div>
</div>

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

What is the best way to align div elements in HTML5?

I've spent countless hours trying to properly display and align multiple divs. Despite extensive research, I just can't seem to get it right. What I'm aiming for is to have the title of a section in the top left corner, an info box to the l ...

csshtml

What is the best way to implement an if-else structure in this code?

Can anyone help me with converting this code into an if/else statement? I want it to display certain content if 'Rental' is true, and other content if it's false. The PHP tags are making it difficult for me to follow. <?php if( get_ ...

phphtml

Error message in JS/Ajax alert box

I keep receiving an alert box saying "Image uploaded" even when the variable $imagename is empty. Below is the script in question: <script> function ajax_post1(ca){ var cat = ca; var name = document.getElementById("name").value; var ...

javascripthtmlajax

Alter the hue of a component upon being clicked

Seeking help to modify the color of my menu elements upon clicking on the "center" or "right" containers (reverting back when clicked again). Currently, the three lines in my menu are white, but I desire them to turn red when either of these containers is ...

javascriptjqueryhtmlcss

Best practice for including the language tag in Next.js Head tag

I'm struggling to find a clear example of how to use the language tag with Next Head. Here are two examples I have come across. Can you help me determine which one is correct, or if neither are appropriate? Just a reminder: it doesn't need to be ...

htmlnext.jshead

What is the method for modifying the text color of P tags within a div element?

I'm having trouble changing the text color of the P tags in the card-header section for some reason dashboard.html <div class="container"> <div class="card"> <div class="card-header"> <p& ...

htmlcss

Troubleshooting Owl Carousel's width problems upon initial loading

Currently, I am utilizing the Owl Carousel and have the following script: $("#owl-demo").owlCarousel({ items : 3 }); My intention is for the container to display 3 images. However, upon initial load, this is what appears: https://i.sstatic.net/ePLAQ. ...

jquerycsscarouselowl-carousel

Create tab title CSS design that coordinates with the tab content and features circular corners

I am currently working on creating html + css tabs with a unique design. The goal is to have the selected tab display the title connected to the tab content, with a "neck" rounding in like an arrow. After some progress, I have reached a point where the im ...

htmlcsspsd

Columns with adjustable widths

I am looking to create a layout with 3 columns (which may change, could be up to 4) that are all flexible width and fill the screen. Does anyone know if this is possible using CSS? Basically, I want three blocks lined up horizontally that take up the enti ...

htmlcss

Search Bar on the Website for Google Search

I am currently working on a basic website and I'm looking to incorporate Google Search functionality into it. I've managed to create a simple search box that redirects users to the Google Search Results page when they input their query. However, ...

htmlcss

Looking for assistance in creating an html page with a rotating CSS div containing unordered lists and list items

I am sharing the HTML content of my test page that I am looking to customize similar to some websites I have come across. My goal is to create a rotating div with an unordered list (ul li), where only three divs are displayed at a time while the rest remai ...

javascripthtmlcss

The data table appears to be malfunctioning when the table collapses

Having trouble with the data table when adding a collapse tr. Removing the collapse tr fixes the data table issue. Any help on how to resolve this would be appreciated. $('.tableToggleUl').parent('td').css('padding','0 ...

jqueryhtmlcsstwitter-bootstrapdatatable

Require checkboxes in AngularJS forms

Currently, I have a form that requires users to provide answers by selecting checkboxes. There are multiple checkboxes available, and AngularJS is being utilized for validation purposes. One essential validation rule is to ensure that all required fields a ...

javascripthtmlangularjscheckbox

Pass along computed style data to the parent component in Vue.js

I am relatively new to VueJS and currently in the process of exploring its features. One specific issue I am facing on my website involves a TopBar component that includes both the logo and the menu. <template> <div id="topBar"> <div ...

javascripthtmlvue.jseventemitter

revealing a particular field in jQuery during the validation process

Edit: Currently, I am utilizing the jquery validate plugin and have hidden all error messages initially. Upon checking a specific input field, my objective is to unhide the error message if it is invalid without causing error messages to appear in other f ...

javascriptjqueryhtmlcss

Customizing CSS float labels for individual inputs

For my project, I've implemented CSS code to create a floating label effect for form inputs. If you need the original code reference, it can be accessed here. However, since there are multiple examples in the original codebase, I have extracted and m ...

csscss-animations

Is it considered a bad practice to apply overflow: auto to all elements with the exception of html?

My approach to beginning a new design always involves overriding the default padding and margin set by the browser on all elements: * { margin: 0; padding: 0; } After coming across j08691's response regarding a margin collapse issue, I discovered th ...

htmlcssoverflow

Center a vertically aligned element following a heading, with the content dynamically generated and enclosed in a fixed container

My mind is racing with this problem and I'm not sure if it's solvable, but before throwing in the towel, I thought I'd seek help from the Internet Gods. Here's a visual representation of what I'm aiming for: I want the text to al ...

htmlcssflexbox

Varied approaches to managing responsive layouts

I am encountering an issue with the responsive design of a website I am currently developing. Scenario: The website features 3 different layouts for Desktop, Tablet, and mobile devices. These layouts consist of similar components with slight CSS adjustmen ...

javascriptjqueryhtmlcss

Ensure that only one button from the collection is activated

One of the features on my website includes 3 blocks with buttons. These buttons trigger a change in the displayed picture when clicked. However, it is crucial to ensure that when a new track is activated, the previous button returns to its original state. ...

javascripthtmlcssbutton