How do I hide specific elements from a table?

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.

Try this in the CSS code:

.table-actions {
    display: none;
}

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

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>

3 Likes