Table

A responsive table component.

Source code

Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

npx ui-thing@latest add table

Usage

Basic example

A list of your recent invoices.
InvoiceStatusMethodAmount
INV001PendingBank Transfer$176.09
INV002PaidBank Transfer$379.93
INV003UnpaidCredit Card$760.54
INV004UnpaidPayPal$163.53
INV005UnpaidPayPal$655.95
INV006PendingCredit Card$931.05
INV007UnpaidPayPal$381.34
Total$3,448.43

Simple

Users

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

NameTitleEmailRoleActions
Annette DeckowInternal Factors Architectannette_deckow@yahoo.comMember
Buster Ryan-KubDirect Implementation Engineerbuster.ryan-kub@yahoo.comAdmin
Kamron PagacGlobal Intranet Orchestratorkamron_pagac@yahoo.comAdmin
Israel LehnerSenior Research Analystisrael_lehner@yahoo.comAdmin
Abigayle SchadenCorporate Usability Consultantabigayle.schaden@yahoo.comAdmin
Maudie WalshCentral Quality Producermaudie_walsh@yahoo.comViewer

Stacked on mobile

Users

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

NameRoleActions

Minerva Weimann

Chief Applications Developer

minerva_weimann@yahoo.com

Viewer

Helen Green

Regional Interactions Associate

helen.green87@yahoo.com

Member

Gideon Daniel

Chief Program Officer

gideon_daniel92@yahoo.com

Admin

Llewellyn Pagac

Senior Mobility Associate

llewellyn.pagac5@yahoo.com

Admin

Rowena Gorczany

Internal Factors Assistant

rowena.gorczany@hotmail.com

Admin

Bennett Paucek

Forward Mobility Engineer

bennett.paucek79@gmail.com

Viewer

Users

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

NameRoleActions

Branson Borer

Regional Creative Designer

branson_borer96@gmail.com

Viewer

Bernardo Baumbach

Investor Quality Architect

bernardo.baumbach@hotmail.com

Member

Bo Mertz

Lead Paradigm Director

bo_mertz71@yahoo.com

Viewer

Mary Hammes

Principal Response Producer

mary.hammes@gmail.com

Viewer

Nelda Anderson

Global Applications Analyst

nelda_anderson20@hotmail.com

Admin

Fleta Bailey

Lead Data Supervisor

fleta_bailey@gmail.com

Viewer

Kailyn Moen

Human Brand Specialist

kailyn_moen3@hotmail.com

Viewer

Samara Erdman

Legacy Intranet Engineer

samara.erdman54@gmail.com

Admin

April Franey

Future Response Engineer

april_franey@hotmail.com

Member

Kurt McGlynn-Rutherford

Direct Identity Executive

kurt.mcglynn-rutherford@gmail.com

Member

Jaquan Champlin

International Configuration Associate

jaquan.champlin@hotmail.com

Member

Mckayla Bosco

Internal Program Officer

mckayla.bosco@yahoo.com

Member

Jude Grimes

Internal Group Consultant

jude_grimes@yahoo.com

Admin

Joshuah Boyer

Dynamic Data Executive

joshuah.boyer48@hotmail.com

Admin

Kellen Gleason

Future Accountability Orchestrator

kellen_gleason@yahoo.com

Admin

Franz Langworth

Internal Factors Technician

franz.langworth99@gmail.com

Member

Aurelie Berge

Dynamic Security Orchestrator

aurelie.berge@hotmail.com

Admin

Lauryn Kautzer

Internal Optimization Liaison

lauryn_kautzer@yahoo.com

Admin

Theodora Emard

Dynamic Configuration Liaison

theodora.emard@gmail.com

Viewer

Ryder Oberbrunner-Kshlerin

International Implementation Designer

ryder_oberbrunner-kshlerin44@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
Clark Yostdave3@yahoo.comHuntingtonInactive$384.32
Conrad Klockothalia83@hotmail.comChattanoogaActive$55.21
Kristopher Naderberyl1@hotmail.comMabeltonActive$921.12
Taylor Sanforddeion69@hotmail.comLake ZackInactive$1,000.30
Georgia Crookstoni.crist-shields@hotmail.comReingerchesterActive$860.55
Total$3,221.50

Basic table

Table with Images

