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
INV001PaidCredit Card$434.37
INV002PendingBank Transfer$977.07
INV003UnpaidBank Transfer$131.82
INV004PendingPayPal$149.16
INV005PendingCredit Card$600.05
INV006PendingCredit Card$489.08
INV007PendingBank Transfer$262.04
Total$3,043.59

Simple

Users

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

NameTitleEmailRoleActions
Rose LehnerInternational Accountability Plannerrose_lehner@yahoo.comAdmin
Jaquelin KubHuman Infrastructure Agentjaquelin_kub@hotmail.comViewer
Leo WeimannCorporate Directives Specialistleo_weimann11@hotmail.comAdmin
Bennett RunteDirect Response Designerbennett_runte@hotmail.comViewer
Josephine BinsLead Data Representativejosephine_bins@hotmail.comViewer
Jules RolfsonSenior Implementation Consultantjules.rolfson86@yahoo.comViewer

Stacked on mobile

Users

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

NameRoleActions

Vella O'Hara

Principal Data Representative

vella_ohara@yahoo.com

Admin

Jorge Abshire

International Configuration Technician

jorge_abshire@yahoo.com

Admin

Herbert Hermiston

Future Optimization Engineer

herbert_hermiston@hotmail.com

Admin

Kimberly Durgan

Human Research Consultant

kimberly_durgan27@gmail.com

Viewer

Elvie Haag

Central Security Administrator

elvie_haag@yahoo.com

Admin

Gerard Jacobi

District Applications Producer

gerard_jacobi@gmail.com

Member

Sticky header

Users

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

NameRoleActions

Brannon Bartell

Human Directives Manager

brannon_bartell@hotmail.com

Admin

Raina Hodkiewicz

Legacy Group Director

raina_hodkiewicz13@yahoo.com

Admin

Osvaldo Huels

Senior Web Representative

osvaldo.huels@hotmail.com

Viewer

Maeve Shanahan

Global Response Agent

maeve.shanahan@yahoo.com

Viewer

Alaina Hoppe

Customer Applications Technician

alaina_hoppe11@hotmail.com

Viewer

Winston Ruecker

District Mobility Associate

winston_ruecker57@yahoo.com

Member

Evie Kerluke

Forward Functionality Assistant

evie.kerluke@gmail.com

Viewer

Micheal Langworth

International Infrastructure Consultant

micheal.langworth89@hotmail.com

Admin

Rebeka Predovic

Direct Implementation Coordinator

rebeka.predovic89@gmail.com

Admin

Manley Mohr

Product Intranet Developer

manley_mohr59@yahoo.com

Member

Madge Funk

Regional Configuration Engineer

madge.funk@yahoo.com

Member

Dustin Morar

Future Optimization Designer

dustin_morar@gmail.com

Member

Kip Gottlieb

Global Factors Producer

kip_gottlieb48@yahoo.com

Member

Westley Schmitt

Product Metrics Officer

westley_schmitt@gmail.com

Viewer

Jacinthe Marvin

Central Metrics Engineer

jacinthe.marvin@yahoo.com

Viewer

Ansel Lehner

Future Branding Representative

ansel.lehner@hotmail.com

Member

Brandon Watsica

National Accounts Director

brandon.watsica@gmail.com

Viewer

Noe Herzog

Human Communications Administrator

noe_herzog@gmail.com

Member

Nathen Waters

Future Research Producer

nathen_waters92@gmail.com

Admin

Edison Jakubowski

Human Functionality Liaison

edison.jakubowski@yahoo.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
Joel Greenfelder Sr.arvel4@gmail.comFort BethanyActive$503.49
Mr. Guadalupe Padberg-Ortizmitchel59@yahoo.comLittelchesterInactive$231.72
Angel Huellogan.koss@yahoo.comNew TysonsteadActive$609.59
Saul Helleraugust25@yahoo.comNorth PaytonshireInactive$644.22
Christopher McLaughlinclint28@yahoo.comLake Havasu CityActive$988.18
Total$2,977.20

Basic table

Table with Images

