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
INV001PaidPayPal$320.95
INV002PaidBank Transfer$137.37
INV003PendingCredit Card$736.30
INV004PendingCredit Card$556.52
INV005UnpaidPayPal$771.09
INV006UnpaidCredit Card$181.34
INV007UnpaidPayPal$280.04
Total$2,983.61

Simple

Users

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

NameTitleEmailRoleActions
Imogene KreigerDynamic Quality Orchestratorimogene.kreiger@yahoo.comMember
Emilio HagenesGlobal Identity Facilitatoremilio_hagenes97@hotmail.comMember
Cullen LeschGlobal Assurance Executivecullen.lesch86@gmail.comViewer
Lela KoeppInternal Optimization Developerlela.koepp53@hotmail.comMember
Isac Stiedemann-CroninPrincipal Directives Orchestratorisac_stiedemann-cronin97@yahoo.comMember
Buddy Murray-BayerDistrict Identity Agentbuddy.murray-bayer@yahoo.comViewer

Stacked on mobile

Users

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

NameRoleActions

Nicole Kovacek

Lead Interactions Administrator

nicole.kovacek56@gmail.com

Admin

Justina Reichel

Dynamic Factors Specialist

justina_reichel50@hotmail.com

Viewer

Roma Hamill

Chief Implementation Liaison

roma.hamill@hotmail.com

Member

Joel Friesen

Customer Quality Facilitator

joel_friesen13@gmail.com

Admin

Adele Thompson

Principal Paradigm Planner

adele_thompson@gmail.com

Member

Isabella Gulgowski

Future Group Representative

isabella.gulgowski@gmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Naomi Runolfsdottir

Principal Metrics Assistant

naomi.runolfsdottir84@yahoo.com

Member

Cristopher Ziemann

International Tactics Associate

cristopher.ziemann@gmail.com

Viewer

Stephanie Wilkinson

Forward Research Liaison

stephanie_wilkinson72@hotmail.com

Member

Queenie Kerluke

International Metrics Developer

queenie_kerluke44@hotmail.com

Member

Serenity Konopelski

National Usability Director

serenity_konopelski2@yahoo.com

Admin

Carolyne Maggio

National Mobility Engineer

carolyne_maggio13@hotmail.com

Viewer

Brant Sipes

District Interactions Technician

brant.sipes@hotmail.com

Member

Elias Hyatt

Customer Group Consultant

elias.hyatt33@yahoo.com

Member

Skye Wolf

Human Tactics Facilitator

skye_wolf28@hotmail.com

Member

Jayme Vandervort

District Security Engineer

jayme_vandervort@yahoo.com

Viewer

River Cronin

Central Identity Engineer

river_cronin55@yahoo.com

Viewer

Jamaal Ortiz

International Branding Representative

jamaal.ortiz@hotmail.com

Viewer

Elise Wiza

Global Group Producer

elise.wiza@gmail.com

Member

Damian Bergnaum

Central Infrastructure Developer

damian_bergnaum@hotmail.com

Member

Stephania Zboncak

Principal Usability Developer

stephania_zboncak70@gmail.com

Member

Jaydon Zulauf

Senior Program Planner

jaydon.zulauf52@yahoo.com

Viewer

Keven Hammes

National Directives Representative

keven.hammes@gmail.com

Member

Christine Koch

Corporate Configuration Planner

christine.koch0@hotmail.com

Viewer

Mauricio Fadel

National Integration Strategist

mauricio_fadel73@yahoo.com

Admin

Thaddeus Sporer

Product Accounts Representative

thaddeus.sporer28@gmail.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
Mildred Schummzula_schowalter76@yahoo.comMyahsteadActive$474.00
Mr. Domingo Spinka PhDkelton30@yahoo.comBloomingtonActive$940.18
Miss Janice Cristleonard_barrows@hotmail.comWest JedInactive$182.22
Lena Konopelskimyrl.hamill@gmail.comEast ZitaActive$976.80
Herman Mayerjovany79@yahoo.comJevonsteadActive$378.79
Total$2,951.99

Basic table

Table with Images

