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
INV001UnpaidPayPal$227.00
INV002UnpaidBank Transfer$480.57
INV003PendingPayPal$880.50
INV004PendingCredit Card$121.34
INV005PendingPayPal$283.53
INV006PendingPayPal$526.78
INV007PendingCredit Card$254.58
Total$2,774.30

Simple

Users

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

NameTitleEmailRoleActions
Rahsaan RyanInternational Response Developerrahsaan.ryan@yahoo.comMember
Anabelle BartellNational Usability Assistantanabelle_bartell@yahoo.comMember
Jane RohanCentral Intranet Officerjane_rohan59@yahoo.comAdmin
Bernita FramiInternational Applications Producerbernita_frami@hotmail.comViewer
Francisco GutmannGlobal Creative Agentfrancisco_gutmann98@hotmail.comMember
Georgianna AltenwerthProduct Division Assistantgeorgianna.altenwerth@gmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Keshaun Jakubowski

Human Accountability Executive

keshaun_jakubowski99@gmail.com

Admin

Mavis Kiehn

Direct Interactions Supervisor

mavis.kiehn15@gmail.com

Member

Doug Casper-Walsh

Direct Interactions Agent

doug.casper-walsh76@hotmail.com

Member

Terrence Rath

District Implementation Specialist

terrence_rath@yahoo.com

Admin

Ryder Kautzer

Central Implementation Specialist

ryder_kautzer@yahoo.com

Viewer

Rico Kuhic

Lead Assurance Manager

rico.kuhic@yahoo.com

Member

Sticky header

Users

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

NameRoleActions

Constance Cummings

Forward Solutions Technician

constance.cummings@gmail.com

Admin

Clay Brown

Global Configuration Facilitator

clay.brown61@hotmail.com

Admin

Otho Kohler-Ziemann

Direct Tactics Designer

otho_kohler-ziemann44@yahoo.com

Viewer

Stephania Satterfield

Customer Accountability Planner

stephania_satterfield@hotmail.com

Viewer

Sheila Shanahan

International Functionality Facilitator

sheila_shanahan@gmail.com

Member

Maurine Jenkins

Direct Metrics Administrator

maurine_jenkins@yahoo.com

Member

Abbie Casper

Chief Division Technician

abbie_casper28@gmail.com

Admin

Avery O'Kon

Global Creative Producer

avery_okon95@hotmail.com

Viewer

Lacey Kautzer

District Identity Designer

lacey_kautzer@hotmail.com

Admin

Roxane Morar

Future Communications Executive

roxane.morar@yahoo.com

Viewer

Tiara Mayer

Product Implementation Officer

tiara_mayer24@gmail.com

Viewer

Griffin Stehr

Dynamic Paradigm Designer

griffin_stehr@yahoo.com

Member

Aileen Greenfelder-Carter

Direct Assurance Strategist

aileen_greenfelder-carter56@yahoo.com

Viewer

Jan McClure

Chief Mobility Administrator

jan.mcclure56@yahoo.com

Member

Lavada Greenholt

Investor Intranet Associate

lavada_greenholt59@yahoo.com

Viewer

Kirstin Pollich

Senior Quality Orchestrator

kirstin.pollich6@yahoo.com

Viewer

Christa Morissette

Forward Communications Director

christa_morissette61@yahoo.com

Admin

Darius Lind

Legacy Metrics Liaison

darius.lind81@gmail.com

Member

Marcelo Pagac

Lead Factors Specialist

marcelo.pagac62@gmail.com

Member

Kobe Feil

Future Mobility Director

kobe.feil98@gmail.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
Helen Hermannafton.durgan23@gmail.comLeslycesterActive$229.24
Theresa Hoppefederico.bednar@gmail.comSkilessideActive$1,017.80
Jessie Johnsondarrell18@gmail.comColtonInactive$850.49
Vera Sawaynannetta71@hotmail.comCastro ValleyActive$44.59
Milton Klein IIeverett_ruecker-oconner@gmail.comFort SierraActive$501.84
Total$2,643.96

Basic table

Table with Images

