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
INV001PaidCredit Card$675.84
INV002UnpaidCredit Card$846.36
INV003PaidCredit Card$331.00
INV004UnpaidCredit Card$842.63
INV005PendingCredit Card$850.78
INV006UnpaidCredit Card$460.81
INV007PaidPayPal$680.84
Total$4,688.26

Simple

Users

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

NameTitleEmailRoleActions
Edwin CorkeryCustomer Group Directoredwin.corkery79@yahoo.comViewer
Emmanuelle LueilwitzInternational Interactions Orchestratoremmanuelle.lueilwitz72@gmail.comAdmin
Cayla KuhlmanPrincipal Metrics Associatecayla_kuhlman@gmail.comViewer
Valerie CollinsForward Metrics Plannervalerie.collins@gmail.comMember
Evans RyanInternational Division Directorevans_ryan@yahoo.comAdmin
Jaycee BrekkeNational Brand Orchestratorjaycee_brekke61@yahoo.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Nettie Lynch

Principal Usability Director

nettie_lynch52@yahoo.com

Member

Katherine Schmeler

Principal Accounts Strategist

katherine_schmeler@hotmail.com

Member

Forrest Lind

Internal Applications Producer

forrest_lind@hotmail.com

Admin

Allison Ebert

Senior Intranet Administrator

allison_ebert@hotmail.com

Member

Kallie Flatley

Forward Interactions Producer

kallie.flatley@hotmail.com

Viewer

Carl Kuphal

Central Marketing Director

carl.kuphal87@hotmail.com

Viewer

Users

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

NameRoleActions

Jess Pouros-Thiel

Customer Division Coordinator

jess_pouros-thiel33@hotmail.com

Member

Bert Zieme

Product Accounts Architect

bert_zieme54@yahoo.com

Viewer

Colleen Harvey

Future Assurance Administrator

colleen_harvey@gmail.com

Member

Connie Quigley

Product Optimization Planner

connie.quigley9@gmail.com

Viewer

Viviane Lockman

Future Response Engineer

viviane_lockman@yahoo.com

Member

Aurelio Wilderman

Legacy Assurance Engineer

aurelio.wilderman@hotmail.com

Member

Lorenz Legros

Customer Division Agent

lorenz.legros51@gmail.com

Viewer

Guy Haley

Product Applications Facilitator

guy.haley46@hotmail.com

Viewer

Angelica Schneider

Chief Infrastructure Liaison

angelica.schneider44@gmail.com

Viewer

Ronnie D'Amore

Corporate Branding Representative

ronnie_damore97@hotmail.com

Admin

Newell Rempel

Corporate Functionality Representative

newell.rempel@gmail.com

Admin

Jeannie Kassulke

Customer Branding Agent

jeannie_kassulke@yahoo.com

Viewer

Judge Gerhold

Forward Usability Strategist

judge_gerhold54@gmail.com

Viewer

Craig Frami

Internal Configuration Officer

craig.frami@yahoo.com

Viewer

Unique Dach

District Usability Technician

unique_dach73@yahoo.com

Viewer

Meda Fritsch

International Markets Technician

meda.fritsch@gmail.com

Member

Brock Torphy

Corporate Web Director

brock_torphy@gmail.com

Admin

Morris Crist

Senior Mobility Specialist

morris_crist@gmail.com

Viewer

Luke Leffler

Internal Configuration Engineer

luke_leffler@yahoo.com

Viewer

Linwood Little

Global Brand Officer

linwood.little64@hotmail.com

Viewer

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
Mrs. Lillie Cole-Beattylamar_medhurst@gmail.comNorth JessyInactive$211.84
Neil Schoenjennifer48@hotmail.comGislasontonActive$1,028.03
Mike Toygeorgianna_fisher-prohaska76@gmail.comAltadenaInactive$551.34
Doyle Kunze Vcierra_reichel-daniel@hotmail.comLillianhavenActive$1,143.69
Albert Lowe Imargarita.kulas@gmail.comWest MarianneInactive$5.17
Total$2,940.07

Basic table

Table with Images

