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$695.82
INV002UnpaidCredit Card$228.58
INV003UnpaidBank Transfer$201.45
INV004PaidPayPal$411.01
INV005PendingPayPal$243.42
INV006UnpaidPayPal$558.63
INV007PaidCredit Card$151.22
Total$2,490.13

Simple

Users

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

NameTitleEmailRoleActions
Elna D'AmoreDistrict Branding Liaisonelna_damore57@gmail.comViewer
Kenya CollinsDirect Web Producerkenya.collins@hotmail.comViewer
Nedra CummerataGlobal Accounts Orchestratornedra_cummerata@hotmail.comAdmin
Zechariah SchimmelChief Metrics Liaisonzechariah.schimmel31@gmail.comViewer
Estell JastHuman Optimization Administratorestell_jast@yahoo.comViewer
Salma CorkeryCorporate Operations Facilitatorsalma.corkery67@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Emmet Hegmann

Direct Interactions Designer

emmet.hegmann50@gmail.com

Viewer

Pierre Boyer

Product Solutions Consultant

pierre_boyer62@hotmail.com

Viewer

Marty Smith-Kling

Principal Accounts Architect

marty.smith-kling@hotmail.com

Viewer

Madonna Hoeger

Regional Infrastructure Technician

madonna.hoeger2@hotmail.com

Member

Burley Wyman

International Branding Developer

burley.wyman@gmail.com

Viewer

Hobart Pollich

Human Tactics Agent

hobart_pollich@gmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Jannie Rice

Senior Data Liaison

jannie_rice58@hotmail.com

Member

Lexi Hintz

Direct Marketing Executive

lexi.hintz9@hotmail.com

Viewer

Laverne Reynolds

Lead Assurance Representative

laverne_reynolds@hotmail.com

Admin

Chaim Welch

Dynamic Communications Manager

chaim.welch76@gmail.com

Admin

Rene Fritsch

Principal Response Developer

rene.fritsch@yahoo.com

Member

Lorenzo Smith-Rempel

Future Group Manager

lorenzo.smith-rempel0@hotmail.com

Member

Tom O'Keefe

Internal Usability Coordinator

tom.okeefe88@gmail.com

Member

Madaline Hand

International Integration Specialist

madaline.hand36@yahoo.com

Admin

Karianne Torphy

Customer Accounts Supervisor

karianne_torphy@hotmail.com

Member

Anderson Blick

Product Infrastructure Executive

anderson_blick@gmail.com

Member

Reed Dicki

International Response Associate

reed_dicki41@hotmail.com

Viewer

Alycia Adams

Direct Research Strategist

alycia_adams52@gmail.com

Admin

Camryn Ward

Corporate Branding Planner

camryn.ward69@gmail.com

Admin

Joesph Wintheiser

Internal Configuration Developer

joesph_wintheiser93@yahoo.com

Viewer

Laura Padberg

International Communications Architect

laura.padberg51@hotmail.com

Admin

Camryn Spinka

Lead Response Manager

camryn.spinka82@hotmail.com

Viewer

John Gorczany

Legacy Data Producer

john_gorczany@yahoo.com

Viewer

Fausto Hammes

Direct Marketing Facilitator

fausto.hammes@hotmail.com

Admin

Kiel Mayer

Future Infrastructure Officer

kiel.mayer@yahoo.com

Viewer

Sydnee Hoeger

Principal Brand Facilitator

sydnee.hoeger@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
Jackie Kozeyadriana_boyle59@gmail.comThiellandActive$1,188.38
Dr. Max Prosaccolaury46@gmail.comNorth BrigitteInactive$1,090.46
Bruce Bartellelisa.stroman88@hotmail.comSamantatownActive$1,112.28
Emmett Conroy MDsheila.schuppe59@gmail.comNorth KingActive$987.79
Roberta Davis MDcleo_runolfsdottir3@yahoo.comBeaustadInactive$999.91
Total$5,378.82

Basic table

Table with Images

