JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.js"></script>
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/redmond/jquery-ui-custom.css">

<table class=grid id="mygrid">
	<tr>
		<th id="itemId">ID<th id="date">Date<th id="title">Question
	<tr>
			<td>3</td><td>2014-08-19 23:20:05</td><td>Some data for the first row</td><tr>
			<td>4</td><td>2014-08-20 07:32:14</td><td>Second row</td>
</table>

<script>
$(function(){
	
	tableToGrid("#mygrid", {
		autowidth: true,
		hoverrows: false,
		ignoreCase: true,
		rowNum: 999999,
		scrollrows: true,
		colModel: [
            {"hidden":true,"name":"itemId","key":true,"label":"ID"},
            {"width":150,"name":"date","label":"Fecha"},
            {"width":600,"name":"title","label":"Pregunta"}
         ]
	}) ;

}) ;
</script>

<input type=button value="ID of selected row" onclick="alert($('#mygrid').getGridParam('selrow'))">

    <br><br><br>
Steps to reproduce the problem:
<ol>
  <li>Select a row
  <li>Click the button to see what ID is returned
  <li>Now sort the grid by any of the two column
  <li>Select the same row as before
  <li>Click the button again. The ID is different than the first time
</ol>

CSS

body {font: 12px arial}