At beginning of the summer we released a new Vue component called vue-table-component. Our aim was to create a very easy to use Vue component to render a table with data. You can toy a little bit with the component on the demo page. Recently Seb and I worked on two cool new features which I want to highlight in this blogpost.

Custom rendering

In the initial version of the component you could simply say which property of the given data should be rendered in which column. Here's a small example:

<table-component
     :data="[
          { id: 1, firstName: 'John' },
          { id: 2, firstName: 'Paul' },
          { id: 3, firstName: 'George' },
          { id: 4, firstName: 'Ringo' },
     ]"
>
     <table-column show="firstName" label="First name"></table-column>
 </table-component>

This will render a simple table with one column (with a header "First Name") and a row for each Beatle. That's nice for simple data but image you want to render something that's not directly in the data. Like for instance a link to an edit page. In the previous version of the component you had to manually prepare that html and put it in the data. Kinda sucky.

In the latest version of the component you can use scoped slots to render the data. Here's how to use it.

<table-component
     :data="[
          { id: 1, firstName: 'John' },
          { id: 2, firstName: 'Paul' },
          { id: 3, firstName: 'George' },
          { id: 4, firstName: 'Ringo' },
     ]"
>
     <table-column label="First name">
        <template scope="row">
           <a :href=`/edit${row.id}`>{{ row.firstName }}</a>
        </template>
     </table-column>
</table-component>

Much better!

Asynchronously loading in data

In the previous version of the table component the only way to get data into it was by passing an object in the data prop of table-component. For the project we were working on at the time this was enough. But for the next project we needed to load in data coming from the server so we decided to add support for async loading of data.

In addition to accepting objects the data prop of table-component can now handle a function. That function will receive an object with filter, sort and page. You can use these properties of that object to fetch the right data. That function should return an object with a key data that contain the data that should be displayed. If you return a pagination property the component will also render some pagination links.

Here's an example where we use Axios, a popular http request library, to get some data from the server:

<template>
   <div id="app">
       <table-component :data="fetchData">
           <table-column show="firstName" label="First name"></table-column>
       </table-component>
   </div>
</template>

<script>
    import axios from 'axios';

    export default {
        methods: {
            async fetchData({ page, filter, sort }) {
                const response = await axios.get('/my-endpoint', { page });

                // An object that has a `data` and an optional `pagination` property
                return response;
            }
        }
    }
</script>

In closing

Our focus with this component is to make it as developer friendly as possible. So it may not have that many features, but it sure is fun to work with. If you want to know more about our component head over to the readme on GitHub. Need a table component, but don't like ours? Here's a good list of alternatives.