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$158.39
INV002PendingPayPal$732.44
INV003UnpaidBank Transfer$607.44
INV004PaidPayPal$711.76
INV005UnpaidPayPal$876.18
INV006PendingBank Transfer$657.95
INV007PendingCredit Card$505.71
Total$4,249.87

Simple

Users

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

NameTitleEmailRoleActions
Jeremiah BartellLegacy Branding Technicianjeremiah_bartell@yahoo.comAdmin
Marsha DavisCorporate Accountability Supervisormarsha_davis@yahoo.comAdmin
Jerry RunolfsdottirCorporate Directives Liaisonjerry_runolfsdottir@yahoo.comViewer
Steven HoegerCorporate Assurance Consultantsteven.hoeger@hotmail.comAdmin
Adrienne KiehnCorporate Accounts Administratoradrienne_kiehn@yahoo.comMember
Willie VonRuedenChief Factors Managerwillie_vonrueden@yahoo.comMember

Stacked on mobile

Users

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

NameRoleActions

Michelle Schneider

Global Solutions Developer

michelle_schneider37@gmail.com

Viewer

Susie Murazik

International Accountability Administrator

susie.murazik@hotmail.com

Viewer

Neva Blanda

Global Data Producer

neva_blanda@yahoo.com

Admin

Naomie Brakus

Regional Infrastructure Supervisor

naomie.brakus@hotmail.com

Admin

Eunice Abernathy

International Functionality Consultant

eunice_abernathy@yahoo.com

Member

Becky Lebsack

Regional Marketing Producer

becky.lebsack53@hotmail.com

Admin

Users

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

NameRoleActions

Alvin Oberbrunner

Future Usability Consultant

alvin_oberbrunner@yahoo.com

Viewer

Hazel Swaniawski

Customer Accountability Architect

hazel.swaniawski@gmail.com

Viewer

Rhianna Sawayn

Regional Applications Architect

rhianna_sawayn62@yahoo.com

Viewer

Lawson McCullough

District Configuration Agent

lawson.mccullough@yahoo.com

Viewer

Michele Koss

Central Tactics Liaison

michele.koss60@gmail.com

Admin

Travis Predovic-Gislason

Principal Tactics Architect

travis.predovic-gislason70@hotmail.com

Viewer

Kaela Skiles

Dynamic Group Officer

kaela.skiles76@hotmail.com

Member

Addie Halvorson

Direct Research Agent

addie_halvorson65@gmail.com

Admin

Gracie Jakubowski

International Directives Facilitator

gracie_jakubowski11@hotmail.com

Member

Karelle Stiedemann

Customer Optimization Administrator

karelle_stiedemann30@gmail.com

Member

Fabiola Rogahn

District Directives Representative

fabiola.rogahn38@yahoo.com

Member

Audrey Blick

Chief Infrastructure Facilitator

audrey.blick87@hotmail.com

Member

Leona Tremblay

Human Response Architect

leona.tremblay@yahoo.com

Admin

Daisy Reynolds

Principal Communications Planner

daisy.reynolds59@gmail.com

Admin

Rufus Breitenberg

Regional Data Technician

rufus.breitenberg51@yahoo.com

Admin

Arianna Brekke-Abernathy

District Identity Developer

arianna_brekke-abernathy98@gmail.com

Member

Edith Langworth

Central Marketing Consultant

edith_langworth40@yahoo.com

Admin

Van Schiller

Chief Tactics Orchestrator

van_schiller@hotmail.com

Admin

Lester Marvin

Internal Operations Orchestrator

lester_marvin3@yahoo.com

Admin

Berniece Turcotte

Corporate Assurance Strategist

berniece.turcotte36@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
Lamar Dare-Leffler Iwendell_osinski-schuster@yahoo.comNew ErnestoboroughInactive$236.99
Paula Bodepansy_schmitt@hotmail.comVedafieldInactive$57.75
Dr. Lionel Wardjuanita_gorczany7@gmail.comPort KeyshawnInactive$1,132.71
Yvette Lebsackjonathon.wolff@hotmail.comBraunburyInactive$156.20
Anastasia Sporerkristina24@gmail.comRachelburyInactive$324.62
Total$1,908.27

Basic table

Table with Images

