How to create a component table with more columns

[Gis_Buyer]

Now the table component only supports 2 columns, which is quite inconvenient. I need to output 7 columns.

[Robert_Petitto]

Asking how to output a table with more than 2 columns has been a popular question over the past year in the forums.

This has been the best solution so far:

Basic Table Component

I’d probably create an HTML table for this. It goes something like… create a template column that creates a <tr> row for each legend item, eg. <tr><td>ICON</td><td>NAME</td></tr> create a Joined List column to string all those together - with no separator create a template column to insert that joined list inside some <table> tags, eg. <table>{joined-list}</table> then display that in a rich text component If you want to get fancy, you can use a CSS table generator and come up with some…

[Darren_Murphy]

There is also a tutorial for this one.

How To: CSS Table with dynamic filtering and sorting

I’ve been asked a few questions about this one, so here is a tutorial that walks through the process step by step. The app I’m working on in the tutorial is copyable, so feel free to make your own copy (see link below). enjoy Links: divtable.com table styler Experimental code to sort joined list by secondary joined list Copyable Demo App Note that the experimental code column is removed from the copyable app, so the table isn’t sorted.

[Uzo]

You can create your own table the way you want to:

Code BOOK

<pre><span><style>

#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 4px;
text-align: right;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #f2f2a2;}

#customers th {
  padding-top: 9px;
  padding-bottom: 9px;
  text-align: center;
  background-color: #04AA6D;
  color: white;
}
</style>

<h2>Items for sale:</h2>

<table id="customers">
  <tr>
    <th>Item</th>
    <th>Price</th>
    <th>QTY</th>
   <th>Total</th>
  </tr>
  <tr>
    <td>Digital Air Fryer</td>
    <td>$120.00</td>
    <td>1</td>
    <td>$120.00</td>
  </tr>
  <tr>
    <td>Slot Toaster</td>
    <td>$14.99</td>
    <td>2</td>
    <td>$29.98</td>
  </tr>
  <tr>
    <td>Webcam</td>
    <td>$159.99</td>
    <td>5</td>
   <td>$799.95</td>
  </tr>
  <tr>
    <td>Printer</td>
    <td>$199.99</td>
    <td>1</td>
    <td>$199.99</td>
  </tr>
  <tr>
    <td>Monitor</td>
    <td>$155.99</td>
    <td>3</td>
   <td>$467.97</td>
  </tr>
  
</table>