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$965.83
INV002UnpaidCredit Card$629.02
INV003UnpaidBank Transfer$957.61
INV004PaidCredit Card$453.81
INV005PendingBank Transfer$458.78
INV006UnpaidCredit Card$675.57
INV007PendingCredit Card$126.32
Total$4,266.94

Simple

Users

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

NameTitleEmailRoleActions
Mayra HoweRegional Integration Plannermayra_howe70@gmail.comMember
Elisabeth HomenickCorporate Metrics Producerelisabeth.homenick29@hotmail.comMember
Lorna ReichertDistrict Mobility Technicianlorna_reichert@hotmail.comAdmin
Muriel CummingsCorporate Infrastructure Facilitatormuriel_cummings@hotmail.comAdmin
Cassandre ConnGlobal Security Techniciancassandre.conn@yahoo.comViewer
Kiana GutkowskiProduct Interactions Representativekiana_gutkowski87@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Mollie Klein

Direct Assurance Associate

mollie_klein@hotmail.com

Member

Maribel Macejkovic

National Data Designer

maribel_macejkovic88@hotmail.com

Viewer

Eliza Champlin-Maggio

International Web Architect

eliza.champlin-maggio37@yahoo.com

Viewer

Dorothea Powlowski

Lead Quality Orchestrator

dorothea_powlowski@hotmail.com

Viewer

Efren Lueilwitz

Legacy Operations Technician

efren.lueilwitz@hotmail.com

Viewer

Curtis White

Legacy Intranet Administrator

curtis_white39@hotmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Uriel Predovic

Lead Data Executive

uriel_predovic15@gmail.com

Viewer

Elvera Kautzer

Central Accountability Specialist

elvera.kautzer@gmail.com

Admin

Elta Ankunding

Dynamic Metrics Officer

elta_ankunding34@gmail.com

Member

Brad Bruen

Global Markets Engineer

brad.bruen@gmail.com

Viewer

Horace Howe

Internal Metrics Facilitator

horace_howe38@gmail.com

Admin

Marley Hilll-Luettgen

Legacy Usability Engineer

marley_hilll-luettgen97@gmail.com

Viewer

Maude Mohr-Hyatt

National Data Administrator

maude_mohr-hyatt15@yahoo.com

Admin

Alana Yost

Senior Implementation Orchestrator

alana_yost81@hotmail.com

Member

Chaya Jacobson

Regional Response Liaison

chaya.jacobson77@gmail.com

Admin

Jeremy Shanahan

Product Integration Agent

jeremy.shanahan71@yahoo.com

Member

Maryjane Willms-Gerhold

Forward Applications Representative

maryjane_willms-gerhold@yahoo.com

Member

Kieran Conroy

Forward Configuration Assistant

kieran_conroy@gmail.com

Member

Christine Nitzsche

Corporate Metrics Liaison

christine_nitzsche@hotmail.com

Viewer

Chase Towne

Future Interactions Coordinator

chase.towne46@gmail.com

Viewer

Zackery Rolfson

Forward Intranet Technician

zackery_rolfson8@hotmail.com

Admin

Lafayette Will

District Directives Coordinator

lafayette.will@gmail.com

Viewer

Rafaela Hoeger

Senior Functionality Officer

rafaela_hoeger@hotmail.com

Viewer

Adrian Jacobson

Lead Web Engineer

adrian.jacobson@hotmail.com

Viewer

Noemi Witting

Human Implementation Technician

noemi_witting16@hotmail.com

Admin

Coleman Bailey

Principal Security Consultant

coleman_bailey38@gmail.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
Dr. Jenna Cummeratapietro45@yahoo.comCassinchesterActive$775.59
Darin Altenwerthraul.connelly@hotmail.comLeague CityInactive$1,194.34
Juana Framiavery_koss@yahoo.comLouisaburghInactive$893.92
Phillip Rohanlogan12@gmail.comNew PearlstadInactive$597.11
Clinton Bartonhope_buckridge0@hotmail.comWest ImaniInactive$607.39
Total$4,068.35

Basic table

Table with Images

