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$826.92
INV002PendingBank Transfer$627.71
INV003UnpaidBank Transfer$480.64
INV004UnpaidCredit Card$668.10
INV005PendingCredit Card$650.32
INV006PaidPayPal$939.44
INV007UnpaidCredit Card$328.37
Total$4,521.50

Simple

Users

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

NameTitleEmailRoleActions
Kathleen ProhaskaCentral Optimization Consultantkathleen_prohaska3@hotmail.comMember
Murray ZiemeLead Metrics Orchestratormurray.zieme@hotmail.comMember
Tracy JacobsonGlobal Accounts Orchestratortracy_jacobson44@yahoo.comAdmin
Lesly TowneLegacy Applications Assistantlesly.towne@hotmail.comAdmin
Delpha OlsonSenior Web Managerdelpha.olson@gmail.comMember
Percy SteuberLead Mobility Producerpercy.steuber@hotmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Davin King

International Metrics Architect

davin_king11@yahoo.com

Member

Chanel Rau

Future Solutions Designer

chanel.rau97@yahoo.com

Viewer

Bryce Stark

Principal Operations Planner

bryce_stark@yahoo.com

Admin

Amie West

Human Interactions Designer

amie.west59@hotmail.com

Member

Christelle Armstrong

Dynamic Quality Representative

christelle.armstrong@hotmail.com

Viewer

Lauriane O'Connell

Corporate Optimization Manager

lauriane_oconnell69@gmail.com

Admin

Sticky header

Users

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

NameRoleActions

Lavinia Lockman

Human Integration Planner

lavinia.lockman8@gmail.com

Viewer

Estrella Adams

Chief Program Analyst

estrella.adams84@yahoo.com

Viewer

Dale Murphy

Internal Branding Liaison

dale.murphy11@yahoo.com

Admin

Lenna Pacocha

Human Branding Strategist

lenna.pacocha@hotmail.com

Admin

Jett Johns

Internal Group Director

jett.johns76@yahoo.com

Admin

Russell Grant

Dynamic Identity Agent

russell.grant@yahoo.com

Member

Aurore Wilderman-Brown

Global Security Orchestrator

aurore.wilderman-brown30@gmail.com

Viewer

Sandy Jerde

Central Security Engineer

sandy.jerde@hotmail.com

Member

Marilou Halvorson

Customer Infrastructure Planner

marilou.halvorson@gmail.com

Member

Russel Jast

District Functionality Developer

russel_jast72@hotmail.com

Admin

Einar Herman

Product Security Specialist

einar_herman48@yahoo.com

Member

Antwon Heathcote

Legacy Directives Producer

antwon_heathcote28@yahoo.com

Member

Carmella Fisher

Product Response Administrator

carmella.fisher30@gmail.com

Viewer

Keagan Collier

International Marketing Associate

keagan.collier83@hotmail.com

Member

Brenna Kling-Walker

Legacy Tactics Officer

brenna.kling-walker52@gmail.com

Member

Emerson Wunsch

International Applications Executive

emerson_wunsch@hotmail.com

Viewer

Candido McClure

Direct Integration Officer

candido_mcclure90@gmail.com

Admin

Jennings Altenwerth

Investor Assurance Associate

jennings_altenwerth82@gmail.com

Viewer

Zoey VonRueden

Human Tactics Associate

zoey_vonrueden@yahoo.com

Viewer

Kristy Schiller

Central Factors Liaison

kristy_schiller69@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
Janice D'Amoremaximo.jaskolski30@yahoo.comSouth LoriburghInactive$239.24
Alfredo Wisokyangus.considine48@gmail.comCarmeltonInactive$1,022.55
Gina Hartmannsuzanne_bahringer@yahoo.comLarkinfurtInactive$823.46
Dr. Edmund Mosciski IIIjanet.vonrueden94@gmail.comNew AmericavilleActive$113.90
Lynn Schmelerdevonte_kuhic-steuber66@gmail.comPort PaololandInactive$298.65
Total$2,497.80

Basic table

Table with Images

