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
INV001PaidPayPal$121.68
INV002PendingPayPal$538.45
INV003PendingBank Transfer$209.86
INV004UnpaidPayPal$569.93
INV005UnpaidBank Transfer$613.49
INV006UnpaidPayPal$758.32
INV007UnpaidBank Transfer$506.38
Total$3,318.11

Simple

Users

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

NameTitleEmailRoleActions
Rubie Oberbrunner-BoscoInternal Intranet Associaterubie.oberbrunner-bosco68@yahoo.comViewer
Rosemarie HagenesNational Infrastructure Coordinatorrosemarie_hagenes25@yahoo.comMember
Kurtis HomenickDynamic Metrics Assistantkurtis_homenick@yahoo.comViewer
Roosevelt MurrayNational Creative Directorroosevelt_murray@yahoo.comAdmin
Nancy RunolfsdottirForward Configuration Techniciannancy.runolfsdottir@yahoo.comMember
Janick MitchellFuture Operations Consultantjanick.mitchell50@yahoo.comViewer

Stacked on mobile

Users

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

NameRoleActions

Stewart Beahan

Investor Web Analyst

stewart.beahan@gmail.com

Member

Talon Herman

Regional Quality Strategist

talon_herman39@gmail.com

Viewer

Lynn Upton

Global Paradigm Consultant

lynn.upton@gmail.com

Member

Chesley Lakin

Product Usability Officer

chesley_lakin@hotmail.com

Member

Elisa Connelly

Dynamic Solutions Specialist

elisa_connelly@yahoo.com

Viewer

Adolf Kessler

International Factors Engineer

adolf.kessler@yahoo.com

Viewer

Users

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

NameRoleActions

Saul Kris

Investor Mobility Associate

saul_kris@hotmail.com

Admin

Domenico Dooley-Hodkiewicz

Global Data Coordinator

domenico.dooley-hodkiewicz@gmail.com

Admin

Kristie Hansen

Regional Quality Producer

kristie.hansen45@gmail.com

Viewer

Demarco Stokes-Beatty

Senior Creative Assistant

demarco.stokes-beatty@hotmail.com

Admin

Nikita Wolff

Internal Communications Officer

nikita.wolff56@gmail.com

Member

Opal Gottlieb

Legacy Markets Officer

opal.gottlieb@yahoo.com

Admin

Alma Bergnaum

Corporate Tactics Developer

alma.bergnaum90@gmail.com

Viewer

Ivory Doyle

Central Infrastructure Representative

ivory_doyle71@yahoo.com

Member

Kellie Abbott

Central Markets Specialist

kellie.abbott76@yahoo.com

Member

Camille Tremblay

Chief Communications Supervisor

camille.tremblay66@hotmail.com

Admin

Rodger Herzog

Lead Division Specialist

rodger.herzog@yahoo.com

Member

Charlie Ryan

Future Interactions Associate

charlie.ryan94@yahoo.com

Member

Chanel Green

Regional Marketing Developer

chanel_green56@hotmail.com

Admin

Raquel Ankunding

Principal Solutions Consultant

raquel.ankunding18@yahoo.com

Viewer

Angelita Jenkins

Direct Mobility Liaison

angelita.jenkins94@gmail.com

Admin

Wellington Kuhn

Forward Accountability Supervisor

wellington_kuhn@hotmail.com

Member

Terrence Auer

Chief Markets Consultant

terrence_auer@yahoo.com

Admin

Michele Abbott

Senior Response Consultant

michele_abbott@hotmail.com

Admin

Joel Bogan

Internal Markets Director

joel.bogan@gmail.com

Viewer

Bert Fritsch

Direct Usability Developer

bert.fritsch12@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
Joseph Wolfwanda71@hotmail.comNorth JoInactive$779.48
Dewey Daughertydanny_ratke43@gmail.comEstellbergInactive$306.15
Kari Hoppeabraham76@gmail.comJacksonvilleActive$808.99
Sidney Mertzlarry.langosh@gmail.comPort GlenboroActive$73.80
Brandyn Gloverjarrell.brekke@gmail.comDarenboroInactive$1,024.73
Total$2,993.15

Basic table

Table with Images

