Components

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
INV001PaidBank Transfer$988.64
INV002PaidCredit Card$316.58
INV003PaidPayPal$537.66
INV004PaidBank Transfer$788.84
INV005PaidPayPal$416.21
INV006UnpaidCredit Card$368.39
INV007UnpaidCredit Card$704.85
Total$4,121.17

Simple

Users

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

NameTitleEmailRoleActions
Florence SatterfieldInternational Group Supervisorflorence_satterfield@gmail.comViewer
Lola StreichDirect Quality Architectlola.streich24@yahoo.comAdmin
Garrett King-JohnsonDirect Solutions Associategarrett.king-johnson90@gmail.comViewer
Ellie TorphyInternational Security Agentellie_torphy84@yahoo.comAdmin
Johnson KozeyCustomer Creative Architectjohnson_kozey@gmail.comViewer
Hanna Brekke-FunkInternational Response Technicianhanna.brekke-funk6@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Paula Gibson

Principal Interactions Liaison

paula_gibson@hotmail.com

Admin

Tyshawn Dietrich

Principal Factors Administrator

tyshawn.dietrich8@gmail.com

Viewer

Jacob Harris

Future Interactions Producer

jacob_harris70@hotmail.com

Member

Katelynn Ziemann

National Communications Coordinator

katelynn_ziemann87@hotmail.com

Admin

Juana Mueller

Forward Functionality Officer

juana_mueller@yahoo.com

Member

Letha Lowe

Senior Marketing Developer

letha.lowe@gmail.com

Admin

Users

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

NameRoleActions

Taurean Orn

Direct Research Agent

taurean_orn@gmail.com

Member

Carroll Conn

Regional Interactions Officer

carroll.conn13@gmail.com

Admin

Brendan Lemke-Casper

Corporate Metrics Executive

brendan_lemke-casper@hotmail.com

Admin

Julia Graham

Product Group Designer

julia.graham@gmail.com

Member

Jeremy Wolff

Future Marketing Administrator

jeremy.wolff@hotmail.com

Member

Zakary Spencer

Regional Web Designer

zakary_spencer@gmail.com

Viewer

Katherine Goyette

Future Mobility Designer

katherine_goyette24@hotmail.com

Viewer

Elisa Treutel

Corporate Accounts Coordinator

elisa_treutel27@hotmail.com

Viewer

Luther Schimmel

Senior Group Assistant

luther_schimmel@yahoo.com

Member

Asia Auer

International Functionality Technician

asia_auer93@yahoo.com

Member

Rudolph Predovic

National Assurance Manager

rudolph.predovic41@yahoo.com

Member

Willa Corkery

Dynamic Response Consultant

willa_corkery@yahoo.com

Admin

Chloe Stracke

Legacy Integration Designer

chloe_stracke74@gmail.com

Viewer

Colin Considine

Senior Functionality Producer

colin.considine7@hotmail.com

Member

Hannah D'Amore

Chief Assurance Analyst

hannah.damore@gmail.com

Admin

Dorcas O'Conner

District Factors Director

dorcas.oconner82@hotmail.com

Admin

Larry Leffler

Chief Program Director

larry.leffler20@gmail.com

Viewer

Eliseo Terry

District Accountability Liaison

eliseo_terry@gmail.com

Viewer

Garry Jaskolski

Legacy Usability Manager

garry_jaskolski16@yahoo.com

Member

Josefa Effertz-Rohan

Central Markets Associate

josefa.effertz-rohan21@hotmail.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
Walton Osinskidestany.russel35@hotmail.comNorth RufusstadInactive$214.21
Mr. Nathan Kemmerhailee_schoen65@hotmail.comTamaralandActive$1,083.77
Todd Hamilljosefa41@yahoo.comWest StephenvilleInactive$636.39
Spencer Dietrichcarlos.champlin42@gmail.comJuniorfieldInactive$848.00
Jorge Rogahnmarisol.waelchi@gmail.comMarcboroughInactive$702.09
Total$3,484.46

Basic table

Table with Images

