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
INV001PaidBank Transfer$129.85
INV002PaidPayPal$460.34
INV003PaidBank Transfer$526.78
INV004UnpaidBank Transfer$593.92
INV005PaidBank Transfer$235.71
INV006PaidPayPal$701.12
INV007PendingBank Transfer$578.29
Total$3,226.01

Simple

Users

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

NameTitleEmailRoleActions
Queenie LangoshDirect Brand Associatequeenie_langosh@yahoo.comViewer
Sidney ParkerFuture Creative Engineersidney.parker51@gmail.comViewer
Helen PredovicRegional Configuration Assistanthelen_predovic79@gmail.comMember
Art KerlukeInternal Program Assistantart_kerluke@yahoo.comMember
Jimmie WizaSenior Optimization Specialistjimmie_wiza38@hotmail.comAdmin
Gladys TurcotteLegacy Factors Designergladys_turcotte@gmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Maryann Legros

Corporate Marketing Supervisor

maryann_legros@hotmail.com

Viewer

Teri Heller

Lead Solutions Facilitator

teri.heller@yahoo.com

Member

Victoria Marks

Principal Assurance Producer

victoria.marks62@hotmail.com

Member

Alice Wilderman

Direct Configuration Analyst

alice.wilderman41@hotmail.com

Admin

Marlen Moen

International Implementation Planner

marlen.moen@gmail.com

Admin

Noel Kunze

Customer Identity Agent

noel_kunze1@hotmail.com

Viewer

Users

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

NameRoleActions

Mark Blick

Forward Branding Developer

mark.blick@yahoo.com

Member

Jordon Gutmann

Chief Branding Executive

jordon_gutmann@yahoo.com

Admin

Cora Hudson

Global Marketing Planner

cora_hudson0@gmail.com

Member

Bethany Hilpert

Legacy Marketing Orchestrator

bethany_hilpert@gmail.com

Viewer

Olga Sawayn

Corporate Interactions Consultant

olga.sawayn63@gmail.com

Viewer

Deondre Skiles

Lead Operations Architect

deondre_skiles76@hotmail.com

Viewer

Belinda Mueller

Product Operations Liaison

belinda_mueller32@hotmail.com

Member

Tamara Greenfelder

International Research Representative

tamara.greenfelder27@yahoo.com

Viewer

Dock Conn

Internal Integration Associate

dock_conn@gmail.com

Member

Damon Dicki

Central Identity Strategist

damon.dicki@gmail.com

Member

William Tillman

Dynamic Metrics Coordinator

william_tillman56@gmail.com

Admin

Madie Leannon

Direct Metrics Producer

madie_leannon@hotmail.com

Viewer

Myles Tremblay

Central Group Assistant

myles_tremblay@yahoo.com

Viewer

Emelia Larkin

Principal Optimization Orchestrator

emelia_larkin99@yahoo.com

Member

Travon Hirthe

Investor Accountability Designer

travon_hirthe4@gmail.com

Member

Jeremiah Legros

Principal Directives Associate

jeremiah_legros28@hotmail.com

Member

Rhonda Botsford

Global Response Director

rhonda.botsford55@yahoo.com

Viewer

Marcelina Ruecker

Dynamic Paradigm Executive

marcelina_ruecker@hotmail.com

Admin

Britney Green

Investor Interactions Developer

britney_green@gmail.com

Admin

Casimir Tremblay

Central Accounts Analyst

casimir.tremblay@gmail.com

Member

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
Sandra Hintzwatson25@yahoo.comHeidistadInactive$574.39
Buck Dickensdaisy_dicki-farrell@hotmail.comLake CharlenecesterActive$1,121.97
Omari Hilllrenee_padberg86@gmail.comPort JonathanActive$433.25
Gregg Skilesrollin.stokes94@gmail.comSchowalterworthActive$1,064.94
Nya Hillstelly.cole27@yahoo.comEast KennethInactive$1,058.53
Total$4,253.08

Basic table

Table with Images

