csv-to-html-table
csv-to-html-table copied to clipboard
[suggestion] Edditable and savable
Would be a nice addition to make the table edditable and a possibility to save it afterwards
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);