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
INV001PendingBank Transfer$612.98
INV002PaidCredit Card$987.46
INV003UnpaidBank Transfer$598.43
INV004PendingPayPal$190.94
INV005PendingCredit Card$323.63
INV006PendingCredit Card$821.08
INV007PendingPayPal$952.74
Total$4,487.26

Simple

Users

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

NameTitleEmailRoleActions
Eleazar McKenzieDistrict Factors Officereleazar.mckenzie2@yahoo.comViewer
Henri MurrayInvestor Accounts Orchestratorhenri_murray30@gmail.comMember
Reva LarkinForward Paradigm Analystreva_larkin@hotmail.comMember
Cedrick Hartmann-NitzscheProduct Markets Specialistcedrick_hartmann-nitzsche@hotmail.comMember
Myrna RomagueraRegional Quality Plannermyrna_romaguera@gmail.comMember
Grady MannProduct Brand Plannergrady_mann@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Ladarius Lang

Human Identity Developer

ladarius_lang64@gmail.com

Viewer

Delia Bechtelar

Senior Branding Facilitator

delia_bechtelar75@yahoo.com

Viewer

Lindsey Spinka

Principal Creative Representative

lindsey.spinka40@yahoo.com

Admin

Jaime Bins

Chief Assurance Producer

jaime_bins55@hotmail.com

Member

Heidi Gleason

Global Usability Agent

heidi_gleason30@yahoo.com

Admin

Freeda Kub

Direct Web Consultant

freeda.kub20@hotmail.com

Admin

Sticky header

Users

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

NameRoleActions

Coty Durgan

District Accounts Consultant

coty_durgan@hotmail.com

Member

Alberta Schuster

Corporate Implementation Associate

alberta.schuster@hotmail.com

Viewer

Otto Cole

Lead Interactions Director

otto_cole38@gmail.com

Admin

Luciano Zulauf

Internal Web Liaison

luciano.zulauf12@hotmail.com

Member

Jovani Hayes-Robel

Corporate Group Coordinator

jovani_hayes-robel3@gmail.com

Admin

Dee Satterfield

Investor Data Executive

dee_satterfield22@yahoo.com

Viewer

Rafaela Hane

Chief Group Associate

rafaela.hane98@yahoo.com

Member

Bailee Stoltenberg

Chief Intranet Engineer

bailee.stoltenberg44@hotmail.com

Member

Triston Corwin

District Accounts Consultant

triston_corwin@hotmail.com

Member

Demarcus Carroll

National Accountability Administrator

demarcus.carroll@gmail.com

Viewer

Brett Waters

Human Factors Facilitator

brett.waters0@hotmail.com

Member

Rigoberto Barrows

Senior Configuration Facilitator

rigoberto_barrows46@yahoo.com

Viewer

Jaclyn Heaney

Future Applications Designer

jaclyn.heaney@gmail.com

Admin

Mateo Jenkins

Corporate Infrastructure Coordinator

mateo_jenkins@yahoo.com

Admin

Aryanna McCullough

Dynamic Directives Associate

aryanna.mccullough@gmail.com

Viewer

Jimmie Fritsch

Investor Optimization Analyst

jimmie.fritsch@yahoo.com

Admin

Nils Williamson

Central Configuration Architect

nils_williamson65@gmail.com

Viewer

Frida Grant-Terry

Direct Accounts Liaison

frida_grant-terry72@gmail.com

Viewer

Justine Rippin

Internal Accounts Supervisor

justine_rippin@yahoo.com

Admin

Valerie Zboncak

Legacy Tactics Supervisor

valerie_zboncak@yahoo.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
Dr. Adrian Russeltrent.yundt58@hotmail.comNew EvieInactive$633.59
Dr. Hugo Bashirian DVMbreanne_franecki31@hotmail.comNorth CeasarcesterInactive$223.83
Toby Strosinmarques_nitzsche56@yahoo.comNorth CarolynInactive$1,142.09
Beverly Streichmarilyne_conroy24@yahoo.comMansfieldActive$943.40
Leigh Jaskolskidillon.koepp75@gmail.comMacboroInactive$264.35
Total$3,207.26

Basic table

Table with Images

