Components

Table

A responsive table component.

Source code

Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

Usage

Basic example

A list of your recent invoices.
InvoiceStatusMethodAmount
INV001UnpaidBank Transfer$328.75
INV002PaidCredit Card$167.53
INV003UnpaidBank Transfer$751.16
INV004UnpaidBank Transfer$177.55
INV005PendingCredit Card$855.68
INV006PendingCredit Card$172.95
INV007PendingPayPal$226.89
Total$2,680.51

Simple

Users

A list of all the users in your account including their name, title, email and role.

NameTitleEmailRoleActions
Roslyn RoobCustomer Solutions Architectroslyn.roob3@gmail.comViewer
Lucinda ReingerChief Research Developerlucinda_reinger42@hotmail.comAdmin
Terrence WintheiserPrincipal Configuration Architectterrence.wintheiser@hotmail.comMember
Kirk CruickshankCorporate Applications Orchestratorkirk.cruickshank@gmail.comViewer
Angus RyanHuman Implementation Facilitatorangus.ryan@gmail.comMember
Rosalia SawaynInvestor Group Orchestratorrosalia.sawayn8@hotmail.comMember

Stacked on mobile

Users

A list of all the users in your account including their name, title, email and role.

NameRoleActions

Haylie Hagenes

Human Configuration Planner

haylie_hagenes@hotmail.com

Viewer

Richard Walsh

Regional Data Developer

richard_walsh@hotmail.com

Admin

Micaela Romaguera

Dynamic Functionality Planner

micaela.romaguera69@yahoo.com

Member

Raegan Cole

Customer Implementation Director

raegan_cole@yahoo.com

Member

Dorothea Hermiston

Lead Infrastructure Architect

dorothea_hermiston31@hotmail.com

Viewer

Darren Kuhlman

Regional Intranet Officer

darren.kuhlman23@hotmail.com

Admin

Sticky header

Users

A list of all the users in your account including their name, title, email and role.

NameRoleActions

Lorenzo Kuphal

Direct Markets Producer

lorenzo_kuphal@hotmail.com

Member

Claudie Davis

Human Usability Producer

claudie.davis41@yahoo.com

Member

Adriana Krajcik

Legacy Accounts Strategist

adriana_krajcik@gmail.com

Viewer

Alessia Kub

Regional Metrics Producer

alessia_kub@hotmail.com

Admin

Davin Swift

Chief Brand Supervisor

davin_swift@yahoo.com

Admin

Orie Fadel

Regional Response Coordinator

orie.fadel82@hotmail.com

Viewer

Andrea Mitchell

National Tactics Executive

andrea.mitchell47@yahoo.com

Viewer

Verda Carroll

Corporate Intranet Designer

verda_carroll56@hotmail.com

Admin

Eloy Bogan

Senior Directives Supervisor

eloy.bogan@hotmail.com

Viewer

Emily Thiel

Product Configuration Facilitator

emily_thiel@yahoo.com

Member

Makayla Gutmann

Future Configuration Assistant

makayla.gutmann@gmail.com

Viewer

Susana Rodriguez

Regional Solutions Architect

susana_rodriguez1@gmail.com

Admin

Justin Gorczany

District Metrics Designer

justin_gorczany@hotmail.com

Admin

Janessa Nader

Customer Applications Analyst

janessa.nader@hotmail.com

Member

Rashad Stark

Dynamic Security Coordinator

rashad.stark86@yahoo.com

Admin

Valentina VonRueden

Forward Applications Technician

valentina_vonrueden@gmail.com

Admin

Queen Stiedemann

Corporate Division Officer

queen.stiedemann@yahoo.com

Admin

Montana Terry

International Applications Representative

montana_terry@hotmail.com

Viewer

Kristy Goodwin

Investor Quality Officer

kristy_goodwin@hotmail.com

Member

Kadin Wisoky

Principal Functionality Analyst

kadin_wisoky4@yahoo.com

Member

Origin UI Examples

These are some examples that I found today over here Origin UI ❤️. I think they are cool.

To use these examples you will have to copy the code and adjust it for your own use.

Basic Table

NameEmailLocationStatusBalance
Jaylin Lemkemarina.larson1@gmail.comPort ShaynefurtActive$850.92
Makayla Hodkiewiczmicah5@yahoo.comWainovilleActive$824.94
Lenora Rosenbaum Vesta_ward49@gmail.comSouth CordeliashireActive$1,164.08
Ms. Raven Starkdaphne38@gmail.comMcKinneyInactive$820.13
Clementina Bernier IIIantonette_borer@gmail.comAugustboroughActive$992.77
Total$4,652.84

Basic table

Table with Images

