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
INV001PaidCredit Card$303.98
INV002UnpaidCredit Card$332.13
INV003PendingCredit Card$737.37
INV004PendingPayPal$857.53
INV005PendingBank Transfer$545.06
INV006PaidPayPal$344.78
INV007UnpaidPayPal$922.39
Total$4,043.24

Simple

Users

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

NameTitleEmailRoleActions
Reilly RunolfsdottirDirect Assurance Supervisorreilly.runolfsdottir@gmail.comAdmin
Adrian Wintheiser-BernierProduct Tactics Supervisoradrian.wintheiser-bernier50@hotmail.comViewer
Lila O'ConnellFuture Communications Facilitatorlila_oconnell53@gmail.comAdmin
Bryan LegrosNational Tactics Liaisonbryan.legros99@yahoo.comAdmin
Letha SwiftCorporate Communications Supervisorletha.swift26@gmail.comViewer
Angelina SchadenLegacy Research Analystangelina_schaden@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Jorge Medhurst

Direct Mobility Designer

jorge.medhurst@gmail.com

Viewer

Carolina Littel

District Tactics Producer

carolina.littel26@hotmail.com

Admin

Vincent Bayer

Corporate Directives Officer

vincent_bayer@yahoo.com

Member

Sheryl Tremblay

Lead Group Developer

sheryl_tremblay@hotmail.com

Viewer

Ed Howe

Customer Quality Representative

ed.howe60@hotmail.com

Member

Emma Wiegand

Direct Program Representative

emma_wiegand56@yahoo.com

Viewer

Sticky header

Users

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

NameRoleActions

Lorenz Torp

District Communications Developer

lorenz.torp@yahoo.com

Viewer

Americo Herzog

Regional Creative Technician

americo_herzog@gmail.com

Member

Beverly Kertzmann

Senior Assurance Coordinator

beverly.kertzmann76@hotmail.com

Member

Tyreek Brakus

Direct Marketing Liaison

tyreek_brakus@yahoo.com

Viewer

Wilbert Tillman

Future Group Assistant

wilbert.tillman@gmail.com

Member

Ramona Ratke

Principal Marketing Representative

ramona_ratke84@yahoo.com

Admin

Deion Erdman

District Usability Analyst

deion.erdman@yahoo.com

Admin

Naomi Labadie

Lead Accountability Architect

naomi_labadie95@yahoo.com

Member

Geovany Sauer

Central Brand Manager

geovany.sauer@hotmail.com

Viewer

Roman Kuhlman

Direct Directives Engineer

roman_kuhlman@gmail.com

Viewer

Maegan D'Amore

Dynamic Functionality Liaison

maegan.damore@yahoo.com

Viewer

Clara Botsford

Chief Infrastructure Architect

clara_botsford@hotmail.com

Member

Dedric Heller

Regional Implementation Strategist

dedric_heller@gmail.com

Viewer

Nels Zemlak

Investor Functionality Strategist

nels_zemlak68@yahoo.com

Viewer

Morton Cartwright

National Configuration Analyst

morton_cartwright98@gmail.com

Member

Patty Murazik

Customer Intranet Engineer

patty.murazik20@yahoo.com

Member

Tomas Ward

Chief Division Consultant

tomas_ward35@gmail.com

Admin

James Hodkiewicz

Internal Solutions Manager

james_hodkiewicz29@yahoo.com

Member

Paul Schimmel

Regional Factors Orchestrator

paul_schimmel24@hotmail.com

Viewer

Veda Yundt

Senior Optimization Supervisor

veda_yundt@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
Titus Satterfield Sr.morton.corwin@gmail.comSteviemouthActive$1,087.36
Hailie Flatleywilford7@hotmail.comNorth MarlenecesterInactive$400.76
Dale Dickensmelisa46@hotmail.comSouth CharlotteInactive$1,115.93
Randal Blickalden44@yahoo.comBarryfurtInactive$743.73
Kiel Schowalterpete_cole97@hotmail.comPort PattystadInactive$111.61
Total$3,459.39

Basic table

Table with Images

