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
INV001PaidPayPal$802.47
INV002PaidCredit Card$122.45
INV003PaidBank Transfer$707.23
INV004PaidPayPal$715.78
INV005PaidBank Transfer$933.15
INV006PaidBank Transfer$490.30
INV007PendingCredit Card$674.40
Total$4,445.78

Simple

Users

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

NameTitleEmailRoleActions
Larry NaderLegacy Mobility Technicianlarry.nader@hotmail.comViewer
Gail HillsLegacy Communications Plannergail.hills@hotmail.comViewer
Verdie KuhicDirect Assurance Managerverdie.kuhic17@hotmail.comMember
Rogelio KertzmannDynamic Intranet Agentrogelio_kertzmann@yahoo.comViewer
Misty MayertNational Applications Orchestratormisty_mayert@gmail.comMember
Leone HirtheInvestor Implementation Administratorleone.hirthe@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Roman Hoeger

Senior Branding Engineer

roman_hoeger4@gmail.com

Member

Torrey Fahey

Central Operations Technician

torrey_fahey@hotmail.com

Member

Katrina O'Reilly

Future Directives Consultant

katrina_oreilly@gmail.com

Member

Christina Macejkovic

Dynamic Solutions Designer

christina.macejkovic70@hotmail.com

Admin

Erick Jast

Chief Infrastructure Executive

erick.jast64@hotmail.com

Member

Peggie Gislason

Central Accountability Planner

peggie.gislason35@gmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Lenny Nader

Dynamic Intranet Assistant

lenny_nader22@yahoo.com

Admin

Jake Wisozk

Central Implementation Technician

jake_wisozk64@yahoo.com

Member

Evans Wiza

Legacy Branding Director

evans_wiza@hotmail.com

Viewer

Wilfrid Marvin

Product Data Representative

wilfrid_marvin@yahoo.com

Admin

Maureen Parker

National Directives Orchestrator

maureen.parker87@hotmail.com

Viewer

Alfonso Larkin

Chief Optimization Facilitator

alfonso_larkin@hotmail.com

Viewer

Paula Predovic

Lead Research Manager

paula_predovic@hotmail.com

Member

Juanita Zieme

Future Group Specialist

juanita.zieme@gmail.com

Member

Rogelio Wuckert

Regional Brand Agent

rogelio_wuckert45@hotmail.com

Admin

Lulu Schultz

Direct Intranet Engineer

lulu.schultz43@yahoo.com

Admin

Marquis Kessler

District Paradigm Facilitator

marquis_kessler@gmail.com

Viewer

Melvin Kreiger

Future Group Associate

melvin.kreiger87@yahoo.com

Member

Tommy Ondricka

Dynamic Assurance Coordinator

tommy.ondricka89@gmail.com

Member

Joany Howe

International Quality Engineer

joany.howe0@hotmail.com

Viewer

Evelyn Kutch

Global Research Coordinator

evelyn.kutch@gmail.com

Member

Ophelia Beer

Principal Assurance Designer

ophelia_beer@yahoo.com

Viewer

Brock Murazik

Global Infrastructure Liaison

brock.murazik@yahoo.com

Admin

Joel Kovacek

Customer Metrics Engineer

joel.kovacek@gmail.com

Viewer

Jermey Franecki

Forward Accounts Orchestrator

jermey.franecki71@gmail.com

Member

Hadley Fisher

Corporate Interactions Executive

hadley_fisher@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
Silas Jerdedana_legros@hotmail.comLarsonportActive$134.16
Mrs. Cheryl Padberg MDsam97@yahoo.comWauwatosaInactive$431.92
Leola Littlebo_ullrich93@hotmail.comCullentonActive$1,169.06
Kayleigh Stoltenberg DDSraul_jast27@yahoo.comNew NorrismouthActive$39.53
Pinkie Kreigerjoe32@gmail.comEast GiovanniInactive$1,053.50
Total$2,828.17

Basic table

Table with Images

