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
INV001PaidBank Transfer$209.52
INV002PaidPayPal$881.09
INV003PaidBank Transfer$923.98
INV004PendingBank Transfer$954.46
INV005PaidCredit Card$948.61
INV006UnpaidPayPal$244.80
INV007PaidCredit Card$875.29
Total$5,037.75

Simple

Users

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

NameTitleEmailRoleActions
Ruben OkunevaNational Creative Engineerruben_okuneva97@hotmail.comAdmin
Roxanne SanfordSenior Intranet Liaisonroxanne_sanford85@yahoo.comMember
John MrazNational Intranet Representativejohn_mraz91@gmail.comMember
Loyce BernierLead Security Analystloyce.bernier@gmail.comViewer
Daron KuphalRegional Research Officerdaron.kuphal4@yahoo.comMember
Ricky CorkeryNational Program Producerricky_corkery@hotmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Jarrod Reinger

Corporate Accounts Orchestrator

jarrod.reinger@gmail.com

Viewer

Juliet O'Reilly

Corporate Tactics Assistant

juliet_oreilly3@hotmail.com

Viewer

Craig Zieme

Dynamic Factors Designer

craig_zieme21@yahoo.com

Admin

Leatha Erdman

Principal Creative Executive

leatha.erdman@gmail.com

Admin

Bernie Stamm

International Research Agent

bernie.stamm@yahoo.com

Member

Mohammed Mills

Human Tactics Analyst

mohammed.mills31@gmail.com

Admin

Sticky header

Users

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

NameRoleActions

Javon Lueilwitz

Lead Functionality Specialist

javon.lueilwitz@gmail.com

Member

Lavonne Becker

Product Research Engineer

lavonne.becker@hotmail.com

Member

Alverta Kemmer

Internal Identity Planner

alverta_kemmer@hotmail.com

Viewer

Mallie Tillman

Investor Applications Representative

mallie_tillman@hotmail.com

Viewer

Brenda Hessel

Direct Usability Producer

brenda_hessel@yahoo.com

Admin

Bernie Gottlieb

Customer Communications Designer

bernie_gottlieb@gmail.com

Viewer

Deontae Kovacek

District Factors Technician

deontae_kovacek13@hotmail.com

Viewer

Evalyn Schinner

Senior Accounts Architect

evalyn.schinner@gmail.com

Viewer

Hallie Carter

Global Solutions Coordinator

hallie_carter6@hotmail.com

Viewer

Agustin Murazik-Shields

District Marketing Technician

agustin_murazik-shields83@hotmail.com

Member

Viola Mosciski

Internal Response Technician

viola_mosciski94@hotmail.com

Viewer

Aidan Lynch

District Accountability Engineer

aidan_lynch@yahoo.com

Member

Alek Welch

Direct Markets Assistant

alek.welch17@yahoo.com

Admin

Broderick Jones

Regional Factors Engineer

broderick_jones50@hotmail.com

Admin

Amie Grimes

Forward Identity Assistant

amie.grimes72@gmail.com

Member

Aisha Funk

Chief Metrics Executive

aisha.funk66@hotmail.com

Member

Delphine Haag

Customer Response Administrator

delphine_haag57@gmail.com

Member

Eriberto Crooks

Investor Configuration Administrator

eriberto.crooks@hotmail.com

Member

Maybell Rath

Lead Usability Architect

maybell.rath49@hotmail.com

Member

Keyshawn Fadel

Central Response Producer

keyshawn_fadel@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
Rachel Cremindarrick.simonis23@hotmail.comPredovicfieldActive$720.26
Joel Wisozkmollie_huels90@yahoo.comJeradchesterActive$576.57
Ms. April Baumbachtriston.bartell19@hotmail.comTinley ParkInactive$798.28
Angel Hermannoel90@hotmail.comWest HarleyInactive$875.25
Noah Bauchcyrus91@hotmail.comLake ZelmatownActive$847.71
Total$3,818.07

Basic table

Table with Images

