JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.3/css/dataTables.responsive.css">
<script src="//cdn.datatables.net/responsive/1.0.3/js/dataTables.responsive.js"></script>
<div class="container-fluid container-main container">
	
		<div class="row">		
            <div class="col-md-12">
                <div>A: Xn</div>
                <div>B: Yn</div>
                <div>C: Xn*Yn</div>
                <div>D: sum(0:Cn)</div>
            </div>
			<div class="col-md-12">
				
				<div class="col-lg-12"><table class=" mytable responsive table">
					<thead>
						<tr>
							<td> A </td>
							<td> B </td>
							<td> C </td>
							<td> D </td>
							
						</tr>
					</thead>
						<tbody>
							
						</tbody>
				</table>
                </div>
			</div>
		</div>
		
	</div>

JavaScript

var foo = {
           A: 2,
           B: 5,
           C: 10,
           D: 10,
};

var foo2 = {
           A: 3,
           B: 4,
           C: 12,
           D: 22,
};

var bar = {
           A: 7,
           B: 3,
           C: 21,
           D: 43,
};

var bar2 = {
           A: 9,
           B: 8,
           C: 17,
           D: 60,
};

var data = [foo,foo2,bar, bar2];

var myTable = $('.table').DataTable({
    data: data,
    "columns": [
            { "data": "A"},
            { "data": "B" },
            { "data": "C"},
            { "data": "D"},
        ],
        'order': [[ 0, 'asc' ]],
});

//example if A is not in table
//so I have to add row in index 3 values 8, 2, 8*2 = 16, 43 + 16
foo = {
           A: 8,
           B: 2,
};

//example if A is in table
//so I have to update row at index 2 values 7, 2+3=5, 7*5 = 35, 35+22 = 57
//and correct D of last row 57 + 17 = 74
bar = {
           A: 7,
           B: 2,
};