A straightforward Vue component to filter and sort tables

Today we released our newest Vue component called vue-table-component. It aims to be a very easy to use component to make tables filterable and sortable. In this post I’d like to tell you all about it.

Why creating yet another table component?

When creating our own table component we had only our specific use case in mind: a small set of data that is passed via json.

Using vue-table-component

{ firstName: 'John', lastName: 'Lennon', instrument: 'Guitar', editUrl: '<a href='#john'>Edit</a>', birthday: '04/10/1940', songs: 72 },
{ firstName: 'Paul', lastName: 'McCartney', instrument: 'Bass', editUrl: '<a href='#paul'>Edit</a>', birthday: '18/06/1942', songs: 70 },
{ firstName: 'George', lastName: 'Harrison', instrument: 'Guitar', editUrl: '<a href='#george'>Edit</a>', birthday: '25/02/1943', songs: 22 },
{ firstName: 'Ringo', lastName: 'Starr', instrument: 'Drums', editUrl: '<a href='#ringo'>Edit</a>', birthday: '07/07/1940', songs: 2 },
<table-column show="firstName" label="First name"></table-column>
<table-column show="lastName" label="Last name"></table-column>
<table-column show="instrument" label="Instrument"></table-column>
<table-column show="songs" label="Songs" data-type="numeric"></table-column>
<table-column show="birthday" label="Birthday" data-type="date:DD/MM/YYYY"></table-column>
<table-column show="editUrl" label="" :sortable="false" :filterable="false"></table-column>

Let’s take a look on how our component will render that piece of html. The component doesn’t come with any styling, so you’ll need to provide your own css.

Head over to the demo page to play with the rendered output.

You’ve probably noticed that a filter field is added to the top. By default all data will be used in to filter. If any columns contain html it will be filtered out before filtering. So even though that last column contains links, filtering on href won't yield any results. If you don't want a column of data to be filterable just add :filterable="false to table-column.

Like expected, clicking a column header will sort the data. If the data contains a column with numerical values or dates you must set a data-type prop on table-column. Don't want a column to be sortable? No problem! Just pass a sortable property set to false to table-column.

The component will also remember it’s state for 15 minutes. So when you reload the page that filter and sorting you used previously will still be used.

Head over to the readme on GitHub to learn all the props that can be passed.

In closing

Because in our client projects we are using Vue more and more you can expect some more opensource Vue components from us soon. If you haven’t already done so, be sure to take a look at this list of things we opensourced previously.



PHP developer and Laravel enthousiast at https://spatie.be, blogging at https://murze.be

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store