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$675.50
INV002PendingPayPal$345.90
INV003UnpaidPayPal$220.23
INV004UnpaidBank Transfer$982.67
INV005PendingBank Transfer$776.36
INV006UnpaidPayPal$576.09
INV007PendingPayPal$685.61
Total$4,262.36

Simple

Users

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

NameTitleEmailRoleActions
Iliana LynchChief Operations Facilitatoriliana_lynch@hotmail.comMember
Ashtyn WehnerFuture Functionality Engineerashtyn.wehner87@gmail.comMember
Lavern GoldnerChief Markets Directorlavern_goldner46@hotmail.comMember
Kelley FeeneyCorporate Security Executivekelley_feeney6@gmail.comAdmin
Jeramy DietrichDistrict Paradigm Strategistjeramy_dietrich50@yahoo.comViewer
Manuel KshlerinLegacy Operations Managermanuel.kshlerin33@gmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Gary Quitzon

Forward Response Consultant

gary_quitzon52@yahoo.com

Admin

Ronaldo Swift-Daugherty

National Metrics Technician

ronaldo_swift-daugherty@gmail.com

Member

Isidro Cummings

Human Program Producer

isidro_cummings@yahoo.com

Member

Loraine Stehr

Corporate Assurance Strategist

loraine_stehr44@gmail.com

Viewer

Jammie Doyle

International Security Engineer

jammie.doyle88@yahoo.com

Admin

Gillian Spinka

Future Brand Orchestrator

gillian_spinka73@yahoo.com

Member

Users

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

NameRoleActions

Juanita Harber

Direct Group Executive

juanita.harber@gmail.com

Member

Simon Mraz

Central Optimization Consultant

simon_mraz42@hotmail.com

Admin

Marshall Corwin

Global Applications Liaison

marshall.corwin@yahoo.com

Member

Cesar Streich

Central Optimization Director

cesar_streich@gmail.com

Viewer

Misty Hirthe

Direct Infrastructure Technician

misty_hirthe3@gmail.com

Viewer

Camryn Jenkins

Regional Accounts Officer

camryn.jenkins19@hotmail.com

Member

Corine Grant

Central Integration Liaison

corine_grant@hotmail.com

Viewer

Edwina Rogahn

Internal Intranet Strategist

edwina.rogahn@yahoo.com

Admin

Stephon Gusikowski

Product Division Officer

stephon.gusikowski@hotmail.com

Viewer

Casimir Mann

National Response Supervisor

casimir_mann@gmail.com

Member

Beulah Nienow

Lead Metrics Technician

beulah_nienow64@gmail.com

Admin

Javonte Mitchell

Corporate Quality Architect

javonte_mitchell@gmail.com

Admin

Natasha Boehm

District Data Consultant

natasha.boehm@gmail.com

Admin

Rigoberto Bogisich

Principal Accountability Representative

rigoberto_bogisich@hotmail.com

Viewer

Emilio Hartmann

Legacy Mobility Producer

emilio.hartmann9@hotmail.com

Viewer

Felton Stokes

Dynamic Division Coordinator

felton.stokes@hotmail.com

Member

Dorothy Pfannerstill

Corporate Division Producer

dorothy.pfannerstill@hotmail.com

Viewer

Mildred Veum

Legacy Mobility Associate

mildred.veum@yahoo.com

Member

Houston Okuneva

Principal Brand Coordinator

houston_okuneva62@yahoo.com

Member

Alfred Gutkowski

Chief Security Designer

alfred_gutkowski88@hotmail.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
Royce Danielpatrick_johnston60@hotmail.comLakewoodActive$37.54
Dr. Norman Kihn-Bednaralf_ondricka69@yahoo.comWest LorenatonInactive$528.24
Isaac Rempeltatum.dietrich@gmail.comSouth RonnieActive$1,102.88
Rhiannon Rueckerlula_murazik31@yahoo.comIowa CityActive$322.92
Dorcas Heathcotejacqueline.gutmann@gmail.comBrettmouthInactive$150.58
Total$2,142.16

Basic table

Table with Images

