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$518.05
INV002PendingCredit Card$358.66
INV003PaidCredit Card$105.65
INV004PaidPayPal$634.03
INV005UnpaidPayPal$182.88
INV006PaidBank Transfer$932.48
INV007PaidPayPal$386.21
Total$3,117.96

Simple

Users

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

NameTitleEmailRoleActions
Rosario BartolettiHuman Markets Orchestratorrosario.bartoletti@gmail.comAdmin
Skye WillDistrict Quality Supervisorskye.will@yahoo.comAdmin
Isabel KassulkeInternal Intranet Coordinatorisabel.kassulke16@gmail.comViewer
Benedict LeannonSenior Branding Technicianbenedict_leannon@yahoo.comViewer
Cecile LeannonForward Optimization Associatececile.leannon@yahoo.comMember
Oswaldo MannCorporate Paradigm Analystoswaldo.mann81@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Gonzalo Ratke

Internal Branding Engineer

gonzalo.ratke79@gmail.com

Member

Stephany Champlin

International Quality Specialist

stephany.champlin@yahoo.com

Viewer

Lillian Ryan

Forward Group Administrator

lillian.ryan@hotmail.com

Admin

Hobart Von

Product Data Designer

hobart.von81@gmail.com

Viewer

Kendra O'Conner

Lead Intranet Associate

kendra.oconner@gmail.com

Viewer

Junius Paucek

Regional Research Producer

junius_paucek@gmail.com

Admin

Sticky header

Users

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

NameRoleActions

Santino Swift

Regional Operations Orchestrator

santino_swift48@hotmail.com

Member

Dovie DuBuque

Human Group Orchestrator

dovie_dubuque@gmail.com

Admin

Anabel Cruickshank

Investor Tactics Analyst

anabel_cruickshank@gmail.com

Member

Audie Ratke

District Operations Engineer

audie_ratke@hotmail.com

Admin

Zander Christiansen

Customer Usability Developer

zander_christiansen@yahoo.com

Admin

Margarita Witting

Internal Creative Coordinator

margarita_witting@hotmail.com

Viewer

Luis Abshire

Dynamic Configuration Agent

luis.abshire@gmail.com

Member

Leslie Becker

Regional Marketing Engineer

leslie.becker37@yahoo.com

Member

Scotty Stanton

Principal Solutions Analyst

scotty_stanton@gmail.com

Admin

Sterling Reichert

Corporate Brand Analyst

sterling_reichert67@hotmail.com

Viewer

Tristian Brown

Regional Division Manager

tristian_brown@gmail.com

Admin

Tyrique Bednar

Forward Security Facilitator

tyrique_bednar16@yahoo.com

Admin

Alba Schamberger

Direct Intranet Architect

alba.schamberger@gmail.com

Member

Gerson Schiller

Internal Configuration Technician

gerson_schiller@gmail.com

Admin

Serena Marvin

Customer Factors Supervisor

serena.marvin@hotmail.com

Member

Janae Braun

Future Program Liaison

janae.braun@hotmail.com

Viewer

Randy Crona

Internal Usability Supervisor

randy.crona@hotmail.com

Admin

Frederique Runolfsson

Direct Operations Officer

frederique.runolfsson@gmail.com

Viewer

Tressie Ward

Chief Quality Director

tressie.ward74@hotmail.com

Viewer

Griffin Kuhic

Customer Functionality Manager

griffin.kuhic@gmail.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
Nick Ondrickacleo.williamson@hotmail.comHollistownInactive$816.07
Josephine Gradyeryn92@hotmail.comPort SelenaviewActive$512.10
Rosemarie Lindgarret.pagac57@hotmail.comJudgelandInactive$707.09
Susie Rogahnkaylah_koss80@hotmail.comKadesideActive$99.21
Mrs. Sandy Feilnina22@hotmail.comPortervilleActive$1,159.09
Total$3,293.56

Basic table

Table with Images

