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
INV001UnpaidBank Transfer$920.63
INV002UnpaidPayPal$430.36
INV003PaidPayPal$455.71
INV004PendingPayPal$721.80
INV005UnpaidBank Transfer$916.96
INV006PendingBank Transfer$827.64
INV007PendingBank Transfer$436.39
Total$4,709.49

Simple

Users

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

NameTitleEmailRoleActions
Karla EmardCustomer Functionality Administratorkarla_emard@yahoo.comMember
Lindsay KassulkeHuman Brand Agentlindsay_kassulke17@yahoo.comMember
Nathaniel BradtkeLead Metrics Liaisonnathaniel_bradtke@yahoo.comViewer
Emanuel O'ConnerLegacy Metrics Administratoremanuel_oconner30@hotmail.comViewer
Brandi TurnerInternational Communications Managerbrandi.turner56@yahoo.comAdmin
Cassandra PfefferNational Operations Directorcassandra_pfeffer45@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Quinton Steuber

Investor Data Liaison

quinton_steuber61@gmail.com

Admin

Robin Mraz

Regional Implementation Director

robin_mraz14@hotmail.com

Member

Angus Pacocha

National Optimization Consultant

angus.pacocha@gmail.com

Viewer

Dulce DuBuque

Investor Response Administrator

dulce_dubuque@gmail.com

Viewer

Lucie Waelchi

Investor Response Coordinator

lucie.waelchi0@gmail.com

Admin

Pedro Deckow

International Solutions Developer

pedro.deckow81@yahoo.com

Admin

Sticky header

Users

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

NameRoleActions

Terry Parisian

Customer Response Technician

terry.parisian@gmail.com

Admin

Homer Armstrong

Dynamic Branding Representative

homer_armstrong30@gmail.com

Admin

Tanya Moen

Regional Data Strategist

tanya.moen@gmail.com

Member

Vidal Homenick

District Integration Planner

vidal.homenick@hotmail.com

Admin

Brenna Schiller

Principal Intranet Specialist

brenna_schiller37@gmail.com

Viewer

Tyrone Windler

Global Brand Designer

tyrone.windler61@hotmail.com

Admin

Annamarie Leffler

International Metrics Manager

annamarie_leffler85@yahoo.com

Admin

Tim Sipes

Legacy Interactions Architect

tim_sipes86@gmail.com

Admin

Linda Legros

Corporate Mobility Representative

linda.legros16@hotmail.com

Viewer

Elsa Sanford

Lead Accounts Associate

elsa_sanford@gmail.com

Admin

Allan Becker

International Interactions Coordinator

allan_becker@yahoo.com

Admin

Jeremy Stiedemann

Corporate Mobility Designer

jeremy_stiedemann@gmail.com

Viewer

Javonte Barrows

Senior Response Representative

javonte.barrows21@gmail.com

Member

Eloise Dietrich

Lead Creative Consultant

eloise_dietrich45@yahoo.com

Member

Jasper Mayert

Customer Creative Agent

jasper_mayert@hotmail.com

Viewer

Orval Hettinger

International Paradigm Planner

orval.hettinger29@yahoo.com

Member

Michael Daniel

Internal Tactics Coordinator

michael.daniel@gmail.com

Admin

Karen Auer

International Configuration Executive

karen_auer@hotmail.com

Member

Marlee Collins

Global Functionality Consultant

marlee.collins@hotmail.com

Viewer

Helen Ratke

Regional Quality Facilitator

helen_ratke@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
Max Beckerkirk_stiedemann@hotmail.comRoyal OakActive$896.69
Delpha Barton Vabigail_bins19@yahoo.comSan LeandroInactive$500.37
Kathy Bartolettijermaine_rowe@hotmail.comBartellfurtActive$442.32
Lavina Lubowitzrhonda_lakin82@hotmail.comSunnyvaleInactive$257.37
Dianna Waelchiocie26@hotmail.comIowa CityInactive$114.46
Total$2,211.21

Basic table

Table with Images

