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$515.66
INV002UnpaidCredit Card$304.71
INV003UnpaidPayPal$167.67
INV004PendingBank Transfer$813.49
INV005PendingPayPal$489.17
INV006UnpaidBank Transfer$364.26
INV007PaidBank Transfer$644.83
Total$3,299.79

Simple

Users

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

NameTitleEmailRoleActions
Giovanny VonRuedenLead Program Assistantgiovanny.vonrueden96@yahoo.comViewer
Jensen WilkinsonCustomer Creative Developerjensen.wilkinson@gmail.comViewer
Jayson CollierRegional Identity Managerjayson.collier85@gmail.comViewer
Kian RauDynamic Division Facilitatorkian.rau43@gmail.comAdmin
Rossie HeaneyForward Factors Representativerossie.heaney42@gmail.comMember
Andrew WestDistrict Branding Strategistandrew.west12@yahoo.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Keyon Hilll

Central Configuration Administrator

keyon.hilll@gmail.com

Admin

Luisa Hackett

Lead Group Supervisor

luisa_hackett@hotmail.com

Viewer

Westley Hills

Dynamic Quality Supervisor

westley_hills@yahoo.com

Viewer

Gregory Erdman

International Web Architect

gregory.erdman@hotmail.com

Member

Kaitlyn Stracke

Regional Marketing Coordinator

kaitlyn.stracke@gmail.com

Admin

Lucio McGlynn

Global Marketing Representative

lucio_mcglynn@hotmail.com

Admin

Users

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

NameRoleActions

Dan Brekke

Corporate Web Producer

dan_brekke79@gmail.com

Admin

Zula Blanda-Brown

Legacy Configuration Technician

zula.blanda-brown52@yahoo.com

Member

Frederik Jacobson

Regional Group Supervisor

frederik.jacobson27@gmail.com

Member

Luna Bogisich

Regional Implementation Engineer

luna.bogisich@gmail.com

Viewer

Alyce Franey

Dynamic Accountability Designer

alyce.franey95@hotmail.com

Member

Dorris Cummings

Central Response Coordinator

dorris_cummings28@gmail.com

Member

Isabell Nolan

Chief Optimization Specialist

isabell_nolan65@hotmail.com

Viewer

Magdalen Zemlak

Central Metrics Liaison

magdalen.zemlak@gmail.com

Member

Ed Huel

Dynamic Security Associate

ed.huel@hotmail.com

Admin

Maximo Kreiger

Forward Creative Executive

maximo_kreiger60@gmail.com

Admin

German Hauck-Bailey

Regional Marketing Agent

german.hauck-bailey3@hotmail.com

Viewer

Natalia Leuschke

Forward Factors Analyst

natalia.leuschke81@hotmail.com

Viewer

Helen Jones

Legacy Implementation Agent

helen.jones@hotmail.com

Viewer

Delfina Jacobson

Investor Accountability Engineer

delfina.jacobson57@yahoo.com

Admin

Myron Corwin

Internal Assurance Strategist

myron.corwin90@gmail.com

Member

Isabel Ryan

District Branding Orchestrator

isabel_ryan@hotmail.com

Viewer

Helene Stroman

Global Paradigm Officer

helene.stroman@hotmail.com

Member

Janice Predovic

National Web Agent

janice_predovic@gmail.com

Viewer

Kiley Hansen

Forward Paradigm Representative

kiley_hansen92@gmail.com

Member

Damaris Mitchell

Chief Marketing Coordinator

damaris_mitchell4@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
Gina Brekkekarolann98@gmail.comBodefieldActive$244.29
Michele Williamsonsherman.mante62@gmail.comStillwaterInactive$915.97
Mr. Arnold Cormierpearline_roberts@hotmail.comLake HazelsteadInactive$759.19
Jenny Kundemauricio36@hotmail.comBennieshireActive$76.80
Margarita Danielsaige_collier@yahoo.comLangfurtActive$312.09
Total$2,308.34

Basic table

Table with Images

