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
INV001UnpaidPayPal$369.58
INV002PendingPayPal$505.45
INV003UnpaidPayPal$237.86
INV004PaidCredit Card$961.40
INV005PaidPayPal$883.51
INV006UnpaidBank Transfer$837.50
INV007PendingPayPal$883.25
Total$4,678.55

Simple

Users

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

NameTitleEmailRoleActions
Andy JonesRegional Branding Facilitatorandy.jones@gmail.comMember
Myron KunzeSenior Implementation Officermyron_kunze@gmail.comViewer
Nick EmardCustomer Data Agentnick.emard43@gmail.comViewer
Elijah BechtelarInternational Brand Plannerelijah_bechtelar@hotmail.comViewer
Eleanore ConsidineInvestor Configuration Agenteleanore_considine83@yahoo.comMember
Miranda CollierGlobal Identity Plannermiranda.collier59@yahoo.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Keaton Stokes

Corporate Accountability Manager

keaton.stokes@yahoo.com

Viewer

Lavina Ebert

Investor Tactics Facilitator

lavina_ebert@gmail.com

Member

Aiyana Block

Investor Branding Planner

aiyana_block88@yahoo.com

Member

Maybelle Torphy

Global Assurance Executive

maybelle.torphy@yahoo.com

Member

Tim Sipes

International Factors Developer

tim.sipes@gmail.com

Admin

Jessica Lowe

International Security Engineer

jessica.lowe22@hotmail.com

Member

Sticky header

Users

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

NameRoleActions

Byron Hansen

Legacy Directives Planner

byron.hansen@gmail.com

Admin

Derrick Ernser

Forward Infrastructure Technician

derrick_ernser41@gmail.com

Viewer

Scarlett Emard

Forward Division Supervisor

scarlett.emard@yahoo.com

Admin

Douglas Raynor

Customer Interactions Technician

douglas.raynor31@gmail.com

Viewer

Michelle Baumbach

Senior Mobility Manager

michelle.baumbach@gmail.com

Member

Jeff Runolfsson

Internal Response Engineer

jeff_runolfsson@yahoo.com

Admin

Laurence Smitham

Dynamic Usability Manager

laurence_smitham@hotmail.com

Viewer

Earnest Bergnaum

Lead Web Agent

earnest.bergnaum31@hotmail.com

Admin

Mathew Herzog

Global Optimization Officer

mathew.herzog92@hotmail.com

Member

Donna Lehner

Product Usability Technician

donna_lehner@gmail.com

Member

Grace Morissette

Future Division Engineer

grace_morissette71@yahoo.com

Admin

Judson Ortiz

Product Accountability Orchestrator

judson.ortiz3@yahoo.com

Admin

Mohammed Bahringer

International Configuration Agent

mohammed.bahringer@hotmail.com

Viewer

Murray Jones

Direct Directives Supervisor

murray.jones@gmail.com

Admin

Sharon Koss-Sipes

National Infrastructure Developer

sharon.koss-sipes62@yahoo.com

Admin

Lynne Kunze

Senior Accountability Strategist

lynne.kunze@yahoo.com

Admin

Steven Greenholt

National Markets Planner

steven.greenholt57@hotmail.com

Member

Wilber Jacobson

Legacy Division Analyst

wilber_jacobson@gmail.com

Viewer

Tom Schneider

Regional Communications Engineer

tom_schneider37@hotmail.com

Member

Dorris MacGyver

Legacy Solutions Planner

dorris.macgyver@gmail.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
Laisha Whitedelpha_sipes@gmail.comPort MaceystadActive$35.84
Dariana Huelchristy_robel@gmail.comGarrettsteadInactive$85.50
Karl Schneiderheather27@hotmail.comEast MeredithhavenActive$845.36
Quinten Hamillvalentina_miller@gmail.comJaredviewInactive$1,195.28
Isidro Stehrsimeon.nader68@hotmail.comBarryburghInactive$808.10
Total$2,970.08

Basic table

Table with Images