NameEmailLocationStatusBalance
Bridget Rau
@felicity_kilback
ansley29@hotmail.comSherwoodworthInactive$1,120.30
Nathan Nicolas
@marianne_willms75
leilani.kilback91@yahoo.comLeonardboroughInactive$756.14
Elsie Grant
@april48
donnie.beatty86@gmail.comMaldenActive$910.92
Stewart Ledner
@loren.davis45
adrien_nitzsche@gmail.comIgnatiusmouthActive$1,053.80
Gerardo Herman
@gilberto.bradtke
narciso45@hotmail.comParamountActive$63.94

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Austin Sengeraron48@gmail.comRoanokeActive$1,114.37
Lisa Howemakenzie_stehr-damore@yahoo.comMount ProspectInactive$109.77
Darnell Murphy-Collierdejuan19@gmail.comTravisburghInactive$120.69
Sergio Erdmanian_shanahan51@gmail.comDamienmouthActive$231.36
Shannon Willsalvatore_mckenzie16@hotmail.comEast CooperActive$440.78
Total$2,016.97

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Gloria Klingbailee9@yahoo.comZemlaktownActive$859.91
Desiree Wintheiserkieran.stroman37@yahoo.comLednerfieldInactive$1,167.14
Manuel Zemlakmona.hamill-koss@yahoo.comWest OliverInactive$1,166.90
Morris Hoppecamille94@yahoo.comNorth CordellActive$1,142.10
Lula Rippinsigmund.romaguera25@gmail.comLake RoxannebergInactive$83.19
Total$4,419.24

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Drew Beiermiller88@hotmail.comLake BrendachesterActive$1,109.97
Betsy Reichellacey.robel@gmail.comBurnsvilleActive$535.75
Gordon Leannon-Hodkiewiczerwin_hegmann@yahoo.comAllanbergInactive$859.81
Carole Runolfsdottirollie_von@gmail.comEast BraxtonActive$295.36
Andrea Langworthethyl.mohr@gmail.comVonburghActive$972.05
Total$3,772.94

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
Cornelius Harrisdanielle.ullrich86@gmail.comSt. JosephActive$642.72
Joy Willmsbrown.effertz78@hotmail.comNew OrleansInactive$792.19
Blanca Borerjulius.kessler@yahoo.comDraperActive$9.40
Darrel Stantondortha_koepp@gmail.comDanykashireInactive$842.41
Carrie Farrelleldora_homenick@yahoo.comLake AydenInactive$454.43
Total$2,741.15

Table with row selection

Card Table

NameEmailLocationStatusBalance
Danny Bashiriandominic52@hotmail.comLake NorrisviewActive$473.46
Sheryl Torphyrobb55@hotmail.comFort MontanaboroActive$1,075.55
John Nitzsche PhDwilton.franecki@hotmail.comNorth AlanatownActive$828.51
Loren Zemlakabbey.hudson@hotmail.comLake AmiraburghInactive$32.51
Rudolph Olsonberenice8@yahoo.comPinkshireActive$464.89
Total$2,874.92

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
Jeanette Barrowscecilia81@gmail.comDaytonActive$234.42
Omar Schroederlaurence54@hotmail.comPort ChelseachesterActive$1,057.76
Virgil Ornkurtis_cormier@hotmail.comAuroraActive$186.51
Roy Rempellincoln.hermann42@gmail.comNew KenneditownInactive$1,186.65
Anita Schadenwillis_haley84@yahoo.comFort MaximusActive$266.20
Cory Wildermandallas_donnelly57@gmail.comClydehavenInactive$188.59
Barbara Blickcarlie_bogisich@yahoo.comPort MarkussteadInactive$304.14
Miss Raquel Hackettjett18@gmail.comNorth DamarisportActive$174.50
Ms. Krista Dooleyosvaldo.gibson@gmail.comWest DessieActive$265.13
Ann Mills MDnicholaus80@hotmail.comNew AthenaActive$842.16
Kathryn Gleichnercourtney53@gmail.comJordyvilleActive$315.03
Mr. Lorenzo Schumm Ijannie51@hotmail.comKuvalisfieldInactive$676.31
Bobby Faheyapril_sauer43@yahoo.comVinelandActive$202.33
Patty Corwinanita.conn35@yahoo.comNorth ShanonActive$1,115.04
Corey Erdmanrosa23@hotmail.comSchadensideActive$397.81
Total$7,412.58

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.