NameEmailLocationStatusBalance
Myron Pollich
@leonel.hartmann
neoma.herman53@hotmail.comCedar HillInactive$955.49
John Ziemann
@nikita22
damaris_dare@gmail.comFort ImogeneburghActive$905.64
Cassandra Waters-Ward
@dakota.goyette
pietro_stroman0@gmail.comAlamedaInactive$316.42
Matthew Koepp
@webster_rempel69
darrion6@hotmail.comPortervilleActive$682.81
Dr. Jermaine Sawayn
@paul_davis
bernie34@gmail.comVirginia BeachActive$897.48

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Mr. John Thompsonadrianna_lueilwitz24@hotmail.comLake PrudencechesterInactive$195.53
Natalie Christiansenautumn_reynolds@hotmail.comHicksvilleActive$299.49
Jody Klockograce.marvin27@yahoo.comIdaho FallsActive$50.60
Candice Corkeryjeanie_trantow99@hotmail.comWest PenelopeburyInactive$401.87
Elsa Bauchbrady.weber@gmail.comFort NoemiviewInactive$826.42
Total$1,773.91

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Stewart Reynolds MDhollis_konopelski98@yahoo.comWest JessikafurtActive$880.25
Marvin Stiedemannmollie_little@yahoo.comSatterfieldvilleInactive$161.28
Rosa Goodwinwilburn.ondricka40@hotmail.comHilarioburghActive$698.58
Dr. Jacquelyn Effertzkacey30@hotmail.comMakennastadInactive$544.07
Patricia McGlynnanais.koelpin@hotmail.comSipessideInactive$271.71
Total$2,555.89

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Ms. Lindsey Funkdanyka43@yahoo.comLynnInactive$662.62
Hubert Runolfsdottir IIIjillian.wiegand23@hotmail.comNorth IssacInactive$1,070.60
Dr. Zachary Thompsoncharley89@gmail.comLake HughburghInactive$344.52
Simon Pagacclementina.purdy@gmail.comFort TroyActive$612.19
Joe Tremblayelva.schiller13@gmail.comSimonisvilleActive$1,091.60
Total$3,781.53

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
Gene Pollichcleve81@hotmail.comLurlinehavenActive$723.21
Kelly Faymario.huels@yahoo.comSouth MichellefurtActive$1,090.15
Judith Weimannlibby.hirthe-ernser@hotmail.comBrocktonActive$1,181.45
Arturo Buckridge-Schustereddie.parisian79@hotmail.comEast CandiceportActive$311.14
Robert Cartwrightviva.fahey@gmail.comJanetfurtInactive$1,107.51
Total$4,413.46

Table with row selection

Card Table

NameEmailLocationStatusBalance
Dr. Van Sporerjohnathan_murazik32@hotmail.comNorth MonaActive$948.66
Miranda Willmsgaetano_block79@yahoo.comThompsoncesterInactive$245.10
Horace Rogahnalek19@gmail.comPort KatlynnActive$91.24
Mrs. Vicky Bernharddevin_franey10@hotmail.comEast OrangeInactive$190.34
Geraldine Konopelskialycia_anderson@gmail.comSouth AyanaInactive$97.76
Total$1,573.10

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
Irving Kovacek-Bahringeraustin_von@gmail.comSierra VistaActive$223.69
Geoffrey Feil IIImaureen.luettgen@yahoo.comNew BrunswickInactive$106.82
Dewey Langadeline_pfannerstill@yahoo.comMaureenbergInactive$448.48
Jaime Quigleyrowland_veum@yahoo.comWest KobyfortInactive$346.31
Mindy Ortizmorris_ebert86@gmail.comGrand IslandInactive$769.32
Mr. Roberto Haagemmy.mckenzie@gmail.comFall RiverActive$688.34
Clyde Crookskennedi13@yahoo.comLehnercesterActive$798.91
Roderick Littleaugusta_terry@hotmail.comPittsburghActive$480.96
Clayton Kuhlman-Hettingerbrenda.mante@hotmail.comPort MallorystadInactive$844.51
Mrs. Tricia Hillllon.schaefer26@yahoo.comNew MerleActive$466.99
Oscar Kochyasmine.padberg@yahoo.comFolsomInactive$3.38
Wayne Pfannerstillraven_brakus5@yahoo.comLeannonchesterActive$150.95
Jerald Turnerafton_bayer@hotmail.comMillstonInactive$993.70
Van Rowe IIantonio89@hotmail.comTwilaportActive$402.65
Jenna Fahey DDSmarlon.heathcote21@gmail.comLake MarlenActive$1,196.21
Total$7,921.22

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.