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$770.46
INV002UnpaidPayPal$648.42
INV003PaidCredit Card$152.26
INV004UnpaidCredit Card$538.21
INV005PendingCredit Card$564.47
INV006PaidCredit Card$168.07
INV007PaidPayPal$915.09
Total$3,756.98

Simple

Users

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

NameTitleEmailRoleActions
Imogene WelchDistrict Solutions Engineerimogene.welch19@yahoo.comMember
Zackary SchowalterDirect Creative Administratorzackary.schowalter@gmail.comMember
Louie FritschNational Web Coordinatorlouie.fritsch@yahoo.comAdmin
Kamille KlockoInternational Solutions Executivekamille_klocko@gmail.comAdmin
Susanna WunschHuman Division Supervisorsusanna.wunsch@yahoo.comViewer
Stella AndersonForward Quality Coordinatorstella_anderson@yahoo.comMember

Stacked on mobile

Users

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

NameRoleActions

Jermey Predovic

International Brand Planner

jermey_predovic38@yahoo.com

Admin

Teagan Reynolds

Direct Quality Designer

teagan.reynolds@gmail.com

Admin

Jamison Renner

Chief Factors Liaison

jamison_renner@gmail.com

Admin

Oscar Rodriguez

Regional Factors Representative

oscar.rodriguez@hotmail.com

Admin

Maximo Little

National Data Engineer

maximo_little@yahoo.com

Admin

Jesse Heathcote

Product Communications Developer

jesse.heathcote@gmail.com

Member

Sticky header

Users

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

NameRoleActions

Carolina Hickle

Lead Data Producer

carolina_hickle@gmail.com

Admin

Guillermo Huels

Human Paradigm Engineer

guillermo.huels9@gmail.com

Viewer

Grace Wilkinson

Human Response Strategist

grace.wilkinson@hotmail.com

Admin

Raquel Yundt

International Security Planner

raquel_yundt99@hotmail.com

Member

Gideon Bartoletti-Volkman

Senior Optimization Supervisor

gideon.bartoletti-volkman8@hotmail.com

Admin

Sigrid Kuhlman

Internal Tactics Associate

sigrid.kuhlman72@gmail.com

Member

Carleton Howell

Internal Metrics Agent

carleton.howell75@gmail.com

Admin

Isabelle Heathcote

Corporate Identity Consultant

isabelle.heathcote2@yahoo.com

Viewer

Preston Lebsack

Lead Intranet Consultant

preston.lebsack@yahoo.com

Member

Maryse Block

Lead Solutions Developer

maryse.block@yahoo.com

Viewer

Marjory Berge

Customer Operations Director

marjory_berge69@yahoo.com

Member

Ernesto Johnston

Global Tactics Agent

ernesto.johnston44@hotmail.com

Admin

Gertrude Langworth

Forward Accountability Representative

gertrude.langworth84@gmail.com

Viewer

Rene Veum

Customer Identity Agent

rene_veum@gmail.com

Member

Shannon Altenwerth

International Assurance Executive

shannon_altenwerth@gmail.com

Admin

Dianna Kilback

Dynamic Directives Orchestrator

dianna.kilback@yahoo.com

Member

Neoma Bechtelar

National Directives Assistant

neoma_bechtelar66@yahoo.com

Member

Elroy Jast

Central Identity Facilitator

elroy.jast@gmail.com

Viewer

Nora Stokes-Sanford

Global Branding Analyst

nora.stokes-sanford17@hotmail.com

Admin

Doris Bernhard

Future Directives Executive

doris_bernhard96@hotmail.com

Admin

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
Virgil Durgancindy.tromp78@yahoo.comOverland ParkInactive$576.83
Robyn Mitchelllonie.hagenes40@hotmail.comBalistrerihavenActive$1,078.46
Ricardo Schoengunner.parisian42@hotmail.comWest YasminhavenActive$375.64
Eugene Wizaaileen.goodwin@hotmail.comMarvinhavenActive$822.41
Sylvia Kutchharold.halvorson@hotmail.comGibsonsideInactive$427.29
Total$3,280.63

Basic table

Table with Images