NameEmailLocationStatusBalance
Paul Smitham MD
@derek64
estel.yundt@yahoo.comLas CrucesInactive$783.94
Dan O'Kon
@gwen_zboncak33
warren.monahan@hotmail.comScotthavenInactive$342.63
Jeramy Morar
@chance_rutherford
leonard_hills86@yahoo.comMandysideInactive$902.91
Ardella Koss
@blake93
marc.rolfson@gmail.comMorar-WalshburyActive$73.03
Jose Harris
@melvin_brakus
lavonne.zulauf@yahoo.comWinston-SalemActive$893.61

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Gennaro Spinkashaun67@hotmail.comPort AftonActive$147.76
Jena Schmitthassie.parker78@gmail.comNorth BrianviewInactive$900.28
Novella Creminscarlett60@yahoo.comEvieburghInactive$300.45
Jeremiah Windlerjewel84@hotmail.comCoeur d'AleneInactive$408.02
Mrs. Jailyn Kertzmannmaureen.thompson40@gmail.comSouth TristonviewInactive$30.93
Total$1,787.44

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Mr. Aubrey Steuberalfonso_robel82@hotmail.comMerlelandInactive$1,030.76
Milton Howeannetta32@yahoo.comMaybelllandActive$552.98
Hattie Schuppeevert22@gmail.comEast MarcelInactive$823.49
Randy Lueilwitzrupert.douglas43@hotmail.comMesaInactive$1,197.81
Gregory Bahringer DDSlamar_brown93@gmail.comWayneboroughInactive$422.72
Total$4,027.76

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Norman Keeblernatasha15@yahoo.comRiversideActive$344.13
Mr. Grayson Kulasjennyfer43@hotmail.comNew AlfonsoboroInactive$748.04
Marian Beahanvida_jacobson@gmail.comFort AlfredoportInactive$638.90
Doreen Cronincleveland.schoen0@yahoo.comLarkinhavenInactive$488.76
Damaris Predovic IIIsonja.waters@yahoo.comPort LupeInactive$830.61
Total$3,050.44

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
Darla Beahan DVMjesus.torp@yahoo.comAuroraInactive$759.65
Eula Bartolettiwinifred_lesch32@hotmail.comKreigerlandActive$136.10
Mr. Otis Kreigerrenee70@yahoo.comPonceInactive$215.47
Ms. Nancy Hoegerjosue.wiza71@yahoo.comWylieActive$1,198.19
Allen Zboncak Sr.hazel27@gmail.comBeckershireInactive$826.47
Total$3,135.88

Table with row selection

Card Table

NameEmailLocationStatusBalance
Mason Kozeylucius_walker@gmail.comGuadalupeportActive$825.44
Aylin Walshdarrin.pollich@gmail.comNorth StephanylandActive$284.67
Ines Dooleyjanie61@gmail.comPort EduardoActive$976.39
Veronica Kerlukereuben.kirlin@yahoo.comRomaguerafieldActive$370.46
Issac Conneva60@hotmail.comNorth RaheemInactive$964.87
Total$3,421.83

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
Julie Feildelores.renner69@gmail.comNorth DustinbergInactive$670.09
Retha Sawaynjaron.ruecker33@hotmail.comKrisfieldActive$254.11
Deven Breitenberg Sr.marlon.rempel@hotmail.comBinsshireActive$916.15
Miss Lamont Kuphaldianna.king0@hotmail.comDamonsideInactive$403.02
Tad Legroserick_welch58@hotmail.comShawnsteadInactive$406.71
Loyal Daremiriam_mertz52@yahoo.comMemphisActive$421.21
Jarod Ferryhermina52@hotmail.comSouth EltonInactive$1,015.14
Quinten Heidenreichrenee_kuphal@gmail.comLeesburgActive$661.25
Catherine Framisalma.graham@yahoo.comVernaburghInactive$194.22
Gertrude Williamsonivah23@yahoo.comFisherfieldInactive$948.13
Daija Hudsonaugust_rice49@hotmail.comProhaska-FraneckifurtInactive$991.92
Dr. Keagan Bradtkekatrina_bednar@yahoo.comWest LorineInactive$2.11
Kiera Wittingdamon.fritsch@hotmail.comHaydenfortActive$391.78
Iris Roobnels2@hotmail.comEast JarredInactive$983.19
Maryjane Mosciskiisabel_stehr92@gmail.comElwintonActive$657.25
Total$8,916.28

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