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
INV001PaidCredit Card$309.32
INV002PendingBank Transfer$326.57
INV003PaidCredit Card$861.26
INV004PaidCredit Card$115.31
INV005PendingPayPal$423.68
INV006PaidPayPal$632.81
INV007PaidBank Transfer$665.66
Total$3,334.61

Simple

Users

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

NameTitleEmailRoleActions
Mercedes ErnserDistrict Identity Agentmercedes.ernser@hotmail.comMember
Jess CummerataNational Communications Plannerjess_cummerata@yahoo.comMember
Lorena KlockoDistrict Research Architectlorena.klocko30@hotmail.comMember
Zachary WolfGlobal Usability Directorzachary_wolf@yahoo.comMember
Sammy PacochaGlobal Assurance Developersammy_pacocha96@yahoo.comMember
Sylvester LabadieGlobal Infrastructure Liaisonsylvester.labadie@yahoo.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Armando Hermiston

Regional Accountability Liaison

armando.hermiston39@yahoo.com

Member

Hattie Runolfsdottir

Investor Configuration Supervisor

hattie.runolfsdottir11@hotmail.com

Viewer

Hazel Williamson

Corporate Research Consultant

hazel_williamson11@hotmail.com

Member

Grace Hirthe

Dynamic Integration Liaison

grace.hirthe56@gmail.com

Member

Wilmer Quigley-Powlowski

Human Implementation Coordinator

wilmer_quigley-powlowski2@yahoo.com

Admin

Esther Bruen

Central Functionality Supervisor

esther.bruen@hotmail.com

Member

Sticky header

Users

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

NameRoleActions

Keara Klocko

Global Paradigm Analyst

keara_klocko46@yahoo.com

Admin

Holly Beahan

Forward Quality Consultant

holly.beahan53@yahoo.com

Admin

Jermaine Runolfsson

National Group Manager

jermaine_runolfsson50@hotmail.com

Admin

Martine Bergnaum

Direct Factors Supervisor

martine.bergnaum76@yahoo.com

Member

Leo Christiansen-Bashirian

Internal Response Officer

leo_christiansen-bashirian@gmail.com

Admin

Idell Braun

International Assurance Technician

idell.braun37@hotmail.com

Admin

Brisa Langworth

Chief Integration Director

brisa.langworth31@gmail.com

Admin

Rhonda Raynor-Sauer

Regional Interactions Specialist

rhonda_raynor-sauer0@gmail.com

Admin

Eriberto Armstrong

International Response Assistant

eriberto_armstrong46@yahoo.com

Viewer

Kelli Kub

Regional Implementation Officer

kelli_kub@hotmail.com

Admin

Madalyn Robel

International Operations Agent

madalyn.robel96@yahoo.com

Member

Leona Gibson

Dynamic Usability Designer

leona_gibson@gmail.com

Admin

Kerry Kuphal

District Accounts Assistant

kerry.kuphal97@hotmail.com

Viewer

Mamie Rippin

Senior Data Director

mamie_rippin98@hotmail.com

Member

Margarett Anderson

Lead Identity Specialist

margarett_anderson@hotmail.com

Member

Jo Daniel

Internal Branding Developer

jo_daniel@gmail.com

Member

Elmer Raynor

Legacy Tactics Specialist

elmer.raynor65@hotmail.com

Viewer

Santiago Rutherford

Forward Integration Facilitator

santiago.rutherford74@yahoo.com

Admin

Mafalda Becker

Human Operations Analyst

mafalda.becker@yahoo.com

Admin

Woodrow Johnston

Central Optimization Executive

woodrow_johnston@yahoo.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
Mrs. Ines Stoltenberg Sr.marcus_boehm@yahoo.comPort KavontownInactive$537.81
Lorena Prosaccodane9@hotmail.comPetetownInactive$459.33
Laurie Murraylesly79@yahoo.comNew CynthiatonActive$192.29
Kristina Wymanmadeline97@gmail.comDomingostadInactive$51.48
Maxwell Hanecassidy.kris42@gmail.comSouth AlexandrineActive$1,112.29
Total$2,353.20

Basic table

Table with Images

