Gutenberg: Consider bringing in layout options to table block

[karmatosed]

The table layout allows you to select from a drop down. What about experimenting a bit with this and looking to the recent work done in Columns by offering layouts on first interaction? Tables have default layouts, for example, header rows. This could look like this:

Perhaps this could go even further and have a second step that allowed you to visually pick a grid. I took inspiration from the awesome Grids layout builder plugin for Gutenberg for this visual: https://wordpress.org/plugins/grids/.

I want to be clear, these are just experiments right now into what could potentially be ways to allow people to get a start in creating the tables they want. I feel strongest about the first screen as a step that aligns with the work just released for columns. With the framing of experimentation and sharing early that, I would love some feedback on this 'what if'.

[kjellr]

Perhaps this could go even further and have a second step that allowed you to visually pick a grid.

Some additional reference for this one: Google Docs

I believe this general idea was floated as an enhancement at some point last year, but I can't find the thread at the moment.

[karmatosed]

Great memory @kjellr! It was considered here: https://github.com/WordPress/gutenberg/issues/6923#issuecomment-401736008

Some explorations worth linking in relating to that are:
https://github.com/WordPress/gutenberg/issues/6923#issuecomment-404123790

I could totally see a 2 step process here with first being the picking of layout:

Then once you had the table being able to adjust visually:

[chrisvanpatten]

Just to offer a counterpoint, I've always found those grid selectors to be very finicky. I'm pretty sure they are mostly a non-starter for tablet and smartphone users, because they assume the presence of a hover state to visualize the grid before you select it… not to mention the small tap/click areas.

I like the idea of the placeholder style picker UI, similar to the columns block. Potentially you choose that option, then get the option to input rows and columns in the inputs similar to how they exist today? So essentially you choose a style configuration, then choose your table size as a second step?

[karmatosed]

So essentially you choose a style configuration, then choose your table size as a second step?

Yes, if this was a 2 step process. Just doing the first is also an option to consider and aligns with our existing pattern within columns.

[mapk]

Providing something visual is always nice. I enjoy the way that G docs handles this.

However, I'm not a fan of limiting the rows or columns by using a visual indicator. This, for me, isn't suitable because often times my tables vary too greatly from one to the other as to how many columns or rows I want to begin with.