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$801.18
INV002PendingBank Transfer$580.10
INV003UnpaidBank Transfer$423.95
INV004PendingPayPal$313.04
INV005UnpaidCredit Card$794.36
INV006PaidPayPal$323.70
INV007PendingBank Transfer$663.10
Total$3,899.43

Simple

Users

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

NameTitleEmailRoleActions
Nigel HermannDynamic Solutions Orchestratornigel_hermann41@gmail.comMember
Rosalie RunteGlobal Research Officerrosalie_runte@hotmail.comMember
Peter HamillDistrict Group Strategistpeter.hamill@yahoo.comViewer
Shaina Wunsch-WunschFuture Optimization Producershaina.wunsch-wunsch10@yahoo.comAdmin
Rashawn ThielCustomer Program Administratorrashawn.thiel30@yahoo.comMember
Celine RunolfsdottirCorporate Group Managerceline_runolfsdottir@yahoo.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Leigh Turcotte

Forward Solutions Orchestrator

leigh.turcotte58@hotmail.com

Admin

Roberto Harber

Customer Operations Assistant

roberto.harber@hotmail.com

Viewer

Angelina Walter-Kris

Customer Program Architect

angelina.walter-kris38@yahoo.com

Viewer

Eric Rempel

Product Applications Liaison

eric_rempel@hotmail.com

Member

Verner Littel

Chief Branding Designer

verner_littel@yahoo.com

Viewer

Rodger Torphy-Windler

Chief Implementation Producer

rodger.torphy-windler@hotmail.com

Member

Users

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

NameRoleActions

Julie Mann

Direct Creative Supervisor

julie_mann@yahoo.com

Viewer

Henriette Batz

Lead Metrics Producer

henriette.batz@yahoo.com

Member

Raymond McCullough

Dynamic Branding Producer

raymond_mccullough@gmail.com

Member

Lena Kshlerin

Principal Division Engineer

lena.kshlerin@gmail.com

Admin

Brittany Kub

Central Division Officer

brittany.kub@gmail.com

Admin

Alf Leuschke

National Implementation Facilitator

alf_leuschke59@hotmail.com

Member

Natasha Klocko

Future Metrics Architect

natasha.klocko@hotmail.com

Viewer

Rebecca Lubowitz

District Directives Executive

rebecca.lubowitz@hotmail.com

Viewer

Abel Dibbert

Central Group Consultant

abel.dibbert53@hotmail.com

Viewer

Curtis Spencer

Investor Brand Designer

curtis.spencer@gmail.com

Viewer

Jeanette Bashirian

Human Group Associate

jeanette_bashirian@gmail.com

Member

Jonas Medhurst

Future Identity Coordinator

jonas_medhurst@gmail.com

Viewer

Brett Howe

Human Data Associate

brett.howe20@gmail.com

Member

Madilyn Sporer

Internal Accounts Technician

madilyn.sporer31@hotmail.com

Viewer

Wesley Bins

Internal Tactics Executive

wesley.bins8@gmail.com

Viewer

Casimir Hyatt

Future Optimization Liaison

casimir_hyatt32@hotmail.com

Member

Jennifer McKenzie

Chief Usability Manager

jennifer.mckenzie75@hotmail.com

Viewer

Dianne Abbott

International Accounts Facilitator

dianne_abbott@yahoo.com

Admin

Gerald Krajcik

Customer Intranet Planner

gerald.krajcik@gmail.com

Member

Consuelo Ledner

Principal Assurance Liaison

consuelo_ledner@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
Mr. Willard Robelmorris7@gmail.comArlenefurtInactive$533.92
Hershel Wehnerclifford_rath85@gmail.comSouth KobytonActive$1,144.08
Brenna Armstrong Ibarry96@gmail.comNorth CristobalActive$547.11
Mrs. Kelley Johnsononie_bosco41@hotmail.comClintonbergInactive$1,004.64
Iva Wittingmarta_bosco@gmail.comNorth MeaganInactive$138.04
Total$3,367.79

Basic table

Table with Images