NameEmailLocationStatusBalance
Kathryn Gulgowski
@amya.pfannerstill
brain_schneider@yahoo.comHamillchesterActive$705.37
Marc Bins-Langosh
@peter.lindgren80
brennan47@gmail.comLake JoelburyActive$934.81
Robert Flatley-Thiel
@presley49
jeramy_wehner@gmail.comNew RigobertoActive$769.46
Julius Ledner
@davion.schneider
dameon5@yahoo.comPort FletcherburyActive$736.46
Jacob Batz
@gayle61
aida.monahan41@hotmail.comChristiansenfortInactive$795.98

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Frank Williamsonora_kertzmann@hotmail.comAnnamariefieldActive$1,035.94
Dr. Scott Stehrjerrold.corkery91@yahoo.comWylieInactive$734.70
Jodi Kulaswilber_mills76@gmail.comPort KentonActive$678.08
Aubrey Hermannshanelle.little@yahoo.comMarksbergInactive$756.41
Larry Leannonflo.dubuque42@gmail.comPort AntoninatonActive$159.95
Total$3,365.08

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Oscar Herzogjanae.welch52@gmail.comAltoonaInactive$579.95
Angelica Rempelmarguerite20@yahoo.comFort LelaInactive$612.58
Randall Rempelgerman2@yahoo.comNew FeltonstadActive$1,064.65
Rickey Wildermangustave_dickinson@hotmail.comFort OnamouthActive$1,188.51
Jamie Parisianjensen.runte-grant77@hotmail.comDavionhavenInactive$902.88
Total$4,348.57

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Clarence Nadernella.fritsch99@yahoo.comLake ErinburghInactive$245.07
Rita Wintheisererika83@hotmail.comKovacekboroActive$64.21
Ms. Samantha Sengerelisha.ortiz73@gmail.comTurcotteboroInactive$812.92
Miss Whitney Stoltenbergdianna_veum@yahoo.comCielobergInactive$1,059.99
Russell Erdmandeangelo_hagenes@yahoo.comLarsonbergInactive$1,198.97
Total$3,381.16

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
Taylor Starkjermain.mann@gmail.comKendallInactive$36.39
Vincent Harveylora_johns43@gmail.comEast ArturoInactive$550.38
Mr. Roosevelt Hoeger DDSxavier.collins29@hotmail.comNorth CydneyfortActive$503.53
Glen Hahnmariam52@hotmail.comNational CityActive$70.96
Mr. Bryant Moen-Littlewestley85@gmail.comNicolachesterInactive$864.04
Total$2,025.30

Table with row selection

Card Table

NameEmailLocationStatusBalance
Alberto Prosacco Sr.joseph_hand@yahoo.comLake DawsonActive$669.59
Rosie Ryanjodie99@yahoo.comReneeburyInactive$175.99
Lynne Kuphalalia_gorczany@hotmail.comRobelcesterInactive$324.55
Clyde Millslafayette97@yahoo.comSouth KenyattaInactive$107.77
Ms. Jacqueline Kshlerinmuriel_russel59@yahoo.comFeeneycesterInactive$689.40
Total$1,967.30

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
Beverly Luettgendakota_emmerich48@gmail.comDelray BeachActive$957.58
Deborah Haley-Mitchellruby.emmerich70@yahoo.comFort JackiefurtInactive$76.92
Josephine Rippinhayley73@yahoo.comNew EvelynActive$460.22
Mrs. Leigh McLaughlinrae33@hotmail.comLake ClaudinehavenInactive$802.41
Andrea Reichertgerhard_schultz-ryan@hotmail.comSchulistfieldActive$332.20
Mrs. Sophia Labadieclare72@yahoo.comSouth HankboroActive$120.78
Rick Andersonkamille.mayert34@gmail.comSmithamfortInactive$1,125.96
Maggie Croninguiseppe53@gmail.comAdolphushavenInactive$865.34
Kelly Kundekailee.littel89@hotmail.comMooreInactive$1,199.78
Jeffery Thompsonmoriah96@hotmail.comCruickshankmouthActive$356.00
Jody Deckowgerman.reinger@hotmail.comUplandActive$828.37
Elisa Schultzclarabelle51@hotmail.comImeldatownInactive$44.78
Brent Handdawson_runte@yahoo.comBostonActive$76.28
Nick Stehrmarion_monahan@hotmail.comHermannboroInactive$1,153.54
Seth Mertzotis.bosco@gmail.comOdessaburyInactive$1,166.11
Total$9,566.27

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.