NameEmailLocationStatusBalance
Simeon Jacobi
@jean.wunsch
noel.fisher57@yahoo.comLake JuniorsteadActive$1,019.35
Arlene Graham
@thurman.cruickshank
monserrat.hodkiewicz2@gmail.comNorth AdolfoInactive$259.38
Melyssa DuBuque
@freda_graham60
kaden83@yahoo.comGorczanysteadInactive$332.55
Eldora Heller
@nickolas.bradtke
abbie99@hotmail.comMonterey ParkInactive$16.63
Cecelia Gottlieb
@asia52
roland_dare42@yahoo.comLittletonActive$426.41

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Ismael Reichertminnie35@gmail.comMount VernonActive$540.12
Glenn Lehnerjuanita87@yahoo.comPort AllenefurtActive$973.53
Seth Marks IIimmanuel_morar57@gmail.comBotsfordboroughInactive$591.08
Enola Schaeferverona58@hotmail.comLake ShannonActive$430.37
Kenneth Nolanfredrick.trantow@yahoo.comThorntonActive$738.96
Total$3,274.06

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Gustavo Kassulkeluke.cassin40@hotmail.comVolkmansteadActive$49.73
Pauline Hesselyessenia_schinner@gmail.comLestervilleActive$1,049.24
Tabitha Sipesjoey71@yahoo.comRockwallInactive$452.45
Darrell Christiansenalf_olson@gmail.comLake Havasu CityInactive$963.95
Terrence Wilkinsonnatasha.johnston@hotmail.comNew AdrienActive$49.08
Total$2,564.45

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Westley Windler Vphillip.kuhlman@yahoo.comNew JakeburyActive$466.82
Keyon Osinskijohnathan70@yahoo.comNew AdeleActive$1,025.00
Kellen Grimeskellie.oberbrunner83@gmail.comParkerActive$1,090.72
Courtney Turnerheather_schaden38@yahoo.comSidneystadActive$1,123.84
Mrs. Michele Ritchievicki.kuvalis@hotmail.comEast FletchermouthActive$128.60
Total$3,834.98

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
Tod Thompsonmaryann.murazik@gmail.comStiedemannsideActive$1,050.98
Mrs. Trinity Funklaura_feest46@gmail.comPort ModestoActive$781.99
Dr. Edgar Schambergerkeith_schoen@gmail.comSouth AlfordstadInactive$1,072.30
Edwin Berniernina35@hotmail.comMannlandActive$1,116.92
Thalia Boehmfranz.walsh-skiles@yahoo.comJakubowskisteadInactive$497.86
Total$4,520.05

Table with row selection

Card Table

NameEmailLocationStatusBalance
Melanie Ritchieedmond.pfeffer@yahoo.comEast MikaylaInactive$698.72
Mia Halvorsonbrady72@yahoo.comPort SabrynacesterInactive$111.14
Felipe Waters IIalvin.kozey@yahoo.comSmyrnaInactive$209.58
Shane Conndamian.wyman53@yahoo.comPort AriActive$66.00
Ms. Ida Mantechristina.wisozk88@yahoo.comNorth MavericktownInactive$666.38
Total$1,751.82

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
Kristin Jenkinsaylin54@yahoo.comSwaniawskifieldInactive$1,004.90
Mr. Jay Fisherherman_halvorson32@yahoo.comSan JuanActive$689.42
Rafaela Kulasmarlon_hagenes@yahoo.comZiemannsideActive$947.03
Oliver Hudsondwight.nitzsche@yahoo.comMaxinetownActive$859.53
Kira Erdman Vnoah54@gmail.comJuneshireInactive$801.05
Lydia Brownbert95@hotmail.comFort MichalevilleActive$364.27
Gabriel Hyatt-Mrazleslie_bednar14@yahoo.comKerlukeviewActive$192.41
Lexie Borerabel61@yahoo.comNew ModestaActive$988.05
Pauline Hilpertlionel.legros88@hotmail.comMargateInactive$787.24
Loren Kris-Purdy IVclifford.gutkowski57@gmail.comNew JoellebergActive$500.87
Winona Pagac IIIdaisy.sipes@gmail.comBurdetteboroInactive$502.43
Amos Maggiotheresia.jones74@hotmail.comWeissnatsideActive$1,089.67
Penelope Ortizdarryl.romaguera@yahoo.comProvoActive$1,105.27
Silvia Rowedarrell_kutch13@gmail.comSouth MargueriteInactive$53.70
Jason Watsicaedwin15@hotmail.comNew MelyssaworthActive$4.85
Total$9,890.69

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.