Back

Discovering the TanStack Table library with VueJS

Discovering the TanStack Table library with VueJS

TanStack Table is a headless library for building tables. In this article, I will show you how you can leverage its power with VueJS.

This article is not a complete guide. To be exhaustive, it would be necessary to write a very long article. Moreover, I recently discovered the TanStack library, its possibilities, and I'm not an expert. My ambition is rather to share with the community what I learned so far.

What is TanStack Table ?

TanStack Table is a headless library for building tables, meaning it does not provide any HTML markup or any design. Instead, its role is to provide the logic, the state and a full-featured API to make your own table, from the simplest use case to the most complicated.

Since the library does not provide any markup, its bundle size is lightweight (10 - 15kb gzipped).

Among the features provided by this library, there is all the logical pieces you need to make a table, like API for filtering, sorting, grouping, paginating and displaying datasets.

The library is framework-agnostic and there is an adapter for VueJS.

When to use TanStack Table ?

There are advantages and disadvantages to using this library.

I'd say it's good to use if you're looking for a lightweight library and want full control over your design. For example, it would be a good choice if your company has its own design system. The use of Tanstack Table would make it possible to create robust and complex tables that respect the graphic charter of your company.

On the other hand, the use of this library is more complex than a UI library like handsontable or revogrid. It requires more setup. Total control over your design comes at the cost of some complexity. If you don't have big stylistic requirements, then maybe this library won't suit you.

How to use TanStack Table library with VueJS ?

Let's start with the most basic table. A static table where the only requirement is to display datasets.

First, create a Vue 3 project (with Typescript) and install the @tanstack/vue-table library. We will also need the @faker-js/faker library to generate fake datas.

Bash
$npm init vue my_project$cd my_project$npm install @tanstack/vue-table @faker-js/faker
Click to copy

Open your project with your favorite IDE.

Then create the src/makeData.ts file. This file exports the makeData function we will use to create fake datas.

It also exports our data type: a Person with 3 properties: firstName, lastName and age.

// src/makeData.tsimport { faker } from "@faker-js/faker";export type Person = {  firstName: string;  lastName: string;  age: number;};const range = (len: number) => {  const arr = [];  for (let i = 0; i < len; i++) {    arr.push(i);  }  return arr;};const newPerson = (): Person => {  return {    firstName: faker.name.firstName(),    lastName: faker.name.lastName(),    age: faker.datatype.number(40),  };};export function makeData(...lens: number[]) {  const makeDataLevel = (depth = 0): Person[] => {    const len = lens[depth]!;    return range(len).map((): Person => {      return {        ...newPerson(),      };    });  };  return makeDataLevel();}

Create a Vue component BasicTable.vue with the content below:

<script lang="ts" setup>import { makeData, type Person } from "@/makeData";import { createColumnHelper, getCoreRowModel } from "@tanstack/table-core";import { FlexRender, useVueTable } from "@tanstack/vue-table";import { ref } from "vue";const columnHelper = createColumnHelper<Person>();// Here we define the structure of our column.const columns = [  // there is other types of columnHelper, like columnHelper.group() to group columns   columnHelper.accessor((row) => row.firstName, {    id: "firstName",    cell: (info) => info.getValue(),    header: () => "First Name",  }),  columnHelper.accessor((row) => row.lastName, {    id: "lastName",    cell: (info) => info.getValue(),    header: () => "Last Name",  }),  columnHelper.accessor((row) => row.age, {    id: "age",    cell: (info) => info.getValue(),    header: () => "Age",  }),];const data = ref<Person[]>(makeData(4));// useVueTable creates a table. It accepts a bunch of options. // columns, data and getCoreRowModel are requiredconst table = useVueTable({  columns,  data: data.value,  getCoreRowModel: getCoreRowModel(),});</script><template>  <table>    <thead>      <tr>        <!-- we don't have nested or grouped headers, so we use the getFlatHeaders function to loop over our headers -->        <th v-for="header in table.getFlatHeaders()" :key="header.id">          <!-- FlexRender is a generic component to render headers, cells, footers -->            <FlexRender            :render="header.column.columnDef.header"            :props="header.getContext()"          />        </th>      </tr>    </thead>    <tbody>      <tr v-for="row in table.getRowModel().rows" :key="row.id">        <td v-for="cell in row.getVisibleCells()" :key="cell.id">          <FlexRender            :render="cell.column.columnDef.cell"            :props="cell.getContext()"          />        </td>      </tr>    </tbody>  </table></template>

Finally, in your App.vue file, import and use BasicTable.vue component.

Congratulations ! 🚀 You just made your table with TanStack Table. Certainly it is minimalist and a little ugly... But you get the idea. You have total control over your markup. You can make your own design.

More examples on a dedicated playground

To explore further this library and learn more, I made a dedicated playground. If you want to learn how to sort columns, paginate results, implement row selection... check it out !

Resources

Follow me on