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
INV001PendingPayPal$503.73
INV002UnpaidCredit Card$912.12
INV003PendingCredit Card$576.18
INV004PendingCredit Card$388.84
INV005UnpaidBank Transfer$334.29
INV006UnpaidBank Transfer$206.78
INV007UnpaidPayPal$288.32
Total$3,210.26

Simple

Users

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

NameTitleEmailRoleActions
Filomena WunschInvestor Optimization Specialistfilomena.wunsch79@gmail.comAdmin
Rupert RunolfsdottirLead Infrastructure Assistantrupert.runolfsdottir22@hotmail.comMember
Elliott McClureCentral Research Designerelliott_mcclure64@hotmail.comViewer
Eva HyattLead Solutions Facilitatoreva.hyatt@yahoo.comViewer
Nico HoweNational Paradigm Administratornico_howe@yahoo.comMember
Kaleigh DachProduct Research Officerkaleigh_dach2@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Betty Stamm

Direct Functionality Executive

betty.stamm13@hotmail.com

Viewer

Christine Block

National Quality Analyst

christine.block6@gmail.com

Member

Zackary Marks

National Tactics Liaison

zackary_marks@yahoo.com

Member

Sydnie Kuhlman-Goldner

Direct Operations Supervisor

sydnie.kuhlman-goldner68@yahoo.com

Admin

Michel Rodriguez

Internal Security Liaison

michel_rodriguez@hotmail.com

Member

Oliver Stoltenberg

Chief Metrics Orchestrator

oliver.stoltenberg45@hotmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Rubie Reilly

Central Optimization Designer

rubie_reilly@hotmail.com

Viewer

Alexie Pollich-Walker

Dynamic Group Director

alexie.pollich-walker41@gmail.com

Member

Ted Runolfsson

Investor Factors Officer

ted.runolfsson@hotmail.com

Viewer

Sophie Bartell

National Configuration Administrator

sophie.bartell@hotmail.com

Admin

Monte Purdy-Collier

Corporate Marketing Representative

monte.purdy-collier8@gmail.com

Admin

Nash Roob

Customer Optimization Orchestrator

nash_roob@yahoo.com

Member

Lillie Renner-Grant

Central Communications Associate

lillie.renner-grant0@yahoo.com

Viewer

Lawson Klocko

Human Implementation Supervisor

lawson_klocko@gmail.com

Member

Shannon Ratke

Chief Security Agent

shannon_ratke@yahoo.com

Admin

Eve Zieme

Lead Intranet Developer

eve.zieme14@yahoo.com

Admin

Cathy Smith

Dynamic Data Technician

cathy_smith@gmail.com

Viewer

Brandon Skiles

Regional Creative Liaison

brandon_skiles90@gmail.com

Member

Blanche Lebsack

Lead Tactics Assistant

blanche.lebsack@hotmail.com

Member

Janis Christiansen

Regional Accountability Coordinator

janis_christiansen@yahoo.com

Admin

Geovany Borer

Corporate Program Planner

geovany_borer58@gmail.com

Member

Clinton Leffler

Senior Factors Analyst

clinton.leffler95@gmail.com

Admin

Hayden Howell

Investor Accounts Supervisor

hayden_howell43@hotmail.com

Admin

Jaycee Reichel

International Markets Designer

jaycee_reichel70@gmail.com

Viewer

Kayla Willms

Corporate Creative Planner

kayla_willms@gmail.com

Admin

Lindsay Jenkins

Regional Markets Producer

lindsay.jenkins@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
Mr. Ray Steubershyanne.hagenes4@hotmail.comFort CordeliashireActive$872.41
Dr. Bobbie Ornbirdie_corkery39@yahoo.comOrinboroughInactive$130.05
Janet Johnssilas.tillman29@yahoo.comPort BrielleActive$865.25
Gregory Moore-Hesselterrell_greenfelder@gmail.comSan AngeloInactive$849.65
Dr. Roger Parker-Kovacekdelmer.koelpin26@gmail.comD'AmoreworthActive$27.03
Total$2,744.39

Basic table

Table with Images

