JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.11.3/dataRender/ellipsis.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%"></table>
    </div>
  </body>
</html>

CSS

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}

JavaScript

$(document).ready(function () {
  var table = $('#example').DataTable({
    "serverSide": true,
    "processing": true,
    "ajax": {
      "url": "https://graphqlzero.almansi.me/api",
      "type": "POST",
      "contentType": "application/json",
      "data": function (d) {
        var gql = `query posts($options: PageQueryOptions) {
          posts(options: $options) {
            data {
              id
              title
              user {
                name
                email
              }
              body
            }
            count: meta {
              totalCount
            }
          }
        }`;
        
        var query = {
          "operationName":null,
          "query":gql,
          "variables": {
            "options": {
              "paginate": {
                "page": (d.start / d.length) + 1,
                "limit": d.length
              },
              "sort": [{
                "field": d.columns[d.order[0].column].data,
                "order": d.order[0].dir.toUpperCase()
              }],
              "search": {
                "q": d.search.value
              }
            }                        
          }
        };
        
        return JSON.stringify(query);
      },
      "dataSrc": function (json) {
        json.recordsTotal = json.data.posts.count.totalCount;
        json.recordsFiltered = json.data.posts.count.totalCount;        
        return json.data.posts.data;
      }      
    },
    "columns": [
      { "data": "id", "title": "Id" },
      { "data": "title", "title": "Title" },
      { "data": "body", "title": "Body", "render": $.fn.dataTable.render.ellipsis( 50, true ) },      
      { "data": "user.name", "title": "Name", "orderable": false },
      { "data": "user.email", "title": "Email", "orderable": false }
    ],
    "order": [[1, "asc"]]
  });  
});