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$527.36
INV002PendingCredit Card$265.76
INV003PaidPayPal$953.16
INV004UnpaidPayPal$258.66
INV005PendingCredit Card$576.10
INV006UnpaidCredit Card$281.73
INV007PaidPayPal$135.38
Total$2,998.15

Simple

Users

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

NameTitleEmailRoleActions
Torrance LueilwitzSenior Brand Techniciantorrance_lueilwitz82@yahoo.comAdmin
Paula KulasChief Accounts Plannerpaula.kulas@gmail.comAdmin
Ann CorwinPrincipal Implementation Associateann.corwin85@yahoo.comViewer
Carlo WolfForward Mobility Developercarlo.wolf@hotmail.comAdmin
Dawn McDermottPrincipal Research Agentdawn.mcdermott@yahoo.comAdmin
Gustavo LebsackFuture Integration Administratorgustavo.lebsack4@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Tyson Welch

Legacy Markets Representative

tyson_welch@hotmail.com

Admin

Giovanna Carter

Future Metrics Architect

giovanna_carter38@gmail.com

Viewer

Juliana Bartoletti

Internal Division Designer

juliana_bartoletti@yahoo.com

Viewer

Lulu Nader

Internal Data Engineer

lulu_nader@hotmail.com

Admin

Marlon Hartmann

Product Communications Administrator

marlon.hartmann11@yahoo.com

Member

Sylvester Howell

National Usability Assistant

sylvester.howell82@gmail.com

Member

Sticky header

Users

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

NameRoleActions

Cary McClure

Regional Brand Analyst

cary_mcclure85@yahoo.com

Member

Toy McClure

Central Creative Engineer

toy.mcclure@yahoo.com

Admin

Ian Champlin

Future Directives Agent

ian_champlin@gmail.com

Viewer

Amiya Jacobs

National Interactions Architect

amiya_jacobs@gmail.com

Member

Marge Homenick

Chief Usability Analyst

marge_homenick@hotmail.com

Admin

Rick Anderson

Central Research Consultant

rick_anderson@hotmail.com

Member

Maryann Hegmann

Investor Program Coordinator

maryann_hegmann45@gmail.com

Member

Michael Rutherford

Regional Quality Associate

michael.rutherford4@gmail.com

Member

Monserrat Simonis

Chief Implementation Representative

monserrat_simonis@gmail.com

Member

Hildegard Heathcote

Direct Web Specialist

hildegard.heathcote@hotmail.com

Member

Jimmy Armstrong

National Mobility Planner

jimmy_armstrong@yahoo.com

Admin

Albertha Legros

Principal Response Representative

albertha.legros11@hotmail.com

Member

Thalia Hoppe

Forward Metrics Engineer

thalia.hoppe16@hotmail.com

Viewer

Casey Dach

Principal Metrics Representative

casey.dach@gmail.com

Member

Manuel Hills

Lead Identity Coordinator

manuel.hills@hotmail.com

Viewer

Katherine Hand

Internal Implementation Assistant

katherine.hand51@hotmail.com

Admin

Mae Schulist

Customer Response Analyst

mae.schulist@yahoo.com

Member

Aida Schuster

Product Metrics Analyst

aida.schuster@yahoo.com

Viewer

Madisyn Murray

Global Brand Technician

madisyn_murray@gmail.com

Admin

Hadley Koelpin

Regional Communications Agent

hadley_koelpin88@hotmail.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
Delphia Rowerodrigo93@gmail.comSammyburghInactive$1,136.09
Christopher Wardjanie_nienow79@gmail.comShieldsboroughInactive$127.86
Delia Flatley IIbelle65@yahoo.comNaomietonInactive$856.00
Bryant Ebert IVtodd.sipes@gmail.comNorth BridgetActive$698.77
June Harberjeannette_russel65@yahoo.comSouth JakobmouthInactive$699.95
Total$3,518.67

Basic table

Table with Images

