JSFiddle - React, Tailwind, and code Playground

by Brunno Romero

HTML

<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<table id="pieces" data-toggle="table" data-page-size="2" data-page-list="[2,5,10,20,40,80,100]" data-pagination="true" data-id-field="id" data-click-to-select="true" data-maintain-selected="true" data-pagination-first-text="Primieiro" data-pagination-pre-text="Anterior" data-pagination-next-text="Próximo" data-pagination-last-text="Último">
    <thead>
        <tr>
            <th data-filed="select" data-checkbox="true"></th>
            <th data-filed="id" data-sortable="true">#</th>
            <th data-field="kind" data-sortable="true" data-filter-control="select">Tipo</th>
            <th data-field="group" data-sortable="true" data-filter-control="select">Grupo</th>
            <th data-field="gender" data-sortable="true" data-filter-control="select">Gênero</th>
            <th data-field="size" data-sortable="true" data-filter-control="select">Tamanho</th>
            <th data-field="color" data-sortable="true" data-filter-control="select">Cor</th>
            <th data-field="used" data-sortable="true" data-filter-control="select">Usado</th>
        </tr>
    </thead>
    <tbody>
        <tr id="1">
            <td id="select"></td>
            <td>0001</td>
            <td>Camisa</td>
            <td>Atendimento</td>
            <td>Masculino</td>
            <td>M</td>
            <td>Azul</td>
            <td></td>
        </tr>
        <tr id="2">
            <td id="select"></td>
            <td>0002</td>
            <td>Calça</td>
            <td>Atendimento</td>
            <td>Masculino</td>
            <td>M</td>
            <td>Azul</td>
            <td></td>
        </tr>
        <tr id="3">
            <td id="select"></td>
            <td>0003</td>
            <td>Cinto</td>
            <td>Atendimento</td>
            <td>Masculino</td>
  ...

JavaScript

$(document).ready(function () {

    $('#pieces').on('check.bs.table', function (row, event, element) {
        var row = $(element).closest('tr').clone();
        $('#piecesToEmployer tbody').append(row);
        $('#piecesToEmployer tbody #select').remove();
        
        //aqui você chama seu ajax para salvar
    });

    $('#pieces').on('uncheck.bs.table', function (row, event, element) {
        var rmRow = $(element).closest('tr').attr('id');
        $('#piecesToEmployer #' + rmRow).remove();
        
        //aqui você chama seu ajax para remover
    });

});