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
INV001UnpaidCredit Card$243.55
INV002PendingPayPal$462.56
INV003PendingCredit Card$304.76
INV004UnpaidPayPal$900.45
INV005PaidCredit Card$947.28
INV006PendingPayPal$166.62
INV007PaidPayPal$538.79
Total$3,564.01

Simple

Users

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

NameTitleEmailRoleActions
Viola HagenesSenior Branding Supervisorviola_hagenes@yahoo.comAdmin
Jeannie GutkowskiNational Factors Associatejeannie_gutkowski@gmail.comMember
Della RodriguezRegional Solutions Agentdella.rodriguez76@gmail.comAdmin
Reymundo MannFuture Intranet Supervisorreymundo_mann@yahoo.comViewer
Aurelie KshlerinNational Communications Strategistaurelie_kshlerin1@hotmail.comMember
Zechariah HalvorsonInternal Research Designerzechariah.halvorson@yahoo.comMember

Stacked on mobile

Users

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

NameRoleActions

Zackary Nikolaus

Global Division Liaison

zackary_nikolaus@gmail.com

Admin

Sheila D'Amore

Product Integration Coordinator

sheila_damore@hotmail.com

Viewer

Lila O'Reilly

Legacy Optimization Manager

lila_oreilly91@hotmail.com

Member

Jermey Kunde

Product Research Supervisor

jermey.kunde@yahoo.com

Member

Marcos Bradtke

Central Usability Assistant

marcos.bradtke2@hotmail.com

Member

Laurie Casper

Regional Paradigm Producer

laurie.casper75@gmail.com

Admin

Users

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

NameRoleActions

Roderick Weimann

Direct Metrics Director

roderick.weimann@hotmail.com

Viewer

Lorene Fisher

Customer Applications Consultant

lorene_fisher47@gmail.com

Viewer

Carrie Hammes

Corporate Branding Manager

carrie_hammes@gmail.com

Admin

Violette Ortiz

National Accounts Executive

violette.ortiz13@gmail.com

Admin

Mellie Erdman

Legacy Factors Producer

mellie.erdman73@yahoo.com

Admin

Josephine DuBuque

Customer Metrics Producer

josephine_dubuque37@yahoo.com

Viewer

Cedrick Quigley

Dynamic Operations Representative

cedrick.quigley@gmail.com

Viewer

Elaine Frami

Direct Infrastructure Agent

elaine.frami55@hotmail.com

Viewer

Pierre Denesik

Dynamic Paradigm Technician

pierre.denesik@gmail.com

Admin

Ramiro Gleichner

Central Intranet Producer

ramiro_gleichner2@yahoo.com

Member

Ross O'Conner

Corporate Integration Developer

ross_oconner@hotmail.com

Viewer

Terrell Kuhlman

District Response Representative

terrell.kuhlman@hotmail.com

Viewer

Lamar Dibbert

District Paradigm Strategist

lamar_dibbert51@yahoo.com

Member

Marcellus Torphy

Corporate Group Executive

marcellus.torphy64@hotmail.com

Viewer

Johnathan Mueller

Future Brand Consultant

johnathan_mueller68@yahoo.com

Viewer

Herta Tromp-Lindgren

Investor Factors Associate

herta_tromp-lindgren69@yahoo.com

Viewer

Zoe Greenholt

Customer Infrastructure Assistant

zoe_greenholt@gmail.com

Viewer

Minnie Mitchell

Customer Applications Director

minnie.mitchell4@gmail.com

Viewer

Wilma Mills

Corporate Security Coordinator

wilma.mills@yahoo.com

Member

Queenie Koepp

Corporate Creative Analyst

queenie_koepp94@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
Micah Kuvalisstan44@gmail.comWilkinsontonActive$675.74
Cary Bechtelar-Schinnerbernita_hansen98@hotmail.comJennyferworthInactive$427.85
Addison Hettinger Jr.glenna_hoppe55@hotmail.comBismarckActive$633.71
Ida Koelpin IIagnes.strosin@hotmail.comSouth ThomasbergInactive$1,125.26
Joyce Hills DVMcleta.schinner66@yahoo.comMariannetonActive$688.45
Total$3,551.01

Basic table

Table with Images

