JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.6.3/papaparse.min.js"></script>
<p><button id="csv-parse-button">parse</button>
<p><textarea id="csv-textinput" rows="6" cols="10"> Column 1,Column 2,Column 3,Column 4
1-1,1-2,1-3,1-4
2-1,2-2,2-3,2-4
3-1,3-2,3-3,3-4
4,5,6,7</textarea>
<p><button id="dabug">dabug</button>
<p><textarea id="debug" cols=100 rows=6 ></textarea>
<p><div id="debug2" ></div>
<table class="display" id="csv-out-table" border=1 width="100%"></table>
<table class="display" id="csv-out-table2" border=1 width="100%"></table>
JavaScript
$(document).ready(function() {
$("#dabug").click(
function(){
$("#debug").text( $("#csv-out-table").html() );
});
$("#csv-parse-button").click(
function(){
var obj = Papa.parse( $('#csv-textinput').text() );
//~ $("#debug").text( Papa.unparse( obj.data ) );
//~ $("#debug").text( $.toJSON( obj.data ) );
$("#debug").text( JSON.stringify( obj.data , null, -1) );
$("#csv-out-table2").DataTable().clear().destroy();
$("#csv-out-table").DataTable().clear().destroy();
$("#csv-out-table2").DataTable( { data: [[" Column 1","Column 2","Column 3","Column 4"],["1-1","1-2","1-3","1-4"],["2-1","2-2","2-3","2-4"],["3-1","3-2","3-3","3-4"],["4","5","6","7"]] , } );
$("#csv-out-table").DataTable( {
data: obj.data,
paging: false,
columns: [
{title:1,},
{title:2,},
{title:3,},
{title:4,},
{title:5,},
{title:6,},
{title:7,},
{title:8,},
{title:9,},
{title:10,},
],
} );
});
} );