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
INV001PendingPayPal$957.72
INV002PaidPayPal$535.82
INV003PaidCredit Card$442.36
INV004UnpaidCredit Card$986.29
INV005PaidBank Transfer$289.81
INV006PaidCredit Card$367.34
INV007UnpaidBank Transfer$967.69
Total$4,547.03

Simple

Users

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

NameTitleEmailRoleActions
Kelley Legros-RoweLegacy Markets Coordinatorkelley.legros-rowe70@hotmail.comViewer
Fernando AltenwerthLead Infrastructure Designerfernando_altenwerth@yahoo.comAdmin
Ervin AnkundingDynamic Accounts Associateervin_ankunding95@gmail.comAdmin
Rowena ZulaufDirect Optimization Agentrowena_zulauf@gmail.comViewer
Arturo RunolfssonInternational Accounts Specialistarturo.runolfsson58@yahoo.comViewer
Rhoda BorerSenior Markets Officerrhoda.borer@gmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Keagan Leannon

Principal Usability Architect

keagan.leannon29@hotmail.com

Admin

Chyna Koelpin

Senior Infrastructure Producer

chyna.koelpin55@yahoo.com

Admin

Desiree Murphy

Direct Security Liaison

desiree.murphy13@hotmail.com

Viewer

Aron Johnson

Forward Operations Specialist

aron.johnson4@hotmail.com

Admin

Martha Orn

Central Quality Administrator

martha_orn11@hotmail.com

Member

Kattie Johns

Legacy Division Executive

kattie_johns@yahoo.com

Admin

Users

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

NameRoleActions

Jany Frami

Product Accountability Agent

jany.frami55@hotmail.com

Viewer

Garry Kassulke

Customer Configuration Representative

garry.kassulke@yahoo.com

Member

Maude Hand

District Communications Planner

maude.hand31@hotmail.com

Admin

Tamia Bashirian

Product Data Strategist

tamia.bashirian24@yahoo.com

Admin

Pearline McClure

Lead Applications Architect

pearline_mcclure87@gmail.com

Viewer

Bobby Price

Dynamic Security Strategist

bobby_price53@yahoo.com

Admin

Julius Stiedemann

Product Program Executive

julius_stiedemann@yahoo.com

Viewer

Linda Auer

International Interactions Director

linda.auer@yahoo.com

Member

Hertha Prosacco

Human Infrastructure Associate

hertha_prosacco44@gmail.com

Viewer

Winston Batz

Product Data Assistant

winston_batz10@gmail.com

Admin

Sue Erdman

Global Branding Manager

sue.erdman98@gmail.com

Viewer

Elroy Corkery

Future Division Consultant

elroy_corkery26@gmail.com

Admin

Santa Nikolaus

Chief Research Consultant

santa.nikolaus@hotmail.com

Member

Edwin Ebert

Regional Creative Planner

edwin_ebert@hotmail.com

Viewer

Lonny Ryan

Forward Functionality Assistant

lonny.ryan@hotmail.com

Admin

Priscilla Satterfield

Lead Creative Strategist

priscilla_satterfield48@hotmail.com

Admin

Maci Stark

Global Accounts Engineer

maci_stark@gmail.com

Member

Lela Prohaska

Product Infrastructure Facilitator

lela_prohaska9@yahoo.com

Admin

Shanie Waelchi

Global Data Officer

shanie.waelchi@yahoo.com

Member

Elvera Krajcik

Corporate Security Consultant

elvera.krajcik42@gmail.com

Admin

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
Mr. Darin Roobfrankie.murphy@gmail.comJenkinsburghActive$122.56
Karl Turcottemildred41@yahoo.comHermanfurtInactive$176.12
Jana Marvinlorine_prohaska@yahoo.comPablocesterInactive$690.44
Veronica Deckow IVdestany95@gmail.comBergnaumviewInactive$390.65
Grover Hoegerrenee_wolf17@hotmail.comManchesterActive$1,069.31
Total$2,449.08

Basic table

Table with Images

