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
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Unpaid | Credit Card | $892.49 |
| INV002 | Unpaid | Bank Transfer | $445.24 |
| INV003 | Pending | Credit Card | $314.38 |
| INV004 | Paid | PayPal | $782.49 |
| INV005 | Paid | Credit Card | $212.60 |
| INV006 | Paid | Credit Card | $277.80 |
| INV007 | Paid | PayPal | $284.11 |
| Total | $3,209.11 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Rylee Orn | Legacy Program Producer | rylee.orn@hotmail.com | Admin | |
| Merle Hand | Corporate Security Director | merle_hand52@yahoo.com | Member | |
| Alejandra Turcotte | Customer Usability Planner | alejandra_turcotte@gmail.com | Viewer | |
| Ariane Williamson | Senior Security Analyst | ariane_williamson27@yahoo.com | Viewer | |
| Micheal Vandervort | Central Solutions Liaison | micheal_vandervort@hotmail.com | Member | |
| Lilian Welch | Global Data Analyst | lilian_welch@gmail.com | Viewer |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Jerry Mitchell Internal Tactics Facilitator jerry.mitchell12@gmail.com | Viewer | |
Cristian Reichel Regional Functionality Facilitator cristian.reichel16@yahoo.com | Member | |
Sarai Green Internal Data Director sarai.green@yahoo.com | Member | |
Sienna Pagac Customer Program Assistant sienna_pagac@gmail.com | Viewer | |
Ellis Herman District Functionality Facilitator ellis.herman77@gmail.com | Admin | |
Kurt Deckow Internal Data Engineer kurt_deckow84@hotmail.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Toy Wunsch Dynamic Paradigm Director toy.wunsch49@hotmail.com | Admin | |
Burnice Nolan Corporate Branding Representative burnice.nolan@yahoo.com | Member | |
Katelyn Hills Global Program Consultant katelyn.hills@yahoo.com | Member | |
Mozell Rempel Global Solutions Specialist mozell_rempel11@hotmail.com | Admin | |
Jonathan Shields National Markets Facilitator jonathan.shields36@gmail.com | Member | |
Hilma Ortiz Principal Communications Consultant hilma_ortiz13@yahoo.com | Member | |
Fatima West Chief Security Representative fatima.west63@hotmail.com | Member | |
Beulah Hackett Central Solutions Director beulah_hackett85@hotmail.com | Admin | |
Salvador Funk Central Communications Engineer salvador.funk91@yahoo.com | Admin | |
Joanie Armstrong Investor Intranet Manager joanie.armstrong46@hotmail.com | Member | |
Terrence Osinski-Huels Future Markets Designer terrence.osinski-huels90@yahoo.com | Viewer | |
Isaiah Moen Future Infrastructure Engineer isaiah.moen66@yahoo.com | Member | |
Naomi Bernier Future Division Executive naomi_bernier87@hotmail.com | Viewer | |
Shany O'Hara Senior Factors Designer shany.ohara@gmail.com | Admin | |
Autumn Kihn Dynamic Program Representative autumn_kihn@gmail.com | Viewer | |
Amie Pfeffer District Creative Assistant amie_pfeffer90@yahoo.com | Admin | |
Ashlee Rohan National Intranet Administrator ashlee.rohan@yahoo.com | Member | |
Citlalli Turner Product Assurance Facilitator citlalli.turner@yahoo.com | Viewer | |
Malachi Renner Global Division Producer malachi_renner@hotmail.com | Admin | |
Francis Roberts Lead Directives Analyst francis.roberts@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
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jimmy Fisher | arvilla.sauer@yahoo.com | Catonsville | Active | $984.69 |
| Nicholas Denesik Sr. | myrtie_bradtke@yahoo.com | Hanemouth | Inactive | $1,098.09 |
| Martha Maggio | monique_hintz26@hotmail.com | Irondequoit | Inactive | $463.33 |
| Barry Beier | wyatt_lehner50@hotmail.com | Cicero | Inactive | $658.43 |
| Toni Purdy | payton7@yahoo.com | Karaboro | Inactive | $324.63 |
| Total | $3,529.17 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Courtney Tremblay @tyshawn66 | monica57@yahoo.com | East Meagan | Active | $769.70 |
Terrell Flatley @franco86 | reina17@gmail.com | Daijaberg | Active | $1,156.43 |
Dean Jakubowski @triston27 | erich.bayer@gmail.com | Yakima | Inactive | $381.87 |
Wanda Yost I @judy.hartmann77 | emil_rempel@gmail.com | Donatobury | Inactive | $387.10 |
Amanda Cassin @armand_watsica | jadon.kertzmann61@gmail.com | Pagacshire | Active | $901.80 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Margaret Lubowitz | gust_schulist@gmail.com | Langoshside | Active | $711.45 |
| Betsy Gleason Sr. | marcos79@gmail.com | Lake Lizethcester | Inactive | $753.72 |
| Emanuel Luettgen | adalberto7@gmail.com | Hettingerstead | Active | $547.04 |
| Paula Tromp | claudia_senger@yahoo.com | New Britain | Active | $1,006.62 |
| Erick Tremblay | elizabeth.ullrich82@gmail.com | Port Priscillaberg | Active | $135.81 |
| Total | $3,154.64 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jorge Schuppe | ana_stoltenberg@yahoo.com | Rochester Hills | Active | $786.76 |
| Becky Stanton | wilburn_lubowitz20@gmail.com | North Franzberg | Inactive | $612.92 |
| Dr. Tyler Mante | reinhold.schoen@yahoo.com | New Alicia | Inactive | $588.42 |
| Israel Harris | saul_koepp@yahoo.com | Priceberg | Active | $710.78 |
| Allison West | vernie.windler1@yahoo.com | Fort Tristin | Active | $1,111.60 |
| Total | $3,810.48 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Sara Smitham | tanner57@gmail.com | Lake Jalenfield | Active | $1,122.43 |
| Marilyn Lehner | brandy21@hotmail.com | Nikolausstead | Active | $3.09 |
| Ollie Grady | susanna_turcotte@yahoo.com | West Keyonworth | Active | $623.56 |
| Brandon Volkman | trycia_bernier@hotmail.com | West Kiarachester | Inactive | $826.33 |
| Delores Strosin | orin.mills26@gmail.com | Kautzerfort | Inactive | $248.43 |
| Total | $2,823.84 | |||
Table with vertical lines
Dense Table
| Name | Release Year | Developer | Typing | Paradigm | Extension | Latest Version | Popularity |
|---|---|---|---|---|---|---|---|
| JavaScript | 1995 | Brendan Eich | Dynamic | Multi-paradigm | .js | ES2021 | High |
| Python | 1991 | Guido van Rossum | Dynamic | Multi-paradigm | .py | 3.10 | High |
| Java | 1995 | James Gosling | Static | Object-oriented | .java | 17 | High |
| C++ | 1985 | Bjarne Stroustrup | Static | Multi-paradigm | .cpp | C++20 | High |
| Ruby | 1995 | Yukihiro Matsumoto | Dynamic | Multi-paradigm | .rb | 3.0 | Low |
Dense table
Row Selection
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Terrell Glover | ara2@yahoo.com | Fort Raleighville | Inactive | $165.22 | |
| Marcella Treutel II | dolly_cummerata@hotmail.com | Kertzmannfurt | Inactive | $412.12 | |
| Mr. Guillermo Conroy | caleb.schmeler@gmail.com | Dooleyhaven | Inactive | $1,137.14 | |
| Maxine O'Connell | mario30@gmail.com | New Anabeltown | Active | $581.35 | |
| Enrique Halvorson | ramon47@hotmail.com | Isidroboro | Active | $1,031.91 | |
| Total | $3,327.74 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Lionel Heller DVM | wilfredo_mclaughlin87@gmail.com | New Missouri | Inactive | $316.27 | |
| Mandy Streich | harley_ritchie34@yahoo.com | New Audieville | Inactive | $81.25 | |
| Anna Trantow | nelson_sauer@hotmail.com | Kenosha | Active | $849.64 | |
| Hattie Johnston | laverna.hand@gmail.com | Harveyfort | Inactive | $191.40 | |
| Dallas Zemlak | emmie.kiehn@hotmail.com | South Autumn | Inactive | $979.21 | |
| Total | $2,417.77 | ||||
Table with row selection
Vertical Table
| Name | David Kim |
| d.kim@company.com | |
| Location | Seoul, KR |
| Status | Active |
| Balance | $1,000.00 |
Vertical table
Sticky Header 2
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Matt Keeling | yasmine_ritchie@hotmail.com | Fort Hershel | Active | $424.81 |
| Clifton Stokes V | yadira_kris35@yahoo.com | Corpus Christi | Inactive | $1,163.70 |
| Rose Goodwin | dejuan_veum3@hotmail.com | Reubenville | Inactive | $710.85 |
| Kathleen Erdman | uriah_mcglynn@hotmail.com | Herminiaberg | Active | $733.74 |
| Beth Johnston | joanne10@hotmail.com | Oro Valley | Active | $478.57 |
| Pete Stiedemann | celestino_stark@yahoo.com | New Jordyberg | Active | $1,080.18 |
| Tammy Walker | einar39@gmail.com | Fort Lonzo | Inactive | $544.40 |
| Lee Erdman | anastacio_murray51@hotmail.com | Port Domingo | Active | $278.80 |
| Derek Sipes-Bednar | brett_parker60@yahoo.com | South Jedidiah | Inactive | $421.66 |
| Bridget Davis | grayce_stracke@hotmail.com | Parkerfield | Active | $139.90 |
| Constance Swaniawski | gayle67@hotmail.com | Lake Daltonfort | Active | $6.50 |
| Leslie Collier MD | chandler.blanda-oreilly37@yahoo.com | West Haydenfurt | Inactive | $1,115.09 |
| Myron White | jevon_dare@hotmail.com | Cristinahaven | Inactive | $5.86 |
| Henry Walker | hugh89@hotmail.com | Clarachester | Inactive | $872.70 |
| Mrs. Agnes Mills DDS | brooke.connelly@yahoo.com | Sierra Vista | Inactive | $1,077.53 |
| Total | $9,054.29 | |||
Table with sticky header
Browser Support
| Desktop browsers | Mobile browsers | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox Android | Opera Android | Safari iOS | Samsung Internet | |
| scroll-timeline | Supported 115 | Supported 115 | Not supported 111 | Supported 101 | Not supported No | Supported 115 | Not supported No | Supported 77 | Not supported No | Supported 23 |
| view-timeline | Supported 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-adjust | Supported 127 | Supported 127 | Not supported 3 | Supported 113 | Supported 16.4 | Supported 127 | Supported 4 | Supported 84 | Supported 16.4 | Not supported No |