NameEmailLocationStatusBalance
Cayla Mayert
@kendrick.senger
cathrine78@yahoo.comWest DevenActive$388.00
Nestor Christiansen
@jaunita_kuhlman66
colton33@gmail.comSandrinefieldActive$271.55
Jacob Yundt
@oscar.hodkiewicz63
imogene_quitzon43@yahoo.comJurupa ValleyInactive$1,051.73
Mortimer Hyatt
@julian_morissette42
anissa66@gmail.comLondoncesterActive$779.24
Elna King
@leonardo69
vincent.weber86@yahoo.comWest MarianebergActive$273.77

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Stevie Swaniawskikatlynn.jacobs@hotmail.comWhitelandActive$968.82
David Walshmargarete73@gmail.comNorth TrevorshireActive$570.91
Stephan Hicklemeda.predovic@hotmail.comFort PierceInactive$381.68
Mustafa Feestalexanne.hermann29@yahoo.comWest ColtInactive$1,109.74
Lue Ernserelmore.ward74@yahoo.comSolonworthActive$743.44
Total$3,774.59

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Jocelyn Ziemeeino_farrell67@hotmail.comOsinskisteadInactive$268.16
Name Botsfordrahsaan_wyman@hotmail.comWest SkyefurtActive$58.34
Alfonso Robelralph.romaguera@hotmail.comSammyworthInactive$62.17
Ned Walsh Itheodora.abshire@yahoo.comEast WilburburyInactive$730.43
Sydni Schinnerrickie.klocko50@hotmail.comKentInactive$291.68
Total$1,410.78

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Brooke Collinsscott_keebler@hotmail.comSkilesburyActive$1,173.89
Katelynn Monahannichole.bechtelar29@yahoo.comInglewoodActive$770.11
Kayleigh Donnellygeorge_gulgowski-daugherty78@gmail.comLavernasideActive$137.85
Rhianna McLaughlinjamie32@yahoo.comEast EmieActive$356.22
Joel Ziememelba.krajcik82@hotmail.comReesechesterInactive$985.89
Total$3,423.96

Table with vertical lines

Dense 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

Row Selection

NameEmailLocationStatusBalance
Amani Dickinsonlisette_bartoletti95@yahoo.comNorth TessworthInactive$486.37
Ms. Maeve Johnstevin_emmerich24@gmail.comFort ScottburyInactive$965.57
Stefan Bechtelarfelicia52@hotmail.comVictorvilleActive$613.90
Keon Abernathyethan95@hotmail.comEast FerneboroActive$782.72
Regan Bailey Jr.anita73@yahoo.comDorianfieldInactive$872.22
Total$3,720.78

Table with row selection

Card Table

NameEmailLocationStatusBalance
Lucy Roberts DVMkade_quigley-muller35@yahoo.comPharrActive$165.44
Silas Cormierjensen7@hotmail.comHyattsteadInactive$480.79
Gordon Raudakota73@gmail.comPort CurtistownInactive$6.87
Colin Lebsackrebeca58@yahoo.comLake JoyActive$1,110.18
Simeon Willmseldred.torphy25@hotmail.comLaneycesterActive$679.78
Total$2,443.06

Table with row selection

Vertical Table

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

Vertical table

Sticky Header 2

NameEmailLocationStatusBalance
Kendall Goodwinluciano38@hotmail.comFort GeorgiamouthActive$1,117.04
Dr. Floy Pfeffer-Harveyclair.runolfsdottir@hotmail.comYuba CityInactive$582.77
Elisabeth Brakuscleta.stanton@yahoo.comNew CloydActive$896.56
Britney Zboncak-Labadieporter63@yahoo.comRitchieboroInactive$476.98
Rose Sipesdonny96@hotmail.comPetebergActive$78.26
Rudy O'Connerfaith8@gmail.comPfannerstillburghActive$311.37
Blaise Predovic-Kochcora.mcclure27@yahoo.comLamontfurtInactive$850.00
Maud Bechtelarcarmen1@yahoo.comWest RosemarieworthActive$897.62
Angel Hackettirene.crona4@yahoo.comAudraboroActive$259.27
Alden Haleymckenzie6@yahoo.comNew JulienActive$1,074.99
Coy Mantemack.ferry@hotmail.comBeattychesterActive$1,116.31
Hank Gloverroel68@gmail.comSouth CortneyActive$687.51
Jamie Lemkelionel_durgan@yahoo.comPort EdmundActive$606.40
Max Littlemartina37@hotmail.comMiami GardensActive$618.39
Kyleigh O'Keefe DVMcasper.boehm71@yahoo.comFritschboroInactive$449.78
Total$10,023.25

Table with sticky header

Browser Support

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

Switch

A control that allows the user to toggle between checked and not checked.

Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.