NameEmailLocationStatusBalance
Herman Padberg
@krystal62
mose71@gmail.comSouth GraysonInactive$949.55
Audie Crooks
@lynda_anderson
brooke.pacocha@gmail.comPort LuzInactive$818.54
Sheryl Reinger III
@theodore_cartwright80
tavares59@hotmail.comJefferson CityInactive$61.77
Danny McGlynn
@john_waters68
vivian_mertz@gmail.comPort LauryburyActive$162.34
Alayna O'Reilly MD
@cedric_dickinson
carolyne.marks-bogan@hotmail.comRohanstadActive$906.22

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Kristina Douglasrosie_barrows@gmail.comRevereInactive$990.29
Berenice Pacochajonathon.borer89@yahoo.comNew HildaActive$976.15
Stacy Haley-Klinglizzie_emmerich-denesik52@hotmail.comWest VickiInactive$168.89
Dr. Wilber Robertsasa_hills@gmail.comFort MilesmouthActive$753.16
Esther Stammstephen_jones24@hotmail.comCastle RockActive$981.51
Total$3,870.00

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Lorenzo Mooreethyl70@gmail.comNorth KristieInactive$401.59
Kay Emmerich IIsonja.lind@gmail.comWest FredyboroInactive$44.80
Marianna Durganjuliet.jakubowski@yahoo.comHaltom CityActive$678.90
Henry Jacobiangelita13@gmail.comNorth AlexandraActive$1,098.27
Sheila Howebrendan_yost68@gmail.comNew MireyaportActive$496.07
Total$2,719.63

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Mr. Brad Nitzsche DDSgisselle_lubowitz-hane80@yahoo.comEast RosemarysideInactive$887.77
Neal Rogahnethel.cartwright78@hotmail.comVinelandInactive$244.15
Barrett Daughertyjonas.weber62@yahoo.comEast OrangeActive$524.10
Mr. Kyle Flatleyboris99@yahoo.comSanta RosaActive$763.24
Priscilla Andersonflorence.bartell@gmail.comPomonaInactive$994.64
Total$3,413.90

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
Cody Predovicrachael.mueller40@hotmail.comEast CarliefurtActive$74.42
Mr. London Strackejared.skiles-frami10@gmail.comSouth CoryActive$274.01
Amie Willmspearl74@hotmail.comLake BlakeInactive$894.21
Nasir Kingcarole65@yahoo.comLansingActive$1,128.06
Luke Williamsonhilda.barton87@gmail.comLake CamilleInactive$620.22
Total$2,990.92

Table with row selection

Card Table

NameEmailLocationStatusBalance
Sylvester Lemkeselena73@gmail.comBaltimoreActive$539.67
Jakayla Murphyezra38@yahoo.comBernhard-ShanahanvilleInactive$254.00
Eddie Langjoan33@gmail.comFort KatherinefurtInactive$48.35
Lester Langworth IVrene.becker@yahoo.comWest IsacboroughInactive$250.39
Timothy Hermanemerson83@yahoo.comFort JanieActive$909.86
Total$2,002.27

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
Ryann Nikolaus IIlula29@gmail.comFort KaelynInactive$0.91
Miss Bernadine Howell-Kassulkemarcel6@hotmail.comNorth GradyfortInactive$1,016.53
Hilda Cassincarlos.morissette@yahoo.comMooreburghInactive$1,128.85
Johnny Wunschlucas6@gmail.comSomervilleInactive$1,195.26
Shayne Hudsonstefan62@gmail.comChicagoActive$384.13
Lynne Bodebarbara.maggio35@gmail.comParamountActive$1,126.14
Vena Ziemealvin_morar@gmail.comFort KaylahInactive$1,142.16
Janie Feestwilfred.robel1@gmail.comVernontonInactive$988.44
Corine Kautzercary_russel42@hotmail.comNew BrucelandActive$585.09
Cheyenne Dickirichard_shields31@gmail.comLehnerviewActive$1,057.43
Sylvia Vandervortalene.blick@gmail.comLilliechesterActive$1,121.29
Brett Schulist PhDroderick_wisozk@hotmail.comDonaldtonActive$1,027.63
Krystina Tromplena24@hotmail.comAlbertfortActive$656.94
Olga Connterrell_brakus94@yahoo.comWest MabelleboroughActive$89.34
Arlene Balistrerivilma_maggio@gmail.comMoreno ValleyInactive$1,050.36
Total$12,570.50

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.