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
INV001PaidCredit Card$465.56
INV002UnpaidPayPal$762.70
INV003PendingCredit Card$846.06
INV004UnpaidPayPal$973.76
INV005PendingCredit Card$197.77
INV006UnpaidCredit Card$545.13
INV007UnpaidBank Transfer$342.11
Total$4,133.09

Simple

Users

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

NameTitleEmailRoleActions
Nellie WilliamsonCustomer Assurance Coordinatornellie_williamson75@gmail.comAdmin
Dock FeilCorporate Factors Coordinatordock.feil@yahoo.comViewer
Trevion DickinsonDynamic Branding Techniciantrevion_dickinson@gmail.comAdmin
Ollie MoenRegional Solutions Executiveollie_moen34@gmail.comMember
Jan AnkundingInvestor Response Officerjan.ankunding52@gmail.comMember
Layla McLaughlinFuture Communications Administratorlayla_mclaughlin6@yahoo.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Gayle Vandervort

Central Data Architect

gayle_vandervort51@hotmail.com

Admin

Vicenta McClure

Future Marketing Architect

vicenta_mcclure@gmail.com

Viewer

Pasquale Hermann

International Accounts Specialist

pasquale.hermann@hotmail.com

Member

Kelli Roberts

Future Accountability Agent

kelli.roberts11@gmail.com

Member

Stefan Wiza

Senior Branding Facilitator

stefan.wiza43@yahoo.com

Admin

Gladyce McDermott

Central Security Designer

gladyce.mcdermott90@hotmail.com

Admin

Users

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

NameRoleActions

Cheyenne Dickinson

Senior Security Coordinator

cheyenne_dickinson@hotmail.com

Member

Vivian Harris

Dynamic Tactics Technician

vivian_harris70@yahoo.com

Admin

Clemens Dietrich

Future Accountability Executive

clemens.dietrich69@hotmail.com

Viewer

Simeon Connelly

National Directives Technician

simeon.connelly@hotmail.com

Viewer

Cornelius Turner

Forward Brand Executive

cornelius.turner@yahoo.com

Admin

Patrick Buckridge

Legacy Division Facilitator

patrick.buckridge98@hotmail.com

Admin

Patience Ullrich

Regional Metrics Administrator

patience_ullrich@hotmail.com

Member

Buford Hills

Direct Infrastructure Strategist

buford_hills@gmail.com

Viewer

Royal Oberbrunner

Internal Markets Agent

royal_oberbrunner@yahoo.com

Viewer

Esta Douglas

Chief Research Executive

esta.douglas1@hotmail.com

Member

Muhammad Walter

Forward Brand Director

muhammad_walter@yahoo.com

Member

Houston Tremblay

Principal Factors Specialist

houston.tremblay11@gmail.com

Viewer

Marcos Johnson

Human Infrastructure Producer

marcos_johnson@yahoo.com

Viewer

Meda Pfeffer

Legacy Operations Supervisor

meda_pfeffer@yahoo.com

Admin

Flavio Thiel

Lead Paradigm Executive

flavio.thiel@yahoo.com

Admin

Berneice Smith

National Usability Administrator

berneice_smith@yahoo.com

Member

Maud Koss-Kreiger

Customer Usability Assistant

maud.koss-kreiger97@gmail.com

Admin

Maegan Metz

Chief Quality Manager

maegan.metz@yahoo.com

Viewer

Russell Spencer

International Assurance Representative

russell_spencer@gmail.com

Member

Shannon Volkman

Internal Branding Technician

shannon_volkman73@gmail.com

Member

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
Chad Donnellyart.mayer18@gmail.comFort LesleyActive$746.75
Archie Hoegerhal86@hotmail.comCummingsportInactive$559.39
Lora Watsicahortense17@gmail.comRaemouthActive$594.52
Jackie Hahnevan51@gmail.comDonnellysteadInactive$1,010.28
Tim Rodriguez-Torpgillian.reichert@gmail.comAgustinaportInactive$495.49
Total$3,406.43

Basic table

Table with Images

