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
INV001PaidBank Transfer$653.23
INV002UnpaidPayPal$209.37
INV003UnpaidCredit Card$490.20
INV004PendingPayPal$952.27
INV005PaidCredit Card$483.21
INV006PendingCredit Card$387.25
INV007PaidCredit Card$503.21
Total$3,678.74

Simple

Users

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

NameTitleEmailRoleActions
Jeffry JonesProduct Functionality Managerjeffry_jones27@hotmail.comMember
Jan LarkinGlobal Intranet Officerjan.larkin67@yahoo.comMember
Diamond DeckowSenior Assurance Managerdiamond.deckow96@hotmail.comMember
Marion TreutelCustomer Usability Technicianmarion_treutel@gmail.comAdmin
Veronica RueckerRegional Identity Specialistveronica.ruecker6@hotmail.comAdmin
Jakob WilliamsonPrincipal Integration Associatejakob.williamson38@gmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Cathryn Wyman

Regional Optimization Manager

cathryn.wyman79@yahoo.com

Viewer

Kiara Schulist

Future Communications Coordinator

kiara_schulist11@gmail.com

Admin

Jorge Schoen-Howe

Investor Accountability Associate

jorge.schoen-howe73@yahoo.com

Viewer

Eli Purdy

National Tactics Liaison

eli.purdy83@gmail.com

Member

Otha Kuhic

Investor Brand Orchestrator

otha.kuhic@gmail.com

Member

Bret Hartmann

Corporate Interactions Consultant

bret_hartmann@gmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Jena Tromp

Forward Assurance Engineer

jena.tromp28@hotmail.com

Member

Ernie Langworth

Senior Accountability Consultant

ernie_langworth1@gmail.com

Viewer

Libby Jast

Lead Response Executive

libby.jast@gmail.com

Admin

Jerry Price

Internal Division Assistant

jerry_price51@gmail.com

Admin

Charley Langosh

Future Functionality Consultant

charley_langosh50@yahoo.com

Admin

Arnold Jacobi

Central Marketing Strategist

arnold_jacobi@yahoo.com

Admin

Mohamed Maggio

Product Configuration Associate

mohamed.maggio33@gmail.com

Viewer

Laury Hackett

District Infrastructure Representative

laury.hackett86@hotmail.com

Viewer

Flossie D'Amore

Chief Applications Officer

flossie_damore@hotmail.com

Admin

Kitty Schultz

Dynamic Mobility Agent

kitty_schultz@yahoo.com

Member

Dominic Torp

Forward Program Associate

dominic_torp81@gmail.com

Member

Tressa Anderson

Forward Markets Producer

tressa.anderson55@gmail.com

Member

Vivianne O'Kon

Central Infrastructure Liaison

vivianne_okon@yahoo.com

Member

Johnny Kuhn

Internal Functionality Assistant

johnny.kuhn@hotmail.com

Viewer

Katlynn Considine

Forward Operations Specialist

katlynn_considine81@hotmail.com

Viewer

Emily Rutherford-Boehm

Forward Infrastructure Orchestrator

emily.rutherford-boehm@yahoo.com

Member

Jannie Kovacek

Dynamic Intranet Technician

jannie.kovacek@gmail.com

Member

Carey Yundt

Dynamic Identity Director

carey_yundt59@hotmail.com

Admin

Pat Sipes

Senior Factors Officer

pat_sipes@hotmail.com

Admin

Pattie McDermott

Investor Creative Agent

pattie.mcdermott4@gmail.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
Miss Estelle Gutmannblaze84@gmail.comSarinashireInactive$635.51
Owen Connelijah49@hotmail.comNew EddiebergActive$1,100.39
Dominick Rogahnaurelio.pouros95@yahoo.comSanfordsideInactive$851.38
Shawn Schulist DVMdolores88@gmail.comPort NicoletteburghActive$568.56
Noah Haleymadelynn73@hotmail.comNorth LeonetonActive$1,064.52
Total$4,220.36

Basic table

Table with Images

