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$816.09
INV002UnpaidBank Transfer$396.68
INV003PendingBank Transfer$649.05
INV004PaidCredit Card$147.11
INV005PaidBank Transfer$513.76
INV006PendingBank Transfer$699.63
INV007PaidCredit Card$426.63
Total$3,648.95

Simple

Users

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

NameTitleEmailRoleActions
Lambert DooleyCentral Usability Associatelambert_dooley@gmail.comViewer
Valerie HyattProduct Functionality Coordinatorvalerie.hyatt68@hotmail.comMember
Danielle DeckowRegional Interactions Architectdanielle.deckow0@gmail.comAdmin
Nicklaus McDermottGlobal Metrics Representativenicklaus.mcdermott91@gmail.comAdmin
Allison WymanInternal Metrics Assistantallison.wyman@yahoo.comViewer
Melvin TremblayRegional Infrastructure Liaisonmelvin_tremblay@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Andreane Waters

International Infrastructure Representative

andreane_waters@gmail.com

Member

Isabella Hodkiewicz

Customer Infrastructure Supervisor

isabella_hodkiewicz24@gmail.com

Admin

Keeley Willms

Corporate Brand Strategist

keeley.willms45@hotmail.com

Viewer

Carey O'Connell

Principal Intranet Technician

carey.oconnell@yahoo.com

Admin

Elyssa Luettgen

Human Optimization Engineer

elyssa.luettgen@gmail.com

Admin

Corene West

Regional Configuration Representative

corene_west11@hotmail.com

Member

Sticky header

Users

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

NameRoleActions

Cathryn Simonis

Human Metrics Facilitator

cathryn.simonis18@hotmail.com

Member

Vivian Ullrich-Stehr

Human Identity Specialist

vivian_ullrich-stehr@hotmail.com

Member

Bettye Leannon

Internal Factors Manager

bettye.leannon95@gmail.com

Member

Koby Hodkiewicz

International Creative Analyst

koby_hodkiewicz74@hotmail.com

Viewer

Javon Cronin

Senior Communications Consultant

javon_cronin@gmail.com

Member

Rupert Reinger

Principal Division Engineer

rupert_reinger@hotmail.com

Admin

Jasper Schroeder

Global Configuration Consultant

jasper_schroeder11@yahoo.com

Viewer

Noel Boyle

Direct Directives Coordinator

noel_boyle13@gmail.com

Admin

Gillian Kautzer

Legacy Mobility Analyst

gillian_kautzer95@yahoo.com

Viewer

Eli Daniel

Global Applications Strategist

eli.daniel@yahoo.com

Admin

Celestino Witting

District Operations Consultant

celestino.witting@yahoo.com

Viewer

Herta Koss

Product Assurance Analyst

herta.koss@hotmail.com

Admin

Prince Borer

Internal Group Facilitator

prince.borer51@gmail.com

Member

Ben Willms

Product Brand Consultant

ben_willms@hotmail.com

Member

Mable Farrell

Global Factors Liaison

mable.farrell15@gmail.com

Viewer

Gloria Barrows

Customer Response Producer

gloria.barrows96@gmail.com

Viewer

Mya Kling

Human Implementation Specialist

mya_kling85@hotmail.com

Admin

Reese Pollich

Principal Identity Coordinator

reese_pollich@yahoo.com

Viewer

Genesis Huel

Senior Functionality Assistant

genesis_huel60@gmail.com

Member

Germaine Witting

Product Markets Strategist

germaine_witting@hotmail.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
Grace Parisianmatilda_hudson@hotmail.comMarianoboroActive$217.48
Tyrone Turner IIImohammed_roob@yahoo.comGrimesburghActive$1,091.81
Randal Reingerthaddeus.borer@hotmail.comFernboroInactive$919.79
Gerald Strackeisabelle27@gmail.comSouth KristofertownActive$63.59
Moses Bergstromsylvester21@gmail.comLake BenedictActive$1,096.95
Total$3,389.62

Basic table

Table with Images

