Origin UI - Svelte

Tables

A growing collection of 19/20 tables components built with Svelte and Tailwind CSS.

Name Email Location Status Balance
Alex Thompson alex.t@company.com San Francisco, US Active $1,250.00
Sarah Chen sarah.c@company.com Singapore Active $600.00
James Wilson j.wilson@company.com London, UK Inactive $650.00
Maria Garcia m.garcia@company.com Madrid, Spain Active $0.00
David Kim d.kim@company.com Seoul, KR Active -$1,000.00
Total $2,500.00

Basic table

Name Email Location Status Balance
Alex Thompson
Alex Thompson
@alexthompson
 alex.t@company.com San Francisco, US Active $1,250.00
Sarah Chen
Sarah Chen
@sarahchen
 sarah.c@company.com Singapore Active $600.00
Maria Garcia
Maria Garcia
@mariagarcia
 m.garcia@company.com Madrid, Spain Active $0.00
David Kim
David Kim
@davidkim
 d.kim@company.com Seoul, KR Active -$1,000.00

Table with images

Name Email Location Status Balance
Alex Thompson alex.t@company.com San Francisco, US Active $1,250.00
Sarah Chen sarah.c@company.com Singapore Active $600.00
James Wilson j.wilson@company.com London, UK Inactive $650.00
Maria Garcia m.garcia@company.com Madrid, Spain Active $0.00
David Kim d.kim@company.com Seoul, KR Active -$1,000.00
Total $2,500.00

Table without horizontal dividers

Name Email Location Status Balance
Alex Thompson alex.t@company.com San Francisco, US Active $1,250.00
Sarah Chen sarah.c@company.com Singapore Active $600.00
James Wilson j.wilson@company.com London, UK Inactive $650.00
Maria Garcia m.garcia@company.com Madrid, Spain Active $0.00
David Kim d.kim@company.com Seoul, KR Active -$1,000.00
Total $2,500.00

Striped table

Name Email Location Status Balance
Alex Thompson alex.t@company.com San Francisco, US Active $1,250.00
Sarah Chen sarah.c@company.com Singapore Active $600.00
James Wilson j.wilson@company.com London, UK Inactive $650.00
Maria Garcia m.garcia@company.com Madrid, Spain Active $0.00
David Kim d.kim@company.com Seoul, KR Active -$1,000.00

Table with vertical lines

Name Release Year Developer Typing Paradigm Extension Latest Version Popularity
JavaScript 1995 Brendan Eich Dynamic Multi-paradigm .js ES2021 High
Python 1991 Guido van Rossum Dynamic Multi-paradigm .py 3.10 High
Java 1995 James Gosling Static Object-oriented .java 17 High
C++ 1985 Bjarne Stroustrup Static Multi-paradigm .cpp C++20 High
Ruby 1995 Yukihiro Matsumoto Dynamic Multi-paradigm .rb 3.0 Low

Dense table

Name Email Location Status Balance
Alex Thompson alex.t@company.com San Francisco, US Active $1,250.00
Sarah Chen sarah.c@company.com Singapore Active $600.00
James Wilson j.wilson@company.com London, UK Inactive $650.00
Maria Garcia m.garcia@company.com Madrid, Spain Active $0.00
David Kim d.kim@company.com Seoul, KR Active -$1,000.00
Total $2,500.00

Table with row selection

Name Email Location Status Balance
Alex Thompson alex.t@company.com San Francisco, US Active $1,250.00
Sarah Chen sarah.c@company.com Singapore Active $600.00
James Wilson j.wilson@company.com London, UK Inactive $650.00
Maria Garcia m.garcia@company.com Madrid, Spain Active $0.00
David Kim d.kim@company.com Seoul, KR Active -$1,000.00
Total $2,500.00

Card Table

Name David Kim
Email d.kim@company.com
Location Seoul, KR
Status Active
Balance $1,000.00

Vertical table

Name Email Location Status Balance
Alex Thompson alex.t@company.com San Francisco, US Active $1,250.00
Sarah Chen sarah.c@company.com Singapore Active $600.00
James Wilson j.wilson@company.com London, UK Inactive $650.00
Maria Garcia m.garcia@company.com Madrid, Spain Active $0.00
David Kim d.kim@company.com Seoul, KR Active -$1,000.00
John Brown john.brown@company.com New York, US Active $1,500.00
Jane Doe jane.doe@company.com Paris, FR Inactive $200.00
Peter Smith peter.smith@company.com Berlin, DE Active $1,000.00
Olivia Lee olivia.lee@company.com Tokyo, JP Active $500.00
Liam Chen liam.chen@company.com Shanghai, CN Inactive $300.00
Ethan Kim ethan.kim@company.com Busan, KR Active $800.00
Ava Brown ava.brown@company.com London, UK Active $1,200.00
Lily Lee lily.lee@company.com Seoul, KR Active $400.00
Noah Smith noah.smith@company.com New York, US Inactive $600.00
Eve Chen eve.chen@company.com Taipei, TW Active $1,800.00
Total $2,500.00

Table with sticky header

Desktop browsers Mobile browsers
ChromeEdgeFirefoxOperaSafari Chrome AndroidFirefox AndroidOpera AndroidSafari iOSSamsung Internet
scroll-timeline Supported
115
 Supported
115
 Not supported
111
 Supported
101
 Not supported
No
 Supported
115
 Not supported
No
 Supported
77
 Not supported
No
 Supported
23
view-timeline Supported
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-adjust Supported
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

Component not available

Want to contribute and make it happen?

Create this component
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.

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.

Page 1 of 0

Numeric pagination made with TanStack Table

Name
Email
Location
Status
Performance
Balance
Actions

1-0 of 0

Example of a more complex table made with TanStack Table

Discover/Contribute

Explore the original Origin UI or contribute by suggesting new components and improvements.

Visit Original Send Suggestion