How do I hide specific elements from a table?

[JesseTron]

I’m looking to hide some of the components of a specific table on my page.

The refresh box and the records box at the top.

[moe]

Try this in the CSS code:

.table-actions {
    display: none;
}

[JesseTron]

Only works on the page CSS. Not component. I have other tables on the page I don’t want to remove that.

[moe]

You can fix this by adding a class inside the component, then add that class in the CSS.

For example:

Then add this CSS in your CSS. You can add it in the layout so it can be used anywhere.

.hide-actions .table-actions {
    display: none;
}

Now, anytime you add the class ‘hide-actions’ it will hide the action bar.

If you want this to work across your entire app, add this CSS code to the header section, but make sure to wrap it in <style> tags like so:

<style>
.hide-actions .table-actions {
    display: none;
}
</style>

[beaugast]

Is there a way to just hide the refresh button and not the new record button?

[Peter]

.t-refresh-button {
    display:none;
}

Put this code in the CSS tab of your page.

Alternatively, if you only want to hide the refresh-button if you have more than 1 tables or lists on your page, then you could use the following code in the css tab of your page:

.hide-refresh-button .t-refresh-button {
    display:none;
}

and add the class (hide-refresh-button) to either the row or to the component css-tab in your page builder of this page. That is, add to the css tab where the component, of which you want to hide the refresh button, is placed.

[beaugast]

Thanks Peter! That worked great.