Oh Dear is the all-in-one monitoring tool for your entire website. We monitor uptime, SSL certificates, broken links, scheduled tasks and more. You'll get a notifications for us when something's wrong. All that paired with a developer friendly API and kick-ass documentation. O, and you'll also be able to create a public status page under a minute. Start monitoring using our free trial now.

Our vue-table-component got some nice improvements

Original – by Freek Van der Herten – 3 minute read

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.

Stay up to date with all things Laravel, PHP, and JavaScript.

You can follow me on these platforms:

On all these platforms, regularly share programming tips, and what I myself have learned in ongoing projects.

Every month I send out a newsletter containing lots of interesting stuff for the modern PHP developer.

Expect quick tips & tricks, interesting tutorials, opinions and packages. Because I work with Laravel every day there is an emphasis on that framework.

Rest assured that I will only use your email address to send you the newsletter and will not use it for any other purposes.

Comments

What are your thoughts on "Our vue-table-component got some nice improvements"?

Comments powered by Laravel Comments
Want to join the conversation? Log in or create an account to post a comment.