Change actions-column-title

Ask the community
1

Hi,

is there any opportunity to change the title of the actions-column-title?

Bildschirmfoto 2023-04-16 um 12.22.00
Bildschirmfoto 2023-04-16 um 12.22.001704×427 55 KB

Thank you and best regards
Martin

1 Like
2

+1. I would love to see this ability as well plus all of the other styling options available for every other column header. I don’t think there is currently a way to do it.

3

Hey,

It’s a feature request, not possible at this moment though.

4

Can it be done with a script for now? I tried following, but isn’t working. Any suggestions?

function replaceText() {
const element = document.querySelector(‘.sw-font-size-m’);
if (element) {
element.textContent = ‘Challenge’;
}
}

window.addEventListener(‘DOMContentLoaded’, function() {
replaceText();
});

5

Meanwhile, I used an image using custom CSS. Very HACKY but works until an update comes. Here’s an image of how it looks:

image
image2588×1342 218 KB

Also sharing URL might not work after some time as the app will be made login-based.

Sharing custom CSS, which you might have to change a little for the positioning of the image as I have customized the header and rows quite a lot. But the classes mentioned should work. Of course, do not forget to change blockids/columnids. Also, some classes used may change with block updates from softr.

placing image for title “Work Challenge” as “Actions” cannot be changed as of Jun2023 in Table-Block
div.ag-header-cell[col-id=“sw-record-action”] {
background-image: url(“https://softr-prod.imgix.net/applications/c28c045c-3ebd-4c5f-ad61-0a96d6fdf35f/assets/1b5792ec-cde7-4675-97e6-3e21b9f6fdfa.png”)!important;
background-size: cover;
width: 118px!important;
height: 21px!important;
margin: 15px 0 0 60px;
}
making the text “Actions” invisible
div.ag-header-cell[col-id=“sw-record-action”] div {
opacity: 0!important;
}
reducing height of table header
[data-block-id=“35f80d9d-f2de-43e6-ada2-2dade9eafb65”] .ag-header div {
transition: none!important;
padding: 0 0 0 2px;
}

2 Likes
6

Very cool! Thanks for sharing!

1 Like
7

Hey - i’m trying to replicate this code to simply make the “actions” heading text invisible but it’s not working. I’ve changed the col-id=“actions” as this is what is coming up in my table block. Is there something else that needs changing?

For reference I am using a “new table block” list & have a column with a button for “one-click updates”.

Thanks for your help!

8

Hi, this is what will make the text invisible. You can try with above column id or with the one that you see in your code. Hope this helps!

1 Like