Bookmarklet for YugabyteDB table's tablets

You may have seen in this blog that screenshots I take from the YugabyteDB console may have less columns. An example:
This:

Rather than this:

I do it for clarity, removing the columns that are not meaningful for the blog post. This help with the very low dev.to image resolution. I also use it for presentations where it is better to show only the relevant info in large fonts.

I do that simply with some CSS and I'll share in this post the bookmarklets I use. For example, for the above, just create a bookmark with this

javascript:(function()%7Bdocument.querySelectorAll('.table-striped%3Anth-child(4)%20tr%3E*%3Anth-child(n%2B3)%3Anth-child(-n%2B6)').forEach(el%20%3D%3E%20el.style.display%20%3D%20'none')%3Bdocument.getElementsByClassName(%22yb-main%20container-fluid%22)%5B0%5D.style.marginLeft%3D%2288px%22%3Bdocument.getElementsByClassName(%22sidebar-wrapper%22)%5B0%5D.style.width%3D%2299px%22%7D)()

and it will remove columns 3 to 6 on the 4th table, which is the list of tablets from the master webconsole.

It does this:

document.querySelectorAll(
    '.table-striped:nth-child(4) tr>*:nth-child(n+3):nth-child(-n+6)'
    ).forEach(el => el.style
    .display = 'none');
document.getElementsByClassName("yb-main container-fluid")[0].style.marginLeft="88px";
document.getElementsByClassName("sidebar-wrapper")[0].style.width="99px";

In short:

• .table-striped:nth-child(4): the 4th table of class table-striped
• tr>*:the first tag under tr (it is th or td)
• nth-child(n+3):from the 3th one
• :nth-child(-n+6): to the 6th one
• finally I resize the sidebar menu

I transformed it to a bookmarklet with https://mrcoles.com/bookmarklet/