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$338.48
INV002PendingCredit Card$842.65
INV003UnpaidBank Transfer$935.43
INV004UnpaidBank Transfer$960.75
INV005UnpaidPayPal$368.64
INV006UnpaidPayPal$947.81
INV007UnpaidPayPal$663.13
Total$5,056.89

Simple

Users

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

NameTitleEmailRoleActions
Agustina Hamill-KlingCentral Functionality Executiveagustina.hamill-kling@hotmail.comMember
Jeanette VonRuedenCustomer Operations Administratorjeanette_vonrueden@yahoo.comViewer
Luke Lebsack-ChristiansenDynamic Integration Orchestratorluke.lebsack-christiansen65@yahoo.comAdmin
Faye JohnstonInvestor Operations Orchestratorfaye_johnston@gmail.comMember
Myrtle KundeDirect Identity Producermyrtle_kunde3@gmail.comAdmin
Alfred VandervortCentral Paradigm Executivealfred_vandervort@hotmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Jaden Pacocha

Principal Quality Assistant

jaden.pacocha@hotmail.com

Member

Stephanie Nicolas

National Implementation Orchestrator

stephanie_nicolas@hotmail.com

Admin

Joy Sauer

Central Usability Assistant

joy_sauer50@gmail.com

Admin

Marcus O'Connell

Forward Creative Administrator

marcus_oconnell@hotmail.com

Admin

Rocio Heller-Kemmer

Direct Factors Architect

rocio.heller-kemmer@hotmail.com

Viewer

Adolph Bosco

Forward Configuration Executive

adolph.bosco8@hotmail.com

Member

Sticky header

Users

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

NameRoleActions

Eulah McKenzie

Chief Research Coordinator

eulah_mckenzie@yahoo.com

Viewer

Miguel Cremin

District Group Analyst

miguel.cremin46@yahoo.com

Viewer

Agustina Maggio

Corporate Configuration Specialist

agustina.maggio@yahoo.com

Viewer

Leroy Kub

Human Communications Engineer

leroy.kub@yahoo.com

Viewer

Mckayla Crooks

Internal Mobility Producer

mckayla.crooks@yahoo.com

Viewer

Aileen Kling

District Response Representative

aileen.kling@yahoo.com

Member

Sandrine Davis

Central Optimization Executive

sandrine_davis52@gmail.com

Admin

Christop McGlynn

Principal Metrics Associate

christop_mcglynn@hotmail.com

Admin

Kelvin Raynor

Legacy Accounts Producer

kelvin.raynor@gmail.com

Viewer

Terence Von

Principal Directives Technician

terence_von@hotmail.com

Member

Gerardo Abbott

Future Marketing Liaison

gerardo.abbott78@gmail.com

Viewer

Jon Schulist

Regional Optimization Consultant

jon.schulist68@gmail.com

Admin

Henri Moore

Direct Research Officer

henri_moore33@hotmail.com

Member

Alejandra Collier

Forward Web Facilitator

alejandra.collier39@gmail.com

Admin

Phillip Pollich

Internal Metrics Engineer

phillip.pollich62@hotmail.com

Admin

Molly Krajcik

Future Brand Associate

molly.krajcik76@gmail.com

Viewer

Amara Leffler-Smitham

District Web Producer

amara.leffler-smitham15@yahoo.com

Admin

Jordan Stanton

Forward Research Developer

jordan.stanton@gmail.com

Admin

Lorena Nader

Corporate Accounts Analyst

lorena_nader18@gmail.com

Member

Sandy Konopelski

District Marketing Assistant

sandy.konopelski@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
Vincent Cummeratagordon_monahan27@yahoo.comWest AxelInactive$533.15
Maria Reinger Jr.fletcher.friesen@hotmail.comNew ClydestadInactive$1,121.37
Ella Volkmanrosalie.gusikowski@yahoo.comSophiacesterInactive$792.02
Ludie Deckowrogelio34@hotmail.comFort SamActive$476.00
Darwin Hilpertgina60@yahoo.comRoyal OakInactive$451.40
Total$3,373.94

Basic table

Table with Images

