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$978.18
INV002PendingPayPal$798.05
INV003PendingCredit Card$484.25
INV004PaidPayPal$768.84
INV005PaidCredit Card$222.81
INV006PendingCredit Card$915.27
INV007PendingPayPal$176.23
Total$4,343.63

Simple

Users

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

NameTitleEmailRoleActions
Shanie KulasGlobal Creative Architectshanie.kulas53@hotmail.comMember
Florine PollichInvestor Functionality Orchestratorflorine_pollich@hotmail.comViewer
Beryl HartmannHuman Program Designerberyl_hartmann68@gmail.comAdmin
Silas QuitzonChief Data Facilitatorsilas_quitzon@hotmail.comAdmin
Mariam WeberInternational Mobility Coordinatormariam_weber@hotmail.comViewer
Liliane StiedemannGlobal Research Specialistliliane_stiedemann@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Julie Becker

Legacy Communications Specialist

julie.becker@gmail.com

Member

Else Kessler

Chief Division Architect

else.kessler89@yahoo.com

Admin

Kaylee Murray

Product Integration Developer

kaylee_murray91@hotmail.com

Admin

Rossie Torphy

Forward Identity Producer

rossie.torphy52@yahoo.com

Member

Buford Lynch

Chief Brand Officer

buford.lynch58@yahoo.com

Viewer

Ruben Waters

Forward Paradigm Strategist

ruben.waters68@yahoo.com

Viewer

Sticky header

Users

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

NameRoleActions

D'angelo Flatley

Forward Security Supervisor

dangelo_flatley@yahoo.com

Member

Kelvin Brown

Central Operations Representative

kelvin.brown@gmail.com

Member

Kenya Sporer

District Markets Supervisor

kenya_sporer@gmail.com

Admin

Constance Homenick

District Directives Executive

constance_homenick@yahoo.com

Viewer

Liana Turner

Corporate Metrics Engineer

liana_turner80@yahoo.com

Member

Hilton Jacobi

Internal Paradigm Coordinator

hilton_jacobi@gmail.com

Admin

Isaias Raynor

Direct Identity Architect

isaias_raynor@gmail.com

Viewer

Terrance Schaden

Senior Branding Executive

terrance.schaden98@gmail.com

Viewer

Helene Romaguera

Chief Usability Representative

helene.romaguera91@gmail.com

Member

Enola Lueilwitz

Legacy Implementation Supervisor

enola.lueilwitz@hotmail.com

Viewer

Tierra Flatley

Future Research Analyst

tierra_flatley45@yahoo.com

Member

Dessie Vandervort

Central Security Coordinator

dessie_vandervort67@yahoo.com

Member

Angelina Senger

Lead Marketing Supervisor

angelina_senger@hotmail.com

Admin

Yasmin Flatley

International Directives Administrator

yasmin.flatley1@gmail.com

Member

Monte Russel

Senior Markets Executive

monte.russel24@yahoo.com

Member

Brigitte Quigley

District Functionality Engineer

brigitte.quigley@hotmail.com

Viewer

Christelle Carroll

Forward Group Officer

christelle_carroll@gmail.com

Viewer

Barbara Heller

National Web Liaison

barbara_heller@hotmail.com

Viewer

Evangeline Hermann

Regional Brand Producer

evangeline.hermann@gmail.com

Viewer

Elinore Grant

Dynamic Marketing Supervisor

elinore_grant36@yahoo.com

Admin

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
Latoya Huelsrita.zemlak13@hotmail.comWest MorgantonActive$6.49
Jeremy Breitenbergflo61@hotmail.comPort RhiannoncesterActive$627.72
Heidi Pricejaquan_mitchell6@gmail.comSouth LamarmouthInactive$957.33
Winston Cruickshanktroy.abbott@hotmail.comOlsonhavenInactive$287.88
Kara Veumjensen78@yahoo.comWest AmaliastadInactive$1,108.58
Total$2,988.00

Basic table

Table with Images

