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
INV001PaidCredit Card$451.20
INV002PendingBank Transfer$229.63
INV003UnpaidPayPal$981.99
INV004PendingCredit Card$587.31
INV005UnpaidCredit Card$367.96
INV006PaidCredit Card$832.60
INV007PendingPayPal$332.60
Total$3,783.29

Simple

Users

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

NameTitleEmailRoleActions
Rosina ZiemannCustomer Branding Developerrosina_ziemann@gmail.comMember
Zachary KuhlmanGlobal Research Executivezachary_kuhlman@hotmail.comAdmin
Bernadette ColeSenior Quality Plannerbernadette_cole7@gmail.comViewer
Gillian DuBuqueGlobal Markets Engineergillian.dubuque99@yahoo.comViewer
Berneice O'KeefeHuman Usability Analystberneice.okeefe@hotmail.comAdmin
Lucinda LednerChief Implementation Plannerlucinda.ledner52@hotmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Olive Schneider

Dynamic Metrics Manager

olive_schneider96@hotmail.com

Member

Nancy Yost

Internal Branding Engineer

nancy_yost@hotmail.com

Viewer

Duane Stamm

Lead Metrics Officer

duane_stamm@hotmail.com

Admin

Diana Stiedemann

Senior Tactics Associate

diana.stiedemann@yahoo.com

Viewer

Heather Barton

Direct Mobility Manager

heather.barton@gmail.com

Member

Dianne Rosenbaum

Direct Security Engineer

dianne.rosenbaum@hotmail.com

Viewer

Users

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

NameRoleActions

Marlon King

Future Program Orchestrator

marlon.king14@hotmail.com

Viewer

Winston Legros

Regional Implementation Agent

winston.legros@yahoo.com

Viewer

Donato Klocko

Customer Paradigm Representative

donato.klocko@yahoo.com

Viewer

Laurence Wehner

Principal Division Liaison

laurence_wehner@hotmail.com

Admin

Ofelia Sawayn

Lead Accounts Associate

ofelia_sawayn82@yahoo.com

Member

Leonard Daugherty

Lead Metrics Consultant

leonard.daugherty@hotmail.com

Member

Jensen Dicki

Principal Assurance Agent

jensen.dicki@gmail.com

Viewer

Sheri Schroeder-Gislason

Product Assurance Producer

sheri_schroeder-gislason@hotmail.com

Admin

Luis Schowalter-Leannon

Dynamic Quality Facilitator

luis_schowalter-leannon53@yahoo.com

Admin

Laverne Kiehn

Future Markets Designer

laverne_kiehn5@hotmail.com

Admin

Ray Gerlach

Central Creative Director

ray.gerlach@hotmail.com

Admin

Timothy O'Hara

International Markets Analyst

timothy_ohara@gmail.com

Viewer

Tia Hudson

Chief Integration Manager

tia_hudson@gmail.com

Viewer

Eudora Toy

District Functionality Analyst

eudora.toy@yahoo.com

Member

Darla Steuber

Direct Division Agent

darla.steuber39@hotmail.com

Admin

Kevin Goldner

Legacy Assurance Director

kevin.goldner90@hotmail.com

Member

Bernadette Lehner

Product Brand Technician

bernadette.lehner57@yahoo.com

Viewer

Sherri Robel

Forward Usability Representative

sherri_robel11@yahoo.com

Member

Sandra Jacobs

Senior Division Consultant

sandra.jacobs12@hotmail.com

Admin

Kaycee Schowalter

International Accounts Developer

kaycee.schowalter95@yahoo.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. Brennan Lubowitz Jr.porter.borer4@yahoo.comDerekfieldActive$180.88
Ron Grantmalcolm.satterfield72@hotmail.comNakiaboroActive$229.63
Clint Faheyaudrey76@hotmail.comNew JanefurtInactive$321.57
Keven Murraymiguel.moore31@yahoo.comValeriechesterInactive$706.34
Nathan Osinski IVherbert.rutherford44@gmail.comEmmerichbergInactive$593.88
Total$2,032.30

Basic table

Table with Images

