JSFiddle - React, Tailwind, and code Playground

HTML

<table>
        <tr>
            <td>tr01</td>
            <td>tr02</td>
        </tr>
        <tr>
            <td>tr01</td>
            <td>tr02</td>
        </tr>
        <tr>
            <td>tr01</td>
            <td>tr02</td>
        </tr>
        <tr>
            <td>tr01</td>
            <td>tr02</td>
        </tr>
        <tr>
            <td>tr01</td>
            <td>tr02</td>
        </tr>
        <tr>
            <td>tr01</td>
            <td>tr02</td>
        </tr>
        <tr>
            <td>tr01</td>
            <td>tr02</td>
        </tr>
        <tr>
            <td>tr01</td>
            <td>tr02</td>
        </tr>
        <tr>
            <td>tr01</td>
            <td>tr02</td>
        </tr>
        <tr>
            <td>tr01</td>
            <td>tr02</td>
        </tr>
        <tr>
            <td>tr01</td>
            <td>tr02</td>
        </tr>
        <tr>
            <td>tr01</td>
            <td>tr02</td>
        </tr>
        <tr>
            <td>tr01</td>
            <td>tr02</td>
        </tr>
        <tr>
            <td>tr01</td>
            <td>tr02</td>
        </tr>
        <tr>
            <td>tr01</td>
            <td>tr02</td>
        </tr>
        <tr>
            <td>tr01</td>
            <td>tr02</td>
        </tr>
    </table>
    
    <a href="#" class="js_toggle">toggle_table</a>

CSS

table tr:nth-child(n+7) {
    display: none;
}

table.full-table tr {
    display: block;
   transition: display 2s linear 1s
}

JavaScript

$('.js_toggle').on('click', function(event) {
    $('table').toggleClass('full-table');
    
    event.preventDefault();
});