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
INV001UnpaidCredit Card$128.37
INV002PendingPayPal$769.21
INV003PaidPayPal$566.74
INV004PaidBank Transfer$536.77
INV005PendingBank Transfer$615.38
INV006PendingPayPal$544.29
INV007UnpaidPayPal$284.46
Total$3,445.22

Simple

Users

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

NameTitleEmailRoleActions
Deven WymanDynamic Marketing Assistantdeven.wyman72@hotmail.comViewer
Wayne BlickInternal Paradigm Liaisonwayne_blick16@yahoo.comAdmin
Price NaderCustomer Security Architectprice.nader45@gmail.comAdmin
Lauryn LednerInternal Security Officerlauryn_ledner@gmail.comViewer
Marie VeumDynamic Metrics Agentmarie.veum82@yahoo.comAdmin
Ernest FadelProduct Implementation Analysternest_fadel56@gmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Owen Cormier

Senior Division Consultant

owen_cormier2@gmail.com

Member

Noemi Bergstrom

Corporate Mobility Director

noemi_bergstrom19@yahoo.com

Member

Julio Treutel

Future Configuration Associate

julio_treutel34@hotmail.com

Member

Rosie Carroll

Chief Security Administrator

rosie_carroll@hotmail.com

Admin

Greg Donnelly

Legacy Data Architect

greg_donnelly50@gmail.com

Admin

Colby O'Kon

Internal Configuration Assistant

colby_okon@gmail.com

Member

Sticky header

Users

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

NameRoleActions

Alize Rohan

Product Integration Administrator

alize_rohan@hotmail.com

Admin

Jakob Stroman

Direct Assurance Developer

jakob_stroman75@yahoo.com

Viewer

Liam Volkman

Dynamic Markets Coordinator

liam_volkman18@yahoo.com

Admin

Ned Witting

Human Factors Facilitator

ned.witting@gmail.com

Viewer

Camryn Little

Forward Directives Manager

camryn.little@hotmail.com

Admin

Muriel Homenick

Central Factors Assistant

muriel.homenick20@hotmail.com

Viewer

John Abernathy

Global Tactics Coordinator

john_abernathy@hotmail.com

Viewer

Nick Roberts

Legacy Identity Administrator

nick_roberts71@hotmail.com

Member

Caleigh Harber

National Brand Consultant

caleigh.harber80@hotmail.com

Member

Pascale Collins

National Directives Administrator

pascale_collins@yahoo.com

Viewer

Simone Quitzon

Dynamic Intranet Associate

simone.quitzon95@yahoo.com

Admin

Cecelia Emmerich

Chief Division Liaison

cecelia_emmerich3@hotmail.com

Viewer

Al Runolfsdottir

Forward Configuration Architect

al.runolfsdottir@yahoo.com

Admin

Germaine Schinner

Dynamic Applications Manager

germaine_schinner35@yahoo.com

Member

Roderick Swift

Human Operations Liaison

roderick.swift@yahoo.com

Viewer

Tod Wuckert

Product Data Assistant

tod.wuckert@yahoo.com

Viewer

Norwood Price

Lead Research Liaison

norwood_price11@hotmail.com

Viewer

Lamar Osinski

Investor Division Director

lamar_osinski@gmail.com

Member

Ulises Haag

Forward Web Designer

ulises.haag75@hotmail.com

Admin

Derick Ratke

Chief Implementation Orchestrator

derick.ratke@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
Alma Bodekeanu28@gmail.comBolingbrookActive$38.72
Amanda Fisher Sr.furman_hodkiewicz@yahoo.comDelbertmouthInactive$438.83
Elias Schummfrancesca61@hotmail.comChula VistaActive$407.75
Willie Erdmanmichael_metz@hotmail.comLake BrittanyInactive$255.88
Billie McGlynnreese.schaefer89@hotmail.comJohnson CityInactive$489.84
Total$1,631.02

Basic table

Table with Images