NameEmailLocationStatusBalance
Mrs. Brooke Schmitt
@jerad7
clint45@hotmail.comPort NettieburghActive$1,078.75
Marty Reichel
@carlo98
bernie_rosenbaum@hotmail.comEast YasmeenInactive$675.94
Pedro Trantow
@kylie.emard94
sean_mitchell40@hotmail.comEast GavinshireActive$690.47
Clint Stamm-Mraz III
@joshua16
rick_yost96@gmail.comSanfordActive$746.81
Dr. Jamison Nitzsche
@sarina_stark52
ricky.brekke@gmail.comRutherfordtonInactive$960.40

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Mr. Reese Dickianne75@hotmail.comHowemouthInactive$277.62
Easton Nicolasvicente88@hotmail.comKerlukehavenActive$927.24
Mr. Zola Kreigerjamil87@gmail.comTremainehavenActive$862.15
Kenyatta Ratkewinifred.goyette57@hotmail.comPalm CoastInactive$738.93
Linwood Feest Sr.anita.schuppe92@yahoo.comBayer-HyattboroughInactive$1,146.71
Total$3,952.65

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Miss Etha Dibbert IVkamille_ankunding21@hotmail.comSchinnerworthInactive$194.69
Rebeca Keeling-Langworthrosalie_howell@hotmail.comHettingersteadActive$499.16
Gabrielle Kshlerinwilbur82@yahoo.comWalshlandActive$744.02
Edmond Reillydennis.erdman29@gmail.comDuluthActive$1,101.02
Maxine Hermangabriel_koelpin@gmail.comLake OrrinInactive$869.41
Total$3,408.30

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Dwayne Hirtheflavio.johnson@yahoo.comPort JalonActive$831.06
Geneva Runolfsdottirsherry_kirlin23@gmail.comCincinnatiActive$356.90
Kristi Lang IIIjosianne_gerhold@hotmail.comDothanActive$770.63
Katlyn Dareallen93@gmail.comFort AnabelbergInactive$216.72
Edmond Welchjaron.hills@yahoo.comPort DrakevilleActive$711.58
Total$2,886.89

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
Jaquelin Marvinjamir13@hotmail.comPortageInactive$465.79
Beverly Considinetasha19@yahoo.comFort VanessaInactive$61.00
Nelle O'Connellshaun_kessler83@yahoo.comEbertfortInactive$189.76
Calvin Jonesclemens72@yahoo.comEast SoledadActive$694.85
Nicolette Kertzmann DDSkristie.dibbert@hotmail.comSierra VistaInactive$710.33
Total$2,121.73

Table with row selection

Card Table

NameEmailLocationStatusBalance
Harry Bauchoma.cartwright@hotmail.comBillingsActive$623.02
Lloyd Hyattlou_weissnat65@gmail.comGaryburyInactive$617.46
Miss Keshaun Pollichtheresia.schoen66@yahoo.comAttleboroInactive$722.41
Jefferey Lockmanleroy_schultz@gmail.comLake AidashireInactive$385.03
Vicky Rowebeau86@hotmail.comMarthamouthActive$839.14
Total$3,187.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
Mrs. Viviane Cummingseleanora24@yahoo.comMozellchesterActive$907.19
Sheri Kozeylitzy_mueller19@gmail.comLittelworthActive$408.23
Larissa Zemlaksergio59@hotmail.comSchneidervilleActive$90.65
Sue Brownmamie83@hotmail.comEthanfurtInactive$174.00
Herman O'Reillyjerome.brekke@hotmail.comNew VirginiaInactive$301.00
Jimmy Lynchtom.gutkowski42@hotmail.comCamarilloActive$1,193.67
Ethel Hagenesolen.johnston93@gmail.comFort EmmettbergActive$1,159.76
Damien Blandafranz.auer@gmail.comFlossietownInactive$224.63
Laverne Stiedemannbryon_brakus70@yahoo.comLake TayalandInactive$534.04
Imani Kautzertrevor_corkery43@hotmail.comLa MiradaInactive$35.97
Dan Greenfelder IVtrey26@gmail.comCiceroActive$389.49
Penny Bayerephraim_sporer70@hotmail.comBrandonActive$501.39
Edward O'Hararalph57@hotmail.comShawneeActive$232.94
Mr. Elijah Millsdawn.barton99@hotmail.comWittingsteadActive$613.98
Makayla Kovacekantonio_stracke-prohaska17@yahoo.comTimmysteadActive$1,082.95
Total$7,849.89

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