NameEmailLocationStatusBalance
Glenn Herzog
@christine.hayes
dannie.schneider22@yahoo.comCruzsideInactive$1,058.50
Cary Greenholt
@may41
shea_dietrich30@hotmail.comLonieworthInactive$298.25
Cameron Ernser
@luella.russel
name4@hotmail.comSkylarworthInactive$916.84
Lucas Will
@rosalee_anderson61
chadrick93@hotmail.comOberbrunnerburyActive$249.44
Samantha Keebler MD
@hailey_kirlin
quinten.ritchie35@hotmail.comMarjorieviewActive$1,082.62

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Winifred Boehmmalvina_barton36@yahoo.comWardfieldInactive$1,028.42
Eva Shanahandortha_daugherty@yahoo.comWilmingtonActive$225.72
Ethel Carterkaylah_kemmer@gmail.comDonshireActive$1,094.36
Jessie Greenmarcella_wolff@yahoo.comLysannesideActive$1,078.40
Cora Swaniawskijerome10@hotmail.comEuclidActive$1,122.28
Total$4,549.18

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Kim Jastoma.parisian@gmail.comFlorence-GrahamInactive$363.85
Neal Haleycolin70@hotmail.comNew AraActive$433.09
Mr. Leonard Nitzschecharles81@yahoo.comFort RaphaellelandInactive$296.61
Ms. Isabel Jastjayde48@yahoo.comAllentownActive$580.63
Carla Nitzsche IIIterrence60@hotmail.comLake ClayInactive$824.32
Total$2,498.50

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Dr. Barry Bahringermichael99@yahoo.comLake DamionportInactive$229.78
Cody Krajcik-Trompdante47@hotmail.comValentinamouthActive$1,067.41
Della Starkandres78@gmail.comJuniorfieldActive$1,101.61
Dr. Johnathan Schillerchadrick_hilpert-hammes47@yahoo.comLake GrantActive$12.60
Veronica Sanfordlolita3@hotmail.comSouth MarleeburghInactive$33.25
Total$2,444.65

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
Pedro Tillmanmara.mayer91@gmail.comTyrellburyActive$216.75
Karla Loweleslie.dooley@yahoo.comWest YoshikoActive$83.93
Ashley Starkwilmer28@yahoo.comConsidinefortInactive$1,056.05
Bruce O'Reillynash.bednar@gmail.comFayburghInactive$580.70
Sadie Schmeler-Paucekgrayson_johns@hotmail.comWalnut CreekActive$218.69
Total$2,156.12

Table with row selection

Card Table

NameEmailLocationStatusBalance
Faith Koepp DDSjudson.lakin72@gmail.comHuntsvilleInactive$1,198.49
Ernestine Kertzmanncristina_anderson@hotmail.comWest JanickActive$1,061.25
Ms. Elaine Runtealbina.kutch87@gmail.comChristinaboroActive$518.16
Clyde O'Connellal.streich6@gmail.comJoburghInactive$1,126.30
Erika Leschlavon_mcglynn96@yahoo.comNorth TommieActive$698.50
Total$4,602.70

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
Gertrude Boscolinnea24@yahoo.comBrantmouthActive$866.13
Minnie Flatleymadisyn_barton@gmail.comSwiftlandActive$1,183.97
Rachel Maggioalthea_ohara75@gmail.comCorwinsteadActive$126.95
Robin Monahankarley.lakin14@hotmail.comEsmeraldaburghActive$990.74
Lois McClurecamden21@gmail.comLake GwendolynInactive$1,042.29
Jacob Kundekattie.graham29@gmail.comSouth JeffereyActive$334.80
Gertrude Colliercolumbus.conn44@hotmail.comFort DemetrisInactive$920.27
Leo Murphy-Luettgenarthur44@hotmail.comWest DillanActive$34.75
Ruth Collier IIashleigh.bruen30@hotmail.comFort IsabelleInactive$947.88
Shelia Howeannamae20@hotmail.comMcLaughlinburghActive$64.85
Laurence Terry PhDmargie.ward73@hotmail.comPort EulaInactive$606.83
Megan Lubowitzselina96@yahoo.comNew GinoportInactive$38.11
Mattie Sauer-Russelwava.macgyver-koepp98@gmail.comFort FlorineActive$196.89
Winifred Denesikmariah_morissette@gmail.comPort SadyeInactive$1,076.43
Mr. Nelson Wuckertholden.hintz@hotmail.comCuyahoga FallsInactive$153.43
Total$8,584.32

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.