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
INV001UnpaidPayPal$605.34
INV002PendingPayPal$493.12
INV003PaidCredit Card$254.32
INV004PaidPayPal$789.87
INV005UnpaidBank Transfer$779.72
INV006PendingPayPal$521.88
INV007PendingPayPal$906.40
Total$4,350.65

Simple

Users

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

NameTitleEmailRoleActions
Krystina RohanCorporate Mobility Administratorkrystina.rohan@hotmail.comMember
Mary FraneckiDirect Integration Orchestratormary_franecki@hotmail.comViewer
Mohamed ToyDistrict Communications Assistantmohamed_toy@hotmail.comMember
Celestino UllrichProduct Assurance Strategistcelestino_ullrich58@hotmail.comViewer
Paula SchaeferFuture Response Consultantpaula_schaefer@gmail.comViewer
Loretta LegrosInternational Accounts Specialistloretta_legros@yahoo.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Patrick Cartwright-Prohaska

Corporate Communications Administrator

patrick.cartwright-prohaska@gmail.com

Viewer

Buster Abernathy

Internal Interactions Coordinator

buster.abernathy98@yahoo.com

Member

Alvah Bins

Chief Optimization Engineer

alvah_bins@hotmail.com

Member

Vinnie Nienow

Investor Response Designer

vinnie_nienow79@yahoo.com

Member

Marie Wolf

Legacy Metrics Supervisor

marie.wolf97@gmail.com

Member

Kallie Ferry

Principal Group Planner

kallie.ferry27@yahoo.com

Viewer

Users

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

NameRoleActions

Sandy Trantow

Internal Integration Coordinator

sandy_trantow@gmail.com

Admin

Tyrese Brekke

Principal Applications Director

tyrese_brekke93@yahoo.com

Admin

Glen Kuhn

Investor Data Administrator

glen.kuhn11@yahoo.com

Viewer

Neoma Langworth

Corporate Creative Orchestrator

neoma_langworth@hotmail.com

Viewer

Keyon Bins

Human Assurance Planner

keyon_bins29@gmail.com

Member

Kelley Gottlieb

Principal Operations Designer

kelley.gottlieb@yahoo.com

Viewer

Louise Herman

Principal Identity Designer

louise_herman@yahoo.com

Admin

Erik Cummerata

Global Web Coordinator

erik.cummerata@hotmail.com

Admin

Hugh DuBuque

Product Marketing Assistant

hugh_dubuque@yahoo.com

Admin

Devon Bernier

Legacy Solutions Architect

devon_bernier@gmail.com

Viewer

Emilio Frami

Internal Accounts Strategist

emilio_frami54@hotmail.com

Viewer

Teri Hermiston

Global Quality Manager

teri_hermiston69@hotmail.com

Member

Jordane MacGyver

Dynamic Quality Consultant

jordane.macgyver@yahoo.com

Member

Danielle Armstrong

National Paradigm Representative

danielle_armstrong@gmail.com

Admin

Melanie Gottlieb

Chief Accounts Specialist

melanie.gottlieb38@gmail.com

Viewer

Hector Cormier

Future Solutions Manager

hector.cormier28@yahoo.com

Member

Kasey Mohr

Dynamic Configuration Analyst

kasey_mohr97@hotmail.com

Viewer

Joyce Wisoky

Dynamic Applications Associate

joyce.wisoky75@yahoo.com

Admin

Teresa Barton

Senior Infrastructure Architect

teresa_barton@hotmail.com

Viewer

Maximilian Lindgren

Human Implementation Supervisor

maximilian.lindgren19@hotmail.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
Bonnie Nitzschedarwin.ullrich-nader@hotmail.comMillcreekActive$1,152.29
Chelsea Hellerjamir_gleason37@hotmail.comCeresInactive$282.94
Annetta Oberbrunnermckenna.maggio@yahoo.comDavieActive$660.36
Gregg Deckowalvera_medhurst@yahoo.comHirtheburyInactive$919.45
Evert Lakindestany.towne8@hotmail.comDareboroInactive$216.82
Total$3,231.86

Basic table

Table with Images