NameEmailLocationStatusBalance
Alfonso Bogan
@connie12
timothy68@yahoo.comPort DaveActive$1,149.37
Ms. Kadin Wisoky
@mikayla55
amanda.bashirian33@yahoo.comBethlehemInactive$300.54
Ken Parker
@gerald.armstrong24
margie.huels@gmail.comBoca RatonActive$957.45
Bruce Kuphal
@naomi_damore31
derek_fay65@gmail.comFort RomanhavenActive$405.38
Maryann Baumbach
@flavie59
garrett_klein-runolfsdottir@yahoo.comErnestfurtActive$987.53

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Edwin Runolfsson PhDmarlon_skiles@yahoo.comMcKinneyActive$422.00
Crystal Wymansadye54@yahoo.comFort SheaInactive$310.36
Martin Ritchieroman.halvorson96@yahoo.comMeredithcesterActive$253.06
Clarence Balistrerileo25@gmail.comNorth PortActive$140.51
Paulette Howeathena87@yahoo.comFort BrendanhavenActive$865.29
Total$1,991.22

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Santiago Langoshkatlynn_runolfsson11@yahoo.comStoltenbergsideActive$1,131.14
Verona Kshlerinenrique_braun97@gmail.comWest BarbarachesterInactive$1,154.30
Tommie Larkinfelipe_mcdermott@hotmail.comMcCulloughsteadActive$517.30
Mrs. Daphne Faheyhaleigh69@hotmail.comSouth BethelworthInactive$1,115.43
Joannie Ortizerica_mraz86@yahoo.comLake AdolphboroActive$659.44
Total$4,577.61

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Kristina D'Amorelinda55@gmail.comRolfsonburyActive$73.02
Trisha Schimmelbilly.kling87@yahoo.comTopekaInactive$1,091.27
Marian Lehnerlatoya.kerluke@hotmail.comNorth BrandishireActive$532.19
Mr. Tim Mayerenos_ziemann@gmail.comFontanaActive$19.10
Marilyne Heidenreichnedra.satterfield@hotmail.comKosstownActive$1,036.79
Total$2,752.37

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
Gregory Marksjonathan_nader@yahoo.comWest RooseveltportInactive$731.79
Melanie Lockmanmaddison_mayert@gmail.comWest MitchellburghActive$20.98
Ms. Bridget Prosaccocaleb_schimmel@hotmail.comHaywardActive$438.53
Daron McKenziemarcelino29@hotmail.comPort ViolettonInactive$733.29
Graham Spencermichaela.wiza@gmail.comNorth JeremytownActive$654.42
Total$2,579.01

Table with row selection

Card Table

NameEmailLocationStatusBalance
Maiya Pagacdavonte.brakus@yahoo.comEast EsperanzaActive$272.40
Mrs. Giles Roobmatthew86@gmail.comEast IraburghInactive$1,083.86
Darin Kohlercheyanne.bailey@hotmail.comPittsburghInactive$217.27
Ms. Samantha Binsmariane69@yahoo.comSouth StellaburghActive$329.78
Luther Bradtkeviolet.cartwright19@yahoo.comRatke-ToycesterActive$200.81
Total$2,104.12

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
Naomie Kassulkeedmund.spencer@yahoo.comSouth GiovannaActive$1,192.21
Martha Connellyrosendo.carter92@hotmail.comConnsteadInactive$1,156.74
Iliana Wisozkdarian_orn@hotmail.comLoyburghInactive$233.14
Mr. Gerry Wymanjonathon_west60@yahoo.comFort CyrilActive$514.79
Laurie Gloveralyssa.hahn@yahoo.comEast AlfredInactive$434.43
Jodie Kesslernaomi.daugherty63@gmail.comLarkintownInactive$625.87
Trace Franeyjames.barrows84@hotmail.comGlendaleActive$226.29
Amos Keelingkelsie.ebert51@gmail.comHomerbergActive$31.27
Enrique Altenwerthjimmie_haag@yahoo.comNorth CherylInactive$243.45
Pietro Brownjana52@hotmail.comLake LoreneActive$1,043.78
Becky Marquardtraquel.jacobs66@hotmail.comEast VladimirActive$40.69
Bernadette Luettgenrudolph.beer70@yahoo.comWest VickiInactive$891.97
Melvina Wuckertcleora_crooks@gmail.comNorth ShawnActive$310.32
Kate Waelchi Jr.milton_schuppe@gmail.comCourtneylandInactive$695.00
Lula Lemke DDSneal18@hotmail.comWoodlandInactive$821.69
Total$8,461.64

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.