JSFiddle - React, Tailwind, and code Playground

HTML

<table class="grid">
    <thead>
        <tr>
            <th>Nome</th>
            <th>Valor</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Exemplo 1
                <div class="embrulho">
                    <div class="opcoes">
                        <button data-id="1">A</button>
                        <button data-id="1">B</button>
                        <button data-id="1">C</button>
                    </div>
                </div>
            </td>
            <td>-1.233,00</td>
        </tr>
        <tr>
            <td>Exemplo 2
                <div class="embrulho">
                    <div class="opcoes">
                        <button data-id="2">A</button>
                        <button data-id="2">B</button>
                        <button data-id="2">C</button>
                    </div>
                </div>
            </td>
            <td>-1.233,00</td>
        </tr>
        <tr>
            <td>Exemplo 3
                <div class="embrulho">
                    <div class="opcoes">
                        <button data-id="3">A</button>
                        <button data-id="3">B</button>
                        <button data-id="3">C</button>
                    </div>
                </div>
            </td>
            <td>-1.233,00</td>
        </tr>
        <tr>
            <td>Exemplo 4
                <div class="embrulho">
                    <div class="opcoes">
                        <button data-id="4">A</button>
                        <button data-id="4">B</button>
                        <button data-id="4">C</button>
                    </div>
                </div>
            </td>
            <td>-1.233,00</td>
        </tr>
    </tbody>
</table>

CSS

/* Estilo apenas para deixar o exemplo bonito */
 body {
    font-family:Arial, Helvetica, Helvetica Neue, sans-serif;
}
.grid {
    width:100%;
    border-spacing:0;
    font-size:12px;
    border:1px solid #ccc;
}
.grid thead th {
    background:linear-gradient(#fafafa, #eee);
    padding:4px;
}
.grid tbody td {
    border-bottom:1px solid #ccc;
    padding:10px 5px;
}


/* Estilo que faz a mágina */
 .grid .embrulho {
    overflow:hidden;
    position:relative;
}
.grid tbody tr:hover td {
    background:#ffffcd;
}
.grid tbody tr:hover .embrulho {
    overflow:visible;
}
.grid .opcoes {
    background:#ffffcd;
    border:1px solid #ccc;
    border-radius:0 0 3px 3px;
    border-top:1px solid #ffffcd;
    position:absolute;
    top:0;
    right:0;
    margin-top:10px;
}

JavaScript

$('.grid').on('click','.opcoes button',function(){
    var id = retornaId($(this));
    
    //usa o id pra uma requisição AJAX, etc...
    alert("ID:" + id);
});

function retornaId(el){
    return el[0].getAttribute('data-id');
}