UI Thing

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
INV001UnpaidCredit Card$479.25
INV002PaidPayPal$630.40
INV003PendingCredit Card$989.19
INV004PendingCredit Card$550.97
INV005UnpaidBank Transfer$328.20
INV006PendingBank Transfer$275.72
INV007PaidCredit Card$532.67
Total$3,786.40

Simple

Users

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

NameTitleEmailRoleActions
Maeve WeissnatInternal Interactions Liaisonmaeve.weissnat@yahoo.comAdmin
Howell HodkiewiczRegional Operations Directorhowell_hodkiewicz46@gmail.comViewer
Dawn BlickForward Metrics Producerdawn.blick@gmail.comViewer
Skylar PagacCustomer Identity Producerskylar.pagac93@hotmail.comMember
Dandre SwiftInternational Factors Agentdandre_swift@yahoo.comViewer
Macie FriesenFuture Creative Officermacie.friesen@yahoo.comMember

Stacked on mobile

Users

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

NameRoleActions

Lorine Lueilwitz

Dynamic Interactions Specialist

lorine.lueilwitz@gmail.com

Viewer

Holden Russel-Leannon

Senior Mobility Representative

holden.russel-leannon@gmail.com

Admin

Elbert Pouros

Direct Security Manager

elbert_pouros22@yahoo.com

Member

Tito Boyle

Central Assurance Architect

tito_boyle@hotmail.com

Admin

Cathy Schuppe

District Intranet Designer

cathy.schuppe@gmail.com

Admin

Miles Harber

District Creative Architect

miles_harber@hotmail.com

Member

Sticky header

Users

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

NameRoleActions

Margarette Homenick

Product Directives Supervisor

margarette_homenick88@hotmail.com

Admin

Juanita Feest

Chief Security Orchestrator

juanita.feest@yahoo.com

Admin

Keshawn Walter

District Accountability Developer

keshawn.walter59@yahoo.com

Admin

Jermey Maggio-Hickle

National Group Technician

jermey.maggio-hickle@hotmail.com

Admin

Mallory McKenzie-Lueilwitz

Corporate Branding Engineer

mallory_mckenzie-lueilwitz27@hotmail.com

Member

Chyna Littel

Investor Communications Facilitator

chyna.littel75@gmail.com

Viewer

Giovanni Cruickshank

Investor Usability Designer

giovanni.cruickshank13@yahoo.com

Viewer

Green Armstrong

Human Marketing Facilitator

green_armstrong65@hotmail.com

Admin

Eduardo Hettinger

Human Factors Strategist

eduardo.hettinger57@hotmail.com

Member

Casandra Schultz

Legacy Branding Agent

casandra.schultz@yahoo.com

Member

Dayna Abbott

Internal Optimization Manager

dayna.abbott@gmail.com

Member

Mavis Becker

Principal Research Manager

mavis.becker@hotmail.com

Viewer

Kamille Gerhold

Forward Identity Designer

kamille_gerhold@hotmail.com

Admin

Beaulah Hettinger-Kuhn

Global Quality Representative

beaulah_hettinger-kuhn37@gmail.com

Viewer

Jaquelin Bayer

Global Solutions Manager

jaquelin.bayer83@hotmail.com

Admin

Frida Schamberger

Forward Integration Planner

frida_schamberger18@gmail.com

Member

Norwood VonRueden

District Factors Strategist

norwood_vonrueden56@yahoo.com

Admin

Sonia Franecki

Investor Brand Analyst

sonia.franecki50@gmail.com

Member

Dolores Beier

Forward Operations Director

dolores.beier39@hotmail.com

Member

Jaquelin Bergstrom

Corporate Integration Engineer

jaquelin_bergstrom@yahoo.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
Jody Jakubowskimelody_corwin@yahoo.comSouth OlaInactive$1,194.74
Cornelius Rohaneaster50@gmail.comLake KatherineInactive$550.19
Jaime Watsicadante.fay37@hotmail.comKentwoodActive$980.90
Marshall Ward IVdylan_olson@hotmail.comJoyhavenActive$1,181.64
Jeannie Hintzevalyn72@yahoo.comHilllshireActive$346.48
Total$4,253.95

Basic table

Table with Images

