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
INV001PaidPayPal$481.39
INV002PaidCredit Card$754.39
INV003PendingCredit Card$690.26
INV004PaidPayPal$930.10
INV005PendingCredit Card$673.14
INV006PendingBank Transfer$521.53
INV007PendingBank Transfer$240.97
Total$4,291.78

Simple

Users

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

NameTitleEmailRoleActions
Tina NikolausFuture Creative Strategisttina.nikolaus@hotmail.comMember
Terence FraneyForward Response Coordinatorterence.franey@yahoo.comViewer
Omari MarksDistrict Integration Architectomari.marks64@gmail.comMember
Frank CummingsGlobal Interactions Architectfrank.cummings71@hotmail.comMember
Frederick RennerInternational Configuration Facilitatorfrederick.renner@gmail.comAdmin
Carolyn CormierCorporate Mobility Consultantcarolyn.cormier87@yahoo.comMember

Stacked on mobile

Users

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

NameRoleActions

Claire Kuhn

Central Identity Analyst

claire_kuhn66@gmail.com

Member

Kelsi Dooley

Central Web Engineer

kelsi.dooley@hotmail.com

Viewer

Nicholas Fadel

Human Brand Specialist

nicholas_fadel47@yahoo.com

Member

Travis Kerluke

Forward Marketing Specialist

travis_kerluke@yahoo.com

Member

Alberta Walter

Product Metrics Executive

alberta_walter@gmail.com

Viewer

Frances Friesen

Future Paradigm Planner

frances_friesen22@gmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Silas Sporer

Principal Quality Coordinator

silas.sporer59@yahoo.com

Admin

Opal Beer

Product Markets Specialist

opal_beer35@yahoo.com

Admin

Elsie Fahey

Customer Integration Producer

elsie.fahey62@yahoo.com

Admin

Amos Parker

Investor Brand Administrator

amos.parker74@yahoo.com

Viewer

Georgia Osinski

Direct Infrastructure Orchestrator

georgia.osinski4@gmail.com

Viewer

Blair Bernhard

Human Applications Specialist

blair.bernhard@hotmail.com

Viewer

Curtis Grimes

Legacy Applications Producer

curtis_grimes@hotmail.com

Member

Celestino Murphy

Legacy Optimization Coordinator

celestino.murphy@hotmail.com

Member

Curtis McLaughlin

Lead Infrastructure Assistant

curtis.mclaughlin40@yahoo.com

Member

Randy Tromp

Product Configuration Engineer

randy_tromp@yahoo.com

Member

Sabina Kilback

International Web Analyst

sabina_kilback24@yahoo.com

Viewer

Nadine Volkman

Direct Accounts Planner

nadine.volkman@yahoo.com

Viewer

Grace Bednar

Lead Communications Technician

grace.bednar@yahoo.com

Viewer

Ashly Jakubowski

Lead Creative Strategist

ashly_jakubowski40@yahoo.com

Viewer

Brook Cassin

Future Tactics Coordinator

brook_cassin@hotmail.com

Viewer

Ronald Barton

Internal Security Engineer

ronald.barton28@yahoo.com

Member

Garrett Gutmann

Investor Mobility Orchestrator

garrett.gutmann51@hotmail.com

Viewer

Desmond Becker

Direct Paradigm Facilitator

desmond.becker22@gmail.com

Admin

Sue McLaughlin

Investor Optimization Officer

sue_mclaughlin@yahoo.com

Admin

Emmy Windler-VonRueden

Corporate Division Planner

emmy_windler-vonrueden1@hotmail.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
Gordon Skilesramiro28@gmail.comLucioviewActive$250.79
Roxanne Olsongarfield48@yahoo.comNew JensenstadInactive$794.80
Weldon Larsonanita6@hotmail.comFort DonnellInactive$977.95
Jermain Franeylewis70@yahoo.comPort MarjoryInactive$708.13
Meredith Medhurstarnold_bradtke@gmail.comRaphaelviewInactive$917.75
Total$3,649.42

Basic table

Table with Images

