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$596.92
INV002PendingCredit Card$792.06
INV003UnpaidBank Transfer$127.07
INV004UnpaidPayPal$351.99
INV005PaidPayPal$455.01
INV006UnpaidBank Transfer$744.11
INV007PendingBank Transfer$676.99
Total$3,744.15

Simple

Users

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

NameTitleEmailRoleActions
Julian OlsonForward Metrics Coordinatorjulian_olson44@gmail.comAdmin
Milton LittelDirect Infrastructure Designermilton_littel48@hotmail.comViewer
Barry LeannonDirect Division Executivebarry_leannon@hotmail.comAdmin
Malcolm AndersonNational Quality Managermalcolm_anderson@gmail.comViewer
Clark SchambergerCorporate Optimization Liaisonclark_schamberger63@hotmail.comMember
Jocelyn OsinskiCorporate Factors Orchestratorjocelyn_osinski@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Lisa Schroeder

Customer Accounts Facilitator

lisa.schroeder@gmail.com

Member

Kurtis Jakubowski-McKenzie

Principal Interactions Facilitator

kurtis_jakubowski-mckenzie@gmail.com

Member

Maximus Bruen

District Communications Associate

maximus.bruen40@hotmail.com

Member

Darrin Blick

Lead Creative Developer

darrin_blick9@yahoo.com

Member

Kristofer Hilpert

Direct Assurance Liaison

kristofer.hilpert0@yahoo.com

Viewer

Dangelo Jones

National Factors Associate

dangelo_jones@yahoo.com

Member

Sticky header

Users

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

NameRoleActions

Xander Turcotte

Chief Functionality Facilitator

xander.turcotte83@yahoo.com

Member

Chandler Hahn

Lead Assurance Orchestrator

chandler.hahn57@gmail.com

Viewer

Bryan Lakin

Direct Creative Orchestrator

bryan_lakin45@gmail.com

Member

Dante Abshire

Regional Interactions Orchestrator

dante_abshire@hotmail.com

Viewer

Ricardo Smith

Lead Marketing Producer

ricardo_smith9@hotmail.com

Member

Luther Koepp

Global Data Producer

luther_koepp@yahoo.com

Member

Georgette Donnelly

Dynamic Research Architect

georgette.donnelly@gmail.com

Admin

Rudy Weimann

Central Factors Orchestrator

rudy.weimann84@hotmail.com

Viewer

Dominick Ullrich

Product Usability Planner

dominick.ullrich96@yahoo.com

Admin

Christian Murray

Principal Quality Technician

christian.murray77@hotmail.com

Viewer

Emmitt Orn

Future Configuration Administrator

emmitt.orn@gmail.com

Viewer

Anya Bartell

Direct Assurance Developer

anya_bartell44@gmail.com

Member

Kendra Beier

Direct Functionality Designer

kendra_beier22@yahoo.com

Admin

May Moore

Regional Markets Liaison

may_moore@gmail.com

Admin

Sophie Rutherford

Forward Optimization Analyst

sophie.rutherford18@yahoo.com

Admin

Carla Watsica

Principal Group Orchestrator

carla.watsica@yahoo.com

Member

Lesley Kohler

Customer Intranet Supervisor

lesley.kohler43@gmail.com

Admin

Earl DuBuque

Chief Web Assistant

earl_dubuque@hotmail.com

Admin

Angelo Littel

Global Directives Executive

angelo_littel@yahoo.com

Viewer

Darren Rogahn

Direct Accountability Assistant

darren_rogahn39@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
Simon Maggiozelma7@yahoo.comLake RitaActive$31.17
Warren Manteamir27@hotmail.comLorenasteadActive$1,048.54
Desiree Reichelbernhard.franey77@gmail.comWest GrahamboroughInactive$543.20
Desiree Bode-Gutmannjana72@yahoo.comPort KatieInactive$499.14
Mrs. Josiah Thompsonfae64@hotmail.comSchadenportActive$757.78
Total$2,879.83

Basic table

Table with Images