NameEmailLocationStatusBalance
Howard Windler
@victoria.abshire97
jared.schaefer@gmail.comBenjaminshireActive$533.56
Mrs. Maryam Monahan
@lila_hackett30
naomi_davis@gmail.comNorth IsaiahInactive$172.96
Nathan Heaney
@sarai.schaefer-nitzsche81
troy82@yahoo.comStephonfortActive$652.39
Dustin Simonis DDS
@lisette.ebert
christine99@yahoo.comSouth MasonsideActive$1,182.44
Traci Turcotte
@ezekiel9
ross.leffler50@hotmail.comLake SheilamouthInactive$792.52

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Mr. Alejandro Larsonryleigh_lowe13@hotmail.comWest ClaudesideInactive$410.36
Brennan Nicolasdax64@gmail.comSevernInactive$734.05
Maxine Bergstrom Sr.claudia21@hotmail.comMaxiebergActive$948.57
Edmond Webersophie_hamill9@gmail.comPort AdrienneActive$763.62
Jody Hesselbrittany85@yahoo.comWest LafayetteActive$450.87
Total$3,307.47

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Miss Cristian Zemlakorland.romaguera@gmail.comConnellysteadInactive$140.88
Dr. Shannon Hickledaisy41@yahoo.comDaronfurtActive$613.35
Reuben Hayes Jr.kim.thiel@gmail.comNew MartaActive$1,098.73
Brice Howebelinda40@gmail.comWest EllenvilleInactive$981.32
Krista Mullerana89@gmail.comNew JavonteInactive$1,186.64
Total$4,020.92

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Xzavier Borermaud_rolfson66@yahoo.comFort DimitribergInactive$261.77
Alena Medhurstreuben68@gmail.comSan LeandroActive$646.22
Sally Bayerbeverly.rath3@hotmail.comSybleburghInactive$382.87
Tomas Koch IItricia.wintheiser@gmail.comLake WymanportInactive$346.30
Mr. Noah Hermistonorville32@yahoo.comTownesteadInactive$367.18
Total$2,004.34

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
Lorenzo Sporerpalma97@hotmail.comSanta ClaritaActive$922.10
Claude Mayertuna.funk18@gmail.comLargoActive$1,096.18
Savannah Wuckert Vramon.zboncak@yahoo.comEast GeovanniActive$57.82
Wanda Oberbrunnerpam5@gmail.comAidanfurtActive$645.45
Marion Kshlerin DDSbrandon.frami@gmail.comPort SkylaInactive$795.06
Total$3,516.61

Table with row selection

Card Table

NameEmailLocationStatusBalance
Keshawn Schillersylvester_cruickshank@yahoo.comPort DanykaActive$187.03
Estell Marquardt MDal99@gmail.comSouth AngelineworthActive$852.97
Camden Howellvaughn_rempel@gmail.comFort JulievilleInactive$725.39
Jaeden Dickidarrel_mayert@yahoo.comDecaturActive$552.59
Anastasia Pacochareanna2@gmail.comNew KathryneActive$491.10
Total$2,809.08

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
Cloyd Keelingmayra.goyette@yahoo.comSouth AltheasideActive$597.15
Faith Schummkolby35@yahoo.comFraminghamActive$846.55
Latoya Lockmanjohn_kirlin26@yahoo.comEast KaiaportInactive$355.95
Rogelio Crookscatalina59@gmail.comEast KathleenviewInactive$1,017.43
Mitchell Orn-Kuphalgene.goyette@hotmail.comMorgan HillInactive$195.46
Quinn Kassulkefreddie_schowalter@hotmail.comCassinboroInactive$882.46
Estevan Romaguerarafael.corkery@yahoo.comMyahhavenActive$8.28
Crystal Krajciklondon_carroll84@hotmail.comSouth MayaActive$941.48
Shane Ortiz-Lowetyler50@yahoo.comChaimmouthInactive$516.00
Clemens Cronin Iivy63@yahoo.comEast NicoActive$371.01
Everett Weissnatkathleen_dooley63@gmail.comSchulistfurtInactive$447.24
Vita Yostjonathan_murphy35@gmail.comMarquisesteadInactive$108.93
Lynda Cartwrightjon_watsica@yahoo.comLuigitownActive$930.38
Kyle Auerleo4@hotmail.comOndrickamouthActive$1,197.49
Johnathan Bernhardnestor.hodkiewicz87@yahoo.comJonescesterActive$746.00
Total$9,161.81

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