NameEmailLocationStatusBalance
Mr. Kevin Kuphal
@miranda9
glenda.toy82@yahoo.comMayaguezInactive$963.03
Ms. Hershel Hessel
@fred_gleason
levi89@yahoo.comLake PaolotonInactive$1,045.51
Taylor Murazik
@bertha58
rosemarie_kertzmann@gmail.comCarolynevilleInactive$829.79
Ms. Jean Cummerata
@isabel87
lourdes_haag@yahoo.comGoldnervilleActive$35.98
Maurice Feest PhD
@sean.windler43
london_willms81@yahoo.comZachariahtonInactive$1,119.99

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Florence Terrykarl76@gmail.comNew KianaInactive$918.38
Kevin Lueilwitzmichelle.gibson82@hotmail.comFort DominicboroughActive$290.48
Rex Blickbetty.moore54@yahoo.comJoeyhavenInactive$615.53
Georgia Schaefercatharine_gottlieb74@yahoo.comRansomfieldActive$221.75
Leroy Hirthe Sr.guiseppe66@gmail.comNorth RicoActive$550.60
Total$2,596.74

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Bonnie Kertzmannaudrey.mclaughlin71@hotmail.comPotomacActive$306.05
Julie Hellercynthia.ondricka@gmail.comSybleboroActive$1,088.49
Zelda Wiegandbradly60@gmail.comWest AudraportActive$156.54
Luz Joneskarl.grady@yahoo.comPort OrangeActive$970.10
Triston Borerkayla_douglas37@yahoo.comSan Buenaventura (Ventura)Inactive$1,043.67
Total$3,564.85

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Charlie Ankundingjoel.welch51@yahoo.comDoralInactive$624.75
Rudy Whiteshannon.jast45@gmail.comFort MilfordtownInactive$374.51
Kasey Rodriguezervin51@gmail.comReillyburghActive$129.52
Leon Weberjackie25@hotmail.comNew KipActive$316.81
Andreanne Hermankatrina.johnson84@gmail.comBashirianviewActive$230.21
Total$1,675.80

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
Santino Weimannpercival.hansen@gmail.comFort ChristelleActive$260.15
Rogelio Huelruben69@hotmail.comWest EarnestboroActive$612.12
Haleigh Prosaccooleta_pfannerstill@hotmail.comLuettgenfurtInactive$526.01
Laney Toy Vhaskell46@hotmail.comPort SabrinaInactive$753.56
Gwen Gutmanntammy27@yahoo.comDeonboroActive$72.02
Total$2,223.86

Table with row selection

Card Table

NameEmailLocationStatusBalance
Mara Batz DDSsergio2@gmail.comElkhartActive$817.18
Monique Mayerjordan72@gmail.comShanahanbergInactive$1,161.53
Darrick Roobaxel43@hotmail.comEscondidoActive$317.12
Anne Gutmanntaryn.pollich98@gmail.comKiehnchesterInactive$211.01
Winifred Walsheldora_dicki@gmail.comHuntsvilleInactive$999.17
Total$3,506.01

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
Leona DuBuquemarshall.mcdermott56@hotmail.comWest ChristatonActive$651.40
Lela Keeblerlura.jones@gmail.comHuntingtonActive$649.47
Nicole Grahamkurt.bartell-pollich46@hotmail.comCamarilloInactive$904.31
Mr. Hugh Hahnrosa90@hotmail.comNorth MarjoryburghActive$583.36
Miranda Windlermartha_cronin58@hotmail.comNew MalvinashireActive$688.54
Dana Reillyheather88@gmail.comMarjolainelandActive$676.78
Santino Ziemearmando_zulauf@gmail.comGoyettefortActive$741.86
Bernadette Kozeynadine_roob72@hotmail.comLake EdisonlandActive$225.77
Kathryn Yostrogers_muller@yahoo.comTaniamouthInactive$451.11
Miss Linda Hillsrosie.bednar@gmail.comLibbielandActive$361.45
Lane Bashiriankate_reynolds86@gmail.comSterling HeightsInactive$70.66
Mr. Dwight Stantonaimee.champlin@yahoo.comVistaActive$586.17
Opal Hermantimmy.morissette57@hotmail.comElvieboroughActive$559.15
Dolores Bernierbritney.gutmann@hotmail.comGibsonviewActive$1,150.72
Shelley VonRuedenbertha.fahey@yahoo.comRunolfsdottirfieldActive$1,178.72
Total$9,479.47

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