NameEmailLocationStatusBalance
Holly Bernier
@earnestine.bartell14
blake.tillman@hotmail.comEast Los AngelesInactive$684.82
David Thompson
@ila_larson
cecile.daniel98@gmail.comLake LukasvilleInactive$533.89
Mrs. Juanita Skiles
@ole.swaniawski41
dillon_bruen50@yahoo.comDavenportInactive$464.57
Wilson Zemlak
@lenore_lebsack62
stan34@hotmail.comNorth CatherineActive$1,035.84
Suzanne Ratke
@clemmie99
brenda.grady-larson@hotmail.comPort SashaActive$615.93

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Jeanette Bartonkathryne_rohan@yahoo.comFort DemetriusstadActive$357.06
Rita Herzog Sr.ricky.grady3@hotmail.comJordonlandInactive$1,064.14
Ron Huelsrudolph90@hotmail.comLake JosieActive$322.08
Horace Schmitt Jr.wellington.rolfson17@gmail.comKarianevilleActive$658.25
Eduardo Hickledeanna_marvin@hotmail.comBahringertownActive$1,013.90
Total$3,415.43

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Claude Pouros DVMsamson50@yahoo.comEast AleccesterInactive$846.05
Dr. Rogelio Kleinmichael33@gmail.comLempibergActive$640.09
Shelley Heathcoteyasmin.kuhic44@gmail.comEast PeytonvilleActive$995.75
Roderick Watsicadylan.schiller@hotmail.comWest HoseaInactive$496.01
Carla Reichelaleen.halvorson6@gmail.comConwayActive$210.91
Total$3,188.81

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Nick Ritchie MDkeaton_jacobi32@gmail.comElinorefieldActive$956.29
Antoinette Harveyemery0@yahoo.comNew JarrodhavenInactive$1,061.05
Ken Klingjerry_predovic@yahoo.comLake GustInactive$176.05
Marilyn Schusterlorena.friesen@hotmail.comNew VivienActive$763.12
Jack Runolfsdottir Ilavina_medhurst-hayes16@yahoo.comFort ColeInactive$1,029.60
Total$3,986.11

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
Kelly Joneszackary_witting5@gmail.comCape CoralActive$637.30
Cecelia Okuneva IVanna26@gmail.comWest SavannacesterInactive$62.08
Teri Dooleyellis_mills@yahoo.comNorth KristofferstadActive$970.84
Jesse Cummingseriberto_spencer96@gmail.comHuntsvilleActive$631.30
Gerard Pacochaavis45@yahoo.comFordfieldInactive$206.52
Total$2,508.04

Table with row selection

Card Table

NameEmailLocationStatusBalance
Andrea Auerrandall11@hotmail.comOak LawnInactive$1,155.49
Marty Hicklekiley_hane75@gmail.comMcAllenInactive$617.91
Alfred Legroschelsey82@gmail.comFederal WayInactive$429.29
Dr. Javier Raulance.lebsack@hotmail.comRitchiebergInactive$1,020.94
Nora Brekkeroscoe53@hotmail.comJaskolskiboroActive$614.72
Total$3,838.35

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
Frankie Toyrosalind_ohara81@gmail.comMooreboroughInactive$1,153.30
Mabel Romaguerafausto_schaden63@gmail.comEast SamanthaInactive$911.03
Shirley Kuphalbreanna_mayer6@gmail.comEstevanfurtInactive$808.33
Mrs. Lucille Emmericheugenia_swift19@yahoo.comSouth CoryActive$1,036.67
Saul Hahnozella.kuhn@gmail.comUriahstadInactive$23.66
Kate Davisjanessa.armstrong@yahoo.comGracielachesterInactive$1,104.52
Mr. Jack Beattykendra22@gmail.comGusikowskilandInactive$237.02
Clarence Gerholdjanis.bins@gmail.comEwellfortInactive$1,156.97
Eduardo Veummervin83@gmail.comHaileefieldActive$648.88
Roy Parkerfrancisco.shanahan@hotmail.comGrand IslandActive$147.64
Dale Weissnat Vdeion_kutch@yahoo.comJosiahburghActive$260.35
Jim Millsodie82@gmail.comWest ShanonInactive$1,129.32
Becky Will IVelenora_conroy3@yahoo.comLake WernerInactive$803.01
Mrs. Kerry Strosinara.fahey-emard@yahoo.comLake ForrestlandActive$249.90
Julia Danielmateo.altenwerth@yahoo.comHintzsteadInactive$994.55
Total$10,665.15

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.