Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Consider bringing in layout options to table block #16355

Open
karmatosed opened this issue Jun 28, 2019 · 5 comments
Open

Consider bringing in layout options to table block #16355

karmatosed opened this issue Jun 28, 2019 · 5 comments
Labels
[Block] Table Affects the Table Block [Priority] Low Used to indicate that the issue at hand isn't a top priority to address and can be handled later [Type] Enhancement A suggestion for improvement.

Comments

@karmatosed
Copy link
Member

karmatosed commented Jun 28, 2019

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:

table1

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/.

image

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
Copy link
Contributor

kjellr commented Jun 28, 2019

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

table

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
Copy link
Member Author

karmatosed commented Jun 28, 2019

Great memory @kjellr! It was considered here: #6923 (comment)

Some explorations worth linking in relating to that are:
#6923 (comment)

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

table1

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

42566447-8bbd39ec-84fe-11e8-84d4-997a3347657b

@chrisvanpatten
Copy link
Member

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
Copy link
Member Author

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.

@swissspidy swissspidy added [Block] Table Affects the Table Block Needs Design Needs design efforts. labels Jul 1, 2019
@talldan talldan added this to To Do in Table block via automation Jul 19, 2019
@karmatosed karmatosed added Needs Design Feedback Needs general design feedback. and removed Needs Design Needs design efforts. labels Aug 24, 2019
@karmatosed karmatosed added this to Inbox in Tightening Up via automation Dec 11, 2019
@karmatosed karmatosed moved this from Inbox to Design feedback in Tightening Up Dec 11, 2019
@enriquesanchez enriquesanchez added Needs Accessibility Feedback Need input from accessibility and removed Needs Accessibility Feedback Need input from accessibility labels Feb 4, 2020
@mapk
Copy link
Contributor

mapk commented Feb 4, 2020

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

table 2020-01-28 09_58_20

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.

@karmatosed karmatosed added [Priority] Low Used to indicate that the issue at hand isn't a top priority to address and can be handled later and removed Needs Design Feedback Needs general design feedback. labels May 12, 2020
@jordesign jordesign added the [Type] Enhancement A suggestion for improvement. label Aug 4, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Table Affects the Table Block [Priority] Low Used to indicate that the issue at hand isn't a top priority to address and can be handled later [Type] Enhancement A suggestion for improvement.
Projects
No open projects
Table block
  
To Do
Tightening Up
  
Design feedback
Development

No branches or pull requests

7 participants