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
INV001PendingCredit Card$639.99
INV002PendingCredit Card$415.25
INV003PaidCredit Card$184.74
INV004PaidBank Transfer$743.76
INV005PendingCredit Card$172.70
INV006UnpaidCredit Card$808.30
INV007UnpaidCredit Card$487.91
Total$3,452.65

Simple

Users

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

NameTitleEmailRoleActions
Kasey CarrollPrincipal Infrastructure Assistantkasey_carroll19@hotmail.comMember
Bruce Yost-LueilwitzHuman Mobility Agentbruce_yost-lueilwitz36@yahoo.comAdmin
Domenic RennerChief Data Administratordomenic.renner51@yahoo.comViewer
Tracy MacGyverChief Solutions Specialisttracy.macgyver@gmail.comMember
Ottis D'AmoreCentral Branding Engineerottis_damore@gmail.comAdmin
Frederick HaneInternal Communications Coordinatorfrederick.hane@yahoo.comViewer

Stacked on mobile

Users

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

NameRoleActions

Ashtyn Pollich

Product Accounts Planner

ashtyn.pollich@gmail.com

Viewer

Alvina Watsica

Product Program Producer

alvina_watsica@yahoo.com

Admin

Trenton Graham-Herman

Dynamic Applications Producer

trenton_graham-herman17@hotmail.com

Admin

Scottie O'Kon

Direct Operations Analyst

scottie_okon65@yahoo.com

Admin

Ford Morar

Global Interactions Coordinator

ford.morar7@hotmail.com

Member

Kiara Braun

Direct Research Coordinator

kiara_braun@gmail.com

Admin

Users

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

NameRoleActions

Ludwig Prosacco

International Web Orchestrator

ludwig.prosacco@gmail.com

Admin

Einar Funk

Chief Identity Executive

einar_funk61@hotmail.com

Member

Adele Wisoky

Senior Infrastructure Engineer

adele.wisoky@gmail.com

Admin

Helen Nader

International Program Facilitator

helen.nader66@gmail.com

Member

Marvin Grimes

Product Mobility Executive

marvin.grimes0@gmail.com

Viewer

Sallie Lowe

Chief Assurance Administrator

sallie_lowe10@yahoo.com

Member

Laverne Goyette

Regional Mobility Agent

laverne_goyette@hotmail.com

Viewer

Trystan Boyle

Central Mobility Director

trystan_boyle@yahoo.com

Admin

Fredrick Torp

Lead Integration Executive

fredrick.torp83@yahoo.com

Viewer

Daren Crona

Principal Directives Executive

daren.crona@hotmail.com

Admin

Ozella Bradtke

Future Research Engineer

ozella.bradtke36@hotmail.com

Member

Shayne Hansen

Product Optimization Supervisor

shayne_hansen77@hotmail.com

Admin

Jayne Streich

Senior Accounts Director

jayne.streich@yahoo.com

Viewer

Marcia Tillman-Doyle

Product Directives Consultant

marcia.tillman-doyle32@hotmail.com

Member

Lila Haley

Chief Intranet Orchestrator

lila.haley@yahoo.com

Viewer

Maggie Ernser

Customer Brand Designer

maggie.ernser@gmail.com

Viewer

Karli Lemke

Forward Intranet Planner

karli_lemke@yahoo.com

Admin

Felicita Beatty

National Paradigm Orchestrator

felicita_beatty@hotmail.com

Member

Jayde Rodriguez

Customer Accounts Assistant

jayde.rodriguez@hotmail.com

Member

Maritza Goldner

Human Usability Coordinator

maritza_goldner@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
Jessie Yost-Gleichnermilan_romaguera9@gmail.comSt. CloudActive$640.67
Adam Predovickenton.stark@hotmail.comJanickburghInactive$1,178.68
Herman Strackeminnie_rogahn46@gmail.comNew BrigitteportActive$494.34
Emma Osinskikayley.boehm31@yahoo.comUplandActive$1,178.33
Katie Quigleymariano50@hotmail.comEast AyanaInactive$399.07
Total$3,891.09

Basic table

Table with Images

