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$297.80
INV002PendingPayPal$932.03
INV003PendingPayPal$545.16
INV004PaidBank Transfer$994.49
INV005UnpaidPayPal$346.51
INV006UnpaidCredit Card$480.54
INV007PendingPayPal$233.12
Total$3,829.65

Simple

Users

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

NameTitleEmailRoleActions
Roy StoltenbergPrincipal Marketing Coordinatorroy.stoltenberg@yahoo.comMember
Ronnie KiehnDirect Communications Plannerronnie.kiehn43@yahoo.comAdmin
Dovie RunteInternal Solutions Engineerdovie.runte67@gmail.comMember
Jacquelyn BoyerHuman Integration Designerjacquelyn_boyer34@yahoo.comAdmin
Chester ConnellyProduct Quality Plannerchester.connelly17@hotmail.comViewer
Carmine WilliamsonCustomer Intranet Administratorcarmine.williamson@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Dayne Shields

Product Interactions Associate

dayne.shields14@hotmail.com

Admin

Thomas Turner

Regional Factors Strategist

thomas.turner@yahoo.com

Admin

Gwendolyn Ritchie

Regional Research Orchestrator

gwendolyn.ritchie65@gmail.com

Viewer

Molly Flatley

Future Branding Technician

molly.flatley@hotmail.com

Viewer

Marie Robel

Dynamic Communications Designer

marie.robel88@gmail.com

Viewer

Marguerite McGlynn

Regional Implementation Analyst

marguerite.mcglynn@yahoo.com

Admin

Users

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

NameRoleActions

Billy Boehm

Direct Mobility Officer

billy_boehm42@yahoo.com

Admin

Ryann Russel

Regional Interactions Manager

ryann_russel@gmail.com

Member

Rodolfo Maggio

National Assurance Officer

rodolfo.maggio@gmail.com

Viewer

Susan Leuschke

Human Security Planner

susan.leuschke@gmail.com

Member

Alexander Reinger

Corporate Program Planner

alexander.reinger@yahoo.com

Admin

Reina Crona

Global Intranet Technician

reina_crona11@yahoo.com

Viewer

Charles Emmerich

Lead Web Strategist

charles_emmerich@hotmail.com

Admin

Peter Fay

Internal Security Facilitator

peter_fay@gmail.com

Viewer

Maritza Rath

Forward Marketing Architect

maritza.rath4@hotmail.com

Viewer

Jarrell DuBuque

Senior Identity Producer

jarrell_dubuque85@hotmail.com

Member

Lilly Erdman

Corporate Directives Producer

lilly.erdman9@yahoo.com

Member

Celestino White

National Directives Designer

celestino_white@yahoo.com

Viewer

Hudson Schiller

National Response Coordinator

hudson_schiller@yahoo.com

Member

Giovanni Stoltenberg

Human Accountability Supervisor

giovanni_stoltenberg72@yahoo.com

Viewer

Rafaela Schulist

Principal Tactics Producer

rafaela.schulist45@yahoo.com

Viewer

Derek Hudson

Forward Assurance Specialist

derek.hudson@yahoo.com

Viewer

Karl Satterfield

International Security Supervisor

karl_satterfield9@hotmail.com

Viewer

Jailyn Marvin

Dynamic Optimization Specialist

jailyn.marvin23@hotmail.com

Viewer

Maria Crooks

Central Factors Strategist

maria.crooks@hotmail.com

Viewer

Brisa Hegmann

Internal Metrics Supervisor

brisa_hegmann13@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. Fred Blockjudge_morissette44@hotmail.comHilpertsteadInactive$1,048.34
Lucy Schusterirvin_lesch@yahoo.comEast AllieActive$102.15
Marcelino Schadennicola_reichert@yahoo.comPort MariannechesterInactive$166.90
Mr. Lester Hyatt IIIjulio1@yahoo.comPort RosalietonInactive$800.27
Alden Terry-Waelchivirgil9@gmail.comLake LucyboroughInactive$993.59
Total$3,111.25

Basic table

Table with Images