NameEmailLocationStatusBalance
Mikel Wiza-Franecki
@gage_gusikowski45
kerry_monahan60@gmail.comBednarstadActive$702.30
Neal Murphy
@ramona_kuhn
melissa23@yahoo.comNorth GeneralActive$1,175.77
Preston Goodwin
@audra89
gwendolyn_beatty@gmail.comKaelaworthInactive$1,030.58
Kaelyn Brekke
@nathaniel_klocko37
andre_lind@hotmail.comTessieburyActive$275.77
Luna Rippin
@kendra.lakin11
lowell15@hotmail.comNorth SydnichesterInactive$845.03

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Myah Kiehnpearl_witting85@gmail.comWest OnieInactive$891.89
Loy Hegmann MDjennifer_thiel59@yahoo.comWest ErnafurtActive$1,098.86
Hassie Konopelskikay23@gmail.comWillmouthActive$729.36
Loretta Kleinlaverne88@yahoo.comJamiltownActive$275.50
Mrs. Elaine McClureorval76@hotmail.comPortsmouthActive$943.36
Total$3,938.97

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Felicity Trantowfloyd_bernier@gmail.comDuluthInactive$1,049.13
Dane Johnssierra.beahan57@yahoo.comHansenviewInactive$628.65
Dr. Steven Prohaskabrooke_reichert@yahoo.comEleonoresteadActive$558.11
Amira Krajcikelda_vonrueden@gmail.comShieldsvilleInactive$230.35
Lynn Langhyman_strosin30@yahoo.comJessycaportActive$1,186.53
Total$3,652.77

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Gina Sanfordmarlon_wisozk52@gmail.comEvelynlandActive$417.94
Sadie O'Connelljodi.rau18@gmail.comMillcreekActive$1,081.09
Mertie Herzog Sr.curtis.lynch40@gmail.comDonniesideActive$437.29
Sherri Adamsvelma_greenholt@yahoo.comEast LauriannesideActive$1,179.95
Keshawn Kulascathy38@gmail.comEast ChancefieldActive$420.92
Total$3,537.19

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
Dandre Walkergenevieve80@gmail.comEast AbbigailActive$554.89
Laila Nikolausnancy_klein37@yahoo.comBoganchesterActive$363.03
Shane Lindgrensamanta.cummings8@gmail.comBlickstadActive$817.17
Tiffany Torphyroberta_reynolds12@gmail.comLake VeldaInactive$454.01
Miss Stella Koelpineugene.schultz@gmail.comLake GwenshireInactive$631.89
Total$2,820.99

Table with row selection

Card Table

NameEmailLocationStatusBalance
Christie Johns-Ullrichsheila.wuckert52@hotmail.comFort LelahActive$139.69
Janet Weberjavon91@yahoo.comSouth GustaveActive$274.12
Darren Kemmer-Prohaskaheather.harris@yahoo.comFort RosieviewInactive$656.91
Golda Bernhardwilla.hammes@hotmail.comSouth VergieInactive$874.84
Angie Boscomarc_hansen25@hotmail.comTrantowboroInactive$84.34
Total$2,029.90

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
Dusty Kshlerin-Bahringerangie.damore@gmail.comWest EmeliaInactive$530.48
Eddie Smitham Ipat.skiles@gmail.comWest DestinviewActive$1,163.78
Josephine Hartmannabraham_bogisich69@gmail.comMadgeportInactive$503.70
Federico Stiedemannalexandro.bosco@gmail.comSchusterlandActive$1,139.58
Jorge Hettingerpatsy3@gmail.comNew TyrelInactive$456.72
Jasper McCluremarvin_ebert38@yahoo.comMilfordInactive$456.85
Ignacio Kautzerisabelle.schinner@hotmail.comYoungstownActive$1,038.44
Quentin Stehrjovany72@hotmail.comKiehnvilleActive$49.39
Alberto Schummchad76@hotmail.comRustyboroInactive$135.78
Shelia Kundeadrien44@gmail.comLake MoniqueInactive$948.12
Eduardo Schmelerisaac24@yahoo.comHackensackInactive$843.17
Abigale Kuphal Vmac87@yahoo.comBlazehavenInactive$628.10
Clint Kuhnfannie.schneider31@gmail.comFort FredrickActive$92.96
Wanda Jastmargret21@yahoo.comSouth KennyburghActive$955.13
Sheila Schuppelillie.jaskolski53@gmail.comNorth PablosideActive$903.88
Total$9,846.08

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.