# Table Builder

**URL:** https://meta.discourse.org/t/table-builder/236016
**Category:** Theme component
**Tags:** deprecated, included-in-core, table-builder
**Created:** [August 12, 2022, 5:57pm UTC](https://meta.discourse.org/t/table-builder/236016 "2022-08-12T17:57:53Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![keegan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/keegan/32/383395_2.png) [@keegan](https://meta.discourse.org/u/keegan)
#### Post date: [August 12, 2022, 5:57pm UTC](https://meta.discourse.org/t/table-builder/236016/1 "2022-08-12T17:57:53Z")

</div>

> ℹ The functionality of this theme component is now included in core Discourse.
> 
> ⚠ **Please remove the theme component from your forum if you still have it installed.**

| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Table Builder** allows for easily building and editing markdown tables in Discourse with a spreadsheet-style editor. |

> Ensure `.js` is present in your site setting: `theme_authorized_extensions`

Install this theme component

## ⚡ Features

### A GUI for easily building tables

A click of a button in the composer brings up a spreadsheet editor to easily generate tables in Markdown.

 ![Creating a New Table](https://global.discourse-cdn.com/meta/original/4X/4/9/e/49ec59c25455bfef2fd0fe345d359e7c52c331ed.png)

### A Powerful Table Editor

Editing tables in posts are easier than ever. Clicking an Edit Table button will bring up a spreadsheet editor for quick and easy updates to your table.

 ![Editing Existing Tables](https://global.discourse-cdn.com/meta/original/4X/8/0/4/804be933a458b58fc326f68b867c321d746426f3.png)

## 🔍 Preview

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [August 15, 2022, 3:58pm UTC](https://meta.discourse.org/t/table-builder/236016/3 "2022-08-15T15:58:30Z")

</div>

That is wonderful. I will try it right away after someone has fixed this:

 ![kuva](https://global.discourse-cdn.com/meta/original/4X/d/5/3/d533765e465b540eec9fcedc747d6ff081cab6d7.jpeg)

This kind of tools really help to use composer, because creating tables is… well, ya know, not too funny task 😉

---

<div class="post-metadata">

### Author: ![michellefs](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/michellefs/32/234543_2.png) [@michellefs](https://meta.discourse.org/u/michellefs)
#### Post date: [August 15, 2022, 6:49pm UTC](https://meta.discourse.org/t/table-builder/236016/4 "2022-08-15T18:49:28Z")

</div>

Before I jump to try this out, can you confirm @keegan whether you can paste multiple cells’ contents from a spreadsheet into the Table Builder?

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [August 15, 2022, 7:08pm UTC](https://meta.discourse.org/t/table-builder/236016/5 "2022-08-15T19:08:19Z")

</div>

I can confirm that it works for Apple’s Numbers, I have copy/pasted rows of entries into the table editor.

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [August 15, 2022, 7:21pm UTC](https://meta.discourse.org/t/table-builder/236016/6 "2022-08-15T19:21:15Z")

</div>

The max width is a bit wide on wide monitors:

 ![image](https://global.discourse-cdn.com/meta/original/4X/e/5/6/e56c8016d138b91575310de9b3cfda43a90bfa3c.png)

Maybe we could replace

```scss
  .modal-inner-container {
    --modal-max-width: 90%;
  }

```

with

```scss
  .modal-inner-container {
    --modal-max-width: $reply-area-max-width
  }

```

Or something similar:

 ![image](https://global.discourse-cdn.com/meta/original/4X/e/9/2/e92ef34f8e51eed5b4cf02d53a39a65e75c9d3a4.png)

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [August 15, 2022, 7:22pm UTC](https://meta.discourse.org/t/table-builder/236016/7 "2022-08-15T19:22:45Z")

</div>

That is just for desktops, I guess. Sure, basic things works, but when an user is on mobiles/tablets there

- can’t edit headers, aka. first cell rows/columns
- can’t delete unused rows/columns
- is not sub-menu because long tapping doesn’t do anything

so created table must edit again ”manually” in composer.

It is good start, I’ll give that, but in this form it is easier to create tables directly when using another than big screen. Now it is just a fancy way get few |-characters 😉

I would like remind that generally out there is plenty more mobile users than desktops.

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [August 15, 2022, 7:29pm UTC](https://meta.discourse.org/t/table-builder/236016/8 "2022-08-15T19:29:57Z")

</div>

I like very much this theme-component.

Being able to easily edit a table from a post view rather from the composer view is weird .  
I understand that the editor is still not (and won’t be) WYSIWYG, but in practice, it feels it should be the opposite. 🙃

* * *

I tried editing existing tables on my forum, but I have an error message:

> **[📜 \[Wiki\] Mad4One Flik Flok Hub Serial Numbers Reference](https://unicyclist.com/t/wiki-mad4one-flik-flok-hub-serial-numbers-reference/273330)**
>
> Mad4One Flik Flok hubs are expensive and have a serial number. Register yours here. Prototypes: Serial number Color Owner Location ??? silver Marco at @MAD4ONE 🇮🇹 Italy P-00002 black Marco at @MAD4ONE 🇮🇹 Italy Retail: Serial...

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/4/9/f49459b729b0b82684c9708059f6f19f3b0fb71e.png)

```plaintext
TypeError: (0 , _text.parseAsync) is not a function

```

---

<div class="post-metadata">

### Author: ![keegan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/keegan/32/383395_2.png) [@keegan](https://meta.discourse.org/u/keegan)
#### Post date: [August 15, 2022, 9:04pm UTC](https://meta.discourse.org/t/table-builder/236016/9 "2022-08-15T21:04:59Z")

</div>

> [@Jagster](#):
>
> That is wonderful. I will try it right away after someone has fixed this:

Great! Yes, this is currently [being worked on](https://meta.discourse.org/t/toolbar-of-composer-is-too-wide-at-least-on-ipad/234743/10).

> [@michellefs](#):
>
> Before I jump to try this out, can you confirm @keegan whether you can paste multiple cells’ contents from a spreadsheet into the Table Builder?

Yes, I can confirm it works on Excel as well.

> [@Canapin](#):
>
> The max width is a bit wide on wide monitors:

Thanks for the feedback! This has now been incorporated:  
[https://github.com/discourse/discourse-table-builder/pull/22](https://github.com/discourse/discourse-table-builder/pull/22)

Also regarding your error,

> [@Canapin](#):
>
> I tried editing existing tables on my forum, but I have an error message

Are you on the Discourse version `2.9.0.beta9` or greater?

`parseAsync()` was added as of [this commit](https://github.com/discourse/discourse/commit/7476c22324a29bba3e025f05e16dce71a197fcd5). If your Discourse version is updated it should be working. Please let me know.

> [@Jagster](#):
>
> That is just for desktops, I guess.

Of course, mobile is very important! 🙂

This should be working like so:

May I know what device you are using so I can look into the issue further?

---

<div class="post-metadata">

### Author: ![oshyan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/oshyan/32/212644_2.png) [@oshyan](https://meta.discourse.org/u/oshyan)
#### Post date: [August 15, 2022, 9:50pm UTC](https://meta.discourse.org/t/table-builder/236016/10 "2022-08-15T21:50:45Z")

</div>

Hooray! This is so great to see, thanks!

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [August 15, 2022, 10:12pm UTC](https://meta.discourse.org/t/table-builder/236016/11 "2022-08-15T22:12:57Z")

</div>

> [@keegan](#):
>
> Are you on the Discourse version `2.9.0.beta9` or greater?

I was, but it was a few commits behind `parseAsync()`. It works after upgrading. Thanks!

A cool thing would be to have access to the emoji selector in the table editopr, but I guess that’s not as simple as it seems?

* * *

Creating tables sometimes adds random empty lines, breaking the generated tables. I don’t know what causes this. Two examples:

---

<div class="post-metadata">

### Author: ![keegan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/keegan/32/383395_2.png) [@keegan](https://meta.discourse.org/u/keegan)
#### Post date: [August 15, 2022, 11:07pm UTC](https://meta.discourse.org/t/table-builder/236016/12 "2022-08-15T23:07:10Z")

</div>

> [@Canapin](#):
>
> A cool thing would be to have access to the emoji selector in the table editor, but I guess that’s not as simple as it seems

Yes, unfortunately so, but maybe I’ll look into integrating that sometime in the future.

> [@Canapin](#):
>
> Creating tables sometimes adds random empty lines, breaking the generated tables. I don’t know what causes this.

Thanks for sharing this. I will look into this. Please do send me a message if you find out what steps to reproduce this, as it’ll help in debugging this issue.

---

<div class="post-metadata">

### Author: ![robotnjik](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/robotnjik/32/120095_2.png) [@robotnjik](https://meta.discourse.org/u/robotnjik)
#### Post date: [August 16, 2022, 7:15am UTC](https://meta.discourse.org/t/table-builder/236016/13 "2022-08-16T07:15:50Z")

</div>

Maybe you should delete unused columns?

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [August 16, 2022, 10:02am UTC](https://meta.discourse.org/t/table-builder/236016/14 "2022-08-16T10:02:14Z")

</div>

One may want to keep the empty columns for some reasons, but maybe some sort of “trim” button in the builder to remove all the empty rows and columns would be nice, I agree.

edit: I misunderstood your message, I didn’t see that you replied to me, but still, a feature to “trim” the table would be nice anyway 😄

---

<div class="post-metadata">

### Author: ![Kuro22](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kuro22/32/261055_2.png) [@Kuro22](https://meta.discourse.org/u/Kuro22)
#### Post date: [August 16, 2022, 10:25am UTC](https://meta.discourse.org/t/table-builder/236016/15 "2022-08-16T10:25:30Z")

</div>

> [@keegan](#):
>
> This should be working like so:

Hi, I just tried that on mobile, but the menu isn’t showing for me. 😿 Is it triggered by long touch?

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [August 16, 2022, 10:32am UTC](https://meta.discourse.org/t/table-builder/236016/16 "2022-08-16T10:32:01Z")

</div>

No, it isn’t just working on mobiles. Just when a mouse is in use.

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [August 16, 2022, 11:12am UTC](https://meta.discourse.org/t/table-builder/236016/17 "2022-08-16T11:12:02Z")

</div>

The extra top padding used for the Edit button is very slightly annoying because sometimes the “new” paddings/margins alters a bit the link between elements on a post.

For example, here there is the word Prototypes, which describes the table below, then the name Retail, which also describes the table below, but the space between the first table and “Retail” is so low that my brain don’t associate “Retail” to the below table at first:

 ![table padding](https://global.discourse-cdn.com/meta/original/4X/3/9/f/39f2b2c126921d624ee7bc465db98aa123dc8632.png)

Maybe it could be interesting to have a larger bottom margin/padding on tables to make the top and down spaces more balanced when the builder component is installed?

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/9/4/f944b4d31015132a565b4d21b258e627e60ed4a0.png)

Here’s how it looks with a padding `1em 0 3em` instead of `1em 0`.

Not sure about this suggestion though. 🤷‍♂️

Or we can rely on tricks…  
  
  
  
Like this. 😄

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [August 16, 2022, 11:27am UTC](https://meta.discourse.org/t/table-builder/236016/18 "2022-08-16T11:27:44Z")

</div>

I can’t get the edit button to show up on my iPhone? Is there something special I need to do?

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [August 16, 2022, 12:20pm UTC](https://meta.discourse.org/t/table-builder/236016/19 "2022-08-16T12:20:55Z")

</div>

Yes. Don’t use iPhone, but desktop instead 😉 It is not totally mobile friendly but I’m sure it will change at some point.

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [August 16, 2022, 12:23pm UTC](https://meta.discourse.org/t/table-builder/236016/20 "2022-08-16T12:23:39Z")

</div>

> [@keegan](#):
>
> Of course, mobile is very important! 🙂
> 
> This should be working like so:
> 
> May I know what device you are using so I can look into the issue further?

I was replying to this example, which seemed to suggest that it should be possible already?

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [August 16, 2022, 12:59pm UTC](https://meta.discourse.org/t/table-builder/236016/21 "2022-08-16T12:59:42Z")

</div>

I’m a bit late because I had to work. Bummer situation, I know. But there are issues at least with iPhone7 .. 11, iPad 6thgen/Air, two different Samsungs, and no matter if desktop-mode is on.

And I haven’t check, yet, if there is some conflicts but everything else works nicely, so?

[Next page](https://meta.discourse.org/t/table-builder/236016.md?page=2)
