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

Unable to make a successful POST request using the JQuery $.ajax() function

I am currently working with the following HTML code: <select id="options" title="prd_name1" name="options" onblur="getpricefromselect(this);" onchange="getpricefromselect(this);"></select> along with an: <input type="text" id="prd_price" ...

javascriptphpjquerymysqlajax

Rails 4 experiences a strange phenomenon where Ajax is triggered twice, resulting in the replacement of

After reviewing other similar questions, it appears that the best approach is to wait for the initial Ajax request to complete before proceeding with the next one. I believed that the following code would handle this situation, but somehow the request is t ...

javascriptjqueryruby-on-railsajaxruby-on-rails-4

Encountering the "TypeError: Unable to access property 'indexOf' of undefined" error while utilizing the ipfs-api

During my development work with the ipfs-api, I ran into an issue where adding an image file to the ipfs node was not functioning properly. Upon further investigation into the error details, it appears that the protocol is being treated as undefined in the ...

javascriptvue.jsrequestipfs

Different ways to modify the color of a chart using am4chart

I am using am4chart to create a line chart on my website. The background of the website is black, so I need to make the chart white. I have tried changing the chart fill when creating the chart, but it didn't work at all. However, changing the chart ...

javascriptreactjschartscolorsamcharts4

Distributing utility functions universally throughout the entire React application

Is there a way to create global functions in React that can be imported into one file and shared across all pages? Currently, I have to import helper.tsx into each individual file where I want to use them. For example, the helper.tsx file exports functio ...

javascriptreactjstypescripthelperreact-typescript

Using v-model in Vue with jQuery integration

I wrote a jQuery code that is executed when the mounted hook runs mounted() { this.$progress.finish(); var geocoder = new google.maps.Geocoder(); var marker = null; var map = null; function initialize() { var $latitude = document.getEl ...

javascriptjqueryvue.js

Creating a reliable dropdown menu populated by data from a database

How can I create a dropdown list that depends on another dropdown list, both populated with values from a database? Your assistance is appreciated. Also, how do I pass the category name to the MySQL query page (list.php)? Currently, I have code that lists ...

phpjqueryajaxmysqlidrop-down-menu

Using HTML and CSS to implement a broadened perspective for a specific design

https://i.stack.imgur.com/ckQHa.png Hello, I am facing an issue with a UX design that is optimized for 1200px resolution width. However, when the HTML is loaded in a browser on a larger window resolution, there is a 200px gap on the right side. How can I ...

htmlcssreactjs

What is preventing me from accessing the sub-elements of an AngularJS controller?

I know this question has probably been asked countless times before, but I'm struggling to find the right words to explain my specific issue. Essentially, I'm having trouble accessing something like $ctrl.thing.subelement. However, the following ...

javascripthtmlangularjs

Swap two frames effortlessly with just a single click!

Is there a way to effortlessly change the contents of two frames with just one click? With a single click, I'd like to modify both "framename" and "framename2" by setting their href attribute to 'qwerty' and 'qwerty2' respectively ...

javascripthtml

Utilizing AJAX to send a Zend Form submission

Is there a way to submit a Zend form using an ajax request in jQuery without the page refreshing? I have already tried using ajaxLink with Zend, but I am unsure how to implement it with a form. ...

ajaxzend-frameworkjqueryzend-form

Having trouble getting tailwind dark mode to work on next.js?

I have set up a custom boilerplate using next.js(10.0.5) with preact(10.5.12), typescript(4.1.3), and tailwind(2.0.2). I am attempting to incorporate a dark mode feature from Tailwind. I followed the instructions from next-themes in order to add the dark ...

javascriptreactjstypescriptnext.jstailwind-css

Can we display an express view in response to a WebSocket event?

My goal is to display an express view within a websocket event as shown below: socket.on('name', function () { //prompt the client to render a specific express view }); ...

javascriptnode.jsexpresssocket.io

Arranging Typescript strings in sequential date format

Looking for guidance on how to sort string dates in chronological order, any expert tips? Let's say we have an array object like: data = [ {id: "1", date: "18.08.2018"} {id: "2", date: "05.01.2014"} {id: "3", date: "01.01.2014"} {id: ...

javascripttypescript

React unit tests experiencing issues with MSW integration

After creating a basic React application, I decided to configure MSW based on the instructions provided in order to set it up for unit tests in both node environment and browser. The main component of the app utilizes a custom hook called useFormSubmission ...

javascriptreactjsjestjsmsw

Adjust the size of an element by utilizing a different element

I'm facing a challenge with this code. I need to dynamically set the width of the "wrap-description" divs to be equal to the width of the corresponding "picture-damage" images plus an additional 20 pixels. Since there will be multiple elements for bot ...

cssangularjsangularjs-ng-repeatdirectiveng-style

Routes inoperative as intended

When using a standard expressroute for this login, I have noticed that even if the req.body.password is incorrect, I am still getting redirected to '/login'. router.post('/student/login', (req, res) => { if (req.body.password === ...

javascriptexpressroutes

Utilize Jquery to extract the functions from a PHP file

I'm a beginner with both jQuery and PHP. Currently, I have an HTML page where I need to utilize functions from a PHP file using jQuery, and then display the results in the HTML. My goal is to count the number of files in three different directories a ...

javascriptphphtmljquery

The PHP content form is malfunctioning and not processing email submissions properly, resulting in the PHP code being

Following a tutorial, I attempted to create a basic contact form using PHP. As a beginner in PHP, I found the process fairly straightforward, but encountered some bugs in the code. Upon integrating the code on my website, clicking the submit button redirec ...

phpjqueryhtmlforms

insert the "tr" element directly following the button

I am looking for a way to allow the user to add another input file right next to the button, so they can select and send multiple files at once. https://i.sstatic.net/TI4eJ.png I have tried using various solutions I found during my search but none of the ...

javascriptphpjquery