NameEmailLocationStatusBalance
Glenda Cronin
@katherine.rippin
marshall_schoen15@yahoo.comShanahansteadActive$640.54
Tonya Barrows
@sonny_murazik90
isai23@hotmail.comNew KennyboroInactive$92.81
Kristie Cole
@gretchen_shanahan
cecil.heller@yahoo.comBayonneInactive$30.84
Irene Reilly
@wilburn_price22
edmond.mcclure@gmail.comEast MarquesstadActive$955.12
Inez Stehr
@shanelle.bayer
rigoberto_effertz@gmail.comLeannonbergActive$841.61

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Todd Roobjeanne_brakus99@yahoo.comFort EdytheboroughInactive$518.26
Billie Mitchellhyman.oconnell@yahoo.comSouth JaylenActive$1,085.92
Allison Nicolassydni.west@hotmail.comEvanstonActive$948.02
Victoria Zulaufjanet67@gmail.comMorarcesterActive$494.26
Cody Oberbrunnerphilip_volkman@gmail.comWest AlvenaInactive$802.76
Total$3,849.22

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Hector Weberkeyon_weissnat-marquardt85@yahoo.comRyanfieldInactive$420.38
Kristy Roobjoan20@hotmail.comPort JennieInactive$370.30
Arlene Simonisalaina25@gmail.comLake PaulaInactive$331.45
Ms. Cassandra Dareidell75@gmail.comGoodwinmouthActive$757.98
Jack Reingeranna.murray@gmail.comErafieldInactive$388.26
Total$2,268.37

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Jody Goyetterosemarie_torp-schuppe@yahoo.comGerlachbergActive$958.58
Lorene Nitzschealysson_gerlach@hotmail.comZiemannboroActive$178.65
Ross Fritsch Veunice60@yahoo.comWest FrederiqueActive$213.57
Mr. Norman Homenickblair.davis@gmail.comPort JaylonbergActive$24.52
Kelli Hicklebernadine_friesen76@hotmail.comReichelmouthActive$242.44
Total$1,617.76

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
Alexis Leschchristophe_simonis@gmail.comFort HershelActive$306.23
Cathy O'Konkiley.wiza@yahoo.comPort CamylleburyInactive$429.31
Muriel Hermann DDSjeramie.gottlieb5@yahoo.comFort KileysteadInactive$476.79
Marcos Willcarmel27@hotmail.comNew ArtActive$1,146.43
Nick Lueilwitzwestley_kshlerin4@hotmail.comNorth KacieActive$549.39
Total$2,908.15

Table with row selection

Card Table

NameEmailLocationStatusBalance
Marc Emmerichscot.greenholt@gmail.comMcLaughlinboroActive$1,026.14
Mrs. Meghan Haag MDthaddeus.ortiz@yahoo.comGulfportInactive$417.11
Sheldon Aufderharwalton_lehner-ruecker16@hotmail.comLake EnaInactive$510.92
Faith Moen PhDemelia_wintheiser38@yahoo.comNorth IgnaciosteadInactive$224.22
Vernon Schusternya98@yahoo.comWest DawsonActive$795.67
Total$2,974.06

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
Cheryl Mohrvictoria.tremblay82@yahoo.comJacobsontonInactive$527.35
Fredrick Weimannebony.casper45@yahoo.comHarmontonInactive$607.43
Mary Heaneyloyal.runolfsson@gmail.comKentwoodInactive$329.51
Kurt Cummeratastan18@hotmail.comMathiasfieldActive$709.30
Meghan Leffleraudra_marvin@yahoo.comTulsaActive$491.88
Kendra Kleincolt.weber@yahoo.comFort TaraInactive$838.49
Byron Stiedemannroslyn96@gmail.comHirtheburyInactive$452.17
Kathy Gutkowskiamina_block@hotmail.comJairolandInactive$1,131.85
Mamie Marvinamely87@hotmail.comJewellburghInactive$692.81
Raymond Colepolly_barton21@hotmail.comCleveland HeightsActive$1,118.26
Teri Sipescody47@gmail.comFort DennisActive$150.77
Jesse Johns MDapril.brown@yahoo.comGislasontonActive$861.30
Garry Botsfordmichaela_langosh59@hotmail.comEast MarianneActive$0.22
Annie Rohankrystel.mccullough@gmail.comDanielbergInactive$733.15
Barbara Sanfordalyson.feeney16@gmail.comSouth MaeganburghInactive$107.09
Total$8,751.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.