Ways to showcase HTML table in a four-column layout/grid

Delving into Dynamic HTML table creation, I'm currently using jquery for rendering purposes. At the moment, I am only displaying the table.

The Goal

  • I aim to segment my table into four columns or a grid structure
  • Something akin to this:

https://i.stack.imgur.com/FVbQp.png

  • However, I'm stumped on how to proceed with this task

var tableValue = [{
    "Item Name": "CHICKEN BURGER PACKED ",
    "TO Qty": "4.0000"
  }, ... // (Data truncated for brevity)
function addTable(tableValue) {
  var $tbl = $("<table />", {
      "class": "table table-striped table-bordered table-hover "
    }),

    $tb = $("<tbody/>"),
    $trh = $("<tr/>");

// JavaScript function for generating table rows and cells

$tbl.append($tb);
$("#DisplayTable").html($tbl);

}
addTable(tableValue)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> ... // (JS imports)

<div align="center">
  <table id="DisplayTable">
  </table>

</div>

I'm seeking guidance on splitting my table into four columns or grids effectively.

Edit

The specific requirement is to set a height limit for the table such that once the first column reaches that height threshold, the subsequent items would flow into a new column automatically.

javascriptjquerycsshtml-table

Answer №1

To display the array in 4 columns on the page, you first need to split the array into 4 parts.

var tableData = [{
    "Item Name": "CHICKEN BURGER PACKED ",
    "TO Qty": "4.0000"
  },
  {
    // Other array elements here
];

function displayTable(tableData) {
  var $table = $("<table />", {
      "class": "table table-striped table-bordered table-hover "
    }),
    $tbody = $("<tbody/>"),
    $headerRow = $("<tr/>");

  var splitValue = Math.round(tableData.length / 4);
  for (i = 0; i < splitValue; i++) {
    $row = $("<tr/>", {
      "class": "filterData"
    });
    for (j = 0; j < 4; j++) {
      $.each(tableData[splitValue * j + i], function(key, value) {

        $("<td/>", {
          "class": "text-left color" + (j + 1)
        }).html(value).appendTo($row);

      });
    }
   $row.appendTo($tbody);
     }
    $table.append($tbody);
    $("#DisplayTable").html($table);


  }
  displayTable(tableData);
.color1 {
 background:red;
}
.color2 {
background:yellow;
}
.color3 {
background:blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div align="center">
  <table id="DisplayTable">
  </table>

</div>

Answer №2

To create this layout, you can utilize a combination of Divs and tables.

<div style="width:100%">
    
<div style="width:25%; float:left; background-color: red;" >
    
    <table>

      <tr>
        <td>Yogurt</td>
        <td align="right">20</td>
      </tr>

      <tr>
        <td>Samosa</td>
        <td align="right">30</td>
      </tr>


      <tr>
        <td>Pakora</td>
        <td align="right">50</td>
      </tr>
      
      </table>
      
      </div>
      
<div style="width:25%; float:left; background-color: #05ffb0;" >
    
    <table>

      <tr>
        <td>Yogurt</td>
        <td align="right">20</td>
      </tr>

      <tr>
        <td>Samosa</td>
        <td align="right">30</td>
      </tr>


      <tr>
        <td>Pakora</td>
        <td align="right">50</td>
      </tr>
      
      </table>
</div>

<div style="width:25%; float:left; background-color: rgb(50, 115, 220);" >
    
    <table>

      <tr>
        <td>Yogurt</td>
        <td align="right">20</td>
      </tr>

      <tr>
        <td>Samosa</td>
        <td align="right">30</td>
      </tr>


      <tr>
        <td>Pakora</td>
        <td align="right">50</td>
      </tr>
      
      </table>
</div>

    <div style="width:25%; float:left; background-color: yellow;" >
    
    <table>

      <tr>
        <td>Yogurt</td>
        <td align="right">20</td>
      </tr>

      <tr>
        <td>Samosa</td>
        <td align="right">30</td>
      </tr>


      <tr>
        <td>Pakora</td>
        <td align="right">50</td>
      </tr>
      
      </table>
      
      </div>

</div>

Answer №3

Utilizing the power of CSS3 in conjunction with the ul element, we can achieve this. I eliminated the spaces in the key within the JSON data.

var tableValue = [{
    "ItemName": "CHICKEN BURGER PACKED ",
    "TOQty": "4.0000"
  },
  ...
  {
    "ItemName": "TWIN DELIGHT KG",
    "TOQty": "1.0000"
  }
]
var ul=$('<ul></ul>');
$.each(tableValue, function(key, val) {
    $('<li>'+val.ItemName+' '+val.TOQty+'</li>').appendTo(ul);
   
});
 ul.appendTo('#display');
ul {
columns: 4;
-webkit-columns: 4;
-moz-columns: 4;
}

li:nth-child(odd) {
background: white;
}

li:nth-child(even) {
background: gray;
}

ul {
list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div border='1' id="display"></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

obtain the image number by extracting a portion of the text

How can I extract the image number from a string using the sub-string function? I have applied the sub-string function to the property below. It returns 3 at the end in Chrome, but it does not work properly in Mozilla. Issue : After "-->", when I check i ...

javascriptjqueryhtmlcss

Unusual Behavior Uncovered in jQuery Selectors

Have you ever noticed a peculiar behavior of jQuery selectors? I recently discovered that when the page contains elements with non-unique IDs, jQuery returns different results for the same selectors: Here's an example of HTML code: <button id=&ap ...

javascriptjqueryhtmljquery-selectors

I am in need of a blank selection option using an md-select element, and I specifically do not want it to be

I'm currently utilizing Angular Material with md-select and I am in need of creating a blank option that, when selected, results in no value being displayed in the select dropdown. If this blank option is set as required, I would like it to return fal ...

javascripthtmlangularjsangularjs-materialmd-select

How to access vue.js 3 single file component functions from within a script tag

Imagine having a single file component structured like this: <template> // content irrelevant </template> <script> export default { data() { return { redLocations: [ "Isfahaan", "Qom", ...

javascriptvue.jsvuejs2vue-componentvuejs3

Implementing long-lasting login functionality in React using JSON Web Tokens

Currently, I have developed an application using React client/Express API with functioning Authentication. Users are able to register and login successfully. My next step is to implement persistent login using JWT tokens so that when a user accesses the U ...

javascriptreactjsjwt

Experiencing browser crashes following the incorporation of asynchronous functions into a JavaScript file. Seeking solutions to resolve this

In my recent project, I developed a basic online store application using vanilla javascript and ES6 classes. The shop items are stored in a JSON file which I used to populate the user interface. To implement functions like "addToCart", "quantityChange", a ...

javascriptasynchronousasynccallbacktypescript

Verify the presence of a specific number of images, and store them in an array

Currently, I am attempting to utilize jQuery to determine if an image exists within my domain, in order to then store them in an array. Below is the code I am using: jQuery(document).ready(function($) { var images = new Array();    var flag = true; ...

jqueryajaxarrays

Using Node.js and the Azure DevOps Node API, you can easily retrieve attachments from Azure DevOps work items

Encountering a problem while attempting to download an attachment for a work item in Azure DevOps. Utilizing the node.js 'azure-devops-node-api' client (https://www.npmjs.com/package/azure-devops-node-api) to communicate with ADO API. Retrieving ...

javascriptnode.jsazure-devops-rest-api

Guide on how to set the grid cell width to 0 for specific dimensions

What can be used in place of mdl-cell--0-col-phone to either disable an element or make its width zero? <div className="mdl-grid"> <div className="mdl-cell mdl-cell--2-col-phone mdl-cell--2-col-tablet mdl-cell--2-col-desktop"> <Left ...

cssmaterial-ui

The event "subscriptionRemoved" is not being triggered when a password change is made on the Microsoft Graph API

Utilizing the Microsoft Graph API, I have set up subscriptions to receive notifications for calendar events through Node.js. As per the guidelines outlined in the documentation on Enhancing notification reliability for Outlook resources (preview), it speci ...

javascriptnode.jsoutlooknotificationsmicrosoft-graph-api

Are there any solutions to refresh a page by clicking a button in next.js?

I am currently learning how to work with next.js and I'm facing an issue where I need to reload my page to make a new API request. As a beginner, I'm not sure how to achieve this. I've tried a few methods but none of them seem to work. Below ...

javascriptreactjstypescriptnext.js

The package 'models' imported from is not found [ERR_MODULE_NOT_FOUND] error

I'm currently in the process of setting up my project to utilize absolute imports. To accomplish this, I've made adjustments to my jsconfig.json file as shown below: { "compilerOptions": { "baseUrl": "./src&quo ...

javascriptnode.jsvscode-jsconfig

Is there a way to bypass the initial result when using document.querySelectorAll?

this is my own unique html content <div class="content-body"> <table style="text-align:center;" class="table table-bordered"> <tbody> <tr> <th>Text Line</th> </tr> <tr> <td> ...

javascripthtmlcss

Transform a jQuery element into an HTML element

I'm facing a dilemma where I have a jQuery element that needs to be passed into a function that only works with HTML elements. How can I efficiently convert the jQuery element into an HTML element? ...

javascriptjqueryelement

Expanding the width of three floating divs in the center to match the width of the parent container div

In my design, I have a parent container with three inner divs that are floated. The left and right divs have fixed sizes, however, I need the center div to expand and fill the space available within the parent container. <div class="parent-container"&g ...

htmlcss

Is there a way to set up an automatic pop-up for this?

Experience this code function AutoPopup() { setTimeout(function () { document.getElementById('ac-wrapper').style.display = "block"; }, 5000); } #ac-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; back ...

javascripthtmlcsspopup

How can audio be efficiently streamed to the browser in small chunks using JavaScript?

I am currently working on setting up an internet radio station where I want to easily switch songs and overlay sounds. My goal is to limit the audio rate so that the feed can be adjusted before being sent out. Additionally, I would like to provide continuo ...

javascriptnode.jsstreamingaudio-streamingweb-audio-api

Selection determines the value of two fields

This form has predefined values that are used to create a link, but the issue is that these values vary depending on the location. Can you assist me with this problem? <input type="radio" id="iconapp1" name="department" value="1250"/><label for ...

javascriptphpjqueryhtmlforms

Using Modal Functions in AngularJS Controller

I have been working on a project that utilizes the ui.bootstrap. As per the instructions from the tutorial I followed, my setup looks something like this: 'use strict'; angular.module('academiaUnitateApp') .controller('EntryCtr ...

javascriptangularjstwitter-bootstrap

Exploring JSON objects in React for improved search functionality

Hey there! I'm working on implementing a search bar that updates the list of JSON entries based on user queries. Below is the code snippet that displays the video list (<Videos videos={this.state.data}/>). Initially, when the page loads, I have ...

javascriptreactjs