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
INV001PaidBank Transfer$969.48
INV002PaidBank Transfer$967.50
INV003UnpaidPayPal$443.68
INV004PaidCredit Card$874.05
INV005UnpaidPayPal$658.59
INV006PendingCredit Card$758.43
INV007UnpaidPayPal$320.37
Total$4,992.10

Simple

Users

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

NameTitleEmailRoleActions
Dangelo MarksHuman Factors Producerdangelo.marks59@gmail.comViewer
Lulu JacobsonChief Interactions Administratorlulu_jacobson@gmail.comAdmin
Art WolffLegacy Brand Analystart_wolff@gmail.comMember
Kaya O'HaraDistrict Metrics Coordinatorkaya_ohara@yahoo.comAdmin
Jody WunschCustomer Interactions Analystjody_wunsch@yahoo.comAdmin
Elwin KozeyNational Metrics Agentelwin.kozey50@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Kurt Johnston

Direct Research Planner

kurt_johnston@yahoo.com

Admin

Traci Breitenberg

Chief Functionality Specialist

traci_breitenberg@yahoo.com

Viewer

Caleb Ratke

Human Web Agent

caleb.ratke33@gmail.com

Admin

Danny Smith

Central Web Coordinator

danny.smith57@yahoo.com

Admin

Nelda Adams

Direct Accountability Consultant

nelda.adams90@hotmail.com

Viewer

Andrew Gibson

Product Program Analyst

andrew_gibson@gmail.com

Member

Sticky header

Users

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

NameRoleActions

Leonora Kuvalis

Central Interactions Coordinator

leonora.kuvalis78@hotmail.com

Member

Kristen Hackett

International Interactions Architect

kristen.hackett39@gmail.com

Viewer

Edna Prosacco

Dynamic Optimization Executive

edna.prosacco@hotmail.com

Admin

Earline Sauer

Internal Paradigm Coordinator

earline.sauer@gmail.com

Member

Charlene Hahn

Global Communications Associate

charlene_hahn86@gmail.com

Admin

Alene Hermann

Investor Research Assistant

alene.hermann@yahoo.com

Member

Joanne Welch

International Assurance Associate

joanne_welch64@hotmail.com

Viewer

Demario Stanton

Lead Communications Specialist

demario.stanton@hotmail.com

Member

Eddie Pfannerstill

Internal Configuration Engineer

eddie_pfannerstill@yahoo.com

Admin

Lee McCullough

Customer Research Developer

lee.mccullough98@gmail.com

Admin

Adolph Waters

Customer Response Analyst

adolph_waters@yahoo.com

Admin

Lucas Williamson

Investor Branding Liaison

lucas.williamson@gmail.com

Viewer

Melanie Lehner

Direct Integration Architect

melanie_lehner62@gmail.com

Viewer

Guadalupe Stiedemann

Chief Solutions Analyst

guadalupe.stiedemann12@hotmail.com

Member

Ignacio Pouros

Principal Interactions Planner

ignacio.pouros18@gmail.com

Viewer

Claire Doyle

Corporate Division Analyst

claire_doyle23@yahoo.com

Admin

Oscar Bradtke

Customer Identity Manager

oscar.bradtke@gmail.com

Viewer

Bob Raynor

Regional Data Technician

bob_raynor68@hotmail.com

Admin

Brando Fisher

Central Response Associate

brando.fisher@gmail.com

Member

Walker Shanahan

Dynamic Paradigm Coordinator

walker_shanahan@hotmail.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
Leo Macejkovicernest.bogan@gmail.comKirklandInactive$304.88
Marcella Armstrongeverett42@hotmail.comPort JeradActive$882.53
Dustin Schadenmargie.kuhic@gmail.comManuelamouthActive$163.68
Ali Legrosemmitt52@gmail.comLafayetteshireInactive$734.90
Pauline Bernieretha.friesen55@gmail.comLake MylesActive$478.23
Total$2,564.22

Basic table

Table with Images