NameEmailLocationStatusBalance
Delores Langworth
@theresia.terry
jovany44@gmail.comCincinnatiInactive$721.63
Winifred Feest
@adalberto.weissnat42
marcelle31@gmail.comSouth IvaInactive$9.95
Raymond Leffler
@reyna26
angelo.flatley25@gmail.comWolffvilleActive$516.62
Karla Senger
@dudley_lang86
casimer_okeefe@hotmail.comDublinInactive$503.34
Amos Baumbach
@hortense.aufderhar
theodore.smith82@gmail.comWainochesterInactive$477.48

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Max Hanethalia95@yahoo.comRueckersideActive$480.74
Vickie Casper Jr.jaren_jacobson39@gmail.comTerrychesterActive$151.55
Curtis Jacobsada.ledner2@hotmail.comSkylarstadActive$852.97
Shelly Bergeava.shields29@gmail.comFargoActive$1,166.52
Randy Waterschristian42@hotmail.comLake EmilianotownActive$419.69
Total$3,071.47

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Elijah Hudsonmarguerite27@yahoo.comNorth ZoeyInactive$906.78
Claire Schulistcolumbus_lynch54@gmail.comKoelpinfurtInactive$128.16
Ernestine Weissnatafton10@hotmail.comNorth RichmondmouthInactive$1,002.71
Kristen Powlowskirosario.hills21@gmail.comWest AlphonsoboroughInactive$1,148.86
Misty Kutchlavina_moen@gmail.comJurupa ValleyInactive$708.68
Total$3,895.19

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Nichole Hammesbenedict_bogan@hotmail.comFort DanteboroughInactive$507.76
Carrie Willms MDharry.wyman53@hotmail.comAndersonboroActive$1,108.06
Guillermo Hanelenny.homenick@yahoo.comTomasavilleActive$669.75
Rosalie Oberbrunnerasha.baumbach@hotmail.comNorastadActive$431.23
Mr. Wilson Caspershane.trantow-abernathy@hotmail.comPontiacActive$470.24
Total$3,187.04

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. Ross Altenwerthlillian27@yahoo.comParadiseInactive$82.04
Stanley Purdytristian20@gmail.comLake StanleychesterInactive$22.43
Johnnie Durgan PhDcullen_kris@gmail.comWyomingActive$1,067.11
Cecil Kemmermelvin_corwin71@hotmail.comDoyleshireInactive$846.76
Nicolas Ebertmathew_ledner@hotmail.comEast CurtisviewActive$167.63
Total$2,185.97

Table with row selection

Card Table

NameEmailLocationStatusBalance
Ida Schadenalek.ward53@yahoo.comHarveyburghActive$366.64
Jean Thompson IIrosalyn_sipes@hotmail.comHomenicktownActive$929.17
Wilma Durgancloyd40@gmail.comNew JordifieldActive$140.42
Faye Cremincristopher.cummerata34@hotmail.comNorth MaraActive$1,108.30
Dr. Ted Schillerahmed89@yahoo.comKundeburghInactive$794.46
Total$3,338.99

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
Antonia Cassindevyn_jacobs48@yahoo.comNew LoraActive$760.73
Alejandro Lowewanda9@hotmail.comSouth YasminsideActive$796.24
Lucas Borerpietro.kiehn77@yahoo.comRichmondActive$649.50
Clay Johnsmarty_leuschke@yahoo.comGeorgetownInactive$742.10
Antoinette Gradyhaven_turner99@gmail.comBlairburyInactive$246.56
Jim Nicolas DVMandrew_bernhard@hotmail.comEnricoworthActive$824.26
Ron Rohansamir44@gmail.comSouth SkylaActive$539.61
Beverly Rodriguezrichmond.hand@yahoo.comNorth DavionsideActive$540.07
Margie Welchrussel29@hotmail.comRaphaelburghInactive$470.04
Kim Gottliebarely53@gmail.comEast DawsonburyActive$618.85
Erma Powlowskiramiro97@hotmail.comDenafortActive$124.44
Bert Gerlachstanley_dietrich@yahoo.comPort HoustonboroughActive$366.69
Lillian Beereliseo.lakin32@hotmail.comVictoriaActive$753.85
Bernice Cassinhollis_sporer@yahoo.comShaniabergActive$1,161.24
Nelson Dachjaylan.wyman@hotmail.comToylandActive$80.91
Total$8,675.09

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