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
INV001PendingCredit Card$677.93
INV002PaidCredit Card$211.86
INV003PaidBank Transfer$688.67
INV004UnpaidPayPal$935.29
INV005PendingCredit Card$931.57
INV006PaidBank Transfer$244.45
INV007UnpaidPayPal$451.98
Total$4,141.75

Simple

Users

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

NameTitleEmailRoleActions
Darnell WeberDistrict Integration Developerdarnell.weber85@yahoo.comMember
Nat TrompInternational Accountability Directornat.tromp@gmail.comAdmin
Hope ZemlakProduct Metrics Officerhope.zemlak@yahoo.comMember
Nichole BodeChief Functionality Coordinatornichole_bode63@gmail.comMember
Jermain McGlynnInternational Metrics Engineerjermain.mcglynn14@yahoo.comAdmin
Tracey AndersonDynamic Mobility Managertracey.anderson@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Sophie Glover

Chief Paradigm Associate

sophie.glover8@hotmail.com

Member

Taylor Kautzer

Human Mobility Engineer

taylor.kautzer@hotmail.com

Admin

Myron Champlin

Regional Markets Representative

myron.champlin12@yahoo.com

Admin

Dean Cruickshank

Legacy Web Representative

dean.cruickshank@yahoo.com

Admin

Tonya Bartoletti

International Tactics Planner

tonya.bartoletti@hotmail.com

Member

Omer Kub

Central Brand Assistant

omer_kub9@yahoo.com

Member

Users

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

NameRoleActions

Adriana Harber

International Usability Architect

adriana_harber1@yahoo.com

Member

Kirstin Powlowski

Lead Web Supervisor

kirstin.powlowski25@hotmail.com

Member

Flavio Blanda

Corporate Accounts Director

flavio.blanda29@yahoo.com

Viewer

Aniya Romaguera

Product Intranet Assistant

aniya_romaguera@gmail.com

Viewer

Alysa Spinka

Forward Metrics Consultant

alysa.spinka@gmail.com

Admin

Terence Metz

District Factors Consultant

terence.metz4@hotmail.com

Viewer

Andre Erdman

Regional Accounts Producer

andre.erdman@yahoo.com

Admin

Lillian Kling

Global Assurance Engineer

lillian.kling@yahoo.com

Member

Jose Conroy

Future Web Agent

jose_conroy96@gmail.com

Member

Yessenia Cormier

Future Security Director

yessenia.cormier29@gmail.com

Admin

Frank Wisoky

Central Quality Strategist

frank_wisoky98@gmail.com

Member

Ole Windler

Forward Security Manager

ole.windler@gmail.com

Viewer

Sadye Mann

Senior Optimization Assistant

sadye_mann59@hotmail.com

Viewer

Michael Hilpert

Internal Functionality Analyst

michael_hilpert97@hotmail.com

Member

Bridgette Wilkinson

Global Intranet Representative

bridgette.wilkinson11@hotmail.com

Admin

Jonas Mueller

Internal Usability Assistant

jonas_mueller66@hotmail.com

Admin

Cristina Hessel

Central Web Assistant

cristina_hessel@yahoo.com

Admin

Kendra Moen

Product Factors Executive

kendra.moen59@yahoo.com

Admin

Earnestine Schultz

Principal Applications Coordinator

earnestine.schultz@yahoo.com

Admin

Nathaniel Bruen

Chief Implementation Agent

nathaniel.bruen35@yahoo.com

Viewer

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
Freddie Thompson PhDkameron.wiegand@gmail.comDesireevilleInactive$768.84
Aletha Douglasnancy_moore46@gmail.comFort ConnieActive$700.96
Myrtle Veumtia_oberbrunner46@gmail.comSouth GilbertoInactive$77.77
Landen Weberaiden_hegmann@hotmail.comNew IrmaActive$411.33
Ms. Sue Spencer-Ledneralexandro58@yahoo.comNew MitchellInactive$493.77
Total$2,452.67

Basic table

Table with Images

