Table Builder

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

:information_source: This theme component requires Discourse version 2.9.0.beta9

Install this theme component

:zap: 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.

:mag: Preview

45 Likes

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

2 Likes

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?

5 Likes

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

5 Likes

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:

7 Likes

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

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

5 Likes

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. :upside_down_face:


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

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

Great! Yes, this is currently being worked on.

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

Thanks for the feedback! This has now been incorporated:

Also regarding your error,

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.

Of course, mobile is very important! :slight_smile:

This should be working like so:

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

6 Likes

Hooray! This is so great to see, thanks!

2 Likes

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:


1 Like

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

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.

2 Likes

Maybe you should delete unused columns?

1 Like

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

4 Likes

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

1 Like

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

2 Likes

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. :man_shrugging:

Or we can rely on tricks…



Like this. :smile:

4 Likes

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

1 Like

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

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

3 Likes