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$486.07
INV002PendingBank Transfer$460.75
INV003UnpaidBank Transfer$285.82
INV004PaidBank Transfer$688.19
INV005PendingBank Transfer$969.47
INV006PaidBank Transfer$736.99
INV007PendingPayPal$454.54
Total$4,081.83

Simple

Users

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

NameTitleEmailRoleActions
Arden LarkinInvestor Intranet Coordinatorarden.larkin63@yahoo.comViewer
Laverne SchadenInternal Security Architectlaverne_schaden39@yahoo.comViewer
Virginia HaneNational Creative Associatevirginia.hane@gmail.comViewer
Avis FeilFuture Mobility Representativeavis.feil94@hotmail.comAdmin
Lloyd VonCustomer Quality Executivelloyd_von21@hotmail.comMember
Violette LeschForward Paradigm Executiveviolette_lesch57@yahoo.comViewer

Stacked on mobile

Users

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

NameRoleActions

Santiago Keebler

Customer Intranet Manager

santiago_keebler@yahoo.com

Viewer

Dwayne Hudson

National Data Developer

dwayne.hudson89@gmail.com

Admin

Kendall Murphy

Dynamic Branding Associate

kendall.murphy@hotmail.com

Admin

Maiya Stiedemann

Lead Usability Technician

maiya.stiedemann@yahoo.com

Admin

Bryce Aufderhar

Chief Quality Producer

bryce.aufderhar20@hotmail.com

Member

Onie Buckridge

Regional Applications Consultant

onie_buckridge68@hotmail.com

Member

Sticky header

Users

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

NameRoleActions

Kaci Murray

Chief Creative Coordinator

kaci_murray13@hotmail.com

Viewer

Dominic D'Amore

Senior Mobility Strategist

dominic_damore@hotmail.com

Viewer

Berta Baumbach

Global Tactics Technician

berta_baumbach@yahoo.com

Admin

Adrain Kulas

Chief Applications Agent

adrain_kulas@gmail.com

Viewer

Lloyd Kreiger

National Metrics Specialist

lloyd.kreiger@yahoo.com

Admin

Isabelle Haag

Regional Applications Designer

isabelle_haag96@yahoo.com

Admin

Maybell Homenick

Global Brand Orchestrator

maybell.homenick84@hotmail.com

Member

Kiara Nolan

Senior Identity Officer

kiara_nolan@gmail.com

Admin

Loyal Cole

Principal Interactions Supervisor

loyal.cole@yahoo.com

Member

Matilde Zemlak

Human Usability Officer

matilde_zemlak@gmail.com

Member

Thea Koch

Human Functionality Administrator

thea_koch@yahoo.com

Member

Patti Heaney

Principal Accounts Consultant

patti_heaney@hotmail.com

Admin

Janice Ziemann

Regional Accountability Producer

janice_ziemann@gmail.com

Member

Shania Quitzon

International Paradigm Engineer

shania.quitzon@yahoo.com

Admin

Flora Baumbach

Product Accountability Manager

flora.baumbach@gmail.com

Admin

Jerome Bernier

Chief Group Agent

jerome_bernier@hotmail.com

Admin

Lonie Adams

Internal Brand Designer

lonie.adams8@yahoo.com

Viewer

Clarissa Harvey

National Division Analyst

clarissa.harvey@yahoo.com

Viewer

Brice Vandervort

Direct Accounts Developer

brice.vandervort@yahoo.com

Admin

Briana Cormier

Lead Branding Associate

briana.cormier14@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
Breanna Moorevickie_schowalter@yahoo.comWest SantosInactive$536.13
Maurine Johnsadrien.connelly@hotmail.comHermistonsideInactive$276.20
Alma Hegmanncarole_brown34@yahoo.comLake LeonorInactive$678.69
Riley Steubersydni_monahan@gmail.comFisherburghActive$846.94
Patrick Kemmerlaurine79@hotmail.comMethuen TownActive$768.01
Total$3,105.97

Basic table

Table with Images

