I am currently using Vue to populate an HTML table with data retrieved from an axios call. The table layout is perfect, but I am interested in finding a way (without converting the entire structure to datatables) to enable filtering on each column header. This way, users can filter multiple columns simultaneously. For example, if the 'Resources' column contains values like 'Truck', 'Trailer', and 'Container', I envision having a dropdown filter on the header of that column. Users could then select 'Truck' to only display rows that contain 'Truck' in the 'Resources' column.
Does that explanation make sense? Is there a built-in method in Vue that allows this kind of functionality?
<table style="width:100%; text-align:center;">
<thead>
<tr>
<th>Title</th>
<th>Resource</th>
<th>Location</th>
<th>Status</th>
</tr>
</thead>
<tbody v-for="dateEvent in dateEvents">
<tr>
<td v-if="dateEvent.id === '2'">{{ dateEvent.title }}</td>
<td v-if="dateEvent.id === '2'">{{ dateEvent.resource }}</td>
<td v-if="dateEvent.id === '2'">{{ dateEvent.location }}</td>
<td v-if="dateEvent.id === '2'">{{ dateEvent.status }}</td>
</tr>
</tbody>
</table>
data () {
return {
dateEvents: []
},
created() {
this.fetchItems();
},
methods: {
fetchItems() {
axios.get('/home/resource_items')
.then(response => {
// handle success
console.log(response.data)
this.dateEvents = response.data
})
.catch(function(error) {
console.log(error)
})
.finally(function() {})
}
}