NameEmailLocationStatusBalance
Abraham D'Amore
@benjamin13
aurelia_flatley@hotmail.comLake ChadlandInactive$759.87
Santos Bode
@jett_koch
maximillia_volkman@gmail.comMedhurstfurtInactive$930.48
Lamar Ferry
@alyce57
wendell.stiedemann@yahoo.comNew BritneymouthInactive$705.60
Rhonda Corkery
@viola86
corbin46@hotmail.comWatsonvilleInactive$947.37
Harvey Konopelski
@cynthia.brekke71
dan23@hotmail.comGreen BayActive$134.14

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Paulette Haleydan_schroeder75@gmail.comFort JailynInactive$216.99
Howard Harberfrancesco_witting@yahoo.comBahringertownInactive$164.85
Jeanne Wiegandarlie_stehr46@gmail.comPort AbelActive$923.95
Daniel Watersdeclan.leannon72@hotmail.comSouth HildegardshireActive$1,039.60
Courtney Langsalma.leuschke-johns38@yahoo.comWest TodtonInactive$1,002.36
Total$3,347.75

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Claudia Stokesardella.marks@hotmail.comCamdenActive$1,144.57
Mrs. Lucia Donnellyadan_von@yahoo.comTavareslandActive$345.86
Patty Hicklebethany_lehner@hotmail.comSchinnerboroInactive$655.92
Dorothy Hilpertbrando18@yahoo.comGutkowskishireInactive$1,088.23
Phillip Breitenbergwilmer_welch@hotmail.comOsinskimouthActive$556.92
Total$3,791.50

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Dr. Elijah Schillervernon_hammes@yahoo.comLindviewActive$442.83
Arnold Collinsmiguel16@hotmail.comLake ReynatonActive$532.70
Estelle Hills PhDloma.hickle@yahoo.comEl MonteActive$995.97
Carmen Hackettmilan.reynolds28@hotmail.comBradleystadActive$205.05
Lee Wintheiserlynn78@gmail.comNew ChriststadActive$639.59
Total$2,816.14

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
Leon Kuhic IIIcelestine_schultz76@yahoo.comBrownviewInactive$969.54
Barbara Lednerdarrel.boyer@hotmail.comPort ArvelInactive$266.65
Ms. Elisa Hagenescayla_bosco@hotmail.comEast LeonoraInactive$145.50
Lyle Mraz MDbernhard_buckridge35@gmail.comEast VicenteInactive$1,064.52
Genevieve Franeckikiara39@yahoo.comNorth NyahtonInactive$770.76
Total$3,216.97

Table with row selection

Card Table

NameEmailLocationStatusBalance
Kim Blanda Sr.gustave20@gmail.comJoanieburyInactive$113.74
Arnold Blickmakenna_stanton@yahoo.comKielfortActive$646.90
Hector Naderflorencio_anderson82@hotmail.comHicklelandInactive$225.12
Shelia Sporertyree.hackett@yahoo.comKrislandActive$1,062.62
Kari Robertsgerhard_morar@hotmail.comDarrelsideActive$594.66
Total$2,643.04

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
Edna Funk Sr.morton_keeling@gmail.comKlockoshireActive$634.28
Elaine Langoshkaelyn71@hotmail.comWest PasqualeburyInactive$890.64
Laura Murrayalexandre.dach90@gmail.comHermistonvilleInactive$755.15
Willard Fritschbuddy69@gmail.comPort AmericafortInactive$51.88
Robyn Kuhlmanbrant_borer23@hotmail.comNorth OrloActive$960.40
Katrina Schummamanda85@hotmail.comMilfordworthInactive$195.60
Tracy Funkselmer16@yahoo.comLake LavernInactive$712.58
Todd Nadergarfield99@yahoo.comWest HoustonfortActive$1,197.70
Randy Turcotteestella.corwin20@gmail.comLaurianestadActive$1,058.85
Mr. Craig Zboncakjoany_hilll5@gmail.comBerthaburyInactive$1,095.75
Miss Harriet Jakubowskiherminia.kozey48@yahoo.comSouth MisaelhavenActive$751.48
Agnes Shieldstatum.farrell83@hotmail.comPalm CoastInactive$421.41
Jesus Reichertsincere78@gmail.comWinfieldsideActive$925.84
Megan Leuschkejaylan.krajcik19@gmail.comCassinfurtInactive$899.29
Rachael Hegmannjoey.nader3@hotmail.comAldenburyInactive$686.53
Total$11,237.38

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.