Hide Action Buttons for New Row

App Building
#1

Is there a way to hide (or at least disable) the action buttons when adding a new row? What's weird is they show up with blank text, but are clickable and interact with the existing selected row. I want to hide them. I tried disabling them and even though the result evaluates to true, it only disables the existing ones in the row (as seen in the image), not the ones in the New Row.

image
image1026×363 26.5 KB

[Edit] This is the code I was using to disable the up button, for example:

{{ !!tableActivitySteps.newRow || currentRow.display_order === 1 }}
1 Like
#2

Hey @ekaiser!

This is actually an issue that our dev team is looking into. We can let you know here when it has been resolved!

3 Likes
#3

Not sure if resolved yet or not - but i solved it like so:

.ReactTable.table-floating-row .rt-td:nth-of-type(1){
  visibility:hidden!important;
  /*display:none!important;*/
}

use 'display' if you want it to not maintain is physical layout either and just be completely gone. It wont line up with column headers, thats all.

-MD

1 Like
#4

Hi, just wanted to check in and see if there's an ETA for this fix.

#5

Hey @sofia_suma! So far no specific timeline. Is there something in particular that you're running up against?

#6

Yes, we have a action button that runs a delete query and our users are accidentally pressing it when adding a new record. When they press it, it ends up deleting the last selected record because the delete query uses the TABLE.selectedRow.data to identify the record to delete. I tried disabling the button but adding the following into the 'Disable Action Button' field: {{!ORIGIN_COUNTRY_TABLE.newRow}}

Here is a picture of the table, what the new row looks like and the Action settings.

image
image765×520 77.3 KB

#7

Ah got it, yes definitely something to avoid :sweat:

Have you had any luck using the Custom CSS mentioned above? You might also try something like the following:

#table-YOUR_TABLE_ID_HERE .ReactTable.table-floating-row ._r9YaM{
 visibility: hidden;
 /*display: none;*/
}