NameEmailLocationStatusBalance
Annie Rohan
@darian.howell64
vance54@yahoo.comSouth LowellburyActive$865.33
Katherine Leannon
@jamarcus_predovic93
alene.yundt91@hotmail.comEast MathewfurtActive$770.50
Ms. Mattie Labadie
@kara99
noble6@hotmail.comWest ClintActive$219.89
Taylor Tremblay
@salvatore_towne63
glen_greenholt@yahoo.comJustinboroughActive$450.41
Olive Feest
@leonor.grant94
devon42@gmail.comWest LaviniaportActive$270.10

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Yolanda Weimannelse11@yahoo.comPacochasteadInactive$1,135.73
Mr. Keegan Markssalvatore_rath@hotmail.comRoobburghActive$245.97
Martin Hermistonchelsie_shields@yahoo.comLake JulessteadActive$85.86
Kimberly Hessel Vjaylan.reichel57@yahoo.comTracyInactive$1,090.91
Sonja Rippinverda.crist@gmail.comCartertownInactive$100.35
Total$2,658.82

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Mr. Frederick Goodwinrico63@gmail.comGarlandInactive$579.63
Mrs. Dylan Grantearl81@gmail.comNew RobbiesteadActive$431.33
Birdie Spencerwanda_keebler56@gmail.comWest IgnaciobergActive$918.86
Sidney Bartellmona24@hotmail.comPort BernardoworthInactive$955.27
Mr. Madie Wisozkzachary_mclaughlin62@hotmail.comWest GenefortInactive$990.67
Total$3,875.76

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Wade Prosaccoeleazar97@gmail.comKristenfieldInactive$666.58
Miss Vladimir Hahndelaney_cummerata@hotmail.comD'AmorefieldInactive$1,158.31
Lyle Kerlukejenny.beatty90@gmail.comNitzschevilleActive$276.66
Darius Dooleyann.champlin@gmail.comKelsiboroughInactive$209.53
Darnell Treutelaiyana63@yahoo.comPort JayceetonInactive$139.17
Total$2,450.25

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
Dena Harrislula53@hotmail.comWest MaryannInactive$784.22
James McDermottal.pfeffer72@yahoo.comSouth StuartActive$360.85
Justen Marquardtarnulfo.johnston89@yahoo.comCedar RapidsInactive$844.66
Amber Bartonmelanie89@yahoo.comTriciafortInactive$592.20
Sunny Powlowskileona.daugherty57@hotmail.comTownetownActive$780.47
Total$3,362.40

Table with row selection

Card Table

NameEmailLocationStatusBalance
David Williamsonharrison31@yahoo.comFunkburyInactive$522.20
Bruce Hayestamia83@hotmail.comSouth EmeraldActive$260.35
Lucia Kuphalgregg_robel@gmail.comCrona-StrackebergActive$642.91
Yesenia Rennerbobby12@hotmail.comNew ElianeActive$104.06
Maribel Moraralfredo_kohler6@gmail.comWuckertvilleInactive$1,001.53
Total$2,531.05

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
Gaetano Sanfordretha.mertz95@hotmail.comWest LeslyActive$300.17
Alicia Reicherttaya63@gmail.comWest JairochesterInactive$670.06
Jana Kshlerinismael.hirthe@hotmail.comNeilfortActive$760.29
Todd Bashiriantheresa.waters91@hotmail.comMayeboroInactive$320.39
Vernon Schimmeljoann90@yahoo.comBoscostadInactive$1,147.63
Lolita Cormiernora90@yahoo.comPort TyriqueActive$739.05
Rudy Bernhardannabelle.mclaughlin@gmail.comJacksonInactive$714.39
Beth Turcotte Vdeborah.heller@yahoo.comWilkinsonlandActive$952.89
Braeden Stantonelijah29@gmail.comFort PierceInactive$241.89
Elena Aufderhardaniela_welch@yahoo.comWest IraworthActive$90.54
Miss Chandler Walshadeline.tromp@gmail.comOletaboroInactive$205.72
Rupert Paucekletitia_champlin94@gmail.comJolietInactive$993.51
Bettye Erdmansarah51@gmail.comLake ReagansideActive$278.60
Reuben Gerlach PhDbrandi_douglas23@hotmail.comIrmachesterInactive$781.91
Malvina Bergstromlucy.bosco@gmail.comMooreActive$1,196.71
Total$9,393.75

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