Vue Data Table

A requirement arose in work the other week where a data table would be needed to complete the development of a new feature. I wanted to have a go at a custom implementation to see if I could figure it out. In the meantime, a colleague had already created their own version which is far better to this one, but I figured it was interesting enough and worth sharing as a starting point for others.

One major item this doesn’t cover is virtualisation, whereby rows are rendered conditionally based on them being visible within a scrollable table. Instead, I’ve opted for pagination.

Here’s the result:

The full code is available in the sandbox above, but I want to outline a couple of the important bits.

The table requires two props:

1. data - an array of objects that you want to display. In this case, it’s a collection of users.
2. columns - an array of columns for our table which contains information like which value to display from the data, which component should be responsible for rendering it (if any is provided), and how to sort it.

The data is an array of objects with the following shape with faker generating the information:

{
  id: faker.random.uuid(),
  name: faker.name.firstName(),
  distance: faker.random.number(),
  favouriteWord: faker.lorem.word()
}

The columns are the heavy-lifters here, and for the name it has the following properties:

{
  title: "Name",
  component: NameCell,
  sort: (a, b) => {
    if (a.name.toUpperCase() > b.name.toUpperCase()) {
      return 1;
    }

    return -1;
  }
}

Usually we’d look for a value property to render, but we have a component in this case which is used as follows:

<component v-if="column.component" :is="column.component" :data="item" />
<template v-else>
  {{ item[column.value] }}
</template>

This NameCell component would be passed a user object to manage the display.

Finally the sort will set the current sort to the title of the column, which knows then the sort function associated with it.