NameEmailLocationStatusBalance
Angelica Kerluke
@myron_rath
gabrielle.larkin@yahoo.comThe WoodlandsActive$346.95
Carrie Turner
@maymie31
kathleen6@hotmail.comPalm Beach GardensActive$471.74
Derick Schuppe
@kristy11
rod_bergnaum-spinka58@yahoo.comScottsdaleActive$478.32
Fiona Stark
@edward16
rae.rogahn@yahoo.comBartellworthActive$654.23
Miss Kali Greenholt I
@anita_yost-quigley38
ludie15@gmail.comPort MeganmouthActive$685.03

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Elaina Bodewillie81@hotmail.comHahntownActive$727.40
Dagmar Bayerflorian_walker@gmail.comPensacolaInactive$1,118.37
Marshall Schmelerjany.senger85@gmail.comWisokycesterActive$158.63
Karla Andersonralph20@gmail.comAlpharettaActive$756.74
Renee Willmslorenzo90@yahoo.comRollinsteadActive$1,009.72
Total$3,770.86

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Tod Welcherin.murray51@hotmail.comFort CordeliaworthInactive$422.16
Laura Weimannlela_turner-schoen@hotmail.comNew HeathActive$712.98
Orlando Hudson-Erdmankariane.okeefe@gmail.comHarrisonburgInactive$684.83
Queenie Kuhntheron81@hotmail.comNorth LorrainesteadActive$296.51
Dr. Bradford Weissnatevie_konopelski70@yahoo.comLake DwightActive$1,082.33
Total$3,198.81

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Reese Hagenesteresa_franecki65@gmail.comPowlowskivilleInactive$90.72
Kasey Cummingsemanuel_emmerich@yahoo.comFort MaggiecesterActive$423.23
Shaun Strackejoan.ryan@gmail.comWest BelleInactive$881.97
Dan Morissettelorraine99@gmail.comEast RamirohavenActive$335.34
Kris Gutkowskijordan.bayer@gmail.comKuphalfieldInactive$762.12
Total$2,493.38

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
Craig Zulauf IIaron24@hotmail.comMelvinstadActive$311.94
Linda Bartonrosanna_borer65@yahoo.comNew AssuntaActive$382.52
Kaitlin Cormier Jr.adan_kub21@hotmail.comLake JaleelboroInactive$716.54
Ms. Gage Keeblervelda_jakubowski@yahoo.comEast SabrinaActive$829.68
Stephanie Ondrickaharriet88@yahoo.comNew UrbanInactive$915.49
Total$3,156.17

Table with row selection

Card Table

NameEmailLocationStatusBalance
Cristal Corwinedgardo52@yahoo.comSouth FelicityActive$129.79
Trey Kuhic Jr.sabryna91@hotmail.comFunksideActive$416.52
Joann Feilsonia.feest@hotmail.comFort MoisescesterActive$262.76
Ms. Marguerite Hermistoncarolanne.raynor@gmail.comShanahansideInactive$1,058.49
Zachary Murrayfinn7@gmail.comYorba LindaActive$1,184.22
Total$3,051.78

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
Eldridge Goyettereyes92@gmail.comSpringdaleActive$74.44
Julian Dickensmalcolm.fadel69@gmail.comLake ElvisActive$1,107.62
Cary Feeneyalisa2@yahoo.comFort FilibertoInactive$976.01
Kyle Hintzarnold_schowalter59@gmail.comJacesteadInactive$1,028.85
Tatyana Grahamkarina.daniel95@hotmail.comTorreybergActive$1,061.04
Richmond Binsbernhard29@gmail.comKristybergInactive$911.38
Raul Moraralayna_senger@yahoo.comFort GraceActive$885.98
Megan Ziemannbrandon.rippin85@gmail.comNew KristianInactive$1,039.18
Christina Johnstoy_bradtke@gmail.comFort OdiebergActive$850.24
Marty Franeckiimmanuel97@gmail.comCoeur d'AleneInactive$447.51
Zachary Wiegandjeannette_cole71@gmail.comCaguasActive$300.95
Felicia Ankundingfrankie_reilly10@yahoo.comRayburghActive$969.23
Miss Sheryl Mullerdevonte_labadie50@hotmail.comPittsfieldInactive$9.87
Miss Laverne Ritchiealison10@yahoo.comSouth MiriamInactive$303.89
Amos Marksramiro86@gmail.comVandervortsteadInactive$1,037.76
Total$11,003.95

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