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$595.49
INV002PendingPayPal$460.87
INV003UnpaidBank Transfer$533.53
INV004UnpaidPayPal$498.38
INV005UnpaidPayPal$927.64
INV006UnpaidBank Transfer$286.74
INV007UnpaidBank Transfer$496.16
Total$3,798.81

Simple

Users

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

NameTitleEmailRoleActions
Gina JohnsFuture Solutions Facilitatorgina.johns11@gmail.comAdmin
Vernon HintzInvestor Research Technicianvernon_hintz@gmail.comMember
Lynda BeckerDistrict Intranet Representativelynda.becker@hotmail.comAdmin
Brittany GrantHuman Group Agentbrittany_grant11@gmail.comViewer
Alec RunolfsdottirProduct Marketing Supervisoralec_runolfsdottir@gmail.comAdmin
Dean BaileyFuture Functionality Plannerdean.bailey5@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Kara Kub

National Identity Technician

kara.kub36@yahoo.com

Member

Bettye Tillman

Customer Metrics Facilitator

bettye_tillman@hotmail.com

Member

Wendy Graham

Senior Tactics Manager

wendy_graham69@gmail.com

Member

Cindy Stiedemann

Direct Directives Planner

cindy.stiedemann23@gmail.com

Viewer

Carolanne Lesch

Regional Identity Technician

carolanne.lesch65@yahoo.com

Admin

Ervin Fritsch

Future Research Agent

ervin_fritsch@gmail.com

Member

Users

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

NameRoleActions

Van Reinger

Internal Response Producer

van_reinger@yahoo.com

Member

Leif Kerluke

Internal Optimization Orchestrator

leif_kerluke85@yahoo.com

Viewer

Lynda Wintheiser

Legacy Response Specialist

lynda_wintheiser@yahoo.com

Viewer

Todd Kris

Regional Security Manager

todd.kris@yahoo.com

Viewer

Riley Kshlerin

Principal Applications Officer

riley.kshlerin@yahoo.com

Admin

Karen Gottlieb

Lead Intranet Architect

karen.gottlieb59@hotmail.com

Member

Darrell Blick

Central Research Orchestrator

darrell_blick87@hotmail.com

Viewer

Maria Kertzmann

Corporate Applications Designer

maria.kertzmann@gmail.com

Admin

Orville Kris

District Quality Facilitator

orville_kris@gmail.com

Member

Janis Metz

Dynamic Paradigm Assistant

janis_metz74@yahoo.com

Admin

Jerald Blick

Corporate Tactics Strategist

jerald_blick@hotmail.com

Member

Perry Shanahan

Dynamic Interactions Liaison

perry.shanahan83@gmail.com

Admin

Dawn Nitzsche

Senior Identity Officer

dawn_nitzsche32@hotmail.com

Viewer

Blanche Morissette

International Paradigm Director

blanche.morissette90@yahoo.com

Member

Susie Lakin-Kshlerin

Global Factors Officer

susie.lakin-kshlerin85@hotmail.com

Admin

Paris Little

National Intranet Assistant

paris.little@hotmail.com

Viewer

Tabitha Rowe

Direct Brand Specialist

tabitha.rowe36@yahoo.com

Viewer

Karla Lindgren

Customer Metrics Strategist

karla.lindgren32@gmail.com

Admin

Flo Padberg

Investor Applications Planner

flo.padberg60@yahoo.com

Member

Ronnie Quitzon

Senior Infrastructure Engineer

ronnie.quitzon6@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
Dillon Hettingersabina.fisher@yahoo.comKentwoodInactive$39.31
Annalise Kshlerinneil30@hotmail.comKemmershireActive$64.32
Dr. Sammy Hegmannlindsey.stiedemann11@hotmail.comFort VictorActive$240.54
Janis Wizajim.gibson@hotmail.comPort DebratownActive$890.76
Mr. Abel Roobbetty_effertz34@hotmail.comLake ClaytonInactive$725.59
Total$1,960.52

Basic table

Table with Images

