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$824.60
INV002PendingCredit Card$963.26
INV003PaidBank Transfer$408.43
INV004PendingCredit Card$233.05
INV005UnpaidBank Transfer$210.18
INV006UnpaidBank Transfer$898.72
INV007UnpaidPayPal$252.87
Total$3,791.11

Simple

Users

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

NameTitleEmailRoleActions
Vito BoganNational Functionality Consultantvito.bogan1@hotmail.comViewer
Uriel WalterInternal Directives Strategisturiel_walter90@hotmail.comMember
Misael LangoshLegacy Applications Plannermisael_langosh56@gmail.comMember
Constance McLaughlinInternational Response Liaisonconstance_mclaughlin5@hotmail.comMember
Dedric SchadenSenior Program Orchestratordedric.schaden@hotmail.comViewer
Devon BeierForward Security Managerdevon.beier93@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Daniella Stokes

Forward Applications Engineer

daniella_stokes66@gmail.com

Viewer

Wyman Cummerata

Future Intranet Planner

wyman_cummerata33@gmail.com

Admin

Autumn Sporer

Direct Mobility Administrator

autumn.sporer50@gmail.com

Viewer

Ebba Predovic

Legacy Assurance Analyst

ebba_predovic98@yahoo.com

Admin

Deshaun O'Kon

Principal Intranet Developer

deshaun.okon@gmail.com

Viewer

Royce Johns

Chief Division Associate

royce_johns81@yahoo.com

Viewer

Users

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

NameRoleActions

Brionna Crist

National Markets Liaison

brionna.crist@yahoo.com

Viewer

Naomi Hartmann

Investor Implementation Coordinator

naomi.hartmann@hotmail.com

Admin

Gladys Hyatt

Investor Metrics Manager

gladys_hyatt@yahoo.com

Member

Lurline Hyatt

Investor Functionality Manager

lurline.hyatt70@yahoo.com

Member

Haskell Paucek

Internal Configuration Engineer

haskell_paucek@yahoo.com

Admin

Lydia Dare

Forward Research Coordinator

lydia_dare@gmail.com

Admin

Talon Welch

Customer Directives Developer

talon_welch@gmail.com

Viewer

Rosemarie Kulas

Forward Integration Liaison

rosemarie_kulas54@yahoo.com

Admin

Thurman Mills

Lead Intranet Developer

thurman_mills@gmail.com

Member

Etha Nicolas-Pagac

Principal Security Architect

etha.nicolas-pagac58@gmail.com

Viewer

Belle Friesen

Direct Branding Specialist

belle_friesen@yahoo.com

Admin

Lionel Hansen-Schmidt

Forward Creative Associate

lionel.hansen-schmidt@gmail.com

Member

Keith Brakus

Lead Optimization Engineer

keith.brakus24@hotmail.com

Admin

Tess Schuppe

Central Assurance Manager

tess_schuppe61@yahoo.com

Member

Tiana Conroy-Gerlach

Lead Interactions Strategist

tiana.conroy-gerlach68@hotmail.com

Member

Juliana Turcotte

Central Division Architect

juliana_turcotte22@hotmail.com

Member

Manuela Hettinger

Principal Accounts Officer

manuela.hettinger72@yahoo.com

Member

Luis Jerde

Internal Directives Engineer

luis.jerde@gmail.com

Admin

Tara Walker

Central Intranet Liaison

tara.walker35@hotmail.com

Admin

Ciara Rempel

Human Research Agent

ciara.rempel@hotmail.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
Myra Hillsrogers.kemmer@yahoo.comCape CoralInactive$641.67
Levi Prosaccoeaster_orn23@hotmail.comMishawakaInactive$335.80
Peter Feeneybrando_kulas@yahoo.comMeridianActive$164.95
Jan Schmelerwillie.medhurst@hotmail.comNorth RonnymouthInactive$657.26
Lena Botsfordautumn_frami9@gmail.comDonnellymouthActive$730.84
Total$2,530.52

Basic table

Table with Images

