Components

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$851.50
INV002PendingBank Transfer$281.03
INV003PendingPayPal$895.17
INV004PaidBank Transfer$622.10
INV005PendingCredit Card$243.89
INV006PaidCredit Card$819.72
INV007PendingBank Transfer$255.55
Total$3,968.96

Simple

Users

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

NameTitleEmailRoleActions
Frankie Hagenes-BruenProduct Intranet Producerfrankie.hagenes-bruen@gmail.comMember
Angela PfefferNational Directives Consultantangela_pfeffer@yahoo.comAdmin
Esther MaggioDistrict Usability Planneresther_maggio@gmail.comAdmin
Sabrina ShieldsLegacy Infrastructure Architectsabrina_shields95@hotmail.comAdmin
Darlene FeestForward Operations Directordarlene.feest81@gmail.comViewer
Margie WaelchiLead Communications Architectmargie_waelchi6@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Fabiola Grady

Dynamic Mobility Developer

fabiola_grady82@hotmail.com

Member

Rafaela Gibson

Internal Security Liaison

rafaela.gibson37@yahoo.com

Admin

Elmer Veum

Human Usability Liaison

elmer.veum69@gmail.com

Viewer

Janae Walsh

Lead Metrics Engineer

janae.walsh@gmail.com

Admin

Elda Braun

Legacy Interactions Manager

elda.braun@yahoo.com

Viewer

Mathew Rolfson

International Usability Strategist

mathew.rolfson84@hotmail.com

Member

Users

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

NameRoleActions

Dave Metz

Customer Identity Executive

dave_metz@hotmail.com

Viewer

Lucy Wolff

Direct Paradigm Agent

lucy_wolff22@hotmail.com

Admin

Lorraine Quigley

Investor Accountability Manager

lorraine_quigley83@gmail.com

Admin

Emilia Stark

Central Assurance Strategist

emilia.stark@yahoo.com

Viewer

Clayton Fadel

Legacy Factors Associate

clayton_fadel21@yahoo.com

Viewer

Marlene Purdy

Forward Solutions Officer

marlene_purdy29@yahoo.com

Member

Kay Cartwright

Lead Assurance Planner

kay_cartwright@gmail.com

Admin

Marian Berge

Corporate Solutions Analyst

marian.berge@hotmail.com

Admin

Ebony Stracke

Internal Implementation Planner

ebony_stracke@yahoo.com

Viewer

Ricky Schneider

Investor Paradigm Architect

ricky_schneider@gmail.com

Viewer

Maximillian Morissette

Chief Configuration Liaison

maximillian_morissette26@gmail.com

Admin

Lolita Bergstrom

International Branding Executive

lolita_bergstrom@gmail.com

Admin

Jon Reichel

Product Data Supervisor

jon_reichel@hotmail.com

Viewer

Arnaldo Collier

Future Solutions Officer

arnaldo.collier5@yahoo.com

Viewer

Phillip McLaughlin

Principal Accountability Designer

phillip.mclaughlin33@gmail.com

Viewer

Desmond Stroman

Direct Branding Producer

desmond_stroman94@gmail.com

Viewer

Nicklaus Abernathy

Human Implementation Architect

nicklaus_abernathy@hotmail.com

Member

Alana Sawayn

Chief Accountability Assistant

alana_sawayn20@yahoo.com

Viewer

Amanda Renner

Principal Intranet Executive

amanda_renner83@hotmail.com

Admin

Israel Goyette

Human Solutions Manager

israel_goyette20@yahoo.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
Monroe Hettingerarturo.prosacco89@hotmail.comLake ChaimInactive$599.21
Simone Corwinabdiel75@hotmail.comLaurencemouthInactive$226.19
Joel Hoegerfranklin35@yahoo.comEast EileenInactive$106.87
Camren Gislasonalvah45@hotmail.comAlvertacesterInactive$15.85
Ida Cronakathy.murray71@yahoo.comSadieportActive$437.52
Total$1,385.64

Basic table

Table with Images

