JSFiddle - React, Tailwind, and code Playground
HTML
<table border="1">
<tbody><tr><th class="data">gid</th><th class="data">st_astext</th><th class="data">point_loc1</th></tr>
<tr>
<td class="data1" style="white-space:nowrap;"><div style="text-align: right">1</div></td><td class="data1" style="white-space:nowrap;">POINT(27.8270643 47.189558)</td><td class="data1" style="white-space:nowrap;"><div style="text-align: right">0</div></td></tr>
<tr>
<td class="data2" style="white-space:nowrap;"><div style="text-align: right">1</div></td><td class="data2" style="white-space:nowrap;">POINT(27.8255831 47.1891416)</td><td class="data2" style="white-space:nowrap;"><div style="text-align: right">0.0842454358743085</div></td></tr>
<tr>
<td class="data1" style="white-space:nowrap;"><div style="text-align: right">1</div></td><td class="data1" style="white-space:nowrap;">POINT(27.8226969 47.1883872)</td><td class="data1" style="white-space:nowrap;"><div style="text-align: right">0.247583697022473</div></td></tr>
<tr>
<td class="data2" style="white-space:nowrap;"><div style="text-align: right">1</div></td><td class="data2" style="white-space:nowrap;">POINT(27.8198907 47.1876304)</td><td class="data2" style="white-space:nowrap;"><div style="text-align: right">0.406722087635347</div></td></tr>
<tr>
<td class="data1" style="white-space:nowrap;"><div style="text-align: right">1</div></td><td class="data1" style="white-space:nowrap;">POINT(27.8188817 47.1873698)</td><td class="data1" style="white-space:nowrap;"><div style="text-align: right">0.46378110997394</div></td></tr>
<tr>
<td class="data2" style="white-space:nowrap;"><div style="text-align: right">1</div></td><td class="data2" style="white-space:nowrap;">POINT(27.8180823 47.1871542)</td><td class="data2" style="white-space:nowrap;"><div style="text-align: right">0.509114895370919</div></td></tr>
<tr>
<td class="data1" style="white-space:nowrap;"><div style="text-align: right">1</div></td><td class="data1" style="white-space:nowrap;">POINT(27.8152777 47.1863978)</td><td...