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$341.06
INV002PaidPayPal$722.60
INV003PaidPayPal$687.70
INV004PendingPayPal$731.64
INV005PaidCredit Card$262.35
INV006PaidBank Transfer$724.06
INV007UnpaidCredit Card$636.16
Total$4,105.57

Simple

Users

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

NameTitleEmailRoleActions
Sylvester HaleyLegacy Identity Coordinatorsylvester_haley@gmail.comAdmin
Delaney BalistreriSenior Communications Architectdelaney.balistreri@gmail.comViewer
Rhett MurrayCentral Interactions Developerrhett.murray33@yahoo.comMember
Mireille Jerde-LeannonChief Program Liaisonmireille.jerde-leannon@gmail.comMember
Filomena KertzmannCentral Mobility Associatefilomena_kertzmann34@yahoo.comAdmin
Judy D'AmoreSenior Operations Assistantjudy.damore48@yahoo.comMember

Stacked on mobile

Users

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

NameRoleActions

Josh Mills

Global Optimization Technician

josh_mills38@yahoo.com

Admin

Jaida Torp

Regional Assurance Manager

jaida_torp76@hotmail.com

Admin

Clair Metz

Product Metrics Architect

clair_metz@yahoo.com

Member

Edd Ebert

National Data Architect

edd_ebert@hotmail.com

Viewer

Jazmyn Harber

Human Group Consultant

jazmyn_harber26@gmail.com

Admin

Alize Abshire

Lead Tactics Technician

alize_abshire@gmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Mercedes Green

District Configuration Architect

mercedes.green98@yahoo.com

Viewer

Taryn Schneider

Human Identity Technician

taryn_schneider@hotmail.com

Member

Mervin Upton

Direct Program Orchestrator

mervin_upton@yahoo.com

Viewer

Lincoln Price

Chief Web Facilitator

lincoln.price73@gmail.com

Viewer

Ocie White

Customer Paradigm Strategist

ocie_white@gmail.com

Admin

Reinhold Hegmann

Forward Configuration Assistant

reinhold_hegmann@gmail.com

Member

Jazlyn Daugherty

Dynamic Paradigm Designer

jazlyn_daugherty@gmail.com

Viewer

Bernard Murphy

Product Quality Analyst

bernard_murphy55@gmail.com

Viewer

Kamille Lueilwitz

Lead Research Orchestrator

kamille.lueilwitz@gmail.com

Admin

Effie Hermann

Investor Solutions Supervisor

effie.hermann30@gmail.com

Viewer

Robert Koepp

Principal Research Developer

robert.koepp45@hotmail.com

Viewer

Madaline Bednar

National Optimization Specialist

madaline_bednar65@gmail.com

Member

Domenico Zulauf

Legacy Mobility Director

domenico_zulauf@hotmail.com

Viewer

Gabe Purdy

Principal Operations Administrator

gabe_purdy@hotmail.com

Admin

Ahmed Jaskolski

Legacy Operations Strategist

ahmed_jaskolski@yahoo.com

Member

Jamar DuBuque

Customer Interactions Officer

jamar_dubuque71@yahoo.com

Viewer

Reid Blick

Legacy Accounts Planner

reid_blick@yahoo.com

Member

Eldon Stoltenberg

Investor Optimization Developer

eldon.stoltenberg61@hotmail.com

Viewer

Arvilla Koepp

Internal Infrastructure Administrator

arvilla.koepp@hotmail.com

Viewer

Al Schaden

Principal Marketing Producer

al_schaden@gmail.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
Bennie Ziemepercival_sawayn15@gmail.comLake CiceroActive$1,016.61
Dr. Sheldon Paucek-Kautzer Vstan.rolfson@hotmail.comAbshirehavenActive$168.69
Luke Harberausten_gulgowski@yahoo.comEast ShannonActive$165.79
Diana Nicolasvernice_kerluke90@yahoo.comLednerfurtInactive$1,078.68
Dr. Dale Watsicamatt.oconner77@gmail.comWest StoneInactive$1,135.14
Total$3,564.91

Basic table

Table with Images