NameEmailLocationStatusBalance
Lloyd Kulas V
@keith31
sherry_weber@yahoo.comMertzhavenInactive$431.39
Jettie Hagenes DDS
@simeon46
orville.zboncak@hotmail.comCarrollviewActive$787.52
Ernestine Gorczany
@micaela.maggio35
halie.murray52@gmail.comWest RebeccalandActive$64.01
Ricardo Feil
@meggie59
juan_kilback@hotmail.comFort RasheedbergInactive$567.45
Robb Kiehn
@norma89
leda_homenick@hotmail.comEffertzfurtInactive$148.35

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Dr. Carmen Klinglila.schumm88@gmail.comColtchesterInactive$396.04
Miranda Rennerdean_morar68@yahoo.comWest CandidoInactive$140.78
Delfina Wiegandjany_steuber@yahoo.comJefferybergActive$850.21
Kristine Pfannerstillmathew77@hotmail.comSouth DavinActive$593.69
Xzavier Schmelerhaley.hudson45@yahoo.comLaceyActive$564.39
Total$2,545.11

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Janick Farrellamanda.fritsch50@yahoo.comHelmermouthInactive$294.00
Mike Huelbill_keebler-dare30@yahoo.comEast DebbieActive$95.51
Amy Wolffchristie77@gmail.comNew CristobalInactive$876.83
Delphine Blick PhDamir.kautzer@yahoo.comEast CarmelamouthInactive$231.54
Roberto Schillerjordan_kutch82@gmail.comGradybergInactive$1,153.95
Total$2,651.83

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Coy Mann Iross.kulas97@yahoo.comMcGlynnviewInactive$768.27
Clinton Boehmchristop68@yahoo.comTuckahoeInactive$1,194.78
Gretchen Runolfsdottirchad42@hotmail.comEvaviewInactive$60.52
Justin Brekkenoel.boehm@yahoo.comRomagueraboroughActive$702.01
Eugene Ondricka-Marksora12@hotmail.comAuburnInactive$1,170.89
Total$3,896.47

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
Isom Hudsonjoanna.hermiston13@gmail.comEast NoeliaActive$157.31
Krystal Hudsonjeffrey_marks53@gmail.comFreddiesteadInactive$760.34
Wilbur Pfannerstillskye.koss@hotmail.comZeldafortActive$842.46
Waylon Dibbertausten69@yahoo.comVacavilleInactive$1,192.60
Annie Mayerdanielle.stokes@yahoo.comDarrenfortActive$1,029.79
Total$3,982.50

Table with row selection

Card Table

NameEmailLocationStatusBalance
Dominic Braunclaire_cronin@gmail.comParkerworthInactive$883.48
Maiya Cristlynda96@hotmail.comNew LaurinefieldInactive$696.01
Patrick Kovacekjoesph85@hotmail.comAbelburghInactive$184.10
Franklin Faheyluz.jerde12@gmail.comMikefortActive$13.20
Ruben Daughertylyle.bartoletti21@yahoo.comLake JuanfurtInactive$768.39
Total$2,545.18

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
Jenny Robertsrita45@hotmail.comAlyssahavenActive$956.52
Tremaine Bradtke DDSivah.heathcote75@hotmail.comFort ManuelabergActive$1,079.23
Sheryl Klockoagnes40@hotmail.comFort MontanabergInactive$392.47
Lena DuBuquechristie16@gmail.comLindseyportActive$885.80
Skyla Franeyamely.reichel@gmail.comNorth RoseviewInactive$108.37
Rebekah Wunschdorothea76@hotmail.comSouth ConnieInactive$757.63
Gwen Veum Sr.tiffany.wyman@hotmail.comMissionActive$1,054.25
Rosie Schaefered.brown@hotmail.comRuthvilleInactive$677.76
Ms. Jaron Stoltenbergbret_hermann91@hotmail.comEast DougcesterInactive$790.14
Miss Beatrice Kessler Jr.jerome.schoen17@gmail.comFort EricaInactive$957.81
Brad Doyleoscar_green12@hotmail.comEast DarrelviewActive$828.11
Dee Kleinanderson_willms89@hotmail.comKearnyActive$558.44
Brittany Reillyrandall.wilderman74@yahoo.comEast JoshuaInactive$824.10
Miss Arno Bodepatsy.crona96@hotmail.comWaltershireActive$922.53
Colton Conroymae_hermann68@yahoo.comSouth ElliottActive$590.59
Total$11,383.75

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