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$524.68
INV002PaidBank Transfer$809.80
INV003UnpaidBank Transfer$808.76
INV004PendingPayPal$575.55
INV005PaidBank Transfer$722.70
INV006PaidCredit Card$450.03
INV007UnpaidCredit Card$340.69
Total$4,232.21

Simple

Users

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

NameTitleEmailRoleActions
Marlene DickiHuman Division Facilitatormarlene_dicki73@hotmail.comMember
Brannon HauckHuman Functionality Facilitatorbrannon.hauck@hotmail.comMember
Johathan DouglasInvestor Assurance Architectjohathan_douglas1@hotmail.comViewer
Amely D'AmoreInternational Accounts Associateamely_damore81@gmail.comViewer
Eldora HayesDistrict Interactions Consultanteldora.hayes89@gmail.comAdmin
Samir TremblayProduct Mobility Techniciansamir.tremblay26@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Dashawn Swift

Lead Directives Coordinator

dashawn_swift@yahoo.com

Member

Cade Kuhic

Investor Group Coordinator

cade_kuhic@hotmail.com

Member

Elizabeth Klein

Legacy Tactics Engineer

elizabeth_klein95@yahoo.com

Viewer

Jarret Swaniawski

Dynamic Quality Director

jarret_swaniawski41@hotmail.com

Member

Neoma Watsica

Forward Mobility Producer

neoma_watsica@yahoo.com

Viewer

Tom Balistreri

Internal Tactics Assistant

tom.balistreri96@yahoo.com

Member

Sticky header

Users

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

NameRoleActions

Garry Osinski

National Interactions Designer

garry.osinski28@gmail.com

Viewer

Collin Ortiz

Chief Division Supervisor

collin.ortiz@gmail.com

Admin

Kayli Okuneva

Chief Directives Architect

kayli_okuneva@yahoo.com

Member

Russell Veum

Legacy Brand Developer

russell_veum@gmail.com

Viewer

Reynold Nolan

Human Infrastructure Orchestrator

reynold_nolan@yahoo.com

Admin

Dorcas Volkman

District Mobility Manager

dorcas.volkman12@gmail.com

Admin

Sherwood D'Amore

Internal Response Designer

sherwood.damore12@hotmail.com

Viewer

Rebeka Rice-Buckridge

Forward Group Representative

rebeka_rice-buckridge@gmail.com

Member

Lorena Reinger

Corporate Program Developer

lorena.reinger9@hotmail.com

Member

Genevieve Windler

District Marketing Associate

genevieve.windler41@gmail.com

Viewer

Evalyn Denesik

District Tactics Director

evalyn_denesik39@hotmail.com

Viewer

Coralie Pfannerstill

Corporate Factors Orchestrator

coralie.pfannerstill@gmail.com

Admin

Athena Hintz

Human Configuration Strategist

athena_hintz@yahoo.com

Member

Hector Lubowitz

Dynamic Group Associate

hector_lubowitz58@hotmail.com

Viewer

Elmo Hauck

District Mobility Director

elmo_hauck@gmail.com

Admin

Grady MacGyver

National Paradigm Representative

grady_macgyver@gmail.com

Viewer

Watson Olson

Customer Accountability Agent

watson.olson27@yahoo.com

Viewer

Christop Hills

Future Tactics Associate

christop_hills@hotmail.com

Admin

Leola Howell

Lead Paradigm Developer

leola.howell3@yahoo.com

Admin

Van Shields

Global Identity Consultant

van_shields@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
Melvin Bergnaumadam_rodriguez@hotmail.comNorth DonaldActive$499.45
Darla Waltereileen.stoltenberg56@gmail.comEast ThomasInactive$45.57
Conrad Naderashlee.lemke@hotmail.comMaximillianstadActive$1,172.27
Dr. Mathew Hillsjillian66@yahoo.comGunnerburyActive$967.36
Juanita Bauchburnice.balistreri-baumbach10@gmail.comWest AlexandriaActive$349.33
Total$3,033.98

Basic table

Table with Images

