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>

[Andrew_Davies]

Hi

Great tutorial on this link - but wondering if there is any possibility of this being added to Glide Pages natively.

Just want to add a table with more columns. Not a big ask?!

I have tried Data Grid - but that doesn’t seem to allow adding of edit / delete buttons.

Andrew

[ThinhDinh]

@Andrew_Davies

I have tried Data Grid - but that doesn’t seem to allow adding of edit / delete buttons.

In the Data Grid component, you can allow users to edit & delete each row.

The edit action will allow users to click a cell and edit that cell.

The delete action will allow users to tick the box at the start of the row and click “Delete” on their keyboard to delete that row.

[Andrew_Davies]

Thanks Thịnh

I should have been clearer though - I’ve spotted that functionality, but I don’t want to give users the ability to edit the table in line - too easy to make accidental changes - and no way to denote computed columns that can’t be edited.

Far more preferable would be a simple edit button on each row - just like in the table component (which is far too limiting for me with only 3 usable fields and an image field which I don’t need - and no way of specifying the column width etc. )

Andrew

[ThinhDinh]

@Andrew_Davies

Far more preferable would be a simple edit button on each row

For the record, I fully agree with this.

[Rimatcom]

Were you able to finally do this ?
Is really a basic function, I can’t believe glide does not allow to simply add more columns to a list

[ThinhDinh]

Well, I can’t speak for them, but it directly relates to more development on responsiveness for different screen sizes. It’s not straightforward.