NameEmailLocationStatusBalance
Rita Lemke
@mandy4
karla.lynch63@yahoo.comElginActive$955.07
Celestine Heathcote
@alyssa.tillman28
emerald90@gmail.comNew MinniefurtInactive$741.00
Tommy Bartell MD
@roberto.mraz
carter97@hotmail.comWest EdnaActive$615.95
Delmer Schuppe
@tyrese89
ed.gutkowski@hotmail.comMariannetonActive$574.20
Shanon Dach-Leuschke
@tiana.heidenreich
israel_zieme@hotmail.comBernadettebergActive$108.90

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Erick Hegmann-Christiansenkarli_schroeder@yahoo.comSouth MartinaActive$1,057.91
Ms. Lola Friesen-Schulistdeion.senger34@yahoo.comHemetInactive$368.53
Gary Corkeryjazmin_wuckert@yahoo.comNorth KatherinetownActive$975.57
Prudence Willomar_zieme75@hotmail.comWest ShannonActive$67.68
Clifford Kuhn-Ebertinez_boehm46@hotmail.comSouth GeovannytonInactive$280.18
Total$2,749.87

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Eula Wisokyelisha_pacocha46@gmail.comDaniellestadActive$533.06
Dr. Kailey Sawaynjedediah5@yahoo.comWoodlandInactive$992.18
Aubrey Stokeseric_schmidt@hotmail.comPort CliffordActive$612.46
Suzanne Emmericharjun.emard@yahoo.comHerzogbergInactive$205.75
Pearlie Breitenbergjoel_hansen@yahoo.comFort AnnabelllandActive$306.48
Total$2,649.93

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Erwin Collins Ierick.gerhold79@gmail.comKeelingmouthActive$15.28
Wilbert Dickiboris_sauer5@yahoo.comSchummtownInactive$83.34
Patricia Grimes IIIoliver62@yahoo.comSwaniawskifurtInactive$184.13
Ena Creminaaron.bechtelar@yahoo.comMinneapolisActive$645.89
Vicky Considinesydni.cronin12@yahoo.comDenverActive$106.05
Total$1,034.69

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
Blanche Pricesherman_stokes@gmail.comJonshireActive$984.15
Elza Zboncakgayle.ohara@gmail.comClementinasteadInactive$884.62
Ms. Earline Hahnmiriam_gleason29@hotmail.comSchmidttownInactive$376.52
Ms. Luz Franeckijennie46@hotmail.comMorissetteportInactive$713.41
Ms. Robyn Romaguera IIdeborah_quigley@hotmail.comHuntington BeachInactive$484.29
Total$3,442.99

Table with row selection

Card Table

NameEmailLocationStatusBalance
Corene Feeneykenyon63@yahoo.comRempellandInactive$217.30
Helen Raulyda77@gmail.comEast RoderickvilleInactive$0.65
Davonte Willkyleigh.wunsch93@gmail.comGlen BurnieActive$1,034.86
Lucienne Roobed_corwin@yahoo.comOtistownInactive$1,014.44
Abraham Harrismacey_collins@hotmail.comSouth RyansideActive$448.47
Total$2,715.72

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
Ansel Torpbonnie58@gmail.comNew LoyalInactive$583.75
Kay Larkin IIIlonnie.sanford@gmail.comSouth MelissatownInactive$70.88
Barbara Goyette Ijosue22@yahoo.comWylieInactive$199.86
Meredith Rosenbaumtrevor50@gmail.comNicolasboroughInactive$31.04
Jada Bashiriansergio12@hotmail.comBerniesideActive$532.01
Noah Hyattfavian.considine-lowe11@gmail.comCeciliasteadActive$60.19
Stephen Lang Vdeanna1@yahoo.comOverland ParkInactive$799.71
Antone O'Konseamus.cormier33@yahoo.comOsinskiviewActive$15.48
Orpha Morarramiro17@hotmail.comPort GiannilandActive$364.67
Freddy Reillykale.krajcik75@yahoo.comWest EllisburghActive$254.08
Brittany Lynchbuford_zboncak@gmail.comNew MaybellhavenActive$1,101.92
Robbie Ferryarlene.gorczany98@hotmail.comSouth TanyaworthActive$840.50
Marlon Larkinlola_farrell8@hotmail.comCliffordportActive$233.81
Joan MacGyvermadison.dare@hotmail.comEast JordansteadActive$121.22
Rosie Willemilio_hilpert@hotmail.comNew BobboroughInactive$1,182.52
Total$6,391.64

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