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
INV001PendingCredit Card$817.13
INV002UnpaidBank Transfer$439.04
INV003PendingPayPal$997.28
INV004PaidPayPal$283.55
INV005PaidCredit Card$714.22
INV006PendingPayPal$346.11
INV007PendingCredit Card$500.93
Total$4,098.26

Simple

Users

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

NameTitleEmailRoleActions
Carlos StreichSenior Solutions Facilitatorcarlos_streich7@yahoo.comViewer
Frederick CasperSenior Operations Specialistfrederick_casper@gmail.comAdmin
Benny O'ConnellProduct Data Producerbenny.oconnell83@hotmail.comAdmin
Darrel HellerProduct Functionality Supervisordarrel_heller71@hotmail.comAdmin
Ann McDermottPrincipal Markets Strategistann_mcdermott27@yahoo.comViewer
Clementina SchadenInvestor Integration Managerclementina.schaden69@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Fred Monahan

Lead Applications Facilitator

fred.monahan49@gmail.com

Admin

Noah Kunze

Investor Usability Director

noah.kunze21@yahoo.com

Admin

Tre Stamm

Lead Branding Director

tre_stamm38@yahoo.com

Viewer

Telly Thiel

Corporate Integration Specialist

telly_thiel@gmail.com

Viewer

Teri Lebsack

Legacy Paradigm Supervisor

teri_lebsack12@hotmail.com

Admin

Ollie Conroy

Internal Division Engineer

ollie.conroy@yahoo.com

Admin

Users

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

NameRoleActions

Angelo Hessel

Internal Functionality Technician

angelo_hessel@hotmail.com

Viewer

Leon Cummings-Moore

Legacy Quality Executive

leon.cummings-moore@gmail.com

Admin

Garrett Wyman

Future Research Liaison

garrett.wyman42@gmail.com

Viewer

Alex Ebert

Senior Assurance Liaison

alex_ebert@yahoo.com

Member

Rosalie Feeney

Direct Usability Agent

rosalie.feeney58@yahoo.com

Member

Carla Maggio

Central Infrastructure Specialist

carla_maggio@hotmail.com

Admin

Betsy Ledner

Legacy Factors Representative

betsy_ledner@gmail.com

Member

Lynn Koch

District Optimization Technician

lynn.koch93@gmail.com

Admin

Erin Konopelski

Corporate Identity Technician

erin_konopelski48@hotmail.com

Viewer

May Hessel

Central Creative Manager

may_hessel@hotmail.com

Viewer

Lance Schaefer

Forward Division Supervisor

lance_schaefer3@gmail.com

Viewer

Doris Romaguera

Future Optimization Planner

doris.romaguera80@gmail.com

Admin

Zoe Roob

Principal Accounts Planner

zoe_roob@hotmail.com

Member

Margarett Effertz

Forward Configuration Agent

margarett_effertz@yahoo.com

Admin

Penny Wiza

Product Operations Executive

penny.wiza@yahoo.com

Admin

Eloise Sauer

Chief Metrics Analyst

eloise.sauer67@yahoo.com

Member

Katherine Boyer

Dynamic Operations Orchestrator

katherine_boyer@hotmail.com

Member

Genevieve Wilkinson

Future Marketing Consultant

genevieve_wilkinson68@yahoo.com

Admin

Isabelle Weimann

Investor Program Producer

isabelle.weimann@hotmail.com

Viewer

Johathan Runolfsdottir

Principal Interactions Officer

johathan.runolfsdottir@gmail.com

Admin

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
Felix Pfefferjohnathan.legros@gmail.comPatriciatonActive$829.42
Nannie Nicolaselmo80@hotmail.comWest RosalindhavenInactive$351.38
Naomi Senger PhDgrace86@yahoo.comConnhavenActive$325.90
Jesus O'Konalice19@yahoo.comMadisonActive$630.78
Jaida Kreigerpeter.labadie73@yahoo.comRileymouthActive$278.31
Total$2,415.79

Basic table

Table with Images

