JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.min.js"></script>
<div id="table"></div>

JavaScript

new Tabulator("#table", {
  groupBy: "codename",
  groupHeader:function(value, count, data, group) {
    if (value == "X123") {
      return "Productname for X123";
    }
    if (value == "X124") {
      return "Productname for X124";
    }
    return value;
  },
  initialSort:[
      {column:"month", dir:"asc"},
      {column:"codename", dir:"asc"}
  ],  
  columns: [
    { title: "Product", field: "codename"},
    { title: "Month", field: "month"},
  ],
  data: [
  	{codename:"X123",month:"Jan"},
  	{codename:"X123",month:"Jun"},
  	{codename:"X124",month:"Feb"},
  	{codename:"X124",month:"Oct"},
  ],
});