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
INV001PendingCredit Card$194.20
INV002UnpaidCredit Card$864.24
INV003PaidCredit Card$310.35
INV004UnpaidBank Transfer$551.80
INV005UnpaidBank Transfer$363.06
INV006PendingCredit Card$379.82
INV007PendingPayPal$363.30
Total$3,026.77

Simple

Users

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

NameTitleEmailRoleActions
Iris LehnerCorporate Directives Supervisoriris.lehner@yahoo.comAdmin
Sebastian KeeblerHuman Research Designersebastian_keebler@yahoo.comAdmin
Guadalupe WelchInternal Optimization Analystguadalupe.welch@gmail.comMember
Eduardo HerzogSenior Optimization Directoreduardo_herzog@yahoo.comAdmin
Alice RunolfssonForward Interactions Supervisoralice_runolfsson@hotmail.comAdmin
Lauretta ZiemeLegacy Paradigm Orchestratorlauretta_zieme@gmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Jeannette Blick

Legacy Implementation Administrator

jeannette.blick19@yahoo.com

Viewer

Emily Strosin

Regional Web Analyst

emily.strosin@gmail.com

Viewer

Frank Reichel

Legacy Marketing Facilitator

frank_reichel51@hotmail.com

Viewer

Ted Wyman

Human Implementation Officer

ted.wyman@hotmail.com

Member

Lorenz Emard

Human Assurance Developer

lorenz_emard@gmail.com

Viewer

Jonathon Medhurst

Investor Integration Technician

jonathon_medhurst@gmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Josianne Johnson

Customer Accounts Coordinator

josianne_johnson@hotmail.com

Viewer

Viola Ankunding

Chief Research Assistant

viola.ankunding24@gmail.com

Viewer

Noemi Hessel

Senior Factors Manager

noemi_hessel82@gmail.com

Admin

Nikki Wilderman

District Communications Director

nikki_wilderman38@gmail.com

Admin

Miles Muller

Forward Tactics Manager

miles.muller37@yahoo.com

Viewer

Erwin Dach

National Creative Designer

erwin.dach30@gmail.com

Viewer

Sylvia Lemke

Principal Division Agent

sylvia.lemke6@hotmail.com

Admin

Geoffrey Thiel

Chief Functionality Executive

geoffrey_thiel@hotmail.com

Viewer

Edmond Green

Lead Intranet Analyst

edmond.green@hotmail.com

Viewer

Robyn Bergnaum

Corporate Program Strategist

robyn.bergnaum@gmail.com

Viewer

Viva Moore

Future Accounts Architect

viva.moore93@yahoo.com

Admin

Everett Friesen

Forward Tactics Officer

everett_friesen16@gmail.com

Admin

Jeanette Beer

Regional Accountability Executive

jeanette_beer91@yahoo.com

Admin

Helene Leuschke

Chief Response Architect

helene.leuschke@gmail.com

Member

Taylor O'Keefe

Global Accounts Engineer

taylor_okeefe44@gmail.com

Viewer

Nya Hintz

Customer Tactics Assistant

nya_hintz@hotmail.com

Admin

Dianna Lebsack

National Directives Strategist

dianna.lebsack37@hotmail.com

Viewer

Stephanie Stracke

Lead Communications Manager

stephanie_stracke89@hotmail.com

Viewer

Edgar Torp

Future Markets Strategist

edgar.torp42@yahoo.com

Admin

Eliezer VonRueden

Chief Quality Specialist

eliezer_vonrueden98@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
Mrs. Michael Lemkeemmanuelle80@yahoo.comPort DelilahActive$659.35
Chadd Nienowpam.trantow16@yahoo.comHuntersvilleActive$293.99
Elsa Schinnersalvador.gutkowski@gmail.comDancesterActive$175.12
Dana Milleralexis_schoen21@hotmail.comLake MelyssaburghInactive$794.98
Shirley Wiza IIIotto9@hotmail.comNorth RahulmouthInactive$197.84
Total$2,121.28

Basic table

Table with Images