NameEmailLocationStatusBalance
Mr. Armando Bradtke
@kip.king55
alice38@gmail.comWest JayworthInactive$406.67
Nicole Bernhard
@mariela92
sven60@gmail.comWiegandcesterActive$478.61
Tricia Pagac III
@virginie5
kathleen_witting@gmail.comNorth GladycehavenInactive$274.61
Wayne O'Conner
@nikolas85
luther19@gmail.comAndersonsideInactive$948.49
Louise Schoen
@laury96
bailee41@gmail.comFort WinfieldInactive$494.19

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Dr. Lee Lowemarilyne_hahn@gmail.comNew GlenmouthActive$562.02
Carla Botsfordconstantin_waelchi@yahoo.comPeytonportInactive$297.13
Lauren Russelnayeli.paucek@gmail.comPort HeatherActive$583.23
Virgil Williamsondario89@yahoo.comKellyboroughActive$351.00
Teresa Gleichner Iburley88@yahoo.comOrnstadInactive$914.20
Total$2,707.58

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Shawn Adamsolga.kreiger59@yahoo.comNew HunterInactive$130.49
Taylor Johnsonwyman.heathcote@hotmail.comWolffboroughActive$1,092.45
Hattie Colliersherman_damore48@yahoo.comEast AvaInactive$463.45
Leona Hyattabigayle_stehr@yahoo.comNew RoslynvilleActive$1,151.53
Mrs. Dianna Emmerichnathen38@hotmail.comEast RosellaInactive$957.21
Total$3,795.13

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Dallas Hudson Jr.jayce_dicki43@gmail.comNew MurphyActive$42.60
Mrs. Gayle Bashirianabbey.rogahn9@yahoo.comCarolportActive$404.96
Antoinette Murrayabel.vonrueden@yahoo.comOceansideActive$627.07
Adrienne Stammdelmer_gorczany@hotmail.comNorth EdwardoportActive$765.57
Alberta Mrazcandida.rodriguez3@hotmail.comCoachellaInactive$194.04
Total$2,034.24

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
Carl Schoentanya57@hotmail.comNew TodInactive$672.99
Dr. Wilson Kassulkedeontae.padberg17@gmail.comReneetonActive$887.63
Mr. Barry Bergnaumrae84@hotmail.comNew JuanaInactive$220.28
Henrietta Shanahanstanton.dicki@yahoo.comTristonshireActive$1,193.08
Cornelius Weimannwendy.lind@yahoo.comEast JamesontownInactive$59.51
Total$3,033.49

Table with row selection

Card Table

NameEmailLocationStatusBalance
Thomas Walkerflossie_rempel65@hotmail.comHenriettefurtActive$254.46
Kenneth Rowerebekah.pacocha33@hotmail.comWest DerrickInactive$67.41
Alberta Huelsjamarcus76@gmail.comWest TressaActive$35.50
Eula Sawaynronaldo.mcdermott@hotmail.comHackettfortInactive$1,055.72
Mrs. Antoinette Beerjohathan49@yahoo.comLizahavenInactive$697.35
Total$2,110.44

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
Terence Grady MDcasey_schmeler71@hotmail.comWest WarrenInactive$276.26
Mrs. Eva Effertz MDjacques_bartell@hotmail.comJurupa ValleyInactive$55.60
Woodrow Buckridgeclement_casper81@yahoo.comPotomacInactive$157.91
Zachary Mosciskiwebster_jacobson@gmail.comNorth KimActive$100.95
Julio Monahanpat.greenfelder52@gmail.comNew KadeboroughActive$1,060.29
Ms. Roxanne Gleasoncoty.kling@yahoo.comFort SadyeInactive$1,182.78
Eula Langantwan.friesen15@hotmail.comQuigleylandInactive$895.61
Ted Satterfieldjarrett_osinski74@gmail.comMcCulloughfieldActive$952.22
Jennie Dickens DDSdillan_mcdermott@gmail.comEl PasoActive$1,109.12
Emmett Gibsonelta.stroman-hane@yahoo.comSouth RahsaantonActive$1,065.59
Ms. Jo Shieldsnolan55@gmail.comHutchinsonActive$844.32
Doris Langworthmorgan.orn@yahoo.comBaileyshireActive$1,122.40
Warren Carrollmadyson_schinner@gmail.comFort RebecaboroughActive$437.83
Maureen Goldnerjules.douglas@hotmail.comLake VelmaInactive$823.46
Tiffany Brown-Hettingerarturo.lebsack77@yahoo.comSouth CarachesterInactive$573.84
Total$10,658.18

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