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
INV001PendingBank Transfer$250.11
INV002UnpaidPayPal$850.93
INV003PendingPayPal$241.56
INV004PaidCredit Card$553.46
INV005UnpaidPayPal$196.29
INV006PendingBank Transfer$383.21
INV007PendingBank Transfer$738.29
Total$3,213.85

Simple

Users

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

NameTitleEmailRoleActions
Fay HerzogDistrict Infrastructure Designerfay.herzog@yahoo.comViewer
Steve ManteCorporate Creative Architectsteve.mante@yahoo.comMember
Alexandra LemkeDirect Implementation Agentalexandra.lemke12@hotmail.comMember
Thelma HoweRegional Paradigm Coordinatorthelma_howe31@gmail.comAdmin
Zoey RobelForward Interactions Developerzoey_robel98@yahoo.comMember
Leopoldo Mitchell-RomagueraGlobal Program Officerleopoldo_mitchell-romaguera65@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Kirsten Hoppe

Human Integration Supervisor

kirsten_hoppe42@yahoo.com

Viewer

Wilford Goodwin

Direct Program Liaison

wilford.goodwin@yahoo.com

Viewer

Shayna Adams

Chief Interactions Liaison

shayna.adams87@hotmail.com

Viewer

Kianna Jakubowski

Central Research Designer

kianna.jakubowski37@yahoo.com

Member

Gisselle Jacobi

Principal Factors Engineer

gisselle_jacobi86@yahoo.com

Admin

Reta Funk

District Directives Architect

reta.funk9@gmail.com

Member

Sticky header

Users

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

NameRoleActions

Joshua Yost

Customer Optimization Administrator

joshua.yost2@yahoo.com

Member

Geovany Gottlieb

Principal Tactics Representative

geovany.gottlieb17@hotmail.com

Viewer

Esta Monahan

Global Response Agent

esta_monahan@gmail.com

Member

Shyann Koss

Customer Applications Administrator

shyann_koss@hotmail.com

Admin

Carmelo Kertzmann

Future Intranet Facilitator

carmelo_kertzmann31@yahoo.com

Admin

Hailie Wiegand

Central Tactics Consultant

hailie_wiegand46@yahoo.com

Member

Louie Tillman

Central Research Technician

louie_tillman@hotmail.com

Member

Jordon Fisher

Dynamic Marketing Architect

jordon_fisher@gmail.com

Member

Orie Schultz

National Functionality Orchestrator

orie.schultz16@hotmail.com

Member

Aurore Bailey

International Operations Supervisor

aurore.bailey76@yahoo.com

Admin

Jerrold Bins

Lead Creative Producer

jerrold.bins80@yahoo.com

Member

Rowland Terry

Regional Operations Supervisor

rowland_terry98@yahoo.com

Admin

Gino Trantow

Chief Research Executive

gino.trantow@hotmail.com

Admin

Francis Nitzsche

Chief Marketing Planner

francis_nitzsche22@gmail.com

Viewer

Gilberto Schinner

Legacy Interactions Associate

gilberto_schinner@yahoo.com

Member

Tyreek Littel

International Configuration Coordinator

tyreek.littel@yahoo.com

Member

Frederik Frami

Corporate Communications Producer

frederik_frami31@gmail.com

Admin

Penelope Crooks

Investor Tactics Consultant

penelope_crooks@hotmail.com

Admin

Brycen Waelchi

National Marketing Specialist

brycen_waelchi26@hotmail.com

Viewer

Kattie Hand

Senior Usability Representative

kattie_hand6@gmail.com

Viewer

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
Mrs. Cheryl Schadendanielle_daugherty79@gmail.comKrystinasteadInactive$649.93
Victoria Danieljanie28@hotmail.comNorth DanInactive$843.97
Tommie Kuhlman DDSbessie_sawayn83@hotmail.comDorthahavenInactive$255.09
Muriel Pouros IIIgerry_hansen@hotmail.comTucsonActive$1,199.30
Christie Boylenat.fritsch12@hotmail.comAlfredofurtInactive$981.71
Total$3,930.00

Basic table

Table with Images