NameEmailLocationStatusBalance
Debbie Lowe
@lauretta_mosciski66
angel.wehner@yahoo.comSouth KeeleyActive$720.06
Jeffery O'Hara
@jodie.effertz88
vernon.hartmann7@gmail.comSchultztownInactive$1,086.04
Alva Skiles
@brandt.altenwerth86
john_macejkovic20@hotmail.comFort AkeemInactive$182.88
Stephon Considine
@nina39
billie_shields@hotmail.comBendInactive$811.45
Dillon Olson
@jeanie.haley
dorcas_botsford@hotmail.comDeliafortActive$543.63

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Ronnie Schillerdevin7@hotmail.comStaceysideInactive$949.80
Cedric Cormiermeda72@gmail.comNorth MellieInactive$391.86
Dr. Elliott Gleasonfoster_hartmann@gmail.comPort AstridActive$411.20
Stanford Yosteuna.dach15@gmail.comBrocktonInactive$468.57
Minnie Durganalton75@hotmail.comRatkebergInactive$509.74
Total$2,731.17

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Lafayette Mayercarole44@yahoo.comWest MadilynInactive$566.47
Rudolph Mayertchester.huel11@yahoo.comHendersonvilleActive$944.62
Ryleigh Kassulkeisac_konopelski18@gmail.comPort RosannaInactive$535.58
Jodi Leannonjessyca.howe@hotmail.comNew DejaInactive$1,011.87
Harold Lebsackeddie47@hotmail.comNorth MiamiInactive$456.69
Total$3,515.23

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Marjory Bartoletti Ijaycee.hahn@yahoo.comEast BellaActive$72.83
Devan Runtemaria_ritchie58@hotmail.comCristmouthInactive$1,119.16
Sheryl Zemlakstuart.bogan@gmail.comNorth KianhavenInactive$555.37
Kelli Littelbernice45@hotmail.comSanta BarbaraActive$495.72
Lowell Rosenbaumjohnny.pfeffer@gmail.comPort CordellboroActive$1,114.48
Total$3,357.56

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
Elaine Beckerkay10@gmail.comNorth KathrynInactive$58.99
Dortha Weissnatsylvester_hermann@gmail.comWest HildasteadInactive$1,019.21
Edgardo Brakuslelah_cronin@hotmail.comCelestinevilleInactive$490.01
Jose Muellermichael.schamberger85@yahoo.comWest HannahavenActive$835.26
Gregg Johnston-Hills IIjeffrey56@yahoo.comAniyahviewInactive$260.67
Total$2,664.14

Table with row selection

Card Table

NameEmailLocationStatusBalance
Clyde Murphybrandon_erdman17@hotmail.comNew KieranActive$402.47
Pedro Franeyterrance_kuphal@hotmail.comSan Luis ObispoInactive$64.07
Humberto Ernserwellington.kutch-paucek71@gmail.comLake ShainaburyActive$359.32
Robin Darekellie.kerluke29@hotmail.comLake StanleyInactive$897.88
Teresa Mitchellrodolfo_sipes42@hotmail.comDerecksideInactive$21.10
Total$1,744.84

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
Marlin Farrell DVMkayla.pfeffer@yahoo.comHuntingtonActive$645.78
Wallace Champlinmelanie.barton@yahoo.comBoylefortInactive$312.93
Clay Greenfelderjulius_feest@yahoo.comJoanneworthActive$234.73
Victor Mosciskicandace_mraz-sauer@yahoo.comMayerfortInactive$46.55
Faye Cruickshank MDalessandra11@yahoo.comSpencerfortInactive$717.91
Mohammed Whitejacinto.bosco@gmail.comFort CharlieActive$737.85
Winifred Halvorsonwinifred40@yahoo.comLavonnehavenInactive$461.70
Chelsea Leannonlana_collins@yahoo.comGastonportActive$866.73
Naomie Rodriguezlela_lemke@yahoo.comSouth RubenInactive$376.89
Alexandria Kozeycourtney.deckow60@yahoo.comHooverInactive$499.69
Manuel Boyertess.kris7@hotmail.comMannboroActive$36.98
Evangeline McKenzie-Heidenreichkirsten_christiansen70@hotmail.comGutkowskishireActive$643.10
Karli Kovacekhalie.schiller@hotmail.comNew MariannesideInactive$575.18
Leora Caspershari69@yahoo.comLake FavianInactive$925.83
Jo Westglennie.ankunding@gmail.comWest GriffinActive$204.75
Total$7,286.60

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.