NameEmailLocationStatusBalance
Doug Zulauf
@emelia.beahan
enos_glover9@yahoo.comLake GarfieldboroughInactive$338.39
Katherine Pfeffer
@jackson_douglas94
delilah.kuphal@gmail.comSouth MilesbergActive$116.90
Darrel Connelly
@rolando.glover98
justen95@yahoo.comWellingtonInactive$905.17
Everett Parker
@bertram_waelchi
monserrat2@gmail.comWest DianaInactive$633.93
Minnie Gislason
@ayana_stehr
ashton_mosciski95@yahoo.comLeesburgInactive$356.85

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Karl Orn IIIanibal_bechtelar@hotmail.comWichitaInactive$657.38
Leah Daughertyernest.renner@yahoo.comMarshallstadInactive$1,032.92
Louis Crona Vzelda10@yahoo.comSouth ReinafortActive$939.31
Guillermo Walkerkelly23@yahoo.comFort CullenInactive$86.94
Carlton Schummjackie_cruickshank@yahoo.comJamelportActive$1,066.93
Total$3,783.48

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Sonia Lednerkamron.bednar-gusikowski60@gmail.comWolfviewInactive$328.88
Beverly Handcory_miller@gmail.comSouth GateActive$1,196.42
Carol Smithamvivienne.gislason@yahoo.comWest SenecaActive$945.56
Jenna Ernsergudrun.skiles@gmail.comWebermouthActive$905.84
Dr. Lynne Pfeffer-Marksenos.murphy80@yahoo.comKalamazooInactive$781.22
Total$4,157.92

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Drew Wuckertariane.durgan30@gmail.comGeorgetownInactive$475.17
Beverly Trompfernando_durgan73@gmail.comSpencervilleInactive$970.08
Dr. Lloyd Donnellymiles45@gmail.comWest ShainasideInactive$303.56
Marion Breitenbergfreeda.dibbert@gmail.comBeaumontActive$1,136.28
Emmett Bogan IIIdudley_gerhold41@hotmail.comLake EmieviewInactive$732.59
Total$3,617.68

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
Mr. Daniel Schoengia_yundt6@yahoo.comWest HailieburghActive$224.12
Rolando Schmidt IIlenna_braun46@gmail.comNorth FlorineInactive$428.94
Jeanne Wilkinsoncandido_funk@gmail.comEast AryannaburyInactive$583.83
Kellie Schowaltergerson_stroman@yahoo.comLake ValentineActive$39.63
Maurice Gleasonpriscilla.boyle@hotmail.comWildermanfieldInactive$972.61
Total$2,249.13

Table with row selection

Card Table

NameEmailLocationStatusBalance
Amy Torphyliam_feeney23@yahoo.comPort RaymondActive$859.13
Jeannette Heathcotegardner_cremin@gmail.comQuigleylandInactive$298.93
Gilbert Stamm Vsunny.welch@yahoo.comPort WilfredoboroughActive$623.34
Francis Quitzonasia_beahan@gmail.comWest LandenworthActive$400.88
Ella Marksrosalinda.kris96@yahoo.comOlaburyActive$591.74
Total$2,774.02

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
Clayton Langjoanny.okon8@yahoo.comAriellehavenActive$1,135.53
Edwin Smithalyce_durgan66@gmail.comFort ViviannecesterInactive$603.70
Marguerite Gradydarien2@gmail.comRobelchesterInactive$810.38
Raquel Kuphalfelipe_tillman@hotmail.comKutchtonActive$634.18
Freda Kihnrickey85@gmail.comEast AdellacesterInactive$217.11
Don Vonchadrick98@gmail.comRaymundoboroActive$799.94
Clyde Schumm Jr.alaina_keeling-rath@yahoo.comDemondboroInactive$528.71
Alberto Mannpete77@hotmail.comAlbertboroActive$932.57
Tonya Mooreemerald.roob@hotmail.comBenjaminhavenActive$1,135.78
Merle Labadieisaias.dach@gmail.comYorba LindaInactive$751.50
Richard Yundtthora.weissnat82@hotmail.comWhitestadInactive$270.92
Ruby Halvorson-Bernieralexys93@yahoo.comWest SonyaburghActive$1,086.92
Peggy O'Konchelsea.auer@gmail.comSouth DaronActive$713.97
Katrina Priceleta_harvey@yahoo.comMariannashireInactive$669.72
Robin Trompmaximillia44@hotmail.comNorth HoldenfortInactive$914.96
Total$11,205.89

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.