NameEmailLocationStatusBalance
Shawna Hansen
@herminio_walter-howe13
sebastian.wilderman88@yahoo.comAstridfortInactive$331.95
Krista Rice
@aliza_stamm67
merlin_schinner38@yahoo.comPort ErikafurtActive$1,104.67
Kent Fritsch
@kaylah_marvin64
terrence2@yahoo.comLake KeeganInactive$441.62
Dr. Dean Auer
@modesta38
pansy.kuvalis@gmail.comBergemouthActive$814.22
Gwen Pfannerstill
@willis_rutherford48
talia18@hotmail.comPort CandidaworthActive$464.84

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Mr. Earnest Schmelersarina.simonis@gmail.comKarolanntownActive$668.03
Tonya Bednarmiracle_west5@yahoo.comFort PrincessActive$752.65
Moses Zemlaksyble94@hotmail.comLoytonInactive$780.34
Marvin Swift PhDalessandro_zieme@yahoo.comPort JazmyneworthActive$600.17
Preston Davisbuster.tillman10@hotmail.comPico RiveraInactive$347.21
Total$3,148.40

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Sheri Greenfeldercheyenne_braun65@yahoo.comEast TiannaportActive$681.04
Miss Mattie Lynchflavie_howell-gorczany@gmail.comLake WaldomouthInactive$959.65
Casey Haucksidney_stiedemann@hotmail.comLegrosboroughInactive$808.52
Adrienne Gottliebeldon.hermiston9@hotmail.comDeonteportActive$1,000.97
Gary Turnerfabian74@gmail.comNorth AshlyActive$1,150.90
Total$4,601.08

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Shirley Effertzanastacio.daniel@hotmail.comWest BeulahburghInactive$342.99
Bobbie Schulistkiara_turcotte@hotmail.comCartwrightshireActive$412.73
Percy Hickleaniya97@yahoo.comOrvalboroActive$240.27
Dave Rolfsonlaurine_kilback36@gmail.comLake TheamouthActive$117.39
Kelli Bahringerdante_torp@hotmail.comPort CaterinafieldActive$441.04
Total$1,554.42

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
Raquel Parker-Harbercordia.brekke@yahoo.comFort EratownInactive$79.95
Tom Aufderharjessie_pacocha@hotmail.comColtonsideInactive$815.76
Edith Nikolauschyna_leuschke24@gmail.comPort AlfordburghInactive$652.96
Guy Feestmya_gerhold@hotmail.comRapid CityActive$328.72
Bryan Goodwinestel_kovacek70@gmail.comManteworthInactive$726.07
Total$2,603.46

Table with row selection

Card Table

NameEmailLocationStatusBalance
Mr. Edmund Lockmantressa37@yahoo.comSawaynmouthActive$859.32
Clara Wittingbrent_collins@hotmail.comWest CydneyInactive$1,137.07
Cary Ortizleslie9@hotmail.comFlotonActive$177.93
Jerome Willsaul.feil3@yahoo.comMacGyversteadInactive$322.89
Yvette Reichertalexandria.stokes@hotmail.comSouth MetatownInactive$965.14
Total$3,462.35

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
Iris Corwincathy.mckenzie70@hotmail.comWatersfurtActive$149.23
Jeremiah Jaskolskijackeline.ritchie54@hotmail.comSevernInactive$684.96
Taylor Blandachaim_bogisich29@hotmail.comCaryActive$246.35
Anita Cartwrightflorencio33@hotmail.comNew CliftonsteadActive$276.36
Mrs. Nina Wuckertbaby2@yahoo.comFort ColemantonInactive$130.17
Mary Ziemepamela41@yahoo.comMurraytonInactive$185.49
Suzanne Walterluella84@yahoo.comLake SabrinachesterActive$251.49
Larry Luettgenmireya_lindgren68@hotmail.comSalt Lake CityActive$147.64
Josephine Paucekbridie_little@hotmail.comMillcreekActive$1,047.97
Deborah Ziemannstephanie95@hotmail.comLombardActive$829.93
Blanche Considine Sr.jadyn.cruickshank@gmail.comFeeneyviewActive$1,013.45
Naomi Fayclarabelle79@yahoo.comLake ZachariahActive$1,119.49
Dwight Ullrichlinda_rau26@hotmail.comPort ErichActive$1,100.02
Jennifer Windlercolin_schultz54@yahoo.comFort JalentonInactive$986.02
Patti Prohaska IIIhans40@yahoo.comWeissnatshireActive$400.25
Total$8,568.82

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.