NameEmailLocationStatusBalance
Jason Bergstrom
@tyrell.goldner
johann_rath58@yahoo.comOrloboroughActive$1,046.69
Chris Rath
@ryann89
lisandro_gutmann40@gmail.comWisokymouthInactive$881.73
Alexander Leffler MD
@lincoln22
chasity_barrows@gmail.comWest RaymundohavenActive$936.88
Dr. Sidney Pagac
@bill58
serenity.schamberger78@hotmail.comNorth SantinoboroActive$178.83
Guillermo Romaguera
@jarod.smitham21
vicente.beier-legros41@yahoo.comLake AdellaActive$790.04

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Jenna Westtimothy49@gmail.comLake LourdesburyInactive$311.23
Mr. Felix Hand IVlizzie.satterfield84@gmail.comNorth RivertownInactive$508.82
Doreen Thompson IIIguido48@gmail.comGeovanyhavenInactive$969.59
Ron Gottlieb IVsunny18@gmail.comGastoniaInactive$479.81
Brittany Hyattjamar4@gmail.comMrazboroInactive$417.82
Total$2,687.27

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Sandy Kundemarilou_homenick9@hotmail.comEthelynfieldInactive$1,108.41
Orville Haaglorena_kunde12@gmail.comEberttownActive$1,019.24
Beth McKenziearno.buckridge@hotmail.comTulsaInactive$1,106.14
Ted Metzjacinthe27@yahoo.comGradyhavenActive$1,019.98
Fred Ziemannfrancesca44@gmail.comWest SalvatoreActive$1,099.19
Total$5,352.96

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Alfredo Jerde-Franeyshany.romaguera22@yahoo.comHamillsideInactive$312.65
Candace O'Connellarmand8@gmail.comLake NolaActive$39.52
Conrad Pourospiper75@gmail.comDustinburghActive$333.14
Cecilia Bechtelarshanon.dickens@hotmail.comViolalandActive$39.36
Walter Stromananais_bechtelar96@hotmail.comPawtucketInactive$1,127.51
Total$1,852.18

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
Ken Beattydameon.bernhard47@hotmail.comAlphonsocesterActive$556.70
Jeannette Watsica-Smithcarissa_kuphal@gmail.comNew LaurenceActive$1,030.96
Dr. Lawrence Keebler IVzane_connelly32@hotmail.comWhite PlainsActive$834.30
Amelia Legrosqueen_hodkiewicz@yahoo.comCedar RapidsActive$49.90
Rodolfo Ferryoscar.gerlach@gmail.comHiloActive$55.65
Total$2,527.51

Table with row selection

Card Table

NameEmailLocationStatusBalance
John Townebret63@hotmail.comSouth MicaelaActive$693.02
Malcolm Hayesadolfo.fadel1@hotmail.comTavarestonActive$62.94
Tom Cummingsthea_vandervort@hotmail.comMarlonsideInactive$258.49
Eddie Feest IIIjamey.cremin93@hotmail.comWyomingInactive$1,141.23
Lindsay Thielterence_schmeler@hotmail.comMurraystadInactive$22.15
Total$2,177.83

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
Kenneth Glovernicholas.volkman@yahoo.comFadelmouthActive$193.31
Cristina Hellermargarita.jaskolski@hotmail.comEvanstonActive$104.56
Frederick McClurekiana.jast@yahoo.comPhiladelphiaActive$438.55
Robyn Reynolds-Friesenalexie79@hotmail.comWest AlethaworthActive$1,019.20
Kelli Waltervalerie_hamill30@hotmail.comWestonInactive$1,094.11
Shane Olsonfelicity_erdman14@gmail.comRosenbaumsideActive$1,134.76
Heather Wehnerophelia31@hotmail.comLake KellieviewActive$86.46
Miss Jenna Jacobsona92@yahoo.comPollichboroInactive$696.54
Eunice Effertzada_kulas@hotmail.comNorth LillieInactive$573.05
Everett Howelorine.shields@hotmail.comCarmichaelInactive$413.10
Herbert Huelsfrancesco43@hotmail.comHodkiewiczlandInactive$1,132.47
Frances O'Connelleldora97@gmail.comFort DannieInactive$282.52
Mack Hudsoncelia.waelchi@gmail.comMcDermottstadInactive$141.12
Kathryn Grimesdana_padberg65@gmail.comMarshallsteadInactive$1,117.53
Olga Crist IIImarvin_gutmann14@hotmail.comLake StacyportActive$306.09
Total$8,733.37

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.