A table widget

[mirkea]

- Do you want to request a feature or report a bug? Request a feature

- What is the current behavior? Managing basic lists (such as a price table) is often a regular part of managing content for a site or web app As it stands now, there is no way to define a list of items (texts) that is easy to read AND edit, due to the way the interface is designed (input field after input field after input field is not the same as a compact list, or table)

- What is the expected behavior? A simple table structure to add content in. I will use Webhook as an example since it's a fantastic CMS with a fairly nice and simple solution to implement tables.

Here is how you enter the data, based on the defined data structure (columns)

- Please mention your CMS, node.js, and operating system version. Netlify CMS version 0.4.6 WIndows 10 64biy node.js v8.4.0

[erquhart]

@mirkea agreed, a table interface would be smart. It would essentially be a list widget with different styling, but the nested widgets would also need updated styling - perhaps it shouldn't use actual nested widgets and just provide a few specific field types, e.g. text, number, select, all of which would be styled inputs within the widget itself.

If you'd be up for trying a PR, I'm happy to answer any questions - this is a great first issue.

[mirkea]

@erquhart I'd love to but that's not my area of expertise (design, markup, skining) so I'm not the guy for it, but I'll see if a dev on my team would be willing to look into it

[zrayed]

i concur with this recommendation as even original WISYWIG editors had a table function....as it stands right now it is a tad annoying that even basic HTML markup for table borders is not recognized (outside of sloppy quasi-in-line CSS (current wrksln: https://stackoverflow.com/questions/43196541/jekyll-now-github-pages-tables-dont-show-up) == hard to manage and wtf is html5 dying??).

@mirkea -- i used to do exactly that (design, markup, skinning) for a small indie shoppe in Baltimore.....built a few full-stacks as well....pls lmk if / how can join in the effort on this minor extension (i.e. some general leads to the arch would help a bunch as i only started using both jekyll and netlify < 1 mo. ago) - would love to help with a dynamite sys!

[eliwilliamson]

@erquhart any update on adding table functionality to the wysiwyg bar? i have multiple clients who have requested this feature for quite some time. It may force us to migrate to something that supports this 👎 - if you can, please prioritize this essential feature to content creation.

[erquhart]

@eliwilliamson I'm really glad the project has been useful in your business so far. Are you up for contributing at all? It'd be a great feature, I totally agree, there's just so much authoring that the community maintainers can do.

[eliwilliamson]

@erquhart i wish i could but i think it is above my skillset. I also think the request is misunderstood. I don't think we are looking for a new input type for the cms - rather an enhancement of the rich text editor that allows for creating/editing tables in markdown. I'm not familiar with the construct for this but there must be a something that could be bolted on to handle this? thinking something like this:

@mirkea @zrayed

[robertkarlsson]

@erquhart @eliwilliamson Looking through the source code of this project it looks like the implementation of the slate editor is pretty well prepared for handling tables (there is a lot of code mentioning tables). I can take a look at this, but not before next week when I go on vacation.

[tech4him1]

Wondering if this needs to be an "opt-in" button since not all markdown parsers support it (it is not part of CommonMark).

@erquhart We'll also need to consider at some point what the best way is to prevent cluttering the toolbar. Maybe we need to allow plugins to add to the toolbar directly (WP-style)?

[eliwilliamson]

@robertkarlsson you rock! 🤘 enjoy your vacation - happy we are finally getting this usability hole filled

[erquhart]

@tech4him1 you mean something beyond the buttons config property?

[eliwilliamson]

@robertkarlsson @erquhart anything i can do to help move this forward?

[eliwilliamson]

related ticket https://github.com/netlify/netlify-cms/issues/1503

[missmatsuko]

From my understanding, this ticket is a feature request for a new table widget and #1962 is a feature request for table support in the existing MarkDown widget.

I'd like the table widget to have the ability to be completely user-configurable. So editable headers, columns, and rows. I'm thinking this could be the default behaviour if no fields are set in config.

I'll take a look to see if this is something I can work on.

[erquhart]

Having looked at the original post here, the meaning of this issue has changed. It's about changing the UI for lists, not creating HTML tables, which would only make sense in markdown. #1962 is the issue I think most folks here are needing.

_{Sent with GitHawk}

[missmatsuko]

Can we use #1962 for table in markdown and keep this issue for a table widget? They're different asks and serve different purposes.

[erquhart]

The original post was essentially requesting a table-like UI for the list widget. Every other comment here is about tables in markdown. The former is what this issue will focus on. Sound right?

_{Sent with GitHawk}

[missmatsuko]

I feel like the original issue was taken over by a different issue when a new one should've been made for it. A WYSIWYG table can probably only contain text and not other widgets, e.g. a Relation. They serve different purposes.

[erquhart]

@missmatsuko we're already on the same page, see my comment above. This issue is for a table-like interface for lists, whereas #2845 is for tables in markdown.

[eliwilliamson]

It's been another year. Any update on a more user-friendly table creation/editing tool @erquhart or @biilmann? I hate to forego using NetlifyCMS again for my upcoming build because this essential feature is still missing. Please bump it up in priority if possible. Aside from my personal requests, i've heard this is a common blocker for adoption of NetlifyCMS.

[dreamofi]

With Gatsby, in markdown editor widget, I can add a table directly by switching to Markdown mode (instead of Rich text mode), and paste the HTML Table code generated by Pandoc in the middle of it (initially I used Pandoc to convert a docx file to md). You guys can see an example of my page and the md files here (I switch from Bulma to tachyons, and for the style of table I had to add a little CSS): raw md file Preview page

[erquhart]

Note: this issue is not about tables in Markdown. Please track #2845 for that.