Is it possible to add custom header to 'Insert a new row'?

App Building
1

Hello,

When using the 'Insert a new row' functionality of the table component - is it possible to add a custom header to the new row that appears?

I.e. instead of 'Insert a new row' - something like "Add new product"

thanks, Neil

image
image504×684 36.8 KB

2

Filed as a feature request! In the meantime, I wonder if custom CSS could help us here :thinking: Will try a few things and let you know

3

This is what I've been able to come up with!

Here's the CSS I'm using:

#table-table1 > div > div.ReactTable.table-floating-row > div.table-floating-row-header > div{
  display: none;
}

#table-table1 > div > div.ReactTable.table-floating-row > div.table-floating-row-header:after {
  content: 'Add new product';
}

#table-table1 > div > div.ReactTable.table-floating-row > div.table-floating-row-header {
   justify-content: flex-start !important;
  
}

Let me know if this works for you. In order to write custom CSS in Retool, I'd follow this guide. There's a callout in there about grabbing the specific selector for your page element:

If you're struggling to find the correct class name for the element you want to edit, you can:

Right click on the text you want to add CSS to -> Copy -> Copy selector

This will copy the path to the element you want to edit, and is super easy to avoid having to manually find the correct class. This is especially useful for <p> and <span> tags which don't have a class name assigned.

Screenshot 2023-02-13 at 10.14.37