NameEmailLocationStatusBalance
Merritt Orn
@libbie79
orville.kuhlman@gmail.comAugusttonInactive$458.24
Catherine Cassin
@milton_schmeler60
marie_damore35@hotmail.comEast GregoryActive$1,006.38
Eloise Ullrich
@susie_hickle18
annie_farrell99@yahoo.comNew DominiqueInactive$831.03
Derrick Beier-Ryan MD
@damion64
daryl_dietrich30@yahoo.comAustinsteadActive$859.15
Patsy Ferry
@sigmund21
annamarie_schaden@gmail.comSouth RitaActive$683.60

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Tom Klocko Vfelix96@yahoo.comPort BrodyburghActive$87.91
Mona Hanedaniel.beatty@hotmail.comNew EllisbergInactive$378.30
Cecelia Nienowloretta.zboncak-franecki@yahoo.comKeeblersideActive$1,054.12
Malachi Daniel DDScydney88@yahoo.comWaelchi-KautzermouthActive$594.17
Devon Jasthershel97@yahoo.comWest KathrynActive$132.94
Total$2,247.44

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Lynette VonRuedendexter_hoeger21@hotmail.comNorth CamronActive$810.73
Benny Creminadell55@gmail.comHegmannsideInactive$648.11
Letha Windlerflavio.prohaska49@yahoo.comHauckmouthActive$1,177.82
Roxanne O'Connellkelli_kertzmann@gmail.comErdmancesterInactive$588.45
Charlotte Olsonjuana0@yahoo.comGradylandActive$378.18
Total$3,603.29

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Mrs. Shayna Reichert DVMirene.terry87@yahoo.comNew KatieInactive$1,188.34
Lionel Kochhailee.beier11@yahoo.comPort ElmerActive$884.72
Margarete Dooleycorey_schulist@yahoo.comNew KristinasteadActive$631.46
Bertha Metzmorris51@gmail.comSchusterboroughActive$738.60
Dr. Jeremy Zulauf-Watersjuston.mosciski@gmail.comCollierbergInactive$111.02
Total$3,554.14

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
Moriah Bartonmario.trantow30@gmail.comLake DorisActive$1,054.11
Ms. May Pourosalma18@gmail.comLake NorbertboroughInactive$73.21
Roland Heaneytiffany69@yahoo.comPort IvaActive$920.88
Patrick Beahanmack71@gmail.comHaleighlandActive$1,071.97
Dr. Maria McGlynnmuriel.mccullough67@gmail.comDickinsoncesterInactive$729.20
Total$3,849.37

Table with row selection

Card Table

NameEmailLocationStatusBalance
Felicia Ziemejerome84@yahoo.comBrakusshireInactive$507.84
Ryder Hammes IIIjayden59@hotmail.comFionafieldActive$418.73
Letitia Leschprincess57@gmail.comLake StuartfortInactive$366.44
Mr. Preston Wolfdomenic99@gmail.comEast MaryannvilleActive$762.83
Michelle Hudsondandre.kuhic34@yahoo.comBeatricestadInactive$651.12
Total$2,706.96

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
Sylvester Keeblerjaquan_cartwright-murazik78@hotmail.comNew VeronaInactive$46.31
Luke Feest-Yostjoesph_kozey@yahoo.comGuaynaboInactive$331.00
Mose Bodenina.cartwright@hotmail.comSaulviewActive$600.46
Austin Metztabitha_wehner-littel@yahoo.comNew TyrellcesterActive$928.58
Broderick Connbill87@gmail.comEast KristinafieldInactive$946.17
Mrs. Lyda Prosaccobeverly_hintz13@hotmail.comSouth JordanInactive$63.78
Terence Schuppe PhDmartha_reichel15@gmail.comRusselfieldActive$371.75
Margarita Haneamelia_schaefer@hotmail.comSchulistsideInactive$1,001.57
Stella Cassinvickie27@yahoo.comFort MafaldasteadInactive$631.52
Harold Buckridgemartin.waelchi0@hotmail.comManuelamouthActive$309.89
Jacquelyn Kuhncamille46@hotmail.comZemlakviewInactive$1,030.22
Silvia Boehmbrett38@yahoo.comBlakesteadInactive$100.82
Charlene Murrayjoseph.will@yahoo.comCyrustownInactive$1,085.02
Xander Wilkinsonthelma.purdy54@gmail.comDaniellecesterActive$307.89
Marcus Marquardtbraxton.mitchell@hotmail.comRosiefieldInactive$156.73
Total$7,911.71

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