NameEmailLocationStatusBalance
Tate Schultz
@shanna75
estevan_waelchi@yahoo.comLake RessieboroughInactive$245.67
Rae Bartoletti
@faye.hane
lucy68@yahoo.comSan BrunoActive$1,055.43
Maci Weber
@stephon.stehr
dashawn_pfeffer85@gmail.comBartlettActive$1,137.43
Alvah Murazik
@lorene.harvey54
becky3@hotmail.comAltamonte SpringsInactive$808.93
Lorena Simonis
@abel0
myrtle31@gmail.comEast DeloresvilleActive$909.49

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Miss Ruby Labadieshyann_kertzmann-dickens63@hotmail.comFort ConsuelobergActive$830.36
Jorge Durgan IVrosemary_schimmel@hotmail.comDanechesterInactive$943.40
Mr. Jean Schaeferdelbert40@yahoo.comAracelytonActive$1,111.82
Augustine Smithambilly_berge-franecki50@hotmail.comPort DariussideInactive$816.23
Corbin Markssarah.kassulke85@hotmail.comMiacesterInactive$249.37
Total$3,951.18

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Christa Osinski-Connjacob.hettinger@yahoo.comKerlukebergInactive$299.85
Dolly Greenfeldershane_connelly@hotmail.comLong BeachActive$1,057.74
Dr. Stacey Klockorachel_dare@yahoo.comPort CitlalliActive$1,036.47
Mr. Ted Beckeralverta.klocko@hotmail.comMissionActive$282.76
Antonia Casperjettie_thiel@yahoo.comLafayetteActive$596.05
Total$3,272.87

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Vada Moorejosue.renner68@yahoo.comNorth LawsonfortInactive$604.81
Krystal Stantonfrank.hessel46@hotmail.comSouth KieraInactive$981.47
Deron Kunzeshayna27@gmail.comSouth MasonInactive$923.29
Hal Lueilwitzmarco.bins@gmail.comKokomoActive$72.01
Ms. Denise Harrisrex.vonrueden12@hotmail.comFranklinActive$332.21
Total$2,913.79

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
Marta Ziemannjessie_ondricka83@gmail.comClevelandfurtActive$288.74
Ebba Turner IIIpalma37@gmail.comDestinworthActive$242.81
Tristin Senger IIabagail_marquardt35@yahoo.comJastviewInactive$646.33
Daphnee Kiehnfreeda22@yahoo.comMayaguezActive$187.90
Kendra Flatley-Toyayana.hegmann93@gmail.comEugeneActive$276.01
Total$1,641.79

Table with row selection

Card Table

NameEmailLocationStatusBalance
Constantin Ricejimmie.mraz-streich4@hotmail.comWest AntwonchesterActive$922.43
Alexanne Krajcik Jr.lynda56@yahoo.comFort AlanfortActive$1,014.18
Kay Ebertnoel58@hotmail.comSpencerfurtActive$596.65
Sheryl Wildermananne.bechtelar@yahoo.comNorth PercivalportInactive$4.06
Marcella Hettingerjosiane_conn@yahoo.comFort DestanyInactive$1,149.82
Total$3,687.14

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
Maureen Heaneyhilda8@hotmail.comFort MercedesInactive$135.67
Monica Abernathy PhDsasha_dach@gmail.comNapervilleActive$240.68
Dwight Jastgilbert53@gmail.comNew TamiaInactive$202.25
Malachi Kuvalisdonna65@gmail.comEl CajonInactive$826.94
Rudolph Hermanngary_prosacco34@gmail.comNorth TreverActive$533.62
Denise Parkerowen0@yahoo.comWest UrbanportActive$243.50
Miss Hazel Bayertiffany_howell@gmail.comWest PasqualeActive$178.19
Ruthe Kuhn-Cronawyatt25@gmail.comNorth EastonActive$431.76
Dr. Hilma Cartergordon_zboncak17@hotmail.comWatersstadActive$529.19
Julie Runolfssonlorenza12@yahoo.comLake NannieboroActive$42.48
Ms. Lenora Corwingary.kreiger35@hotmail.comKolevilleInactive$880.77
Chaim Whitekasandra28@hotmail.comPort FrederickActive$275.88
Ardella Pacochasincere.murphy55@yahoo.comSouth HubertviewInactive$413.81
Pattie Windler IIgloria_rogahn@gmail.comPort AgustinlandInactive$987.23
Mr. Athena Lowedarla_schuppe@gmail.comPort ErikshireInactive$235.66
Total$6,157.63

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.