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?

Let’s first touch upon why we created it. To make lists of models sortable and filterable we used to rely on the venerable DataTables.net component. It works great, but comes with a few caveats. First, it’s built on jQuery. In our projects we avoid using jQuery nowadays and use Vue specific components. Secondly, there’s a lot of stuff in there that we don’t need, we probably are only using 10% of it’s features. So for our use cases, it’s a bit bloated. And lastly, because it contains so much features, using it can be a little unwieldy.

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

Here’s an example of how you can use the component:

<table-component
     :data="[
     { 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 },
     ]"
     sort-by="songs"
     sort-order="asc"
     >
     <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>
 </table-component>

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

Like mentioned before our table component is very much targeted to our use case. Our intent is to keep this component very clean and simple. If you need more features, take a look at the numerous other Vue components out there that can render table data.

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.