NameEmailLocationStatusBalance
Rita Kub-Carter
@norma.legros58
russ.rice81@yahoo.comGracelandInactive$198.08
Dan Rau DVM
@david17
antone66@gmail.comMarianastadInactive$553.77
Kristopher Lind
@pascale.nitzsche
harriet.rutherford-mosciski31@yahoo.comWalthamInactive$636.45
Mr. Lloyd Hayes
@angela.kozey18
andre.mante@gmail.comCathedral CityActive$443.36
Elizabeth Lebsack
@norma38
lyle_lemke89@gmail.comArmstrongviewInactive$451.91

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Shelley Ernserhayley.breitenberg@gmail.comPaulinechesterInactive$379.85
Van Prosaccosheldon_hermiston@gmail.comMalachivilleInactive$238.48
Zachariah Willforrest.bahringer-hirthe95@gmail.comDurganboroActive$896.31
Martin Hamillboris.waters31@yahoo.comPort StevenInactive$1,173.01
Kari Parkerbrett_stracke-friesen65@hotmail.comSouth LorettaInactive$714.59
Total$3,402.24

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Vito Wilderman Jr.leann_shanahan@gmail.comMyrtlebergInactive$878.19
Roy Roobestefania63@yahoo.comJerdesideActive$249.41
Jerald Reichelaubrey_runolfsdottir88@yahoo.comNorth NadinecesterActive$489.85
Cora Farrellfabiola66@gmail.comCastro ValleyInactive$280.25
Melyna Leannonjuwan9@hotmail.comFort CarriefurtInactive$585.35
Total$2,483.05

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Malcolm Abshirediane.torp@gmail.comIrvinlandActive$995.05
Alma Schmittkristina40@hotmail.comMurphychesterInactive$680.39
Haleigh Starkjorge80@hotmail.comFort AliciaworthInactive$313.41
Estevan Schaeferlawson_goldner@gmail.comPort RamonaActive$1,108.59
Virginia Greenholtnils83@hotmail.comFeillandInactive$980.80
Total$4,078.24

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
Clyde Hintzcorey90@hotmail.comLake LoraineActive$101.07
Delia O'Reillyflorence_macejkovic35@gmail.comWest FelixActive$862.99
Clyde Veumantoinette70@hotmail.comRochesterActive$583.61
Mr. Caleigh Herzogcristopher_kris44@yahoo.comEast JosianneActive$1,199.68
Kristy Osinskieliseo_lowe@gmail.comLittelfurtActive$1,114.13
Total$3,861.48

Table with row selection

Card Table

NameEmailLocationStatusBalance
Gwendolyn Zieme IIken.towne@yahoo.comWest ElisabethsideInactive$741.98
Regina Hartmannwilly56@yahoo.comKihnfurtActive$28.45
Kaitlin Millskole_torp@yahoo.comNorth Miami BeachInactive$1,183.33
Mr. Tyler Gulgowskimarlen.sanford39@hotmail.comLake DemetrisInactive$433.54
Ms. Delores Wizaloretta56@yahoo.comUriahstadInactive$139.15
Total$2,526.45

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
Grayce Jakubowskikarson_sanford@hotmail.comWest NicholeInactive$977.06
Mr. Phillip Mulleromer_dooley79@yahoo.comEast AlmafurtInactive$466.32
Sheryl Reynolds Sr.marvin30@gmail.comParkerInactive$477.55
Effie Jacobiadrienne.rowe@gmail.comFort NikkostadActive$123.87
Lawrence MacGyverandrea_johnston@gmail.comBeaumontInactive$219.49
Vera Fisherhoracio72@hotmail.comRowlettInactive$849.85
Bud Leuschkekay16@gmail.comEast GabrieltonInactive$547.10
Miss Bud Jenkins Vgrayson.kub95@yahoo.comEast VidalActive$590.97
Sim Moennoah.schmidt@yahoo.comQuigleyboroInactive$35.46
Osvaldo Abshirewinston.hamill52@hotmail.comPort JaniceActive$944.58
Rene Schneidersabina_stark44@gmail.comSouth TheresevilleActive$1,054.20
Orie Spencercarlos30@gmail.comOpalboroughInactive$3.78
Litzy Barrowsreyna.wehner-reinger61@hotmail.comRoberts-LangoshviewInactive$818.82
Mrs. Kay Handdevan_bashirian-purdy65@yahoo.comKulascesterInactive$256.27
Adrienne Ankundingamya73@yahoo.comNew CodytownActive$152.59
Total$7,517.91

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