NameEmailLocationStatusBalance
Andrew Schultz
@bart.kuvalis16
melyna_adams@gmail.comPittsburgInactive$897.85
Patsy Berge
@collin.tremblay
edgar.schimmel-considine69@yahoo.comFerminhavenActive$476.78
Roberta Gutkowski
@lydia87
viviane25@yahoo.comSouth FernandoInactive$959.12
Ed Paucek
@tad36
iva.heaney20@yahoo.comAshlytonActive$729.03
Eileen Ruecker
@bernadette97
grant_gusikowski@hotmail.comWest FlavioActive$1,050.99

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Maureen Armstrongmichelle.gulgowski61@yahoo.comLake SilastownInactive$931.34
Elaine Ornjaclyn70@hotmail.comWest AidenchesterInactive$846.32
Joy Brekkeralph.wilkinson56@yahoo.comNew DoraviewActive$451.59
Cathy Raynorgarland.rohan14@yahoo.comLeovilleActive$116.27
Mr. Melvin Powlowskijesus_legros@gmail.comFort AbigailtownActive$251.98
Total$2,597.50

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Simon Bernierkaycee.tremblay-keebler@hotmail.comSouth RessievilleInactive$209.74
Guadalupe Haucksedrick_rutherford@gmail.comFort TeresaviewActive$326.70
Clinton Rippinteresa.sporer64@gmail.comCarolinaInactive$1,155.00
Gilberto Medhurstskye.lockman@yahoo.comLake AdanActive$671.94
Ms. Brandy Lakinalvina86@yahoo.comWest AvaInactive$464.57
Total$2,827.95

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Terri O'Konparker_hoeger74@yahoo.comJeraldvilleInactive$76.85
Mr. Jordan Ondrickakianna.heaney5@yahoo.comSouth BerniceworthInactive$927.11
Felicia Faymaria52@gmail.comWest JasonmouthActive$927.96
Eleanor Kleinedgardo84@gmail.comMitchelcesterInactive$1,083.50
Shelly Cartwrightnelle_hand17@gmail.comTheoboroughActive$736.37
Total$3,751.79

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
Georgia Stoltenberghal_roberts14@yahoo.comNorth EnidfurtActive$772.38
Tina Murrayrudy.barton@hotmail.comSylvesterstadActive$985.84
Mr. Mitchell Stromanskye65@hotmail.comLehnerfortActive$827.82
Joshua Croninmarco_cassin@hotmail.comPort LukasActive$1,158.16
Ian Rueckerkeyshawn.brakus@gmail.comEstefaniavilleInactive$529.09
Total$4,273.29

Table with row selection

Card Table

NameEmailLocationStatusBalance
Amos Okuneva DVMlura_cartwright-renner@hotmail.comPort KaleytonActive$248.19
Jan Schaefergeovanni.gottlieb60@hotmail.comSt. LouisActive$609.21
Ms. Belinda Kohlerdeshawn_schultz@yahoo.comShieldsburghActive$448.56
Kim Osinski DDSmonroe91@gmail.comMurazikfurtActive$881.29
Dennis Watsicamarty_schmidt@hotmail.comSacramentoActive$569.13
Total$2,756.38

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
Emmett Langworthshyann.ortiz-white19@gmail.comBernitahavenInactive$940.82
Bill Tromp Icordelia.nitzsche82@yahoo.comLuciennestadInactive$978.22
Donald Kassulkemaximus.kunze34@hotmail.comPerrisInactive$1,015.32
Shari Okunevaannamae.nader-satterfield@hotmail.comFort AdelleActive$35.46
Nick Baumbachdorthy35@gmail.comBartlettInactive$715.17
Marcos Quigleylinnea93@hotmail.comSouth JaysonworthActive$1,150.00
Alexandra Shieldsalexandria4@yahoo.comAllysideActive$732.77
Ira Morarmuhammad15@gmail.comJessicasideActive$992.29
Carroll Yundt-Batzjaylin_mckenzie@yahoo.comBeaumontInactive$927.91
Mathew Braunethyl.ward10@gmail.comNew VilmaportInactive$425.43
Dr. Julian Dooleyearlene96@yahoo.comSibylshireInactive$185.80
Dr. Ismael Kuvalisjolie_blick61@gmail.comAntoniettavilleActive$1,126.05
Miss Darla Stoltenbergellsworth.treutel@yahoo.comEllabergActive$553.75
Dr. Clark Keeblerfreida_padberg@hotmail.comJacobistadActive$637.47
Janis Ryan IIIyadira_prohaska@yahoo.comEast NelslandInactive$961.07
Total$11,377.53

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

Switch

A control that allows the user to toggle between checked and not checked.

Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.