Editable Tables plugin (edit tables without code)

[TankinatorFR]

I had already shown a work in progress of a procedure destined to create editable tables at some point in the past. I’ve kept working on it since then.
After copy-pasting and manually updating each component of my Editable Tables set of macros into a new project one too many time, I decided to pack it in an easier to manage form and made a plugin out of it.

The objective was to have tables that could be designed and edited by a final user with 0 knowledge about either HTML code or TiddlyWiki’s own formatting.

here is an example of what it can create :

I plan to refactor it in a more elegant form at some point, and also add more customization options, but it work fine already…
It allow you to create any number of distinct tables in any tiddler, choose their titles (and if this title should be displayed) as well as the layout and color of their headers, before writing-down the content of each cells.

I’ve put a demo and a download on TiddlyHost, in case it could be useful to someone else too.

PS : in truth, they are not tables, they are html grids styled to look like tables… sorry I lied

[Sunny]

Thank you very much for sharing this plugin @TankinatorFR
I have had a liitle play with this and would like to ask a question regarding the table formatting.
Is there an easy way to control the grid styles in order to control the width of the columns for each row in the table?

I have attached an example Parts List Template.json (706 Bytes) to show what I mean.

Thanks Sunny

[TankinatorFR]

@Sunny

Is there an easy way to control the grid styles in order to control the width of the columns for each row in the table?

No, not for now.
Only the background color can be customized for now. In fact I added it to test the implementation of such customization.
So I do plan to add more options to style your table.
The first one should be a space for custom CSS that could be a solution for you.
I hope to work on it before the end of this week, but I make no promise.
Then, more true UI options, and setting the dimension is definitely something I would like to get working.

[Sunny]

Thanks for your reply, I really like your plugin.
I am not competent enough with css, css-grid etc. to solve the issue myself.
I know you can use auto-columns etc and define width of each column etc

@TankinatorFR

So I do plan to add more options to style your table.
The first one should be a space for custom CSS that could be a solution for you.
I hope to work on it before the end of this week, but I make no promise.
Then, more true UI options, and setting the dimension is definitely something I would like to get working.

I look forward to seeing your further modifications
Thanks again

[TankinatorFR]

I pushed a small update to solve your problem.
Its user interface will need some improvement, but it work.
If you don’t mind, I added your table to the example list to demonstrate the manual adjustment of the widths of each column. I can replace it if you want.

[Sunny]

Thanks for the update.
I’m glad you used my table as an example for the demo.
I’ll need to look closer to see how you handled the widths, a very useful addition.

[Springer]

Thanks for sharing this tool!

Very small friendly feedback:

It’s great that colors can be palette-driven, not just directly entered. (That is, typing <<colour primary>> works. Other text-entry color specifications, such as rgba and hsv, do not seem to work.)

(EDIT TO ADD: Even if this tool is intended for beginners who do not understand palettes, supporting palette choices would be ideal. It might even be helpful to have two or three palette-driven options already available as selectable radio-buttons, since palette choices will do better if palette changes are selected by user, or are automated according to time of day.)

However, the preview circles do not successfully render for <<colour>> macro values, and so the button to set them is invisible (but still works!).

The button explanation “set color” is confusing for the “set background-color” part at left — since “color” conventionally implies foreground, especially wherever both background and foreground are separately open to choice.

Last on the color GUI: it would be great if the two “set” placeholder values used different fields, since it’s a bit confusing that the same edit-text box appears in two different places. (If you want only one edit-text, I’d suggest making it clearly just one edit-text widget, even while offering two buttons — set background-color to specified color; set foreground-color to specified color.

Last small note:

Using plural labels (columns and rows) — for the edit-text input for how many columns and rows — would be less confusing. (Or use “column-count” and “row-count”). Especially because these labels are directly below the “as-headers” question — so it may seem that you’re asking which column/row (if not the first) is to count as header.

There’s no explanation, in interface, for the checkbox serving to toggle header status. It makes sense, but requires experimentation to see the live-preview effects.

Best regards!

[TankinatorFR]

Thank you for your feedback.

For the colours, I’m just using a slightly modified version of TiddlyWiki’s own color-picker and that’s where a lot of the problems you’ve evidenced come from. I mostly rerouted the fields toward the generated fields of my table. I will need to modify it more deeply.