NameEmailLocationStatusBalance
Edmund Mosciski
@marilyne_jacobs34
damion.ritchie84@yahoo.comLake WinifredActive$826.82
Sharon Reinger
@hollis.emard
floy36@gmail.comFort EmmettInactive$792.17
Jeannette Schamberger
@santina96
zackary_kemmer99@gmail.comHaltom CityInactive$521.94
Sara Prosacco
@winnifred_bahringer94
reggie.mante@gmail.comFort WernerburghActive$760.47
Leona Stokes
@sincere.kerluke51
mathias.boehm79@gmail.comAlessandraviewInactive$522.22

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Diane Dibbertcordia_ortiz66@hotmail.comTexas CityActive$657.79
Miss Barbara Carroll IIjed.ledner22@gmail.comWest EvangelinetownInactive$1,085.85
Dr. Maryann Wehnershannon.raynor@gmail.comMcLaughlincesterInactive$1,166.48
Lynda Rippinpedro71@gmail.comRevaportActive$1,062.19
Sandy Koelpinlon_daugherty-tillman79@yahoo.comWelchchesterInactive$191.20
Total$4,163.51

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Gabriel Koeppvern.bernhard@yahoo.comTrentonInactive$33.15
Chad Doylenathan_kertzmann@hotmail.comSouth AgustinInactive$635.49
Natalie Herzogbirdie78@gmail.comWilliamsonsteadInactive$114.91
Adrienne Streicharaceli35@yahoo.comWatsicatonActive$368.53
Danny Watsicahassan1@hotmail.comNienowburghInactive$53.11
Total$1,205.19

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Antoinette Wilkinsonminerva.daugherty@hotmail.comHaileecesterActive$1,120.95
Gary Davisdemetris_boehm71@hotmail.comMoriahhavenInactive$575.60
Lloyd Prohaskaqueen35@gmail.comDallinmouthActive$226.28
Phillip D'Amorequeen.bergnaum@hotmail.comFort PrudenceInactive$406.33
Angelina Adamsjohan15@hotmail.comSadiechesterActive$853.59
Total$3,182.75

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
Cedric Nienowtony72@hotmail.comPowlowskifurtActive$910.55
Ira Bradtke Ieryn.bogan@yahoo.comFort RiverboroInactive$102.58
Cecelia Howellmayra_wiegand@gmail.comNorth PaulstadActive$66.89
Laverne Boganotho77@yahoo.comNew LorenzbergActive$1,134.58
Steve Schummdudley_feest@hotmail.comNew MasoncesterActive$471.10
Total$2,685.70

Table with row selection

Card Table

NameEmailLocationStatusBalance
Norma Turcottevicky_rosenbaum9@yahoo.comWestfurtActive$209.55
Daisy Jenkinsmarcus_wisozk@yahoo.comEast ReyesboroActive$830.82
Nadine Beermeggie65@hotmail.comLake CurtchesterActive$782.84
Dr. Sylvester Baumbachroxane_mcclure@hotmail.comWest Des MoinesInactive$280.30
Carl Hickleesther_windler88@yahoo.comLloydboroInactive$1,174.42
Total$3,277.93

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
Rex Lebsackalfonzo.murphy5@yahoo.comFort GillianmouthActive$584.00
Andres Fishertravis_beatty@yahoo.comRennerworthActive$877.80
Laverne Sipesmaxine.jones@yahoo.comLake VidalInactive$134.48
Bob Legros-Bergnaumjunior.hodkiewicz22@yahoo.comLestershireInactive$442.45
Rick Bahringer Jr.helen26@hotmail.comNew BedfordActive$656.05
Dr. Rolando Lubowitzmeghan.stoltenberg74@hotmail.comColorado SpringsActive$247.36
Matt Collier PhDkatarina_treutel92@gmail.comFort LibbyburghInactive$32.41
Jorge Leschrussel.daniel@yahoo.comNorth RoderickportActive$851.08
Ethel Christiansen Sr.sadye43@gmail.comNew CullenburyInactive$984.32
Erik Heidenreichkennedi32@yahoo.comNellaportInactive$847.14
Cary Dickenstheresia_hilpert83@hotmail.comJoliecesterActive$433.71
Robin Quitzon DDSyesenia.schumm51@gmail.comKirlinviewActive$275.14
Mr. Jared Handomer.quigley81@yahoo.comSouth MistysideInactive$685.94
Emmett Morissetterodolfo.feeney18@hotmail.comNorth HoustonActive$472.29
Dr. Jon Koelpinruth.durgan@hotmail.comBerniemouthInactive$609.36
Total$8,133.53

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.