NameEmailLocationStatusBalance
Esther Christiansen
@kobe_gottlieb
clementina_balistreri@yahoo.comTaylorsvilleActive$568.22
Ismael Shanahan
@leilani56
ilene28@yahoo.comBrakusviewActive$1,083.18
Regina Bahringer
@percival_bartoletti56
stacy37@yahoo.comEast BlairboroInactive$21.98
Mrs. Candace Hyatt
@jamaal_vonrueden93
destini39@yahoo.comWest HobartActive$273.47
Erik Davis
@garett97
jaunita_beier-hackett68@gmail.comDrewbergInactive$819.40

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Jeannette Lehnerchaz_dibbert72@yahoo.comKansas CityActive$1,065.03
Mrs. Shirley Collinsmarina48@gmail.comNorth GarettInactive$456.55
Abel Bruencharles_kassulke94@yahoo.comWest FritzmouthInactive$410.60
Duane Dibbertagnes77@gmail.comPort VivaboroughActive$325.21
Julie Faysydnee.legros85@hotmail.comAlenesteadActive$968.67
Total$3,226.06

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Peter Ziemenickolas94@yahoo.comEduardolandActive$915.91
Tammy O'Conner-Bahringerrichmond_hansen56@hotmail.comEvansvilleActive$509.85
Harvey Torphypiper.koch0@yahoo.comRancho Santa MargaritaInactive$201.77
Genevieve Baumbachcelestino_schmeler67@yahoo.comWeberlandActive$1,081.30
Ms. Kellie Paucekalbin98@hotmail.comTown 'n' CountryInactive$1,139.57
Total$3,848.40

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Elisa Powlowskialisa93@yahoo.comReichelmouthActive$215.84
Karla Kerlukeurban_berge@gmail.comFort FreidaActive$815.33
Mrs. Jacqueline Smitham-Rennermoshe_koepp@gmail.comBrookhavenInactive$752.16
Shane Jacobicyrus_watsica28@hotmail.comLake KaciActive$371.37
Joshua Reillyrachel_cassin25@gmail.comLaurentownActive$404.79
Total$2,559.49

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
Olive Kleinkelvin87@yahoo.comWest AurelioInactive$476.11
Jan Wiegand-Roobdelmer_kozey-hahn@hotmail.comKilbackhavenInactive$1,110.31
Ronnie VonRuedennils.shanahan@yahoo.comLake HeavenworthActive$779.03
Marta Stokesbrando23@gmail.comNew DonaldInactive$987.88
Elizabeth Boyer-Mosciskibill_fay@yahoo.comDentonInactive$577.09
Total$3,930.42

Table with row selection

Card Table

NameEmailLocationStatusBalance
Cora Gusikowskiyvonne.ledner@hotmail.comFraneckiboroughInactive$829.63
Francis Langworthayden49@hotmail.comOrlobergActive$283.11
Betty Nicolassonny_mueller12@gmail.comChristiansenfieldInactive$829.05
Linda Flatleytheodore_luettgen70@gmail.comAzusaInactive$909.00
Cassandra Keeblergeneral_powlowski82@yahoo.comLake ArchibaldActive$988.89
Total$3,839.68

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
Ella Goyette MDcicero.thiel18@yahoo.comSouth SandyshireActive$1,104.51
Wilbert Johnsonjena0@hotmail.comBraedenburghActive$1,047.93
Mabel Kozeytyrel55@hotmail.comFort HaleysteadInactive$134.19
Cora Wiegandgrant_hessel7@yahoo.comEulessInactive$1,060.56
Eula Douglaskacie.cummerata89@gmail.comStamfordActive$443.00
Anthony Gutkowskibryce26@hotmail.comKhalilchesterInactive$405.03
Myrtle Roobdon_ryan29@gmail.comDanialmouthInactive$690.77
Owen Littlejarrell_aufderhar@gmail.comNew KennithActive$304.92
Rex Ullrichcesar_willms@gmail.comFriscoActive$746.28
Emilio O'Reillybernie_will55@yahoo.comSpencertonActive$408.01
Ramona Doyleraphaelle50@hotmail.comNorth JabariActive$698.69
Guillermo Langoshmanuela.brekke@yahoo.comNorth FlossieboroughActive$212.54
Theodore Sawayn Jr.audreanne6@gmail.comJustusportActive$752.32
Bertha Halvorsonalysson.emmerich@yahoo.comKuhicburyInactive$172.60
Sherry Hermistonrosario.sipes@gmail.comGavinchesterActive$827.78
Total$9,009.13

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