NameEmailLocationStatusBalance
Roberta Oberbrunner DVM
@lynne.lesch69
valerie1@gmail.comFort NoelInactive$305.61
Mr. Jonathon Schaden DVM
@lauretta.hoeger19
leonie_walsh80@gmail.comHillsboroInactive$991.71
Coty Jacobi
@paulette2
stella14@hotmail.comCheektowagaActive$365.10
Mr. Jon Rosenbaum
@ivory_brekke74
alonzo.schultz97@gmail.comPort RoslynInactive$334.25
Miss Rose Witting
@nicole_klein69
natasha.oberbrunner6@gmail.comDecaturActive$119.29

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Charlie Colliermarguerite_maggio-nienow@hotmail.comEast HopeActive$167.31
Rhett Bergnaumbrandon_davis@gmail.comLucioustownInactive$1,022.46
Herbert Hueledmund94@yahoo.comNorth SamInactive$188.99
Kenny Creminmattie.wiza@yahoo.comEast LoraActive$421.79
Ramon MacGyverfelipe_koelpin@gmail.comNew NoelshireInactive$432.41
Total$2,232.96

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Hazel Conroyjuana.jacobs6@hotmail.comLarrylandInactive$488.08
Cleveland Torphycandace_vandervort67@yahoo.comBaytownActive$950.02
Miss Rosamond Hickleadan62@gmail.comNorth FrancisActive$1,097.99
Muriel Yostafton23@hotmail.comOrtizportInactive$105.67
Mr. Colt Mohrjulius91@hotmail.comFort QuentinActive$1,192.64
Total$3,834.40

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Ceasar Schmidtkate_hudson99@gmail.comSanta AnaInactive$481.10
Glenn Auertristian.feeney96@hotmail.comBrooklyn ParkInactive$345.49
Laney Daugherty-Schaeferdemarcus_hoeger@gmail.comMollystadInactive$138.46
Brennon Towneherman.gutmann71@hotmail.comMateobergActive$728.50
Forrest Medhurstchadrick77@hotmail.comNew MarlinInactive$1,104.15
Total$2,797.70

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
Violet Considinemiguel_crona@yahoo.comLake CathyInactive$114.87
Mr. Eldred Cronin PhDhugh85@gmail.comPort JeffereyActive$298.56
Ismael Dooley DVMveronica.damore@yahoo.comVerdiecesterInactive$320.52
Dr. Louisa Schowaltermarianna.wintheiser@gmail.comAbshireshireActive$353.80
Dr. Rodrick Reingerreagan.bruen-pacocha@hotmail.comNew LucaslandActive$1,197.66
Total$2,285.41

Table with row selection

Card Table

NameEmailLocationStatusBalance
Lamar Townedale.mraz@hotmail.comNew BlakebergInactive$321.92
Stewart Schummshelia.pollich92@gmail.comLake AubreyActive$384.19
Archie Rohanhector.brekke@yahoo.comNew PeterInactive$41.21
Zella Christiansenmilan.mcdermott@gmail.comCarolinaInactive$212.69
Waldo Bechtelarsabrina_jones60@hotmail.comVeronicasideInactive$642.46
Total$1,602.47

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
Ewald Lindgrenomar76@hotmail.comEast FatimavilleInactive$580.32
Chelsey VonRuedenrosemary64@gmail.comMidwest CityActive$37.84
Guillermo Koelpinvivian.little-turner@yahoo.comBeiershireActive$529.80
Naomi Whitemaverick.rippin@gmail.comRaymondboroInactive$357.78
Mr. Marjory Reinger-Kulasrex_kirlin9@yahoo.comCastle RockInactive$484.42
Gina Conroyardith.kling40@hotmail.comLake LerabergActive$884.59
Nyah Turner PhDroosevelt_bashirian@hotmail.comSouth BernadettesteadInactive$887.09
Owen Lemke Sr.major_lind@yahoo.comRubyboroInactive$198.47
Emmet Bruenlindsey.reichert33@yahoo.comEast WestleyportActive$299.42
Trevor Mrazleo.bruen@yahoo.comVidalburghActive$640.72
Toby McClurehoracio_medhurst-douglas18@gmail.comSanfordworthInactive$257.70
Adrianna Rowekamryn_mertz10@yahoo.comKautzerboroInactive$1,003.19
Shawn Daredonnell_howell@hotmail.comMayaguezActive$437.64
Leonard Wolffkelton.feil53@gmail.comFort ViolaInactive$18.38
Rudy Kilbackleona67@hotmail.comNorth AdolphbergInactive$176.05
Total$6,793.41

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.