csv-to-html-table icon indicating copy to clipboard operation
csv-to-html-table copied to clipboard

[suggestion] Edditable and savable

Open gilles537 opened this issue 6 years ago • 1 comments

Would be a nice addition to make the table edditable and a possibility to save it afterwards

gilles537 avatar May 09 '19 07:05 gilles537

In case anyone reads this in the future, you can follow these links: https://datatables.net/examples/api/select_single_row.html + https://datatables.net/reference/button/csvHtml5

Example to make rows selectable/removable and export the resulting table:

Additional Sources

<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.1/css/select.bootstrap4.min.css">

<script src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js" integrity="sha512-y3o0Z5TJF1UsKjs/jS2CDkeHN538bWsftxO9nctODL5W40nyXIbs0Pgyu7//icrQY9m6475gLaVr39i/uh/nLA==" crossorigin="anonymous"></script>

HTML

<button type="button" class="btn btn-danger" id="deleterow">Delete selected row</button>

JS for your csv-to-html table

datatables_options: {
              "buttons": [
                  "csvHtml5"
              ]

Additional JS

// "setTimeout" is lazy - the table has to load before this can work

setTimeout(function(){
  var table = $('#table-container-table').DataTable(); // reinitializes the table

  table.buttons().container()
    .appendTo( $('.col-sm-12:eq(0)', table.table().container() ) ); // replace the class element if necessary

  $('#table-container tbody').on( 'click', 'tr', function () {
      if ( $(this).hasClass('selected') ) {
          $(this).removeClass('selected');
      }
      else {
          table.$('tr.selected').removeClass('selected');
          $(this).addClass('selected');
      }
  } );

  $('#deleterow').click( function () {
      table.row('.selected').remove().draw( false );
  } );
}, 10000);

sabatale avatar Dec 29 '20 18:12 sabatale