JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
		
		<input type="text" value="" v-model="search" placeholder="Search">
		
		<table style="text-align: center;">
			<thead>
				<tr>
					<th v-for="column in columns">
						<a 
							href="#"
							v-on:click="sort(column.shortcode)">{{column.label}}
						</a>
					</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(product) in products">
					<td>{{product.pn}}</td>
					<td>{{product.od}}</td>
					<td>{{product.id}}</td>
					<td>{{product.thickness}}</td>
					<td>{{product.lo}}</td>
					<td>{{product.weight}}</td>
				</tr>
			</tbody>
		</table>
		

	</div><!-- /app -->

JavaScript

var vm = new Vue({
			el: '#app',
			data: {
				currentSort: 'pn',
				currentSortDir: 'asc',
				search: '',
				columns: [
					{ label: 'P/N', shortcode: 'pn' },
					{ label: 'OD (De,mm)', shortcode: 'od' },
					{ label: 'ID (De,mm)', shortcode: 'id' },
					{ label: 'Thickness (De,mm)', shortcode: 'thickness' },
					{ label: 'LO', shortcode: 'lo' },
					{ label: 'Weight (kg/1000)', shortcode: 'weight' },
				], // columns
				products: [
					{ 
						pn: 170158,
						od: 13,
						id: .44,
						thickness: 1,
						lo: .45,
						weight: .7
					},{ 
						pn: 1803561,
						od: 12,
						id: .8,
						thickness: .7,
						lo: .11,
						weight: .5
					},{ 
						pn: 170149,
						od: 9,
						id: .64,
						thickness: .6,
						lo: .75,
						weight: .3
					},{ 
						pn: 150149,
						od: 15,
						id: .22,
						thickness: .3,
						lo: .55,
						weight: .9
					},
				], // products
			},
			methods: {
				sort:function(col) {
					//console.log( 'current: '+this.currentSort );
					//console.log( 'col: '+col );
					//var colthing = col;
					
					// if you click the same label twice
					if(this.currentSort == col){
						console.log( 'same col: '+col );
						// sort by asc
						this.products = this.products.sort((a, b) => {
							return a.col >= b.col;
						});
					}else{
						this.currentSort = col;
						console.log( 'diff col: '+col );
						// sort by desc
						this.products = this.products.sort((a, b) => {
							return a.col <= b.col;
						});
					} // end if
					
				}, // sort
				
			}, // methods
		}); // vue