Table Builder

[keegan (Keegan George)]

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.

	Summary	Table Builder allows for easily building and editing markdown tables in Discourse with a spreadsheet-style editor.
	Repository Link	https://github.com/discourse/discourse-table-builder
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

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.

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.

Preview

[Jagster (Jakke Lehtonen)]

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

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

[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?

[pmusaraj (Penar Musaraj)]

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

[Canapin (Coin-coin le Canapin)]

The max width is a bit wide on wide monitors:

Maybe we could replace

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

with

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

Or something similar:

[Jagster (Jakke Lehtonen)]

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.

[Canapin (Coin-coin le Canapin)]

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

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

[keegan (Keegan George)]

@Jagster

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

Great! Yes, this is currently being worked on.

@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:

UX: Improve table modal max width for larger screens

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. 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?

[oshyan (Oshyan Greene)]

Hooray! This is so great to see, thanks!

[Canapin (Coin-coin le Canapin)]

@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:

[keegan (Keegan George)]

@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.

[robotnjik]

Maybe you should delete unused columns?

[Canapin (Coin-coin le Canapin)]

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

[Kuro22]

@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?

[Jagster (Jakke Lehtonen)]

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

[Canapin (Coin-coin le Canapin)]

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:

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?

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.

[JammyDodger]

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

[Jagster (Jakke Lehtonen)]

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

[JammyDodger]

@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?

[Jagster (Jakke Lehtonen)]

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?