How to create a component table with more columns

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

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:

1 Like

There is also a tutorial for this one.

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

table

<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>
2 Likes

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

image

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.

2 Likes

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

1 Like

For the record, I fully agree with this.

1 Like