NameEmailLocationStatusBalance
Jarrod Braun
@bruce.tromp
evie_durgan@hotmail.comIrvingInactive$354.30
Keegan Bergstrom
@johanna.marks
pauline6@gmail.comNew DaytonActive$314.68
Vanessa Crist DVM
@lynette.okeefe
mario43@hotmail.comDiamond BarActive$315.10
Grady Grant III
@jean_shanahan95
francisco_brekke@hotmail.comRosinaworthActive$498.93
Korbin Hills-Hoeger
@rylee38
maybell_goldner@hotmail.comEulessActive$229.43

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Carl Vonnelle_erdman@yahoo.comWest ZakaryActive$1,169.37
Bertha Hilllgianni_schowalter34@hotmail.comOro ValleyActive$487.83
Orville Kuhn DDSsedrick.veum95@hotmail.comEast AlexzanderActive$489.96
Mario Raukrystal2@gmail.comLevittownInactive$446.61
Elza Ankundingyvette_kub76@gmail.comRoanokeActive$691.70
Total$3,285.47

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Kelvin Russelkobe43@yahoo.comEast DudleyhavenInactive$267.67
Joseph VonRuedenelbert.sauer@gmail.comCreminburyInactive$886.54
Kennedy Mitchellkellie.wisozk91@hotmail.comEast CecilecesterInactive$632.80
Rodger Homenickbenedict.erdman23@gmail.comMcClurefieldInactive$743.01
Whitney Jastruben_lueilwitz17@gmail.comNorth OrloInactive$251.97
Total$2,781.99

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Erik Hickleaylin19@gmail.comNew EarnestvilleInactive$635.22
Guillermo Hauckottilie.koch-jerde33@yahoo.comSouth JasminviewActive$729.34
Melvin Kautzer Sr.amber.hintz@hotmail.comGreenshireActive$1,082.45
Ms. Norberto Schmitt Ialex98@yahoo.comFort HershelmouthActive$41.98
Yasmin Pfannerstillterrance7@yahoo.comFort NeilActive$701.88
Total$3,190.87

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
Nils McCulloughivy.hackett@hotmail.comWest GroverboroInactive$1,102.97
Geoffrey Cristgeneral.heathcote@hotmail.comColtonActive$118.92
Leslie Parkerwendy.corwin@yahoo.comEast KayaboroughInactive$900.47
Eino Walter Igeraldine26@yahoo.comColorado SpringsInactive$18.13
Shelly Predovicsharon83@yahoo.comWest SamInactive$125.09
Total$2,265.58

Table with row selection

Card Table

NameEmailLocationStatusBalance
Dr. Walter Bradtkedamaris_koelpin@yahoo.comFort MicahInactive$825.73
Albert Monahandoris_crist2@gmail.comSpencerfurtActive$849.36
Allison Strosinpatrick.connelly30@hotmail.comNew BellaInactive$1,064.93
Dr. Clifford Miller DVMstan25@gmail.comClementineburyInactive$619.50
Carleton Mosciskimaximillian.hand51@gmail.comFort GreysonworthActive$47.45
Total$3,406.97

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
Karla Hegmannkimberly.hauck@yahoo.comJaskolskivilleActive$513.62
Mr. Nick Reinger IIIclinton43@yahoo.comCastle RockInactive$191.46
Maryann Cartwrightbobby.jacobs@hotmail.comBernardstadInactive$111.42
Lonnie Considinenaomie94@yahoo.comCorbinviewInactive$277.82
Shane Erdmanwallace.bins27@hotmail.comLake EmeraldActive$514.41
Miss Heather Torphycatherine79@gmail.comSouth ElverafortInactive$801.58
Brandi Gerholdcole67@gmail.comMcDermottworthInactive$722.07
Randal Hudson IIIshannon.hagenes58@yahoo.comEast JohathanboroActive$58.69
Ryan Browndoyle.corkery@gmail.comSouth MiraclelandActive$314.64
Dr. Veronica Reichert MDmolly_casper32@hotmail.comWiegandtownInactive$424.79
Florencio Leuschketrenton.collier@gmail.comKyleightonActive$336.99
Jo Hammescarol_ziemann73@gmail.comSouth GriffinActive$1,148.04
Ashton Boehmmoses28@yahoo.comTulareInactive$210.42
Heidi Gerlachrhett44@gmail.comArielleburyActive$800.89
Cicero Hammesmara_white@yahoo.comNorth HailievilleActive$978.97
Total$7,405.81

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.