NameEmailLocationStatusBalance
Joyce Grady
@kyra_koepp84
rey_ebert@yahoo.comRogerhavenActive$356.16
Amy Prosacco
@annabell_koch
domenick.erdman44@gmail.comJoanyboroughInactive$247.45
Israel Bartoletti
@zachariah.franecki74
rosendo.gutkowski77@hotmail.comLake JakeActive$224.15
Alberta Zieme
@milo12
terrell11@hotmail.comIsabelchesterInactive$227.67
Lonnie Von
@elliott.halvorson83
oceane_nicolas91@yahoo.comSeamuscesterActive$644.12

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Glen Barrowsraphaelle6@gmail.comFort TerrenceInactive$416.34
Mrs. Alice Pfannerstilltito63@hotmail.comThompsonsideActive$1,145.13
Donnie Abbottjoy.okeefe@yahoo.comVirginieshireInactive$242.22
Katie Hackettlaney_hoppe40@gmail.comSt. PaulActive$109.96
Marco Kuhicdawson.armstrong@gmail.comNorth GiovanniInactive$78.13
Total$1,991.78

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Jamie Toyclaudine.sanford@gmail.comBiloxiInactive$48.22
Abraham Tremblayallen28@hotmail.comNampaActive$35.62
Krystal Kuphal Itwila_marks-heaney56@gmail.comLake XavierActive$413.60
Dr. Jimmie Boganoral_ondricka@yahoo.comSantinoportInactive$217.03
Jennie Braunaimee_bogan50@gmail.comMaudevilleActive$292.94
Total$1,007.41

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Kelley Vandervortdedrick63@yahoo.comEast JanicehavenActive$367.34
Jimmy Kuvalis PhDjohanna.fay@yahoo.comPort LaurianeburyActive$564.25
Jonathon Hintz DDShank_gusikowski@gmail.comDelray BeachInactive$414.78
Kirk Fadelarielle.gorczany54@gmail.comLake UnaInactive$835.58
Rebecca Turcottepierce14@yahoo.comLake TiafortActive$358.01
Total$2,539.96

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
Luis Buckridgedorian.oconner58@gmail.comPort DeondreActive$535.81
Dr. Micheal Lang Imaryam3@gmail.comEast KarelleActive$503.24
Melissa Smithdeondre51@yahoo.comNew HoldenchesterInactive$191.54
Clarence Fayhenderson_greenholt11@gmail.comNew HershelboroActive$1,147.19
Connie Shields PhDcharley_carter@yahoo.comFerrycesterInactive$189.73
Total$2,567.51

Table with row selection

Card Table

NameEmailLocationStatusBalance
Ms. Katrina Reynoldsharvey93@gmail.comSouth EverettworthInactive$127.96
Marian Heathcoteperry.bernhard67@gmail.comMount ProspectActive$403.12
Kelly Schmittanne_larkin16@hotmail.comAdelbertfurtActive$8.88
Tommie Koss IIjenifer.kunde@gmail.comPagacfieldActive$486.99
Dr. Fannie Gutkowskiflorencio.purdy@hotmail.comNew JamirActive$927.70
Total$1,954.65

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
Edmund Schultzstephan.feil1@gmail.comPortlandInactive$306.93
Mitchell Braun DDSbenedict37@gmail.comRobertfortInactive$1,194.23
Mamie Baumbachandy_dickinson@yahoo.comFlorence-GrahamInactive$1,076.95
Jana Krajcikemerald26@gmail.comJohns CreekActive$954.31
Maureen Kulasreyna.mraz@gmail.comSouth VestaInactive$609.35
Silvia VonRuedenhoward29@hotmail.comKilbackhavenInactive$266.64
Dr. Isabel Bruenestrella_cummerata@gmail.comEast NoahworthInactive$632.32
Krista Raynor-Grimesnyasia_moen-greenholt13@yahoo.comAshburnInactive$387.79
Mr. Bob Fadeltyrel.mitchell94@yahoo.comRauboroughActive$889.12
Shawna O'Haracooper99@hotmail.comNorth ChristopherActive$292.96
Maurice Schroederalicia.weissnat@hotmail.comToybergActive$1,048.87
Matt Rathlelah.lebsack36@hotmail.comPort JamieActive$172.81
Mable Barrowsagnes84@yahoo.comSouth KatelynActive$371.97
Carolyn Bauchjacynthe80@hotmail.comSouth TamiaburghInactive$1,174.09
Joy Kubkale.fay30@gmail.comSan Tan ValleyActive$270.09
Total$9,648.43

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.