منشئ الجداول

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.

Ensure .js is present in your site setting: theme_authorized_extensions

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 Table1369×343 102 KB

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 Tables1055×544 137 KB

Preview

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

kuva2048×569 87.3 KB

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

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?

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

The max width is a bit wide on wide monitors:

image2506×1369 109 KB

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:

image2506×1369 110 KB

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.

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:

image1612×1065 96.9 KB

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

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:
https://github.com/discourse/discourse-table-builder/pull/22

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!

This should be working like so:

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

Hooray! This is so great to see, thanks!

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:

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.

Maybe you should delete unused columns?

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

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

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

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 padding807×909 76.6 KB

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?

image811×976 77 KB

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.

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

Yes. Don’t use iPhone, but desktop instead 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?

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?