Origin UI logo
Origin UI Vue
Extended NEW Layouts Easing Classes
XGitHub

Table

A growing collection of 20 table components built with Vue and Tailwind CSS.

NameEmailLocationStatusBalance
Alex Thompsonalex.t@company.comSan Francisco, USActive$1,250.00
Sarah Chensarah.c@company.comSingaporeActive$600.00
James Wilsonj.wilson@company.comLondon, UKInactive$650.00
Maria Garciam.garcia@company.comMadrid, SpainActive$0.00
David Kimd.kim@company.comSeoul, KRActive-$1,000.00
Total$2,500.00

Basic table

NameEmailLocationStatusBalance
Alex Thompson
Alex Thompson
@alexthompson
alex.t@company.comSan Francisco, USActive$1,250.00
Sarah Chen
Sarah Chen
@sarahchen
sarah.c@company.comSingaporeActive$600.00
Maria Garcia
Maria Garcia
@mariagarcia
m.garcia@company.comMadrid, SpainActive$0.00
David Kim
David Kim
@davidkim
d.kim@company.comSeoul, KRActive-$1,000.00

Table with images

NameEmailLocationStatusBalance
Alex Thompsonalex.t@company.comSan Francisco, USActive$1,250.00
Sarah Chensarah.c@company.comSingaporeActive$600.00
James Wilsonj.wilson@company.comLondon, UKInactive$650.00
Maria Garciam.garcia@company.comMadrid, SpainActive$0.00
David Kimd.kim@company.comSeoul, KRActive-$1,000.00
Total$2,500.00

Table without horizontal dividers

NameEmailLocationStatusBalance
Alex Thompsonalex.t@company.comSan Francisco, USActive$1,250.00
Sarah Chensarah.c@company.comSingaporeActive$600.00
James Wilsonj.wilson@company.comLondon, UKInactive$650.00
Maria Garciam.garcia@company.comMadrid, SpainActive$0.00
David Kimd.kim@company.comSeoul, KRActive-$1,000.00
Total$2,500.00

Striped table

NameEmailLocationStatusBalance
Alex Thompsonalex.t@company.comSan Francisco, USActive$1,250.00
Sarah Chensarah.c@company.comSingaporeActive$600.00
James Wilsonj.wilson@company.comLondon, UKInactive$650.00
Maria Garciam.garcia@company.comMadrid, SpainActive$0.00
David Kimd.kim@company.comSeoul, KRActive-$1,000.00
Total$2,500.00

Striped table

NameRelease YearDeveloperTypingParadigmExtensionLatest VersionPopularity
JavaScript1995Brendan EichDynamicMulti-paradigm.jsES2021High
Python1991Guido van RossumDynamicMulti-paradigm.py3.10High
Java1995James GoslingStaticObject-oriented.java17High
C++1985Bjarne StroustrupStaticMulti-paradigm.cppC++20High
Ruby1995Yukihiro MatsumotoDynamicMulti-paradigm.rb3.0Low

Dense table

NameEmailLocationStatusBalance
Alex Thompsonalex.t@company.comSan Francisco, USActive$1,250.00
Sarah Chensarah.c@company.comSingaporeActive$600.00
James Wilsonj.wilson@company.comLondon, UKInactive$650.00
Maria Garciam.garcia@company.comMadrid, SpainActive$0.00
David Kimd.kim@company.comSeoul, KRActive-$1,000.00
Total$2,500.00

Table with row selection

NameEmailLocationStatusBalance
Alex Thompsonalex.t@company.comSan Francisco, USActive$1,250.00
Sarah Chensarah.c@company.comSingaporeActive$600.00
James Wilsonj.wilson@company.comLondon, UKInactive$650.00
Maria Garciam.garcia@company.comMadrid, SpainActive$0.00
David Kimd.kim@company.comSeoul, KRActive-$1,000.00
Total$2,500.00

Card Table

NameDavid Kim
Emaild.kim@company.com
LocationSeoul, KR
StatusActive
Balance$1,000.00

Vertical table

NameEmailLocationStatusBalance
Alex Thompsonalex.t@company.comSan Francisco, USActive$1,250.00
Sarah Chensarah.c@company.comSingaporeActive$600.00
James Wilsonj.wilson@company.comLondon, UKInactive$650.00
Maria Garciam.garcia@company.comMadrid, SpainActive$0.00
David Kimd.kim@company.comSeoul, KRActive-$1,000.00
John Brownjohn.brown@company.comNew York, USActive$1,500.00
Jane Doejane.doe@company.comParis, FRInactive$200.00
Peter Smithpeter.smith@company.comBerlin, DEActive$1,000.00
Olivia Leeolivia.lee@company.comTokyo, JPActive$500.00
Liam Chenliam.chen@company.comShanghai, CNInactive$300.00
Ethan Kimethan.kim@company.comBusan, KRActive$800.00
Ava Brownava.brown@company.comLondon, UKActive$1,200.00
Lily Leelily.lee@company.comSeoul, KRActive$400.00
Noah Smithnoah.smith@company.comNew York, USInactive$600.00
Eve Cheneve.chen@company.comTaipei, TWActive$1,800.00
Total$2,500.00

Table with sticky header

Desktop browsersMobile browsers
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox AndroidOpera AndroidSafari iOSSamsung Internet
scroll-timelineSupported
115
Supported
115
Not supported
111
Supported
101
Not supported
No
Supported
115
Not supported
No
Supported
77
Not supported
No
Supported
23
view-timelineSupported
115
Supported
115
Not supported
114
Supported
101
Not supported
No
Supported
115
Not supported
No
Supported
77
Not supported
No
Supported
23
font-size-adjustSupported
127
Supported
127
Not supported
3
Supported
113
Supported
16.4
Supported
127
Supported
4
Supported
84
Supported
16.4
Not supported
No
NameEmailLocationStatus
Balance
No results.
Total$0.00

Basic data table made with TanStack Table

KeywordIntents
Volume
CPC
Traffic
Link
react ui kit premium
C
T
760
$6.8
28https://originui.com/avatar
react component documentation
I
N
950
$1.8
35https://originui.com
how to use react components
I
1.2K
$1.25
42https://originui.com/table
tailwind components download
T
890
$1.95
45https://originui.com/alert
buy react templates
C
T
1.9K
$4.75
65https://originui.com/input
react components
I
N
2.5K
$2.5
88https://originui.com
react ui library
I
C
3.2K
$3.25
112https://originui.com/badge
react dashboard template free
C
T
4.1K
$5.5
156https://originui.com/tabs

Data table with filters made with TanStack Table

Name
Email
Location
Status
Balance
Department
Role
Join Date
Last Active
Performance
No results.

Resizable and sortable columns made with TanStack Table

Name
Email
Location
Status
Balance
Department
Role
Join Date
Last Active
Performance
No results.

Pinnable columns made with TanStack Table

Name
Email
Location
Status
Balance
No results.

(work in progress) Draggable columns made with TanStack Table and dnd kit

NameEmailLocationStatus
Balance
No results.

Expanding sub-row made with TanStack Table

Name
Email
Location
Status
Balance
No results.

1-0 of 0

Paginated table made with TanStack Table

Name
Email
Location
Status
Balance
No results.

Numeric pagination made with TanStack Table

Name
Email
Location
Status
Performance
Balance
Actions
No results.

1-0 of 0

Example of a more complex table made with TanStack Table

Didn't find what you were looking for?

Suggest component

Command Palette

Search for a command to run...