Table layout: make whole row clickable

[distantnative]

Adding to the last point: the fact that pages are only accessible by clicking the link in the title field is generally not great, especially on touch devices. The structure field is visually and technically identical, it's also using the table component. There you can click on the full row.

While the Panel does a great job with large enough click areas pretty much everywhere else, the link in the pages table is too small. In my opinion you should at least make the whole cell clickable.

Original thread: https://github.com/getkirby/kirby/issues/4374

[afbora]

I'm not sure of that. If we are going to take the table sections further, this (whole row clickable) should not be mandatory (It should at least have a disable feature). Because while the title has the edit link, we can give a different link when we put a preview or custom button next to it. So different actions can be listed in the tables.

[lukasbestle]

Also I think with the current styling (underlined link), I wouldn't expect the whole cell to be clickable. This doesn't mean we should keep it as is, maybe we can instead change the styling.

[distantnative]

I think this is two decisions:

• whole row clickable vs. Allowing different cells hosting different links
• url cell being clickable as whole cell/more padding va. just the underlined text

[jaro-io]

i am trying to update the title of the first default column from "title" to "something". so far i got here:

type: pages
layout: table
text: false
columns:
  title:
    label: something
    value: '{{ page.title }}'

the problem now is that i cant open the page anymore because it removes the link. any other solution you can suggest for this? if this is the only way to change the title, i guess it definitely makes sense having alternative options to open the page.

[jaro-io]

@distantnative @lukasbestle @afbora does anyone of you have an idea on how to achieve what i am trying to do above? would be lovely to get some help if you have a minute. thank youuu! 🙏🏻 ✨

[afbora]

@jaro-io Sorry for delay. Your request is not possible for stable way (something missing for type: url feature). But as workaround you can try following:

test:
  label: something
  type: html
  value: '<a href="{{ page.panel.url }}">{{ page.title }}</a>'

[jaro-io]

@afbora great idea, i didnt think about this. so helpful! works beautifully! 🎉

i even went one step further. in order to color the links blue (like the title), i added this:

test:
  label: something
  type: html
  value: '<p class="k-url-field-preview" style="padding: 0"><a href="{{ page.panel.url }}">{{ page.title }}</a></p>'

[distantnative]

I'm leaning more towards @afbora and @lukasbestle now, to not expand the link to the whole cell. I would vote for closing this issue.

In the future, we hopefully can implement returning more than a string from the query method. Then, the query value could return an array/object that can be passed to type: url (UrlFieldPreview.vue).

[lukasbestle]

I'm wondering how many use cases there really are for custom links within a table row. Making the whole row clickable would indeed be consistent with the structure field.

[distantnative]

In a pages table, e.g. all of the page's url fields could be displayed and be expected to be clickable themselves than the full row. I think we'd be limiting ourselves quite a bit. And when we think a bit ahead about inline editing fields in the table, making the whole row clickable would also be an additional hurdle to that.

[plagasul]

Although this is closed, I thought perhaps I'd drop this related idea at nolt.

While in the idea one option is to make whole row clickable, the reason behind it is more related to lack of control of the title column and/or not having an easy way to include custom title-like columns (i.e. a column whose value can be clicked to enter the page), much as what @jaro-io above encountered.

I did not fill an issue, because it does not seem one, but I believe this should be addressed. Please take a look at my reasoning.

There are several other nolt entries for table layout, I summarize them here:

• Sort the table by column headers (by far the most demanded) Table layout: change sort via column headers · Kirby Feedback 1

• More control for title column (change its label, width, and use whole row as clickable area) Pages section - table layout: more control for title column · Kirby Feedback 1

• Hide headers and row number Pages section - table layout - add option to hide row number and header row · Kirby Feedback

• More control for image column (change size and format) Pages section - table layout: more control for IMAGE column · Kirby Feedback

• Fit width of column to content Pages section - table layout - option to shrink column width to fit content · Kirby Feedback

Thank you