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:

the replay october 8

The Replay (10/8/25): Data enrichment, CSS is back, TypeScript 5.9

Discover what’s new in The Replay, LogRocket’s newsletter for dev and engineering leaders, in the October 8th issue.

Matt MacCormack
Oct 8, 2025 ⋅ 30 sec read
Goodbye, messy data: An engineer’s guide to scalable data enrichment

Goodbye, messy data: An engineer’s guide to scalable data enrichment

Walk through building a data enrichment workflow that moves beyond simple lead gen to become a powerful internal tool for enterprises.

Alexandra Spalato
Oct 8, 2025 ⋅ 6 min read

DesignCoder and the future of AI-generated UI

From sketches to code in minutes, DesignCoder shows how AI-generated, hierarchy-aware UIs could change the way developers prototype and ship apps.

Rosario De Chiara
Oct 7, 2025 ⋅ 5 min read

Should you use if() functions in CSS?

It’s 2025, and CSS finally thinks logically. The if() function brings real conditional styling — no hacks, no JS workarounds. Here’s how to use it right.

Ikeh Akinyemi
Oct 7, 2025 ⋅ 16 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