NameEmailLocationStatusBalance
Leon Schroeder
@elsa_douglas11
kareem_labadie@gmail.comEast GreggbergActive$97.96
Omar Christiansen
@sydney.bradtke78
lia_bernhard@yahoo.comFort MadieburyActive$1,071.26
Elsie Dach
@marley20
devin_cummerata@yahoo.comWest ElvieshireActive$491.89
Ms. Sonja Lang DVM
@arlene.dicki
cyrus_langworth99@yahoo.comVonRuedensideInactive$24.22
Shelia Gislason Jr.
@maybell87
jewell_beier49@hotmail.comAnaissideActive$978.30

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Cary Hermanpriscilla25@hotmail.comFort SaraiActive$324.13
Mr. Harry Considinemadisen40@gmail.comKadevilleActive$1,129.73
Preston Ryanarnold_legros89@hotmail.comPfannerstilltonActive$1,111.17
Ella Daughertyashton5@gmail.comTopekaInactive$1,111.60
Jo Bashirianelisa3@gmail.comHemetInactive$1,053.82
Total$4,730.45

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Julian McGlynnroxane.tremblay56@hotmail.comBuckeyeActive$745.16
Rick Thielwilhelmine98@yahoo.comOrnbergInactive$59.13
Phyllis Harvey IVdevonte.stoltenberg80@hotmail.comEvertworthActive$8.99
Dr. Jordan Sipesnorma.gottlieb54@gmail.comAlicefurtInactive$692.34
Essie Kertzmanngerhard25@gmail.comGuschesterInactive$320.65
Total$1,826.27

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Jacquelyn Hermankaren_fisher@hotmail.comMargetonActive$921.96
Marty Lednerlelia_bogisich@gmail.comLake DonatoActive$118.79
Marta Raynortaya_parker64@hotmail.comKoeppvilleInactive$1,165.67
Lionel Kesslerlorenz_klein@hotmail.comRivertonInactive$207.07
Lynne Gutkowskiemelie_thompson66@yahoo.comCentrevilleInactive$195.39
Total$2,608.88

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
Bradley Turnergino_bergstrom@yahoo.comLeague CityActive$1,081.46
Jon Strosinemie.homenick-oconner@hotmail.comSouth BriellelandActive$451.96
Dr. Justin Hansenronny51@hotmail.comSouth PhoebeActive$55.54
Maryann Johnstonjulius.hahn2@yahoo.comFort WinfieldstadInactive$692.28
Viola Osinskisaige37@gmail.comSpring ValleyInactive$1,168.22
Total$3,449.46

Table with row selection

Card Table

NameEmailLocationStatusBalance
Cecelia Jaskolskishanie75@yahoo.comHarberportInactive$1,113.52
Lucy Kuvalisrusty_doyle24@hotmail.comEast ErnestinaInactive$85.88
Abraham Dickiamber_pollich88@yahoo.comNorth JanaActive$1,084.39
Bill Jaskolskiassunta77@hotmail.comKristoferboroughInactive$210.25
Blanca Millsdonnell_bednar@yahoo.comBeerlandActive$1,025.38
Total$3,519.42

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
Dominick Haaganissa_beatty48@hotmail.comWest HavenInactive$534.93
Heidi Torphy Vreggie38@hotmail.comSkilestonActive$548.19
Verna Hintz IIIchet18@gmail.comMarlenburyActive$412.89
Dr. Jody Moengerry12@yahoo.comHomenickviewInactive$447.56
Tom Schuppedante.hermann21@gmail.comDurhamActive$565.64
Dustin Okunevadee0@hotmail.comFort EugeneburyInactive$869.02
Gail Beattyvalentin.rice-renner29@hotmail.comFritschlandInactive$95.31
Kelly Wunschcordie78@hotmail.comEast KamronfurtInactive$355.60
David Quitzonemilie81@yahoo.comKentwoodActive$8.87
Marsha Paucekerik.terry@gmail.comReedsteadInactive$1,158.75
Alberta Feestarianna.crist@yahoo.comShanalandActive$515.79
Inez Jones PhDarvel97@gmail.comWest BennievilleInactive$1,120.43
Penny Beierjayde_harber@yahoo.comLake SavannahportActive$627.37
Paula Klocko Idoug_witting89@yahoo.comEast DevonteActive$449.69
Nina Gislasonkali.runolfsson@gmail.comBedfordInactive$694.75
Total$8,404.79

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.