NameEmailLocationStatusBalance
Carlton Ziemann
@griffin42
abe_kozey@hotmail.comMoreno ValleyActive$331.53
Beth Heidenreich
@nelle18
tracey.dicki33@yahoo.comOxnardActive$1,077.56
Dr. Vivian Hintz
@marcelina_oberbrunner78
mason.weber@hotmail.comSanta BarbaraActive$569.41
Dr. Stacy Terry I
@tad76
kristopher15@yahoo.comNedstadActive$1,083.78
Jeannette Frami-Blanda
@kaylah_cummings
mariela_damore-hoppe@gmail.comWisokysideInactive$817.80

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Jana Cormierausten39@gmail.comTorphystadActive$1,139.82
Charles Corkeryjoshuah.feil19@hotmail.comAsastadInactive$222.50
Dr. Gregg O'Haraannetta_metz93@gmail.comOcalaInactive$64.51
Gustavo Kertzmannantone_herzog@gmail.comBruenchesterActive$111.39
Erica Wiegandamparo.moen@hotmail.comTreutelburyActive$277.42
Total$1,815.64

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Marilyn Okunevarhett.gulgowski44@yahoo.comWest RyderInactive$496.40
Lela Shanahanreed.heller@hotmail.comHiloInactive$1,067.76
Barry Feestsunny.jerde@hotmail.comPort MarshallvilleActive$419.93
Alfonso Ledner PhDlew30@hotmail.comFloydtonActive$968.63
Evelyn Hudsonmaci.langworth77@yahoo.comElizabethActive$904.29
Total$3,857.01

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Patrick Denesikjesse_jacobson@yahoo.comTownestadInactive$957.04
Kathleen Mrazbeau_waters25@hotmail.comLake MargaretInactive$787.65
Sergio Schowalterbrook65@gmail.comRaymundoboroActive$198.80
Lauren Effertzlavern.rohan@yahoo.comTreutelburyInactive$1,094.29
Ramiro Macejkovicsim_schroeder57@hotmail.comDenesikfortActive$834.03
Total$3,871.81

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
Mack Kreigernatalia.steuber16@yahoo.comKulassteadActive$890.59
Erick Brekke DDSpatrick.beier@gmail.comFort BarneytonInactive$293.25
Susan Murrayelvera_weber@yahoo.comNew YasmineInactive$633.14
Chad Sengernona65@gmail.comNew MarcossideInactive$908.66
Taylor Gutmannlaura.hermiston81@hotmail.comDylanlandActive$440.47
Total$3,166.11

Table with row selection

Card Table

NameEmailLocationStatusBalance
Randall Kohlerdestini11@hotmail.comWest BradenInactive$828.01
Chelsea Heller IVvan24@gmail.comMohrcesterActive$1,138.21
Mr. Arthur Eberthilda17@yahoo.comFort JudahActive$897.94
Ethel Schimmelashly_keebler83@gmail.comNew IssaclandActive$201.06
Grady O'Harapablo31@gmail.comLake ClayshireActive$936.72
Total$4,001.94

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
Salvador Spinkarenee_dach@yahoo.comMesquiteActive$1,095.47
Jeremy O'Konjimmie51@yahoo.comWest MonicamouthActive$441.38
Stella Walkerstuart64@yahoo.comNorth EmmaleeActive$623.76
Elijah Monahantania.sawayn69@gmail.comBruceworthInactive$259.94
Hugh Faheyjordon.legros@hotmail.comNorth JosephineInactive$324.94
Mr. Marcos Stokesholly85@yahoo.comNew KattieInactive$410.07
Bryant Mayer IValyce_vonrueden@yahoo.comFort JanisActive$421.12
Nadine Kovacekmarjolaine.berge71@hotmail.comGoodwinbergInactive$583.12
Arlene Fishermargaretta.ebert71@hotmail.comMetairieActive$761.78
Heidi Vandervortdangelo6@yahoo.comFort MargeActive$851.97
Israel Altenwerthstefan_koepp27@yahoo.comDarylvilleInactive$863.45
Debbie Pricegudrun75@yahoo.comSouth LindseyburyActive$857.99
Morris Corwinkeira_kessler77@hotmail.comPort MeggieboroInactive$709.47
Ramon Torpaurelie.streich@hotmail.comPort BerniestadInactive$717.19
Arlene Langosh DVMmorris_mcclure@yahoo.comLakewoodInactive$221.98
Total$9,143.63

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.