Change the title of the 'Actions' column in the Table block

Custom Coding
1 
<script>
window.addEventListener('get-records-BLOCKID', () => {
setTimeout(() => {
    document.querySelector('#BLOCKID .ag-header-row .ag-header-cell').innerText = "your text";
	}, 500);
   
})
</script>

Replace BLOCKIDs with your own block id/name, set the text you want instead of “your text” and insert the code into Page Settings>Custom Code>Header

3 Likes
2

Trying it on my project, but it doesn’t seem to work. It is still displaying “Actions”

My table block name is dataset-list

Code used in the “Custom code” “header” section of the page

<script>
window.addEventListener('get-records-dataset-list', () => {
setTimeout(() => {
    document.querySelector('#dataset-list .ag-header-row .ag-header-cell').innerText = "Dataset Page";
	}, 500);
   
})
</script>

Link for referece:

3

Hi,
It does display Dataset Page… if you place the action buttons on the left side. Indeed it doesn’t display if the action buttons are placed on the right.

1 Like
4

Thanks for pointing this out, I didn’t notice the first column.
Just for clarification (for future readers, as I rolled back the changes and the link does not display the script fix anymore), this custom code changes the header of the first column of a table block. If the action buttons are on the first column, then it changes the action buttons.
Minor note: The formatting of the text will not apply in the new header.

Note for Softr: It would be interesting to have the column name option in the settings of the action buttons.

Thanks @matthieu_chateau and @Maria for the help in this.

1 Like
5

Definitely upvoting this as using table blocks as a workaround for the inability to create dynamically branded header blocks (without using user groups and multiple blocks) is a must-have for us - but the default ‘Actions’ column label on the right hand column defeats us!

6

I am happy not to have any label above the action button (right placement) and have used this CSS to achieve that:

<style>
#TABLENAME > section > div.container.MuiBox-root.css-0 > div.MuiGrid-root.MuiGrid-container.MuiGrid-spacing-xs-3.css-1h77wgb > div > div > div > div > div.ag-root-wrapper-body.ag-focus-managed.ag-layout-auto-height > div.ag-root.ag-unselectable.ag-layout-auto-height > div.ag-header.ag-pivot-off > div.ag-header-viewport > div > div > div:nth-child(2) > div.ag-header-cell-comp-wrapper
{
    display: none;
}
</style>

Note that you will have to update the nth-child( ) value depending on the number of table columns you have.