NameEmailLocationStatusBalance
Terence Monahan
@rigoberto.skiles38
drew35@yahoo.comNorth MarjorytownActive$37.68
Rosetta Boyer
@natalia.welch72
eino_nolan96@gmail.comLake VicentaworthInactive$702.85
Darlene Deckow
@velma.cummerata-donnelly74
maia.schultz@gmail.comVictorvilleInactive$206.56
Vanessa Ondricka
@veronica.anderson9
lola75@gmail.comGerholdtonInactive$501.49
Ms. Josefina Murazik II
@fannie_fritsch
german.jaskolski-walsh@hotmail.comDouglashavenActive$166.21

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Melinda Lockmanbyron21@yahoo.comHayesfortInactive$337.71
Liza Marvinsabina74@yahoo.comWest JasminechesterInactive$729.95
Amya Hayeschristy_jerde48@yahoo.comAnchorageActive$116.46
Edith Jacobisimon68@yahoo.comFort ArlieviewInactive$1,163.55
Ella Franeckidaryl87@yahoo.comJoesphsideActive$517.24
Total$2,864.91

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Mandy Altenwerthwellington_crist@gmail.comNorth DorisInactive$862.97
Dallin Lindmaurice_bednar67@gmail.comValliestadActive$124.66
Leann Coledanny_kuhn58@yahoo.comEast TremaineportActive$551.20
Kaylie Murrayloretta_koch@yahoo.comDwightworthInactive$1,063.52
Christina Schumm IVtabitha_dubuque@yahoo.comNorth FrederickActive$480.81
Total$3,083.16

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Theo Cummingsfrank.fahey@gmail.comAmarabergActive$27.34
Sophia Wuckert PhDtrevor_macgyver92@hotmail.comLenavilleActive$769.42
Winnifred Bauchkelli77@hotmail.comTimothyshireInactive$509.00
Mario Kohlerkamron.conroy24@hotmail.comRochellehavenInactive$1,069.42
Jaclyn Colekeon88@yahoo.comReingerworthActive$1,071.89
Total$3,447.07

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
Hilda Gutmannross87@hotmail.comRolfsonworthInactive$140.37
Casey Ratkeoral_blanda@gmail.comDominicfieldActive$87.56
Angus Danielhattie.rolfson80@hotmail.comGrand JunctionActive$655.77
Ruth Emardmozelle.borer79@yahoo.comSouth QuentinshireActive$1,072.36
Camille Bergnaummatthew.leannon@hotmail.comTamaraboroActive$309.39
Total$2,265.45

Table with row selection

Card Table

NameEmailLocationStatusBalance
Perry Marvintanya.cormier86@gmail.comOshkoshInactive$26.37
Spencer Bahringer IVshirley.abbott0@gmail.comBlickchesterInactive$832.27
Alaina Kutchkade51@gmail.comBernardfurtActive$444.59
Rosanna Ritchie IVsusan16@yahoo.comLake OmaburghActive$260.07
Noah Handdaisy73@yahoo.comBernierfortInactive$311.71
Total$1,875.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
Forrest Gerlach Ivito34@hotmail.comHegmannportActive$263.74
Leta Dibbertalivia_walter-moore@hotmail.comSouth EllisActive$454.63
Modesta Connlela.nicolas13@yahoo.comFullertonInactive$513.26
Mozelle Rempelmargie41@hotmail.comLubowitzhavenActive$634.28
Brooke Caspertrenton.jaskolski@hotmail.comSouth NancysideActive$97.99
Marie Roberts DVMbernardo99@yahoo.comDublinInactive$505.38
Cody Dickensstephon.corkery@gmail.comNorth ThurmanInactive$1,157.13
Arturo Homenickdestini99@gmail.comDarrellvilleActive$70.99
Ms. Regina Beerkatherine11@hotmail.comBristolActive$1,025.75
Julie Bergnaumsam50@gmail.comLake RalphlandInactive$770.03
Sandra Gutkowskitriston_muller@hotmail.comKohlercesterActive$1,016.00
Della Hermiston PhDjoshuah.swaniawski@yahoo.comWest DurwardInactive$74.21
Athena Gibsonraquel_huels55@yahoo.comAubreystadInactive$704.47
Glennie Labadiemargie.kuhlman15@gmail.comNorth AlainaInactive$374.63
Roslyn Mills Sr.giovanny_walter74@hotmail.comDecaturActive$884.74
Total$8,547.23

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