NameEmailLocationStatusBalance
Mason Powlowski
@marguerite.wuckert
ciara_walker71@yahoo.comDuBuqueworthActive$16.23
Alex Collins
@santina49
caden_cruickshank56@hotmail.comChattanoogaInactive$538.12
Rochelle Lehner
@sean96
salvatore64@yahoo.comSouth MeganInactive$10.05
Alison Kohler
@erin.mcglynn
luis.cremin@yahoo.comNormaboroughActive$76.32
Cornelius Bradtke
@asha.kassulke97
benny79@gmail.comHyatthavenActive$399.09

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Dean Collinshortense_bruen@gmail.comSamlandActive$734.85
Ralph Larkin IVlea_stehr31@yahoo.comIrvingActive$87.14
Estelle Weimann Jr.carlton_cruickshank@gmail.comRitchiefortActive$724.20
Muriel Weimanntommy.turner5@yahoo.comHamptonInactive$457.82
Miss Michele Jacobi-Beierjoanne29@yahoo.comWest CotyboroughActive$642.33
Total$2,646.34

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Anabelle Strackeyvette.cronin17@yahoo.comEast SarinasideInactive$1,197.80
Marcelino Batzemil98@hotmail.comPort DelbertInactive$921.12
Rosie Olson Ielsa73@hotmail.comWest AustinInactive$400.62
Karlie Toyrosalie_kiehn@yahoo.comBrandonsteadActive$1,125.78
Israel Raudonna97@gmail.comEast DevonActive$271.13
Total$3,916.45

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Margarita Fritschlauryn.hilpert58@gmail.comDrewfortActive$371.87
Sylvester Leuschkebria49@gmail.comNew MartysideInactive$865.95
Georgiana Thompsondanyka.larkin35@gmail.comRitchiemouthActive$853.86
Providenci Boyerkathryn50@yahoo.comGrimeslandInactive$1,140.18
Will Wisozksonja.langworth@yahoo.comNorth RhondaActive$841.52
Total$4,073.38

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
Douglas Huelluther.kub@yahoo.comAshleyhavenInactive$190.32
Muhammad Lebsackpedro.russel@yahoo.comRoderickhavenInactive$975.30
Laurie Bergnaumcharles.ankunding61@gmail.comLavadasideActive$954.75
Catharine Romaguerajill26@hotmail.comPort AprilfurtActive$818.38
Edwin Hilllsydnie93@yahoo.comGoldnerboroActive$301.41
Total$3,240.16

Table with row selection

Card Table

NameEmailLocationStatusBalance
Amber Quitzon DDSjordon94@gmail.comWest LindaInactive$169.07
Jazmyn Jacobsmona72@hotmail.comLake BradleyActive$892.08
Mr. Allan Pagacjoshua_kertzmann@yahoo.comLennalandInactive$291.43
Dr. Kyra Runolfssonolen_ruecker8@yahoo.comGottliebfurtInactive$1,141.03
Mae Langgeovanny76@hotmail.comLake RodneyshireInactive$203.16
Total$2,696.77

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
Camille Okunevakaya7@gmail.comPearlandActive$1,007.89
Zander Reynoldseddie55@hotmail.comHerzogboroughInactive$140.15
Griffin Oberbrunnerstanley.stiedemann@yahoo.comWolffburghActive$732.65
Hattie Stoltenbergvickie21@yahoo.comWisokyfieldActive$249.90
Kristin Sipesdexter66@yahoo.comPort PrestonInactive$770.57
Clarabelle Wolfnaomie.volkman@yahoo.comBayercesterActive$804.91
Ima Flatleycora_wisozk75@yahoo.comJeffersonvilleInactive$857.70
Lillie Rathnella.padberg@hotmail.comRenesideInactive$245.71
Chanel Wintheiserjaron.glover26@gmail.comNew HarrietActive$1.07
Mae Hoppemacey_fisher@hotmail.comRennerfurtActive$254.35
Thomas Borergerald_hickle16@yahoo.comRogersActive$307.87
Glenda Weimannherbert50@gmail.comEast LukaschesterActive$418.19
Susan Wittinglena93@gmail.comBrendanchesterInactive$309.71
Alonzo Kuhlmancynthia43@gmail.comSipeshavenInactive$427.06
Clifton Jerdecasey.bogan-rosenbaum@yahoo.comHowefurtActive$741.70
Total$7,269.43

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