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$603.52
INV002PendingBank Transfer$576.56
INV003PendingPayPal$750.85
INV004PendingBank Transfer$705.40
INV005PendingPayPal$632.85
INV006UnpaidPayPal$123.23
INV007UnpaidCredit Card$292.96
Total$3,685.37

Simple

Users

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

NameTitleEmailRoleActions
Kurt TurcottePrincipal Accounts Orchestratorkurt.turcotte@yahoo.comMember
Emma HuelFuture Implementation Coordinatoremma.huel@gmail.comViewer
Ian PollichDynamic Optimization Coordinatorian.pollich32@yahoo.comMember
Brandy LarkinPrincipal Usability Representativebrandy.larkin36@yahoo.comAdmin
Elvera GreenCustomer Functionality Liaisonelvera_green92@yahoo.comViewer
Phillip FraneyInternational Accounts Administratorphillip_franey@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Diane Kuhlman

Dynamic Group Liaison

diane_kuhlman26@yahoo.com

Member

Louvenia Rempel

International Functionality Orchestrator

louvenia.rempel4@hotmail.com

Admin

Izabella Ritchie

Investor Quality Consultant

izabella.ritchie@gmail.com

Viewer

Blanca Schaefer-Lind

Future Marketing Strategist

blanca_schaefer-lind47@yahoo.com

Admin

Darrel Dach

Future Division Consultant

darrel.dach@hotmail.com

Member

Madisen Bogisich

Corporate Directives Engineer

madisen.bogisich@yahoo.com

Member

Sticky header

Users

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

NameRoleActions

Al Adams

Corporate Branding Strategist

al.adams88@yahoo.com

Admin

Breanne Goldner

Customer Usability Orchestrator

breanne.goldner@hotmail.com

Viewer

Bryana Hermiston

Direct Data Strategist

bryana.hermiston@yahoo.com

Member

Jamir McCullough

International Directives Architect

jamir.mccullough@gmail.com

Admin

Cale Kreiger

Global Factors Assistant

cale_kreiger34@hotmail.com

Admin

Cameron Daugherty

Corporate Tactics Executive

cameron_daugherty3@hotmail.com

Member

Freda Daniel

Customer Factors Assistant

freda_daniel@hotmail.com

Admin

Alexandre Goyette

Corporate Metrics Director

alexandre_goyette@gmail.com

Admin

Paula Stroman

Corporate Interactions Supervisor

paula_stroman24@hotmail.com

Member

Camille Lindgren-Kulas

Future Program Architect

camille_lindgren-kulas@yahoo.com

Admin

Morris Hegmann

Legacy Tactics Administrator

morris_hegmann41@gmail.com

Viewer

Kendra Farrell

Dynamic Configuration Architect

kendra_farrell74@hotmail.com

Viewer

Deanna Reichert

Lead Functionality Director

deanna.reichert3@gmail.com

Member

Kent Haley

Chief Configuration Planner

kent.haley@yahoo.com

Viewer

Retha Green

International Security Agent

retha_green64@hotmail.com

Admin

Garth Graham

Regional Markets Producer

garth.graham@gmail.com

Viewer

Rafaela Ebert

Forward Creative Agent

rafaela_ebert@gmail.com

Viewer

Nick Kautzer

Direct Functionality Producer

nick.kautzer@hotmail.com

Viewer

Marta Will

Principal Accountability Agent

marta.will24@hotmail.com

Viewer

Hattie Jacobs

International Security Planner

hattie.jacobs57@hotmail.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
Toni Goyetteryan1@hotmail.comNew JulianavilleActive$875.89
Mario Strosin-Stromanshane70@hotmail.comEast AugustusviewActive$656.74
Jake Townemelissa_price62@hotmail.comRoxanneboroughActive$270.92
Naomi Feeneyrozella26@gmail.comSouth KathrynInactive$711.32
Tyrell Gerholdsherwood_cassin37@yahoo.comUrielfieldActive$415.88
Total$2,930.75

Basic table

Table with Images