NameEmailLocationStatusBalance
Ruth Ryan
@danielle.williamson62
isabell.reynolds@yahoo.comCaguasInactive$869.95
Sharon Mertz
@casey_cartwright
candido_doyle@gmail.comSmyrnaActive$939.87
Maryann O'Conner
@logan_dach18
mara.kreiger@gmail.comNorth GertrudeInactive$1,033.95
Sylvia Witting
@paolo68
elisabeth87@yahoo.comNew GarrickportActive$518.79
Mr. Emanuel King
@dudley.blanda
jovany90@gmail.comWest OlenActive$1,145.72

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Dr. Rosemarie Rippingust60@yahoo.comAlexandrevilleInactive$433.54
Jon Turnerkade88@hotmail.comTomboroActive$897.26
Dana Hodkiewiczhal_robel95@hotmail.comLorinestadActive$978.46
Marguerite Creminella.howell72@yahoo.comMonterey ParkInactive$396.92
Dr. Sandy Effertzmaximo72@yahoo.comLake DemarcusActive$153.58
Total$2,859.76

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Alex Steubersydnee.larson-shanahan@gmail.comLake CicerochesterInactive$1,040.09
Eduardo Jacobson-Marquardtadonis_price@gmail.comDaronfieldInactive$1,082.96
Essie Robertsjonas67@gmail.comSchillertonInactive$926.52
Jan Collins MDdannie70@hotmail.comMishawakaInactive$209.95
Misty Rennerdonnell_konopelski@gmail.comAustinActive$334.34
Total$3,593.86

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Mrs. Holly Gislasonsantos_stoltenberg42@hotmail.comLake HerthaboroActive$523.70
Dr. Amelia Hansen-Manterebeca_reichert87@yahoo.comWauwatosaActive$657.18
Anna Greenholtjan37@gmail.comHempsteadActive$364.00
Jill Skilesabigail_hammes55@gmail.comEl MonteInactive$100.51
Jason O'Keefebert45@gmail.comPort KeenanviewInactive$826.48
Total$2,471.87

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
Marianne Hettingerariel_cremin56@yahoo.comEast ZakaryInactive$717.90
Jason Harriselody_predovic95@gmail.comChampaignInactive$951.31
Brandy Conroycarolyne.thompson54@hotmail.comNorth FrancescoInactive$778.16
Mr. Dwayne Macejkovicbetsy10@hotmail.comClearwaterInactive$150.30
Lewis Kochcory.johns@yahoo.comEast MarvinfurtActive$216.80
Total$2,814.47

Table with row selection

Card Table

NameEmailLocationStatusBalance
Troy Denesikibrahim.sauer59@gmail.comWest LisaInactive$999.17
Antoinette Blandaquinn.jones@yahoo.comMonroeActive$1,061.76
Mrs. Anna Davisjada_marquardt@gmail.comWest JaceActive$548.71
Ramon Farrellhardy_russel@hotmail.comKadeviewActive$405.74
Catherine Smithammarcelle22@yahoo.comLake HalleworthActive$63.49
Total$3,078.87

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
Kathleen McKenziejunior_kuhlman@hotmail.comNew GailInactive$204.81
Elvira Larsonjoannie27@yahoo.comNienowfortInactive$320.88
Douglas Mantenoah_vonrueden71@gmail.comElmoreburghActive$536.85
Maurice Luettgenjules_luettgen14@yahoo.comDanburyActive$926.10
Ricardo Rohanlouie53@gmail.comFort GregstadActive$729.29
Lucy Mosciskiaudie.koelpin-purdy58@gmail.comWest SigridInactive$768.25
Mindy Millsesteban_grady87@hotmail.comToyfieldActive$807.24
Allen Jenkinsalexandro_kunde@gmail.comEast JamieboroughInactive$171.72
Homer Ryanstephen.towne@hotmail.comSwiftfortInactive$93.03
Johnnie Jerdemckenzie_schamberger85@yahoo.comTurcotteviewInactive$249.97
Antonio Carrollskylar44@gmail.comToymouthInactive$918.62
Hattie Stehr IIIsienna_windler34@hotmail.comNashville-DavidsonInactive$176.19
Emanuel Pollich-Kihncamden.kris17@yahoo.comDurwardcesterInactive$897.02
Cassandra Kosskamron.stroman@hotmail.comEast DarienbergActive$125.16
Krista Upton-Gerholdgerman_reinger16@gmail.comJohnfurtActive$946.54
Total$7,871.67

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