JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" id="sortgrid" class="btn btn-primary">
  Sort by company
</button>
<table width=100%>
<tr>
<td>bla bla </td>
<td><div id="grid_json" style="margin:auto;"></div> </td>
<td>bla bla </td>
</tr>
</table>
<style>
body{
  padding:0;margin:0;
}
</style>

CSS

</style><!-- Ugly Hack due to jsFiddle issue -->
<script src="https://unpkg.com/[email protected]/dist/jquery.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    
<link href="https://paramquery.com/pro2/Content/css7.2.0/pqgrid.min.css" type="text/css" rel="stylesheet"><link href="https://paramquery.com/pro2/Content/css7.2.0/pqgrid.ui.min.css" type="text/css" rel="stylesheet">
<link href="https://paramquery.com/pro2/Content/css7.2.0/themes/office/pqgrid.css" type="text/css" rel="stylesheet">    
<script src="https://paramquery.com/pro2/Content/js7.2.0/pqgrid.min.js"></script>
<script src="https://paramquery.com/pro2/Content/js/localize/pq-localize-en.js"></script>


<link rel="Stylesheet" href="https://paramquery.com/pqselect/trial/pqselect.min.css" />   
<script src="https://paramquery.com/pqselect/trial/pqselect.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" type="text/css"rel="stylesheet">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>

JavaScript

$(function() {
  var data = [{
      rank: 1,
      company: 'Exxon Mobil',
      revenues: 339938.0,
      profits: 36130.0
    },
    {
      rank: 2,
      company: 'Wal-Mart Stores',
      revenues: 315654.0,
      profits: 11231.0
    },
    {
      rank: 3,
      company: 'Royal Dutch Shell',
      revenues: 306731.0,
      profits: 25311.0
    },
    {
      rank: 4,
      company: 'BP',
      revenues: 267600.0,
      profits: 22341.0
    },
    {
      rank: 5,
      company: 'General Motors',
      revenues: 192604.0,
      profits: -10567.0
    },
    {
      rank: 6,
      company: 'Chevron',
      revenues: 189481.0,
      profits: 14099.0
    },
    {
      rank: 7,
      company: 'DaimlerChrysler',
      revenues: 186106.3,
      profits: 3536.3
    },
    {
      rank: 8,
      company: 'Toyota Motor',
      revenues: 185805.0,
      profits: 12119.6
    },
    {
      rank: 9,
      company: 'Ford Motor',
      revenues: 177210.0,
      profits: 2024.0
    },
    {
      rank: 10,
      company: 'ConocoPhillips',
      revenues: 166683.0,
      profits: 13529.0
    },
    {
      rank: 11,
      company: 'General Electric',
      revenues: 157153.0,
      profits: 16353.0
    },
    {
      rank: 12,
      company: 'Total',
      revenues: 152360.7,
      profits: 15250.0
    },
    {
      rank: 13,
      company: 'ING Group',
      revenues: 138235.3,
      profits: 8958.9
    },
    {
      rank: 14,
      company: 'Citigroup',
      revenues: 131045.0,
      profits: 24589.0
    },
    {
      rank: 15,
      company: 'AXA',
      revenues: 129839.2,
      profits: 5186.5
    },
    {
      rank: 16,
      company: 'Allianz',
      revenues: 121406.0,
      profits: 5442.4
    },
    {
      rank: 17,
      company: 'Volkswagen',
      revenues: 118376.6,
      profits: 1391.7
    },
    {
      rank: 18,
      company: 'Fortis',
      revenues: 112351.4,
      profits: 4896.3
    },
    {
      rank: 19,
      company: 'Crédit Agricole',
   ...