NameEmailLocationStatusBalance
Palma Rice
@daisha38
kelton_carter74@yahoo.comWest GretchenmouthInactive$976.11
Delmer Schmeler
@yvonne38
stuart13@yahoo.comEmardcesterActive$924.69
Angie Stanton
@garret.smitham
jeremy11@hotmail.comDundalkInactive$1,044.06
Aaron Sanford
@kole.lindgren
carleton_gerlach82@hotmail.comNorth JessicaActive$924.63
Fred Marks
@rodney_schuster85
ramon.heathcote@gmail.comRosemeadActive$466.98

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Nova Sipesruben_mcglynn38@gmail.comEast OttiliefieldActive$588.51
Austyn Morissette-Hackettqueenie91@hotmail.comFort JeremiahsideInactive$890.22
Mr. Shaniya McGlynndiane_koss97@yahoo.comCarsonInactive$322.24
Alisa Kochkeagan_ohara57@hotmail.comConsidinemouthActive$487.32
Abdullah Cassinerika_fay@hotmail.comToddviewActive$832.44
Total$3,120.73

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Myron Treutel-Hodkiewiczaglae_wisozk11@hotmail.comNorth NatalieInactive$1,045.83
Darryl Robertsidella.renner74@yahoo.comRolfsontonActive$545.55
Maddison Bauchboyd28@hotmail.comNew CristinaActive$929.11
Paul Koch-Kingcorine.bergnaum@hotmail.comFranklinActive$495.42
Shanny Bradtke IIvinnie42@yahoo.comEast CurtisInactive$999.64
Total$4,015.55

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Magdalena Bernierronnie_jenkins@yahoo.comEl Dorado HillsActive$872.79
Santos Wittingadaline_crona61@yahoo.comKohlermouthActive$906.61
Dillon Harberrobb23@hotmail.comCoyvilleInactive$886.23
Clementine Corwin-Kesslerlexie_bechtelar29@gmail.comHighlands RanchActive$223.68
Dorothea Beahanenos_okeefe63@gmail.comSierra VistaActive$332.36
Total$3,221.67

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
Kurt Bogisichsonja.wisoky@yahoo.comKilleenActive$45.83
Leopold Sawayndarrin_parisian@gmail.comBaton RougeActive$197.33
Loyal Boyerolivia67@gmail.comPort OscarmouthInactive$642.12
Sterling Aufderharmaurine_dibbert@gmail.comPort SusanInactive$1,176.52
Dr. Jaeden Doylefaye_kuphal31@yahoo.comTrantowboroughInactive$923.89
Total$2,985.69

Table with row selection

Card Table

NameEmailLocationStatusBalance
Simon Collier-Heathcotevan.schmidt43@hotmail.comLillastadInactive$1,136.30
Craig Kuhicvella.hegmann64@yahoo.comEast LedaInactive$158.76
Amparo Granteduardo_bosco@hotmail.comFort SethInactive$92.53
Brigitte Gradyeldred.mertz57@hotmail.comWest XzavierburyInactive$75.50
Karina Franeyirving1@yahoo.comCoon RapidsActive$835.40
Total$2,298.49

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
Eric Botsford-Streichtricia_medhurst13@hotmail.comLubowitzmouthActive$612.49
Mario Marquardtwestley.kuhic@yahoo.comWest AidenActive$975.65
Abdiel Reingerdeondre.rau@yahoo.comEast LoyboroActive$897.57
Justyn Jerdehowell.konopelski5@hotmail.comWest JoyInactive$332.07
Tyrone Fritschrasheed.abernathy50@yahoo.comWest TabithafieldInactive$990.37
Dr. Joany Keeblerluz.larson@gmail.comOttiliestadActive$325.66
Jacinthe Kuvalismartha.block@yahoo.comFort IvanInactive$722.43
Irving Nicolas IIImathilde34@yahoo.comEast JovaniActive$206.00
Mr. Sidney Cormiermaegan_corkery@gmail.comOrlandoActive$11.43
Mr. Jayde Koepp Vedward_borer53@yahoo.comVictoriastadInactive$248.96
Hugh Schimmelopal_schultz65@yahoo.comDejonfieldActive$811.93
Mindy Bergnaumchristy_von@gmail.comNadineviewInactive$1,172.64
Gretchen Cummings IIIfelipe.harber@yahoo.comVolkmanburyInactive$199.31
Johanna Kleincarl42@hotmail.comReedmouthActive$1,016.25
Alexie Veumjason25@yahoo.comEast WarrenActive$969.49
Total$9,492.25

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

Switch

A control that allows the user to toggle between checked and not checked.

Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.