NameEmailLocationStatusBalance
Miss Cleta Dicki-Nienow
@melissa.schmitt81
nelson.marvin9@hotmail.comNew ArdithviewInactive$442.74
Nathaniel Friesen
@wendell_cummerata-funk20
berenice_mohr93@gmail.comRudyburyInactive$348.46
Rickey Willms
@mildred.monahan
preston.dach27@yahoo.comBrookhavenActive$1,080.64
Gerda Mohr
@joanna_frami57
rocky29@yahoo.comLake OmerfurtActive$193.16
Kian Kutch
@tyler37
berniece_gleason@gmail.comAngeloshireActive$346.09

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Angelina Bode Ijosephine44@gmail.comLake LatoyaActive$976.57
Guillermo Littelromaine.bashirian@gmail.comAbernathyvilleInactive$844.68
Gretchen Harveykenneth.mcclure33@hotmail.comFort ArmanimouthActive$545.02
Sheryl Strosindon7@hotmail.comWunschfieldInactive$967.39
Genevieve Pollichseth82@hotmail.comNew RuthetonInactive$5.88
Total$3,339.54

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Mr. Ronnie Farrellbonnie78@hotmail.comLake DebravilleActive$405.64
Sarah Halvorsonretta.adams51@hotmail.comEast AylinInactive$897.04
Fermin Mosciskiyolanda7@gmail.comNew JeffereyInactive$538.85
Arthur Terrybrooke_lesch@yahoo.comJerdecesterActive$49.71
Janie Buckridgekirk_sawayn-vandervort@gmail.comWest JimcesterInactive$990.34
Total$2,881.58

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Paulette Sawaynpedro_kerluke@yahoo.comMarshalllandActive$32.18
Nadine Tremblaykyla_kihn@gmail.comMohammadmouthActive$92.27
Ms. Oceane D'Amore DDSjane69@gmail.comStreichboroughActive$53.75
Pierce Wisokycody17@gmail.comNew AdityaActive$526.93
Glenda Klockowilliam45@hotmail.comRedlandsActive$1,055.52
Total$1,760.65

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
Tomas Wisokyblake97@gmail.comDowners GroveActive$726.44
Kristen Williamsonmartin_muller58@gmail.comWest AnaportActive$1,030.86
Kirstin Krajcikeduardo61@yahoo.comEast AveryhavenInactive$763.91
Newton Rippinhaven.wintheiser@hotmail.comKendale LakesInactive$266.17
Mrs. Arielle Bechtelarstacy_schiller@yahoo.comNew LukasworthInactive$1,072.65
Total$3,860.03

Table with row selection

Card Table

NameEmailLocationStatusBalance
Vanessa Daughertyrogelio92@hotmail.comTacomaActive$1,069.28
Omar Effertz IVpam.steuber@hotmail.comToms RiverActive$1,058.37
Dr. Thea Fritsch DDScora_heller@yahoo.comLake MarlonActive$537.20
Candace Abernathyrandall64@gmail.comMozellefurtInactive$666.86
Aubrey Lowearchie.krajcik@gmail.comSouth EdgartownActive$1,006.14
Total$4,337.85

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
Sheila Morar-Grimeskarla_krajcik24@hotmail.comLake ThomasActive$381.16
Adela VonRuedencletus.wisoky@hotmail.comNorth GregoriaworthInactive$503.04
Renee Gutmanndwight_powlowski@hotmail.comEast JennyportActive$407.07
Danielle Wolfwinston_harvey75@gmail.comO'ReillyboroActive$803.12
Vera Kohlerleticia86@gmail.comNew BrianfieldActive$117.96
Florence Wittingdakota94@hotmail.comDorianboroInactive$884.27
Kristopher Botsfordwinston.glover1@gmail.comSouth OsbaldoInactive$763.94
Mindy Westalexandra51@yahoo.comSouth AddiestadActive$287.72
Nathan Cassinosbaldo10@hotmail.comVonburyInactive$1,183.09
Cary Haagsheryl11@gmail.comProhaskasideInactive$304.21
Zion Ricepatti.metz97@yahoo.comPadbergsideInactive$547.76
Dwayne Hickleharvey.glover57@hotmail.comNorth DahliaInactive$830.68
Merle Orn Iarmand_hahn@hotmail.comWest PatworthInactive$300.15
Viola Blickjoel.turner81@yahoo.comKulaschesterInactive$947.62
Albertha Welchhailey_davis@yahoo.comJonathonportActive$998.13
Total$9,259.92

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