2022-03-17
1497
#vue
Abiola Farounbi
97247
Mar 17, 2022 â‹… 5 min read

Build a table component from scratch in Vue 3 with Bootstrap

Abiola Farounbi Frontend developer and technical writer with a passion for open source, accessibility, and web technologies.

Recent posts:

tanstack table react table

A complete guide to TanStack Table (formerly React Table)

Discover how to use TanStack Table, formerly known as React Table, to build a table UI for a variety of use cases.

Paramanantham Harrison
Mar 28, 2025 â‹… 14 min read
javascript object prototypes

JavaScript prototypes: How objects inherit properties and methods

Explore what prototypes are, how the prototype chain works, and how to use the prototype chain to create inheritance between objects.

Ibadehin Mojeed
Mar 28, 2025 â‹… 7 min read
set up Node.js with TypeScript and Express

How to set up TypeScript with Node.js and Express

Set up TypeScript with Node.js and Express, focusing on configuring key elements for a smooth development experience.

Aman Mittal
Mar 28, 2025 â‹… 9 min read
featured image tsx extension

What is the difference between a .ts and .tsx file extension?

Examine the differences between the .ts and .tsx file types, their use cases, and best practices for a React TypeScript project.

Hussain Arif
Mar 27, 2025 â‹… 8 min read
View all posts

5 Replies to "Build a table component from scratch in Vue 3 with Bootstrap"

  1. Abiola, great content. Thanks for sharing.
    Unfortunatelly I can’t make it work properly.
    It seems my Vue is not translating the content of this statement correctly {{item[field]}}.
    The object only recognizes some content with hardcode like this…. {{item[‘Name’]}}

  2. I would add aria-sort to the th elements. Otherwise, how will a screenreader user know how a column is sorted, or which way it will be sorted if they click the th element?

Leave a Reply