New Table - Custom Column with Button?

App Building
1

Hi - I've begun looking at the new Table component and have not yet found how to add a custom column containing a Button to the table. In the legacy table component, this was done by simply adding a custom column with a Column type of Button. But in the new table, there is no selection to do so and I've found no doc indicating support for this.

Is there doc covering this use case anywhere?

Thanks!

1 Like
2

Hi! The new table supports "Row Actions" in place of custom Button columns. You can add row actions and configure their event handlers through the Table's inspector in the Content section.

Let us know if this works for your use case!

image
image638×1034 17.3 KB

3

Thanks!

Yes, that should work for us! Can you send me a link to the doc covering this? I noticed that the default behavior is that the action icon is only visible when hovering over the line. There's one page we have where the designer wants the icon to always be visible and I didn't see any property to control that.

Thanks!

4

Hey @jimmealcast!

There's some documentation on table actions here. If you'd like something that is permanent you might try adding a "Click cell" handler to one of your columns. The "Link" type can also be useful for indicating that it's clickable.

Does that work for your use case? Or is there a particular part of your flow that calls for something else?

5

Hi!
The table actions using an icon does work fine for opening a modal - which is what it needs to do. The one question I still have on this is how to make the table action icon always visible. The designer wants it to always be visible on this table. Any hints on how to do that?

Thanks!

6

So far there isn't a way to make action buttons permanent - if you're looking for icons specifically could an image column work?

Curious to hear more about the design specifications you're looking to meet!

7

Hi Kabirdas,

No worries - it's not an absolutely fixed requirement.

The designer just wants the option for an action visible at all times. It won't be all the actions, but just some. Not sure exactly why, but that's the ask.

For now, he's fine with what's there.

8

I like the new action feature but I think from a usability perspective it would be nice if there was an option to fix them into a column as a button or icon for things that are important.

Sometimes the user won't discover the ability unless they hover over the record and they might not do that at first glance.

9

Hey there! This is noted, and there are a couple of feature requests open internally to address it that I can report back here on. Thanks for adding your feedback @kindredAsaf :slightly_smiling_face:

Revisiting this thread, a workaround that's a bit more involved but may provide a more thorough solution is to use an HTML column with an attached click handler:

This can work well in conjunction with Custom CSS since you can specify class names in the HTML for the column (they can even be dynamic!). That lets you do something like this:

Hopefully that helps until the dev team can add a more robust solution!

10

Wanted to share a workaround for this from another user.
Add a Custom Column with Tag format. Hardcord in a Mapped Value that you want to be in your "button" (You can also add an icon). Connect an Click cell Event Handler.

image
image316×750 26.2 KB

image
image1048×372 52.3 KB

11

You are great, Kabirdas!
Could you tell me how you do this function?

12

Here's the custom CSS I used @lovelybaymax_22880!

.table-button{
  color: white;
  padding: 0.5em 0.75em;
  border-radius: 0.3em;
  width: 5em;
  text-align: center;
  cursor: pointer;
}

.table-button{
  background-color: {{theme.primary}};
}

.table-button:hover{
  background-color: {{theme.primary + "55"}};
  color: black;
}

The column itself is just an HTML column with the following value:

<div class="table-button">Update</div>

Is there something in particular that you're stuck on?

13

@Kabirdas thanks for sharing your workaround!

In the 'Click cell' event handler, is there a way to reference the index (or any other data) of the row for which the cell/button was clicked?

14

Both currentRow and currentSourceRow should be in scope for the event handler!

You can use this either directly with an event handler action:

Or trigger a query with the Run script action to pass the scope along:

15

Hey folks! Just a heads up that the dev team is looking to start rolling out button columns for the new table over the course of the next couple weeks!

4 Likes
16

Wanted to pop in here and say that the new button column type has been implemented for table!

See post here: New: Button column type on Table.

2 Likes