NameEmailLocationStatusBalance
Alfred Swaniawski
@jena.hammes29
davon.fay98@gmail.comKellenfurtActive$437.74
Cedric Cormier
@lourdes.douglas81
freeman_prohaska9@gmail.comPort KayliActive$1,016.14
Sonya Jast
@neva_wisozk
sophie.rosenbaum@hotmail.comLake LerafortInactive$1,070.57
Jackie Wisoky
@weston.conroy35
lexie7@gmail.comPort TianafurtInactive$674.47
Penny Fay IV
@gino54
reymundo.christiansen@hotmail.comBrooklynboroughActive$354.64

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Eunice Yundtjerel.kilback12@gmail.comJordynvilleInactive$1,142.69
Bill Kassulke-Quigleybrielle_spinka@yahoo.comSouth MilesActive$295.03
Ms. Mamie Wuckertalexandra17@gmail.comSouth MontanaburyActive$1,037.62
Alice Weissnatjamil_ernser9@yahoo.comFort EltaActive$474.95
Miss Beulah Durgan IIIron_emmerich15@hotmail.comAshlynnfortActive$1,154.71
Total$4,105.00

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Marvin Ratkenils_hackett6@yahoo.comWainostadActive$394.81
Mrs. Teri Framikirsten78@gmail.comSouth MalloryActive$407.44
June Beiermalinda_hoeger@hotmail.comKihnsideActive$728.23
Craig Romaguera IIIjoshua_cremin@gmail.comAmiemouthActive$1,031.70
Dr. Jacob Wolfwillie.kiehn63@yahoo.comNew JuniuscesterInactive$212.55
Total$2,774.73

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Kyle Parkerreed62@gmail.comEast AshlynnfortActive$1,100.96
Santos Jakubowskiraphaelle3@yahoo.comLompocActive$655.89
Daryl Mrazjeffrey.aufderhar54@yahoo.comFeeneyvilleInactive$560.39
Bill Greenfelderbetty.romaguera@hotmail.comBergnaumburyInactive$1,102.81
Christine Goodwin DDSelwin.tromp17@gmail.comHoracesteadInactive$1,152.86
Total$4,572.91

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
Julio Champlinjaclyn.rowe-upton44@hotmail.comMidlandActive$1,013.53
Reginald Rowe IVrodolfo.halvorson2@gmail.comGainesvilleInactive$860.36
Miss Tara Feiljeanette_buckridge@hotmail.comBahringerboroughActive$124.22
Reginald Vonari.prosacco82@hotmail.comNeldaportActive$644.81
Clifton Luettgencharley.rogahn@gmail.comHayesburghInactive$724.61
Total$3,367.53

Table with row selection

Card Table

NameEmailLocationStatusBalance
Velma Walteraglae_carroll@hotmail.comSwiftbergActive$269.49
Marion Trantow Jr.shane_will40@hotmail.comDionshireInactive$798.20
Regina Greenholtretha.romaguera96@yahoo.comGutkowskibergInactive$1,147.23
Kate Kleinjayson_macgyver@hotmail.comLittletonInactive$487.87
Bertha Purdymonique.lehner-bernier@yahoo.comSchummstadActive$917.05
Total$3,619.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
Ms. Rosa Beahan-Hegmanntoni44@hotmail.comSpokane ValleyInactive$149.54
Dawn Emmerichirving_stanton@gmail.comEloisabergInactive$631.98
Sheryl Reilly Vashley3@hotmail.comNew MabelfortActive$418.63
Dr. Christian Boscoted.mitchell-rippin88@hotmail.comMantefieldInactive$816.00
Ted Torphydemario.lehner@yahoo.comErichfortInactive$525.40
Darrel Cartwrightmarilou46@hotmail.comJonesboroughInactive$1,074.49
Philip Maggiogonzalo.barrows-pfeffer@gmail.comSanta FeInactive$610.01
Jerry Harberleonel_leannon@hotmail.comFort GladyceInactive$207.28
Shannon Millerjerad.kautzer-brakus12@gmail.comEstebantownActive$1,152.74
Gilberto Spinkalee.brakus27@yahoo.comLake ElliottviewActive$115.56
Elias Hagenestommie35@gmail.comNorth CieloActive$250.01
Byron Ebertjada77@hotmail.comWest DanielaInactive$1,174.91
Kim Wunschmellie.okuneva@yahoo.comLukastonInactive$477.31
Don Reynoldssharon71@yahoo.comBayertownActive$1,164.29
Dr. Carroll Carterelmira29@yahoo.comFort MelbaInactive$61.34
Total$8,829.49

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.