NameEmailLocationStatusBalance
Anna Thiel
@loyal17
izabella_kling@yahoo.comMarjolainestadInactive$654.97
Jimmie Huels
@karson33
dejon43@hotmail.comConsidineviewActive$765.34
Crystal Blick
@joy85
dallin75@yahoo.comAltadenaInactive$325.21
Eddie Mann
@christop_jaskolski
octavia6@gmail.comSouth EladioActive$708.43
Hannah Dibbert
@christopher_price
eunice63@yahoo.comDibbertviewActive$350.48

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Evelyn Vandervortgeovanny.fritsch@gmail.comGraysonbergInactive$80.34
Agnes Kozeytoni62@hotmail.comPort RosettahavenActive$408.88
Brittany Ferryeileen64@yahoo.comRoswellActive$110.90
Camille Schillerludwig42@yahoo.comNew PatrickcesterActive$800.29
Walter Trantowlexus83@gmail.comNorth DaishavilleInactive$509.93
Total$1,910.34

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Joan Swaniawskikylee_dietrich89@yahoo.comLake EvansActive$332.93
Ruth Flatleyelenor.koepp@gmail.comFort GusInactive$533.92
Ida Barrows-Welchdonnell.hartmann92@gmail.comKaceyfurtInactive$1,191.70
Elsie Kingcolt.stehr58@gmail.comSouth WiltontonActive$55.20
Virgil Keeling-Donnelly Vvalerie.vonrueden@hotmail.comHarrissideActive$1,147.92
Total$3,261.67

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Moses Cronaestel52@yahoo.comPort TiaInactive$221.80
Dr. Billy Townewava18@gmail.comTinaviewInactive$251.26
Roger Mitchellamy.jakubowski@hotmail.comFrederickportActive$126.66
Doreen Wintheisertorey.kiehn29@hotmail.comPort AdelleInactive$621.57
Dr. Francisco Kozeybrooks_botsford@gmail.comKamrontownActive$286.53
Total$1,507.82

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
Dr. Lela Barrowsabdiel.durgan@yahoo.comWest DeondretownInactive$364.65
Tara Larkinmarshall.cassin@yahoo.comWesley ChapelInactive$194.44
Gladys Tromp DDSclifton54@yahoo.comNew SimoneInactive$928.04
Julie Hauckmalvina.block@gmail.comLake JazminportInactive$116.99
Dana Grahamparis_breitenberg82@yahoo.comFort WayneInactive$1,130.36
Total$2,734.48

Table with row selection

Card Table

NameEmailLocationStatusBalance
Simon Schmelerizabella.boehm94@hotmail.comLynwoodActive$346.07
Cecil Pacochanelda_king87@yahoo.comTurcottetownInactive$241.02
Ms. Doris Gusikowskirosetta.dooley87@yahoo.comRozellaburyActive$403.87
Ramon Collins Jr.kelton_christiansen27@yahoo.comZiemannmouthActive$850.93
Jennifer Hanejack.wyman@hotmail.comKossworthActive$449.70
Total$2,291.59

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 Gretchen Spinkamagdalena_kling@hotmail.comDaly CityInactive$730.15
Gordon Rodriguez DDSkevon_brown@yahoo.comHansstadInactive$1,193.51
Gerardo Schimmeladrienne.beer78@yahoo.comSouth AracelyActive$65.18
Ada Funk Sr.jewell86@gmail.comJupiterInactive$497.45
Mrs. Gloria Murphy MDrollin_howe@yahoo.comWest MartacesterActive$470.39
Leona Mertzkelsi46@hotmail.comEvanstonInactive$902.69
Pamela Bechtelarcamron.kirlin@hotmail.comPort NorbertfieldActive$528.91
Juan Yundtfavian.kuvalis79@hotmail.comSouth KatarinasideInactive$318.16
Dominic Stokesbrandy.schuster78@hotmail.comBartellmouthInactive$17.50
Lorenzo Corwinnola.boyer88@yahoo.comNorth LennaActive$291.65
Margaret Leffler IIIcandida.nader@gmail.comTurnerboroActive$292.29
Mona Marvinantonina44@yahoo.comSan Luis ObispoActive$829.51
Yvonne Kirlin Jr.gerard.howe86@gmail.comMitchellstadActive$664.97
Patrick McClurenikita_swift@gmail.comDarehavenActive$1,045.24
Felix Cormieraric53@gmail.comFort AntoniettafortInactive$318.27
Total$8,165.87

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.