Automated vertical alignment of rows within the Bootstrap table

I'm currently working on a table for my personal project that populates with data from the database. I am trying to get the rows to display vertically under headings (see screenshot at the bottom of this question). I have attempted various solutions for this issue, but so far none have been successful. It's possible there may be a flaw in my logic. Could someone please assist me in finding a solution?

EJS:

<table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <% groups.forEach((group) => { %>
                                            <th><%= group.name %></th>
                                        <% }) %>
                                    </tr>
                                    
                                </thead>
                                <tbody>
                                    <% groups.forEach((group) => { %>
                                        <tr>
                                            <% group.items.forEach((item) => { %>
                                                <% if(item.name === group.overseer.name){ %>
                                                    <td><strong><%= item.name %></strong></td>
                                                <% } else { %>
                                                    <td><%= item.name %></td>
                                                <% } %>
                                                
                                            <% }) %>
                                        </tr>
                                        
                                        
                                    <% }) %>
                                </tbody>
                    
                            </table>

Current Display: https://i.sstatic.net/dEc8y.png

Desired Display: https://i.sstatic.net/acmtH.png

View CodePen Example

Answer №1

The final output should resemble the following structure:

    <% for(let i=0; i<=groups[i]?.items?.length; i++) { %>
            <tr>
               <% groups.forEach((group, j) => { %>
                    <td><%= groups[j]?.items[i]?.name %></td>
               <% }) %>
            </tr> 
    <% } %>

You may need to make adjustments based on your specific requirements, but this template can help you format and display data as desired.

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

A problem occurred while compiling the 'SharedModule' template: The expression form is not compatible with the current system

In creating this share module, I have included the following components: @NgModule({ declarations: [ , DateToPersian , EnumToArrayPipe , SearchWtihInput , ConvertbytePipe , ArraySortPipe , MonySplitePipe , IsEllipsisActiveDir ...

Bootstrap implementation for personalized notifications

I am utilizing bootstrap notifications to display important messages to my users. Within my code, there is a DIV element named <div class="notifications bottom-right"></div> Theoretically, the library should be handling the JavaScript. I ha ...

Replacing the previous observation

My events app features an all-events component that showcases all the events created. Upon loading the all-events component, the events are fetched from the database. Below is a snippet of the relevant code from the Typescript file of the all-events compo ...

Using Backbone to Retrieve a JSON File from a Server: Deciding Whether to Include the File Extension ".json" in the URL or URLRoot

Exploring Backbone with exercise by trying to obtain a JSON file from the server using the urlRoot property of the Model. Encountered an error (404) when setting urlRoot: "./js/json/todo", paths with ".json" work but console.log(todoItem.get('descrip ...

Customizing Bootstrap CSS

In my recent code, I included a bootstrap css reference in this manner: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5T ...

Exploring the functionality of the $.each jQuery iterator. Can someone clarify the distinctions between these two methods?

Having vertices as an array of google.maps.LatLng objects means that they should return latlng points. The first code snippet works perfectly fine, however, I encounter issues when using the second one. // Iterate over the vertices. for (var index =0; ind ...

Identifying text within clicked divs using identical ids

$(document).ready(function(){ $('#peoplelayer').click(function(){ $(this).fadeOut(500); var str = $(this).text(); alert(str); }); }); This is code where I use the same id "#peoplelayer" for all the divs. When on ...

Displaying a div after a successful form submission using Jquery

I created two popup windows. One is used to ask the user whether they want to submit the form, and if they click 'yes', the form is submitted. The issue I encountered is that the other popup window should be shown after the form is successfully s ...

When I hover my mouse over the items on the Navigation bar, they shift forward

Seeking assistance with a coding issue. When hovering over TOYOTA, the HONDA and CONTACT US sections move forward unexpectedly. This movement is unwanted as I would like only the next list item to display when hovering over TOYOTA and HONDA. How can I corr ...

Providing properties to the main Vue.js components

An Issue I'm Facing I am currently attempting to pass a prop to my root constructor. To achieve this, I have been exploring the use of propsData, which I learned about from this resource: var appComponent = Vue.component('app', require(&ap ...

Tips for hiding the calendar icon once a form has been submitted

Below is the HTML code snippet for the date field. <asp:TextBox ID="txtExpiryDate" runat="server" Width="80px" MaxLength="10" CssClass="fromDate" /> And here is the HTML code snippet for the Submit button. <asp:Button ID="cmdSubmit" runat=" ...

Some suggestions for updating two div elements using only one Ajax response

My website features a signin() button that I want to enhance with ajax functionality. When the button is clicked, I need it to update two divs: one displaying a personalized welcome message, and the other showcasing a statistics table in a different locati ...

Linking query branches without encountering the "Exceeded the number of hooks rendered during the previous render" error

This apollo client utilizes a rest link to interact with 2 APIs. The first API returns the value and ID of a record, while the second API provides additional information about the same record. I combine this information to render the content without using ...

What is the best way to obtain a unique dynamic id?

This is the unique identifier retrieved from the database. <input type="hidden" name="getID" value="<?php echo $row['ID']; ?>"> <input type="submit" name="getbtn" value="Get ID"> How can I fetch and display the specific dynami ...

Retrieve the value of the option that has been selected and then send it over to the function

Hello, I am currently working on creating a reservation page using Razor Pages in ASP.NET. The page includes two drop down lists - one for selecting the location and the other for choosing a room within that specific location. I want to pass the selected l ...

Activate the capture property for the file selection based on the label that is selected

This is a form that consists of two labels: <form method="POST" action='/process' enctype="multipart/form-data"> <div> <label for="file" class="upload-button"><i class=" ...

Preventing users from clicking on links unless they double click by using CSS rotation

I'm struggling to figure out why only the white portion of my links is clickable. The links are designed as "3D" buttons using CSS rotate transitions, but I can't seem to fix the issue. Any assistance would be greatly appreciated! Check out the ...

Ways to Verify the Existence of a Value in an Array Using JavaScript

In my Laravel blade file, I have an array that I am accessing in JavaScript like this: var data = {!! json_encode($data) !!}; When I check the console, the variable is displayed as seen here: variable data console print Additionally, I'm retrieving ...

Is there a way to eliminate the blue formatting on my phone?

I've encountered a styling issue on my website when viewing it on mobile, specifically with links on iPhone. I've already attempted the solutions mentioned in this discussion: How do I remove the blue styling of telephone numbers on iPhone/iOS? ...

Issues with MP3 audio playback on Firefox and Firefox for Android browsers

Currently, I have integrated the Html5 audio tag into my website, only referencing mp3 audio format and not ogg. Surprisingly, everything seemed to be functioning perfectly when testing on a server with Firefox. However, once the same code was deployed ont ...