NameEmailLocationStatusBalance
Vaughn Hammes
@osbaldo56
michael94@hotmail.comStromanlandActive$109.88
Frederique Sauer
@claudia93
asa.oconner@hotmail.comHackettcesterInactive$197.70
Marcos Hoeger Jr.
@raymundo21
kristopher.rowe64@yahoo.comHintzfieldInactive$507.51
Mckayla Altenwerth
@nelson_zieme
josefina4@hotmail.comEscondidoActive$956.61
Bill Weimann
@hillard_rohan57
cynthia30@hotmail.comFort JoshchesterInactive$983.52

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Christie Turcotteantonia.schumm75@yahoo.comWest TiffanyviewActive$117.67
June Trompvirgie.welch@yahoo.comPearlandActive$1,168.63
Edmond Lubowitzchristopher69@gmail.comSteubervilleActive$12.25
Miss Noemi Murrayberneice31@hotmail.comCutler BayInactive$1,096.36
Javier Robelmargret.nitzsche31@yahoo.comKhalidsteadActive$1,120.22
Total$3,515.13

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Dr. Joanne Feestnorberto94@yahoo.comFayettevilleInactive$834.16
Zelma Osinskiceline_gerlach93@hotmail.comWest ClintsideActive$380.98
Maryse McLaughlinpink11@hotmail.comWest EdmondActive$462.18
Tessie Gorczany Sr.elnora7@yahoo.comWatersportInactive$9.29
Arnold Skilesorlando.lesch94@hotmail.comTaylorsvilleInactive$472.62
Total$2,159.23

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Ms. Bulah Spinka PhDkarla.stokes26@hotmail.comAshleybergInactive$791.20
Angie Kubryan.parker89@gmail.comScrantonActive$738.60
Dr. Angela Rogahn-Marquardtfrieda_schinner56@gmail.comFort MarcellusboroughInactive$313.25
Mr. Larissa Bartongeorge.treutel@gmail.comBlacksburgActive$832.05
Donna Jenkinsvincent50@yahoo.comEast LenatownInactive$432.34
Total$3,107.44

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
Delilah Krajcikgail_walker18@yahoo.comPort PeggyInactive$175.44
Miss Lydia Champlinshanelle19@hotmail.comKennethtonInactive$181.14
Mr. Laury Anderson IIIbernard_stroman49@hotmail.comHauckviewInactive$183.98
Dominic Prohaskadarin_hoppe@hotmail.comSan MateoActive$778.68
Sarai Lockmantheron_nitzsche10@yahoo.comFort RosalieInactive$1,153.70
Total$2,472.94

Table with row selection

Card Table

NameEmailLocationStatusBalance
Mr. Martin Watsicaconrad_volkman@gmail.comPort FionaActive$1,147.29
Preston Boyerrosanna.stiedemann@hotmail.comVictorvilleInactive$51.03
Grant Daughertyitzel.gottlieb@yahoo.comNew TwilaInactive$1,164.97
Ms. Henderson Fayulises68@hotmail.comCasperburyActive$204.22
Ellis Haleyopal_okuneva@hotmail.comSouth AlizaActive$912.92
Total$3,480.43

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
Evans Hilpert-Greenholtkayla.brakus@yahoo.comPort AlvahboroActive$156.27
Paulette Binssherri24@yahoo.comBonita SpringsInactive$913.77
Bessie Swaniawskirodney.rodriguez76@hotmail.comElizabethtownActive$102.03
Leanne Abbotthollis79@gmail.comEvansvilleActive$326.73
Miss Chadrick Schmittramiro.lebsack@gmail.comEast HarrietInactive$245.76
Anita Raubuddy.schiller@yahoo.comSouth IsobelstadInactive$760.85
Herminio Weber MDmargarete.erdman84@gmail.comNorth MaribelActive$1,085.68
Nathen Berge-Kshlerintristin64@gmail.comGoodyearInactive$1,012.99
Miss Lauretta Hauckthomas_botsford@hotmail.comNorth PeggyboroActive$832.27
Stefanie Johnstonkristina48@yahoo.comPort ShakiraActive$364.91
Erick O'Haraubaldo_marks88@hotmail.comSouth BrucefurtActive$1,076.89
Phyllis Hyatttommy_donnelly@gmail.comBruenviewInactive$1,015.70
Gwen Heaneyperry_hintz29@hotmail.comNew BoydActive$698.86
Marian Steuberwoodrow53@yahoo.comEast TeresasteadActive$886.45
Johnathan Graham PhDagustina_schmitt@yahoo.comLake SvenInactive$710.56
Total$10,189.72

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.