NameEmailLocationStatusBalance
Heidi Stokes
@antonette.ullrich94
valerie83@yahoo.comLake LowellsideActive$101.78
Alysson Bradtke
@fred.kilback
melyna_christiansen-hintz@hotmail.comMargaritasteadInactive$605.91
Tommy Franecki-Crooks
@tatum51
ben5@hotmail.comPort JorgestadInactive$669.80
Jorge Zboncak I
@frank_weissnat
elmer.olson@yahoo.comPort PeytonActive$720.81
Arnulfo Price PhD
@florine2
stevie8@gmail.comNew LilianahavenActive$177.85

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Rick Champlinmarian.willms-heathcote2@yahoo.comAnthonysteadInactive$351.78
Miss Sarah O'Connerrichard71@hotmail.comFort KathrynInactive$99.28
Omar Sawayn-Gottliebterrance.kirlin68@hotmail.comLake AntoinetteInactive$1,166.51
Burdette Zulaufdoris_wehner@gmail.comHowardburyActive$1,194.04
Grant Lindgrendenise61@hotmail.comTamiamiInactive$1,071.39
Total$3,883.00

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Mr. Cody Jacobibernice88@gmail.comJohnsonboroughInactive$1,078.03
Idell Kemmermark_johnson@yahoo.comYonkersActive$687.87
Mrs. Kieran Goodwindeanna_veum-skiles@hotmail.comKayleeboroughInactive$876.49
Mindy Smithamdomenick67@yahoo.comCummings-EffertzlandInactive$663.57
Erling Boehm Sr.janet.brown@yahoo.comNorth BryanActive$994.30
Total$4,300.26

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Ethan Sipes-Jacobshannah.sauer54@hotmail.comNorth ImaniActive$314.54
Corbin Nadersabina_streich-feeney@hotmail.comCutler BayActive$501.76
Amely Abbottjohn.konopelski60@gmail.comNorth DavionhavenActive$488.81
Quincy Fritschjosefina95@hotmail.comNew AbnerActive$872.79
Deangelo O'Connellbrittany.kuhlman@yahoo.comSouth LindseyfurtInactive$1,198.62
Total$3,376.52

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
Ashlee Zulauf-Kunde Sr.elyse.wilkinson7@hotmail.comBlandasteadInactive$526.76
Carolyn Bechtelarmax.ritchie@yahoo.comSouth TheodorecesterInactive$774.40
Toby Murray-Waters PhDed66@yahoo.comFort SergioInactive$917.53
Rosendo Hermannorene_wuckert41@gmail.comEmmettboroughInactive$410.41
Carlton Abshiredamien91@yahoo.comNew OttoActive$845.27
Total$3,474.37

Table with row selection

Card Table

NameEmailLocationStatusBalance
Esteban Carrollmack.buckridge39@hotmail.comEffertzhavenInactive$510.75
Alfonso Heidenreichmax.kunze32@yahoo.comBeierboroughInactive$48.62
Sandra Rodriguezpete33@yahoo.comLake BrandochesterActive$981.46
Ari Johnslucinda_lakin24@hotmail.comNew KendraInactive$381.96
Roman Schroedersonya.mitchell@gmail.comPowlowskibergInactive$241.53
Total$2,164.32

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
Herminio Predoviccierra78@hotmail.comNorth FelipecesterActive$737.08
Vince Kilbackronny40@hotmail.comWillfurtActive$994.17
Augustus Rowephyllis.langworth@hotmail.comOak LawnInactive$47.12
Vernie Bernier MDeliezer16@hotmail.comNew JefferylandActive$751.92
Karen Marquardt Vbenny38@yahoo.comKuhlmantonInactive$1,187.55
Camden Schadengwen.bogisich35@hotmail.comEast EdisonsideInactive$407.15
Rhea Leschdemario28@yahoo.comTracyActive$118.20
Colin Jakubowskilizzie_ledner@gmail.comColtenfortInactive$295.52
Bennie Nitzschedarlene_dickinson@yahoo.comFort JeannetteActive$780.69
Paolo Heaneywayne68@hotmail.comCollinsfortActive$135.34
Kim Hopperebecca_breitenberg@yahoo.comEltatonActive$115.70
Evan Herzogjayde.stiedemann69@hotmail.comEast LorenafieldActive$695.80
Janie Rodriguezshari.fay2@hotmail.comJuvenaltonActive$650.74
Estella Kulassidney10@hotmail.comSteveboroActive$1,151.51
Callie Hand MDcortez58@hotmail.comWest HowardActive$1,062.73
Total$9,131.22

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.