NameEmailLocationStatusBalance
Ann Kuphal
@jake.breitenberg98
chauncey.kilback96@hotmail.comZiemannfurtActive$1,069.26
Antonia McClure Jr.
@seth_turner
golda.green19@hotmail.comKuhlmanmouthActive$686.84
Mrs. Jessica Goyette
@giles_gleichner
virginie.flatley@gmail.comKirlinfortInactive$690.59
Jane Pagac
@olin_swaniawski
woodrow.rohan96@hotmail.comO'KonviewInactive$936.94
Cesar Barton
@lenora.sanford
betty56@hotmail.comTrudiechesterActive$876.05

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Bernard Wardmaribel_nienow39@hotmail.comEddmouthInactive$106.40
Felipe Monahanjoelle78@yahoo.comCasperboroActive$257.59
Cornelius White-Tillmanedyth67@yahoo.comPort ChloeActive$448.03
Kerry Zulauftriston98@hotmail.comStillwaterInactive$939.12
Belinda Rathgreyson.halvorson@yahoo.comLake ElyseInactive$557.90
Total$2,309.04

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Leona Beahanaudie.mitchell14@hotmail.comPowlowskicesterInactive$189.88
Sylvester Conroysienna_blanda91@gmail.comEast ElainavilleInactive$846.72
Isabel Sawaynanabelle.zemlak60@yahoo.comNew FletcherbergActive$895.78
Luke Schimmelarmand96@hotmail.comEast RickyportActive$909.02
Lana Schowalterkamron78@gmail.comBendActive$66.32
Total$2,907.72

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Linda Toydaisha61@gmail.comWest AleneInactive$20.08
Guillermo O'Connerkatrina_kuhlman@gmail.comGlen BurnieActive$669.43
Edward Schowaltereda.dach@yahoo.comPort RomaineActive$184.65
Kay Ornalexandro_veum95@hotmail.comHillsboroInactive$324.74
Maryann Langworth MDconcepcion_johnson71@yahoo.comFolsomInactive$775.84
Total$1,974.74

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
Warren Altenwerthwillie12@gmail.comAppletonInactive$674.43
Kelly Parkertate.gottlieb@hotmail.comNew SantiagoActive$453.93
Ana Kozeyluther96@gmail.comLong BeachActive$1,131.12
Rachael Rogahnluigi9@yahoo.comPico RiveraActive$770.62
Iris Carrollsibyl_nitzsche12@hotmail.comEast FranciscaboroInactive$187.35
Total$3,217.45

Table with row selection

Card Table

NameEmailLocationStatusBalance
Julia Ritchieguiseppe_yundt80@gmail.comMurphyburyActive$531.27
Brad Pacochacreola_kunde71@yahoo.comVincefieldActive$731.45
Elias Strosinleonora_mccullough@yahoo.comPort ImogeneActive$336.75
Michelle Walkermittie.graham45@gmail.comLake DeanInactive$740.85
Anthony Ritchieettie58@hotmail.comFritzworthInactive$724.86
Total$3,065.18

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
Lyle Lueilwitznicola_kunze@yahoo.comFlorencestadActive$32.64
Minnie Nolancody_mccullough26@hotmail.comEastvaleActive$561.46
Dominic Schusterlavon.langosh59@gmail.comLemkefieldActive$633.26
Ian Thompsonmayra_bahringer@hotmail.comNorth FrancescosideActive$1,068.80
Jerry Johnsmerl_trantow59@hotmail.comMetzlandInactive$438.04
Patrick Runolfsson-Durganrahul.leuschke21@yahoo.comNorth JalynlandInactive$573.11
Emily Nicolaszane_grimes47@hotmail.comHamillshireInactive$933.51
Roxanne Halvorsonmarta_lubowitz@yahoo.comEdinburgInactive$1,138.13
Doug Torphykaren.morissette@yahoo.comJacobichesterActive$270.51
Sonya Jakubowskiantonina.stiedemann95@yahoo.comMadisonvilleActive$259.23
Ricardo O'Reillyschuyler_ernser@yahoo.comLeefurtInactive$365.27
Freddie Heathcotealexys_kemmer67@yahoo.comPearlieburyInactive$462.57
Dr. Austin Nienowroderick.hagenes55@gmail.comNickolasstadInactive$163.58
Mattie Murrayceline_mohr@gmail.comSouth ChaimbergInactive$454.72
Victoria Ferryobie.reichert17@hotmail.comNorth HalleInactive$96.82
Total$7,451.65

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.