NameEmailLocationStatusBalance
Elna Kohler
@ellen_kozey85
jo_lueilwitz97@yahoo.comEldastadActive$346.15
Amelia Gleason-Sanford V
@vada_becker53
fannie_gorczany@yahoo.comAdamstonActive$831.08
Alvah Heidenreich
@patsy_jaskolski32
brisa83@hotmail.comDemarcoboroActive$902.85
Allene O'Keefe
@dashawn.doyle-schulist
jude_bahringer49@hotmail.comNorth MelissaworthActive$815.44
Mrs. Broderick Hane
@vivian16
burley_gulgowski@yahoo.comCarmelActive$1,097.17

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Kathy McCluredolores_hickle@gmail.comRosenbaumchesterInactive$1,105.04
Maximillia Ullrichshane_kozey6@gmail.comLake InezActive$251.90
Mrs. Cassandra Faheyamir66@hotmail.comMariettaInactive$1,035.82
Rodney Leschperry.kautzer@yahoo.comWilburbergInactive$986.25
Rogelio Mohralycia.wilderman@yahoo.comSouth ThelmaActive$776.01
Total$4,155.02

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Rodolfo Ondrickaora86@hotmail.comElbertvilleInactive$336.09
Fleta Bechtelarshawna_langosh11@hotmail.comBeahansideInactive$673.64
Dr. Yvonne Morissetteandrew.nader@hotmail.comAnchorageActive$105.21
Clyde Riceroland80@yahoo.comClaytonhavenInactive$877.09
Albert Lueilwitzelias52@gmail.comNew ZoeActive$606.47
Total$2,598.50

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Frankie Mills IVgilberto87@hotmail.comArnulfofurtActive$661.82
Meghan Pfeffermargret_hyatt@hotmail.comJoelfurtInactive$137.46
Alvin Torphymandy24@hotmail.comNew GeorgiaInactive$790.45
Kristin Beier Sr.julian92@yahoo.comHirthetonInactive$362.42
Lenny Walker-D'Amoreeverett.denesik@yahoo.comFort FriedrichActive$3.69
Total$1,955.84

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
Lyle Mohral_wisoky@gmail.comNorth ArchActive$1,117.23
Fredrick Croninlois.dicki@yahoo.comRosevilleInactive$279.33
Deonte Windler-Hettingerangelita79@gmail.comRutherfordburghActive$706.31
Ms. Daniella Bednarjenna.koepp@yahoo.comNew BarrettInactive$985.20
Ms. Lorene Purdycathy65@yahoo.comLake ElvieworthActive$1,118.67
Total$4,206.74

Table with row selection

Card Table

NameEmailLocationStatusBalance
Jeffery Kingaiden58@yahoo.comFort AidenActive$396.60
Loma Carrollotis56@hotmail.comWaelchilandInactive$965.34
Richard Framielvie85@yahoo.comFelipahavenActive$1,017.54
Julian Towneisabel.upton18@yahoo.comSouth DedrickInactive$190.67
Miss Narciso Dickijoy77@yahoo.comSalmasideInactive$320.22
Total$2,890.37

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
Maddison VonRueden IVhipolito.rice86@gmail.comEast RubyActive$452.70
Libbie Krisbertha_simonis@gmail.comTerrellburyActive$484.99
Wilfrid Mantevallie.schoen@gmail.comDenesiktonActive$208.45
Elise Harveytrevion.terry0@yahoo.comLuellalandInactive$1,181.58
Blaise Welchlyle_quigley41@hotmail.comFeeneyboroActive$145.29
Mrs. Deanna Purdyjasper.bernhard@yahoo.comNorth RexstadInactive$718.83
Albert Greenholtthomas.okon31@gmail.comKilleenActive$717.76
Molly Wardwesley_anderson93@yahoo.comLake TrentonInactive$179.15
Kaylie Stehrmalcolm_ziemann-treutel47@gmail.comKristinestadActive$72.98
Ronnie Bayermakayla.morar98@hotmail.comColehavenActive$35.42
Francisca Abbottolive_jast@hotmail.comEast AsachesterActive$795.47
Samuel Morissettekrista36@yahoo.comNorth IrmaboroughActive$262.79
Marty Bednarperry_sawayn55@yahoo.comLake ElwinsideActive$336.42
Ashtyn Abbott DVMcindy31@hotmail.comJennieportInactive$549.77
Trey Rodriguezbrandy.wunsch@gmail.comDavieInactive$534.94
Total$6,676.54

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