NameEmailLocationStatusBalance
Ellis Cole
@nikki_bergstrom
emie_leffler@yahoo.comKiehnstadActive$331.10
Alvin Kris
@damaris_feil
garry.streich85@hotmail.comHarrisburgInactive$833.62
Dr. Homer Donnelly
@hermina.kris
aileen.ziemann@gmail.comOmarifieldInactive$1,185.95
Daniel Schumm PhD
@drake63
tiana_hoppe56@gmail.comDanniefortInactive$133.05
Dewey Krajcik
@alvah86
elmira7@gmail.comTroyInactive$718.04

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Mr. Hector Osinski-Skiles IIImargarett15@hotmail.comTamiamiActive$426.11
Mabel Willlonzo29@hotmail.comMaricopaActive$250.42
Lynette Loweevert.gleichner6@hotmail.comWest PearlinevilleActive$1,033.40
Cassandra Jakubowskidejon24@hotmail.comRedlandsActive$799.00
Stanley Boehmmartina_kihn@hotmail.comSouth AlexzandercesterActive$1,002.19
Total$3,511.12

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Tanya Turnerearline.koss@gmail.comPort AyanaActive$1,013.18
Mr. Antonio Bergstromkasey_wisoky2@hotmail.comNorth Las VegasActive$246.83
Lorena Langoshaletha.mayert@gmail.comWizacesterInactive$333.96
Lionel Greenmarques.shields@hotmail.comKarinafurtInactive$145.71
Mr. Clint Mayertmaybelle55@gmail.comWaukeshaInactive$260.09
Total$1,999.77

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Jackie Kossmichel_schamberger@gmail.comIowa CityActive$211.24
Van Marksbridie_wilkinson63@yahoo.comSpringActive$960.65
Judith Lindgrenvanessa16@gmail.comEast ClintonmouthInactive$934.81
Wilbur Schultznels_windler@hotmail.comKingsteadInactive$974.79
Jon Stantonbobby_predovic99@yahoo.comNew JeanetteActive$1,041.99
Total$4,123.48

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
Jean Labadiemaureen64@yahoo.comEl PasoActive$537.97
Susan Schneider IVdemarco.schmeler14@yahoo.comBuena ParkActive$1,194.54
Kurt Kuvalismason35@yahoo.comPort HollisInactive$968.69
Bryan Dickinsonperry83@yahoo.comSarahburghActive$455.62
May Toyhubert.hamill-macgyver@yahoo.comNew TellyInactive$819.34
Total$3,976.16

Table with row selection

Card Table

NameEmailLocationStatusBalance
Scott Lebsackjeffry_collier@hotmail.comSouth ElianActive$220.97
Marcia Bruenkellen13@gmail.comSolonchesterActive$870.41
Candace DuBuquesoledad.shields@gmail.comHuelshireActive$1,128.42
Joel Gerlachdallin91@yahoo.comNew JaylonInactive$588.35
Yvonne Wintheiseralfreda.baumbach-dach99@hotmail.comNew OwenInactive$126.38
Total$2,934.53

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
Ramona Sawaynearlene.daniel16@hotmail.comFort LaurencetonInactive$324.12
Dr. Fernando Kulasflorida.walker37@hotmail.comNew MonicaInactive$96.95
Irma Okuneva-Colelizeth56@yahoo.comBartellsideActive$7.47
Sylvester Ricejennie83@hotmail.comNorth KaraviewActive$97.10
Gayle Kassulkefrank_jenkins@hotmail.comSioux CityInactive$295.17
Naomi Heidenreichulices.heller50@yahoo.comAugusta-Richmond CountyInactive$664.62
Jody Hayesjosie74@yahoo.comWest LeolaboroActive$966.01
Al Weimannidell24@yahoo.comLa CrosseInactive$353.42
Lawrence Carrollkyler95@gmail.comDevanteboroughActive$195.56
Katie Quigleymarquise82@yahoo.comWest AddieInactive$206.00
Angelo Hayeslucile.ernser@gmail.comLake HollieburghActive$444.82
Jan Runteangus_kemmer91@gmail.comMargaritafurtActive$153.83
Denise Faheylondon_wehner53@hotmail.comEast DonnaInactive$58.68
Edmond Franeyevan_ullrich@gmail.comSouth JustonhavenActive$236.59
Clyde Greenfelder PhDgeoffrey.volkman67@yahoo.comNew KristopherInactive$55.38
Total$4,155.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.