NameEmailLocationStatusBalance
Joshua Feest MD
@burdette.kilback
heather_gorczany61@gmail.comOkunevaviewInactive$760.83
Colin Rempel
@lenny_tillman
sienna.hoeger9@hotmail.comHodkiewiczcesterInactive$867.04
Terry Howe-Mueller
@dayton_klocko35
trudie72@gmail.comJamarcusbergInactive$969.37
Miss Leah Bergstrom
@alia.cruickshank45
aylin_bruen-little30@hotmail.comLindgrenworthActive$365.96
Ricky Erdman
@jordi_murazik
norene54@yahoo.comBoscolandInactive$216.27

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Johnnie Kutchsanford_vandervort@yahoo.comBrandonInactive$255.77
Dallas Gorczanyfay49@yahoo.comAppletonInactive$36.59
Katie Corwin-Gottliebtiana42@yahoo.comSmithbergInactive$642.44
Alberto Ernserkelli29@gmail.comGreenholtfortActive$767.90
Everett Weberjerrold.weber@yahoo.comBlue SpringsActive$685.14
Total$2,387.84

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Mr. Timmy Leuschkeellen.turcotte@gmail.comNew LondonfurtInactive$686.79
Celia Kuvalisreece87@yahoo.comEast SchuylerActive$909.95
Paula Stoltenbergarturo57@yahoo.comRyansideActive$329.88
Eric Bodenatalia.quigley6@gmail.comAntonefieldActive$1,193.71
Noel Robertsomer13@gmail.comWest LisandrobergInactive$606.42
Total$3,726.75

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Candace Reichertcordie.hoppe84@hotmail.comLake CorbinvilleActive$198.03
Mario Durgan DDSirma.lueilwitz@yahoo.comWinston-SalemInactive$310.30
Alexis Bogan IIesmeralda.weimann27@yahoo.comRempelmouthActive$984.95
Elias Glovermagnolia.daugherty@hotmail.comSouth OranfurtActive$518.72
Christie Schaden MDkip.hansen98@gmail.comTulsaInactive$866.40
Total$2,878.40

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
Jorge Blandaterrance_watsica@hotmail.comNorfolkInactive$766.13
Valerie Breitenbergmaria.daniel@gmail.comEast LeraActive$535.95
Ronald Breitenbergjacinthe94@hotmail.comKleintownActive$915.18
Lela Beahanalbin58@yahoo.comKemmerfieldInactive$127.78
Melissa Connellyhelmer.beatty90@yahoo.comBurlesonActive$803.19
Total$3,148.23

Table with row selection

Card Table

NameEmailLocationStatusBalance
Rita Howejosephine63@yahoo.comBednarstadInactive$806.91
Ms. Diana Hilllcasey_kiehn23@hotmail.comPort GersonfurtActive$789.05
Carrie Huelszelda_halvorson@hotmail.comWisokybergActive$709.59
Dr. Antonio Robelchristina61@hotmail.comDanburyActive$15.65
Tommy McLaughlinwilbert3@yahoo.comTorreysteadInactive$884.68
Total$3,205.88

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 Isabel Franeywinnifred_hickle@yahoo.comIrondequoitInactive$155.04
Tammy Muller-Fishertorrance_koelpin58@yahoo.comFort DestineychesterInactive$292.02
Cesar Andersonraven_feeney44@yahoo.comAylastadActive$372.38
Blanche Bartolettibrooks_corwin38@gmail.comSigridportActive$21.91
Dr. Ruben Collierisobel.batz@hotmail.comSouth OnieboroInactive$1,113.78
Kent Shieldscarmen_langworth85@hotmail.comGuaynaboActive$843.10
Krystal Kleingeovany21@yahoo.comEast DanialActive$943.90
Shane Mayercarol.halvorson17@yahoo.comKshlerintownInactive$172.70
Miss Anne Roobkeyon78@gmail.comLas VegasInactive$988.24
Rolando Andersonpasquale53@yahoo.comNew PiperActive$957.00
Dr. Janice Reillykacey_kozey36@gmail.comEast MelbaActive$855.78
Eileen Gutmanneleanora.volkman-oconnell13@gmail.comRogahnfortInactive$1,011.15
Bruce Rolfsonaustyn34@hotmail.comWest JordansideInactive$959.00
Mindy Cartwright-Fishercristian88@yahoo.comPort HavenbergActive$318.58
Adrian Wisokymaybelle81@hotmail.comWest ArthurInactive$353.73
Total$9,358.31

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