NameEmailLocationStatusBalance
Morris Lind
@favian.mayer27
domenico_schmidt@yahoo.comWest LanaburyActive$552.91
Hollie Veum
@golda80
harmony.keebler92@hotmail.comBrentwoodInactive$383.28
Haley Walker
@debbie7
vena_harris@yahoo.comMatthewportInactive$903.29
Jeannette Blick
@trent.schaden
cleve.haag12@gmail.comLake CarolfortActive$925.71
Imogene Rosenbaum Sr.
@erin48
mathilde23@gmail.comNorth BarryInactive$567.76

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Ora Dibbertlaron.lebsack36@yahoo.comYundtfieldInactive$132.35
Renee Keelinghiram.hand92@hotmail.comWest AnnInactive$850.33
Aletha Olsonfrankie77@hotmail.comWest JuniusvilleActive$929.61
Danielle Collinsclare.von@gmail.comRhettfurtInactive$438.81
Rodolfo Langruby35@yahoo.comPort EdmondworthInactive$1,104.51
Total$3,455.61

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Andres Larson IIselina56@yahoo.comSouth KaseyshireActive$444.83
Dakota Wolfglen.reichel16@gmail.comBaileytonActive$400.46
Anthony Weissnatross.robel@hotmail.comNorth NicklausboroughInactive$284.55
Narciso Davisbrant71@yahoo.comSouth NickolascesterActive$429.20
Darin Purdybernita_ratke@gmail.comWest EdgardoActive$1,086.07
Total$2,645.11

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Roman McClurederek60@gmail.comDenesikstadInactive$574.23
Moises Colegeo_daniel@yahoo.comHanesteadInactive$373.16
Miguel Hilllmiranda78@gmail.comHomenickshireActive$274.91
Annamae Kunze IIeugene_jones@yahoo.comBergstromsteadActive$962.96
Erin Christiansenjaylon_oreilly62@yahoo.comNorth NinacesterInactive$972.81
Total$3,158.07

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
Vickie Hermannkrista.jaskolski73@yahoo.comHarberburghActive$1,062.82
Whitney Starkora_aufderhar46@yahoo.comEast GordontonInactive$129.70
Phil Schambergerkaylee63@yahoo.comEast LaurenfortActive$1,167.54
Traci Ziemannrogelio.hilll33@hotmail.comHettingerboroughInactive$867.62
Lori Dachaustin79@gmail.comLylesideInactive$238.54
Total$3,466.22

Table with row selection

Card Table

NameEmailLocationStatusBalance
Clayton Fritschlorenz_kutch4@yahoo.comKristaburyInactive$500.70
Rebecca Prosacco-Predovicclaire_daniel95@yahoo.comWest BernardsideActive$1,177.93
Orval Beahanfloyd.casper40@hotmail.comNorth IrvinActive$311.03
Camila Kautzer Vwilfredo.hammes52@gmail.comBradleyburyInactive$315.57
Diego Baileyedward.roberts@hotmail.comMohammadlandActive$775.52
Total$3,080.75

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
Angelica Goodwin-Bahringerbell_stamm@gmail.comFort PetraworthInactive$160.55
Clay Turcotte Sr.hester_keebler29@yahoo.comAlfonsolandInactive$549.46
Elias Hilllkorey1@yahoo.comKeeblertonInactive$1,073.12
Dexter Hellercurt_lemke39@hotmail.comEast OrinActive$946.25
Mr. Uriel Pfefferjon.wehner@hotmail.comNormanActive$634.45
Dwight Keeling IIterrell.jacobi97@gmail.comPharrActive$609.95
Luisa Rennersherry_denesik@hotmail.comWest VernonportInactive$311.00
Brando Effertzstacy_prohaska82@yahoo.comBaton RougeInactive$471.27
Mildred Krismissouri.carroll@hotmail.comBogisichtonInactive$339.44
Phoebe Willrosemary_damore@gmail.comErinmouthActive$1,197.16
Adam Beahanjesus.miller87@yahoo.comNorth CesarActive$1,080.85
Mack Kerlukescott_leannon16@yahoo.comKaylahcesterActive$1,128.65
Jonathan Abshirejoe.nolan83@hotmail.comFlorashireInactive$609.05
Douglas Greenmatt82@yahoo.comGlendalandInactive$1,000.41
Forrest Kshlerin-Langworthlillian_rath60@hotmail.comPablolandInactive$61.61
Total$10,173.22

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