NameEmailLocationStatusBalance
Ella Bruen
@ella_auer23
alejandro_daugherty54@gmail.comHacienda HeightsInactive$237.33
Mr. Bradley Ratke
@barton.stoltenberg30
jeromy76@gmail.comSauervilleActive$666.20
Rufus Nikolaus
@miriam52
peggy8@gmail.comStiedemanncesterInactive$505.67
Mr. Trent Waters
@pasquale_casper
maryann.gorczany@gmail.comHaleyburyInactive$487.29
Dale Doyle
@arthur.gerhold55
haley.olson@gmail.comJohnsonfurtActive$660.66

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Reyes Johnsonamber74@yahoo.comGarden GroveInactive$693.68
Dr. Misty Wilkinsoncamden82@hotmail.comAbbottburghActive$670.09
Katelynn Parkershaun.west96@yahoo.comNorth TessieActive$396.82
Magnus Auerdelores.schoen@hotmail.comYundtboroughInactive$964.84
Vern Dachcristina68@hotmail.comCatalina FoothillsActive$7.90
Total$2,733.33

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Johnathon Kossmeggie31@hotmail.comDelmerportActive$816.32
Mr. Kamryn Doylealysha28@yahoo.comMollietonInactive$378.23
Benny Weissnat-Homenickcorene.volkman@yahoo.comModestofortActive$721.17
Dejuan Purdydonny_grimes@gmail.comMalcolmburyInactive$1,018.69
Veronica Hartmannjaylin_nolan@gmail.comWest DarrinActive$97.16
Total$3,031.57

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Eleanor Parkeraglae.kirlin17@gmail.comIsaacsteadActive$650.75
Dedrick Rath-Powlowskisantina.mckenzie@gmail.comNaderboroActive$163.50
Earnestine Hilllbelinda.parker57@gmail.comTigardActive$786.01
Rhiannon Hicklevern.prohaska61@yahoo.comHarlingenInactive$823.30
Brad Schroedersigmund.legros22@hotmail.comSkilescesterInactive$1,181.66
Total$3,605.22

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
Penny Kochshanie_abshire@gmail.comNew SilviaportActive$842.83
Haskell Klingterrence31@hotmail.comNorth PrudenceportActive$991.86
Matt Kessleramelia86@hotmail.comSchroederlandInactive$426.93
Elijah Grahamelecta.gulgowski20@gmail.comCeciliaboroInactive$507.81
Spencer Wolfamelie_mosciski94@hotmail.comSauertownInactive$771.98
Total$3,541.41

Table with row selection

Card Table

NameEmailLocationStatusBalance
Henry Hahnchristop1@hotmail.comNew AmericoActive$82.18
Christine Mullereinar91@yahoo.comEast CarletonportActive$601.34
Mrs. Wendy Oberbrunnermadisyn11@gmail.comLake DeniseInactive$353.49
Kallie Bernieramaya_effertz0@yahoo.comRogahnboroInactive$1,009.85
Rodolfo Gulgowskiadeline75@yahoo.comReynoldscesterInactive$521.00
Total$2,567.86

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
Laurie Aufderharfredrick61@gmail.comFriesenmouthInactive$167.37
Ms. Rosa Yundtpauline60@gmail.comEden PrairieActive$364.52
Dr. Christy O'Reillyderon.douglas@gmail.comWest ViolaboroInactive$1,192.15
Doris Jonesreid_armstrong@hotmail.comFort BeverlyActive$1,144.36
Chauncey Donnellychristie.homenick62@yahoo.comSouth MaryInactive$65.14
Mr. Jose Ornbennie_kling77@gmail.comCypressActive$392.95
Jo Mayeraniya_larson-carroll63@gmail.comNorth JimmyInactive$1,175.07
Angel Dooleyjailyn55@hotmail.comSouth AdamtownActive$613.74
Newton Gulgowskipatti.gerlach@gmail.comElmhurstInactive$216.22
Lucia Voncesar.schultz@yahoo.comLake VerlaActive$119.05
Vita Parkerearl_johns79@yahoo.comVirginiaboroActive$1,126.73
Emelie Hessel-Bartonedwardo62@hotmail.comWest DollyInactive$1,119.85
Georgia Littelroland12@hotmail.comEast CatharineActive$1,007.30
Brenda Bergstromwilfred.heller21@yahoo.comSigridviewInactive$960.63
Penny Hauckjennie.vonrueden6@yahoo.comNorth MelindaboroughInactive$4.59
Total$9,669.67

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