# How to create a component table with more columns

**URL:** <https://community.glideapps.com/t/how-to-create-a-component-table-with-more-columns/37551>\
**Category:** Ask for Help\
**Created:** [January 22, 2022, 6:28pm UTC](https://community.glideapps.com/t/how-to-create-a-component-table-with-more-columns/37551 "2022-01-22T18:28:06Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gis\_Buyer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gis_buyer/32/28227_2.png) [@Gis\_Buyer](https://community.glideapps.com/u/Gis_Buyer)\
**Post date:** [January 22, 2022, 6:28pm UTC](https://community.glideapps.com/t/how-to-create-a-component-table-with-more-columns/37551/1 "2022-01-22T18:28:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [January 22, 2022, 7:22pm UTC](https://community.glideapps.com/t/how-to-create-a-component-table-with-more-columns/37551/2 "2022-01-22T19:22:04Z")

</div>

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](https://community.glideapps.com/t/basic-table-component/5804/58):
>
> 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](https://divtable.com/table-styler/) and come up with some…

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [January 23, 2022, 12:52am UTC](https://community.glideapps.com/t/how-to-create-a-component-table-with-more-columns/37551/3 "2022-01-23T00:52:52Z")

</div>

There is also a tutorial for this one.

> [@How To: CSS Table with dynamic filtering and sorting](https://community.glideapps.com/t/how-to-css-table-with-dynamic-filtering-and-sorting/35784):
>
> 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 slight_smile Links: [divtable.com table styler](https://divtable.com/table-styler/) Experimental code to sort joined list by secondary joined list – [Link to use in External Code column](https://mcdarren.github.io/glide-jl-sort-by-keys-advanced/) – [Clone link](https://github.com/mcdarren/glide-jl-sort-by-keys-advanced)[Copyable Demo App](https://html-tables-concept.glideapp.io/) Note that the experimental code column is removed from…

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [January 23, 2022, 1:43am UTC](https://community.glideapps.com/t/how-to-create-a-component-table-with-more-columns/37551/4 "2022-01-23T01:43:14Z")

</div>

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

[![table](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/b/6bf8b88b25bcc2b49cabb4ce5b0e5b22eae77f02.png)](https://code-book.glideapp.io/)

> **[Code BOOK](https://code-book.glideapp.io/)**
>
> share cool codes, scripts and links

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![Andrew\_Davies](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/andrew_davies/32/41838_2.png) [@Andrew\_Davies](https://community.glideapps.com/u/Andrew_Davies)\
**Post date:** [January 29, 2023, 8:05pm UTC](https://community.glideapps.com/t/how-to-create-a-component-table-with-more-columns/37551/5 "2023-01-29T20:05:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [January 30, 2023, 12:08am UTC](https://community.glideapps.com/t/how-to-create-a-component-table-with-more-columns/37551/6 "2023-01-30T00:08:36Z")

</div>

> [@Andrew\_Davies](#):
>
> I have tried Data Grid - but that doesn’t seem to allow adding of edit / delete buttons.

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/f/1f07cb2e7ebfe5c0045df3a9c323b6ff3039b6bf.png)

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.

---

<div class="post-metadata">

**Author:** ![Andrew\_Davies](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/andrew_davies/32/41838_2.png) [@Andrew\_Davies](https://community.glideapps.com/u/Andrew_Davies)\
**Post date:** [January 30, 2023, 6:38am UTC](https://community.glideapps.com/t/how-to-create-a-component-table-with-more-columns/37551/7 "2023-01-30T06:38:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [January 30, 2023, 9:33am UTC](https://community.glideapps.com/t/how-to-create-a-component-table-with-more-columns/37551/8 "2023-01-30T09:33:35Z")

</div>

> [@Andrew\_Davies](#):
>
> Far more preferable would be a simple edit button on each row

For the record, I fully agree with this.

---

<div class="post-metadata">

**Author:** ![Rimatcom](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rimatcom/32/32285_2.png) [@Rimatcom](https://community.glideapps.com/u/Rimatcom)\
**Post date:** [June 13, 2023, 2:39pm UTC](https://community.glideapps.com/t/how-to-create-a-component-table-with-more-columns/37551/9 "2023-06-13T14:39:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [June 13, 2023, 11:38pm UTC](https://community.glideapps.com/t/how-to-create-a-component-table-with-more-columns/37551/10 "2023-06-13T23:38:41Z")

</div>

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