NameEmailLocationStatusBalance
Bruce Purdy
@rudolph_kuphal
imelda53@gmail.comHermanntonActive$258.95
Edmond Dare
@vincent69
olga.macejkovic11@gmail.comJeremieviewActive$1,182.87
Jan Kessler
@nichole73
julien27@gmail.comHooverActive$258.14
Miss Marlon Stoltenberg
@stacey30
jim.hermann@hotmail.comJettiefurtInactive$753.14
Dr. Christy Johnston
@felipe_walker
gerardo.thiel9@yahoo.comEast AnsleytonInactive$197.46

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Eric Batzarlene.harris-weber@yahoo.comWest AaliyahhavenInactive$387.52
Katherine Prohaskaramona_lang96@hotmail.comEast LoissideActive$1,149.93
Hattie Welch Jr.lena32@gmail.comBartolettihavenInactive$1,132.56
Aletha Runolfsdottirlola86@yahoo.comNikolauschesterInactive$736.02
Darrel Mooreisaac76@hotmail.comEast MyrlboroughInactive$236.82
Total$3,642.85

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Mario Darejayde.marks@gmail.comRueckerstadInactive$113.90
Alexis Doylemarquise46@gmail.comJakubowskiboroughInactive$794.68
Eli Langrichard97@gmail.comLake CleoraActive$1,088.91
Bonnie Harveylora78@yahoo.comWest BerthabergActive$769.17
Olive Marksmiguel.hackett@yahoo.comEast AverytonInactive$726.60
Total$3,493.26

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Marilou Wisokydoris_okon97@yahoo.comSouth ErnestinashireInactive$165.49
Rick Powlowskikenneth5@yahoo.comGrand IslandInactive$506.45
Leland Schmidt Jr.marjorie.larson@gmail.comCaspertownInactive$1,127.27
Andrew Schummjoy64@gmail.comHaileytonInactive$664.61
Jessica Labadie IIIolivia_wolff@hotmail.comLake ChetActive$700.40
Total$3,164.22

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
Connor Uptonjamie95@hotmail.comEast FrancesburyActive$646.02
Ryleigh Fisherfaye.hamill@hotmail.comNorth TurnerfieldInactive$66.43
Gabriella Nikolausbuddy.cassin@hotmail.comPort MarianeworthActive$978.70
Oren Jakubowskivaughn_ward83@yahoo.comEast JudahInactive$546.38
Drew Franeybenny54@gmail.comSan BernardinoActive$438.22
Total$2,675.75

Table with row selection

Card Table

NameEmailLocationStatusBalance
Willy Hesselzachary.herman@hotmail.comSchoenfortActive$616.20
Geneva McLaughlin-Wizaangela_brekke@hotmail.comLake JettiechesterActive$618.47
Nora Franeykeaton36@gmail.comScottsdaleActive$712.19
Hubert Gusikowski Jr.lola_pagac@gmail.comSouth AndersonfieldInactive$1,032.84
Sage Collierjeanne_green88@hotmail.comCarolinaInactive$517.89
Total$3,497.59

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
Elaine Schultz-Bergnaumlorena.fisher@yahoo.comIancesterActive$284.23
Mr. Columbus Kozeylaverne.mann@yahoo.comBrentwoodActive$208.06
Idella Rathila.wilderman@hotmail.comMissouri CityInactive$548.14
Callie Collinsotilia53@gmail.comConroeActive$727.62
Mr. Alanis Hellerbrayan22@hotmail.comJettiecesterInactive$558.74
Felipe Shieldsalma34@yahoo.comVirginia BeachInactive$726.31
Becky Satterfieldtom86@gmail.comStiedemannworthInactive$619.35
Ignacio Borerreyna23@yahoo.comNew RomanInactive$780.76
Adelbert Heidenreichmaureen_altenwerth@yahoo.comAnnaworthInactive$985.59
Ross Schadenannamae_rath54@hotmail.comState CollegeActive$933.33
Alvin Welch Jr.herman_durgan@gmail.comKnoxvilleActive$308.44
Elton Gutmannpat57@hotmail.comMaderaActive$1,023.40
Wilson Langoshzander.ratke60@yahoo.comNorth KieraworthActive$50.21
Benjamin Jacobijosefina.macejkovic56@hotmail.comPort JoannietownInactive$52.43
Eunice Ziemeisabell92@hotmail.comSauerboroughInactive$1,174.40
Total$8,981.01

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.