NameEmailLocationStatusBalance
Zola Moen
@colin56
shelly.ortiz@yahoo.comEast DonsideInactive$401.12
Anna Brakus
@cesar_mohr
elena61@hotmail.comNew CorneliushavenActive$270.95
Mrs. Bettye Schroeder
@kate_collins93
archie58@yahoo.comEuclidInactive$694.31
Cayla Hamill
@magnus_corkery
zackery83@yahoo.comNorth DevanteActive$1,040.89
Mrs. Aditya Brakus
@matthew75
elena_kuhlman@yahoo.comSouth AngelinasteadActive$95.75

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Belinda Gerlachlester.lind82@hotmail.comAlexandriaInactive$596.35
Dr. Chelsie Lebsackchelsea19@hotmail.comHarvey-GreenfelderfortActive$638.35
Mr. Troy Marquardtpatricia.spencer-swift@gmail.comHooverInactive$176.76
Irvin Rippinjulie_friesen21@gmail.comLake RobynportInactive$1,117.59
Baylee Crooksmattie17@gmail.comNorth StuarthavenActive$958.32
Total$3,487.37

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Randal Gerlachbecky_brekke-feest@yahoo.comCroninboroughActive$532.95
Ana Prohaskaroger98@hotmail.comNorth MarquisestadActive$544.42
Dominick Kreigerericka_brakus27@gmail.comRosenbaumworthInactive$630.62
Taryn Beattybryana_krajcik@hotmail.comFlorissantActive$559.45
Mrs. Hassie Schmelerrochelle85@gmail.comThompsonburyInactive$1,037.34
Total$3,304.78

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Kolby Oberbrunnerlucie.thompson@yahoo.comFrankiesideInactive$1,027.61
Marilie Schustertaryn14@gmail.comLake MaryannActive$1,064.12
Mr. Alexandre Goodwinbirdie_skiles85@yahoo.comWest EarnestshireActive$592.61
Stella Uptonsantiago.swift18@yahoo.comLenabergInactive$442.85
Lexi Whitemarianne0@gmail.comHilllfieldInactive$947.76
Total$4,074.95

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
Alexa Zulaufvincent_hansen@gmail.comLake SibylshireActive$690.83
Leona Pouroswoodrow_barrows7@hotmail.comHyattfortInactive$189.18
Thelma Schoenpauline_littel75@hotmail.comWest MellieActive$282.19
Viva Gutmanncecil70@gmail.comLake LavadaActive$699.49
Mr. Jesus Daniel DDSfrederic85@yahoo.comFort RossActive$368.85
Total$2,230.54

Table with row selection

Card Table

NameEmailLocationStatusBalance
Maureen Steuberjohanna.treutel@yahoo.comFort ChazshireActive$861.14
Dortha Dachpam_medhurst58@gmail.comFederal WayInactive$1,197.31
Emilio Prohaskawilburn_ziemann@gmail.comCronafortInactive$1,070.46
Pinkie Kirlinamanda_gislason@yahoo.comEast ChesterlandActive$1,194.81
Jermain Murphypete_thompson39@hotmail.comEast RandallActive$991.30
Total$5,315.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
Miss Arlene Riceabdullah_quigley41@hotmail.comCarrollburyInactive$166.64
Lula Bayercarter_bosco@gmail.comIgnaciolandInactive$398.47
Helena Ortizrosalee.abbott@yahoo.comChino HillsActive$712.50
Emerson Wildermanjeannie_ledner@yahoo.comPalm DesertInactive$104.30
Mr. Lorenzo Kemmersamuel45@gmail.comNorth DeniseInactive$963.65
Myron Ortizrubie_littel@yahoo.comClemmiesideInactive$293.80
Wilson Murrayzora98@yahoo.comMetairieActive$351.15
Kristy Schummfiliberto50@gmail.comLake OrlandoInactive$790.65
Zoila Harber IVburdette.koch12@yahoo.comGreenvilleActive$173.76
Kylie Connellyanastacio_ruecker@yahoo.comBlockstadInactive$470.87
Allen O'Reillycalista46@gmail.comRancho CucamongaInactive$739.27
Raheem Hegmann-Littlesophia21@gmail.comCranstonInactive$636.87
Aniyah Murrayelyse83@hotmail.comZackworthActive$1,003.27
Cedric Bahringer IVlynne.cormier99@hotmail.comNational CityActive$627.98
Ann Mertzreta19@gmail.comNorth ElifortInactive$733.60
Total$8,166.78

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.