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$690.94
INV002UnpaidCredit Card$760.59
INV003PaidCredit Card$264.39
INV004PendingPayPal$737.35
INV005PendingPayPal$607.22
INV006UnpaidCredit Card$502.24
INV007PaidCredit Card$601.29
Total$4,164.02

Simple

Users

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

NameTitleEmailRoleActions
Pedro DickensInternal Research Officerpedro_dickens@yahoo.comMember
Jeannette TerryDirect Identity Analystjeannette.terry65@gmail.comViewer
Ayla RunolfsdottirCustomer Usability Facilitatorayla_runolfsdottir3@yahoo.comMember
Ervin RaynorInternational Infrastructure Facilitatorervin_raynor89@yahoo.comViewer
Blake KiehnRegional Security Associateblake.kiehn94@gmail.comMember
Mac DavisDistrict Quality Agentmac_davis@yahoo.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Icie Hermiston

Internal Creative Designer

icie.hermiston@hotmail.com

Admin

Ricky Upton

Corporate Communications Officer

ricky.upton@yahoo.com

Member

Gilbert Mills

Customer Metrics Officer

gilbert_mills@gmail.com

Viewer

Hope Mills

Internal Factors Designer

hope_mills@hotmail.com

Admin

Andrew Konopelski

Human Implementation Orchestrator

andrew.konopelski@yahoo.com

Admin

Virgil Kling-Ritchie

Senior Integration Developer

virgil.kling-ritchie@gmail.com

Admin

Sticky header

Users

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

NameRoleActions

Bradley Grimes

Customer Implementation Liaison

bradley_grimes89@yahoo.com

Member

Kade Harber

Human Integration Coordinator

kade.harber42@yahoo.com

Admin

Jorge Rolfson

Lead Data Technician

jorge_rolfson97@hotmail.com

Admin

Frank Hirthe

Customer Paradigm Analyst

frank.hirthe@yahoo.com

Viewer

Lynn McDermott

Global Data Analyst

lynn_mcdermott58@gmail.com

Member

Kirk Buckridge

Internal Solutions Technician

kirk_buckridge@gmail.com

Admin

Maritza Keebler

Lead Research Liaison

maritza.keebler4@yahoo.com

Admin

Cory Schimmel

Forward Marketing Coordinator

cory_schimmel12@gmail.com

Viewer

Jeanie Hodkiewicz

Global Usability Agent

jeanie_hodkiewicz@hotmail.com

Viewer

Gregory Harris

Chief Interactions Officer

gregory_harris46@hotmail.com

Admin

Zackary Franey

Regional Paradigm Planner

zackary_franey90@yahoo.com

Admin

Marilyn Hettinger-Nicolas

Corporate Markets Liaison

marilyn_hettinger-nicolas15@hotmail.com

Viewer

Jennie Little

National Web Administrator

jennie_little76@gmail.com

Admin

Aric Bogan

Human Marketing Developer

aric_bogan65@gmail.com

Viewer

Hazel Carter

Regional Accounts Consultant

hazel_carter@gmail.com

Member

Homer Wisoky

District Intranet Supervisor

homer.wisoky28@yahoo.com

Admin

Devon Adams

Senior Operations Associate

devon_adams7@yahoo.com

Admin

Myrna Rice

Product Web Analyst

myrna_rice@yahoo.com

Viewer

Rhea Rau

Corporate Accounts Director

rhea.rau@hotmail.com

Viewer

Toni Yost

Principal Branding Coordinator

toni_yost93@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
Juanita Doylenikko_wiza93@yahoo.comWest New YorkActive$2.75
Bryana Littelhaley.klocko30@gmail.comNew AlannatonActive$175.42
Ms. Chase Cormierfaith_kozey36@gmail.comEast BudInactive$621.71
Nicholas Kreigeremory_witting@hotmail.comCarolecesterActive$751.10
Jennie Prohaskamelissa40@hotmail.comNew HavenActive$798.82
Total$2,349.80

Basic table

Table with Images

