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 showProducts">
					<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
  },
  computed: {
    showProducts() {
      return this.products.filter(a => {
        console.log(a.pn)
        return (a.pn + '').includes(this.search)
      })
        .sort((a, b) => {
        if (this.currentSortDir === 'asc') {
	        return a[this.currentSort] >= b[this.currentSort];      
        }
        return a[this.currentSort] <= b[this.currentSort];
      })
    },
  },
  methods: {
    sort:function(col) {
      // if you click the same label twice
      if(this.currentSort == col){
        this.currentSortDir = this.currentSortDir === 'asc' ? 'desc' : 'asc';
      }else{
        this.currentSort = col;
        console.log( 'diff col: '+col );
      } // end if

    }, // sort

  }, // methods
}); // vue