JSFiddle - React, Tailwind, and code Playground

by odydahary

HTML

<script src="https://cdn.datatables.net/1.12.0/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.0/css/jquery.dataTables.min.css">
<p>
  *C1 = Criteria 1, ...
</p>
<table id="mytable">
  <thead>
    <tr>
      <th>grade_id</th>
      <th>teacher</th>
      <th>C1</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

JavaScript

$(function() {
  $('#mytable').DataTable({
    ajax:"[{'grade_id': 1},{'teacher': 'Mia'},{'sub_criteria_id:1},]",
    columns: [{
        data: 'grade_id'
      }, {
        data: 'teacher'
      },{
        data: 'sub_criteria_id'
      },
    
    ]
  });
})