NameEmailLocationStatusBalance
Wesley Rolfson-Hahn
@jermaine.krajcik
sherri_champlin46@yahoo.comFreddiebergActive$903.57
Laisha Christiansen
@norma_boyle
mariam.hagenes@hotmail.comLake EnochInactive$556.85
Miss Seamus Schulist
@lora_dicki69
johanna72@gmail.comAudreannehavenInactive$260.27
Kendra Bartell
@sean.treutel39
rosa26@yahoo.comNorth ZoilavilleActive$885.99
Florencio Murphy
@laurence_koss
bob.reynolds33@yahoo.comKochfortActive$1,070.42

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Laverne Larsongerman_zboncak@yahoo.comNew DorothyActive$282.50
Eduardo Kessler IIelmer82@gmail.comNew BrandyshireInactive$405.64
Effie Townechristine9@yahoo.comSouth NestorInactive$810.66
Marc Keelingryann53@gmail.comSouth AngelicamouthActive$647.24
Roxanne Hageneskelly.breitenberg@hotmail.comCape CoralActive$304.52
Total$2,450.56

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Ole Nitzschejillian.padberg19@yahoo.comNorth ChristInactive$1,193.18
Camille Stromanthelma78@yahoo.comNorrislandActive$73.04
Bruce Marks DVMandres.schoen@yahoo.comRockwallInactive$111.46
Grant Adamsjoanne.hermiston80@gmail.comIsactownInactive$765.07
Grant Haleyalia67@hotmail.comNew AdellevilleInactive$1,154.30
Total$3,297.05

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Laurie Rempelsarai6@gmail.comWest ZacheryActive$1,040.51
Rahul Morissettedexter9@yahoo.comLake MollyfieldActive$634.10
Karley Hamillmaurine_kshlerin94@gmail.comLake AnthonyInactive$275.62
Marjorie Kirlineliza_thompson@gmail.comPort HarmonyInactive$312.86
Daphnee Ondrickajulie_mcglynn17@gmail.comDurganfurtActive$128.58
Total$2,391.67

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
Vernie Hyattleland.carroll28@gmail.comNew EleonorechesterActive$749.51
Joy Reichertkrista.beatty26@hotmail.comParkerchesterInactive$1,086.96
Claudine Blickruthie74@hotmail.comLake GeorgiannaActive$1,039.17
Joyce Collierlindsay_heidenreich-howell29@yahoo.comAppletonActive$974.96
Miss Keshaun Klockotamara82@gmail.comPort KadenActive$685.01
Total$4,535.61

Table with row selection

Card Table

NameEmailLocationStatusBalance
Elbert Veumbridget_purdy14@gmail.comLake XzaviercesterInactive$106.63
Zander Krisfrank.cruickshank62@hotmail.comFort JavonworthInactive$112.87
Nichole Fay Varturo.greenfelder13@gmail.comPort IvahActive$819.99
Lucious Beierabraham.stoltenberg54@yahoo.comFort LynncesterActive$177.95
Lawrence Koepp-Langoshcaleb.tillman40@gmail.comPatviewInactive$948.30
Total$2,165.74

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
Rafaela Bartellerica74@yahoo.comNashuaActive$1,069.19
Maxine Yundtdewey96@hotmail.comTrentonActive$751.98
Raquel Bednarjohnnie.huel@yahoo.comRapid CityInactive$394.14
Cody Bernieredna89@hotmail.comSouth NelleInactive$1,016.47
Jared Schowalterthomas_dubuque-ward@hotmail.comLake CharlesInactive$580.66
Gregg Langoshidell.little27@gmail.comEast ClementineworthActive$686.79
Stuart Bechtelardominic.senger@yahoo.comEast CorrineworthInactive$1,125.58
Edith Schmitt-Leffler PhDsonia.hammes@yahoo.comMesquiteActive$747.27
Norman Mitchellotis_russel88@gmail.comGutkowskifortInactive$15.33
Doug Cristoliver_kub14@hotmail.comMatteobergActive$900.72
Dr. Larue King MDmaiya3@hotmail.comFort AnneInactive$478.80
Tyrique Abbottaudrey60@hotmail.comSouth BrooklynmouthInactive$327.22
Macie O'Reilly-Kilbacklouise52@gmail.comZoeboroActive$987.76
Shanon Paucek DVMdante_bednar52@yahoo.comNew FelicitasteadInactive$250.28
Irving Cassinben94@yahoo.comFort CeliaActive$794.40
Total$10,126.59

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.