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 | Pending | PayPal | $758.13 |
| INV002 | Unpaid | PayPal | $207.12 |
| INV003 | Unpaid | PayPal | $477.16 |
| INV004 | Pending | PayPal | $438.27 |
| INV005 | Pending | PayPal | $665.56 |
| INV006 | Pending | Bank Transfer | $894.15 |
| INV007 | Paid | Credit Card | $185.78 |
| Total | $3,626.17 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Jessica Bruen | Lead Quality Supervisor | jessica_bruen71@gmail.com | Admin | |
| Edgardo Hirthe | Chief Web Orchestrator | edgardo_hirthe@yahoo.com | Admin | |
| Sherman Smitham | Global Usability Administrator | sherman.smitham18@yahoo.com | Viewer | |
| Morris Howe | Product Functionality Agent | morris_howe60@yahoo.com | Member | |
| Ada Wolf | International Communications Agent | ada.wolf57@gmail.com | Member | |
| Elody Halvorson | Direct Tactics Strategist | elody.halvorson@gmail.com | Admin |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Milford Paucek District Branding Engineer milford_paucek88@yahoo.com | Admin | |
Gregorio Berge Global Quality Supervisor gregorio_berge@yahoo.com | Member | |
Sheridan Emard Future Web Supervisor sheridan_emard63@yahoo.com | Viewer | |
Reyes Krajcik District Division Executive reyes_krajcik@gmail.com | Member | |
Federico Jerde Principal Usability Producer federico_jerde94@yahoo.com | Admin | |
Carmella Leannon Regional Identity Executive carmella_leannon18@yahoo.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Lexie Lynch Product Directives Technician lexie.lynch34@gmail.com | Member | |
German Lind International Security Agent german_lind@yahoo.com | Admin | |
Monty Frami Investor Group Producer monty_frami@yahoo.com | Admin | |
Ulices Boyer Legacy Operations Representative ulices.boyer66@hotmail.com | Admin | |
Tiana Herman-Altenwerth Human Functionality Strategist tiana.herman-altenwerth89@yahoo.com | Admin | |
Walker Herzog Corporate Program Assistant walker.herzog64@hotmail.com | Member | |
Iliana Wunsch Customer Interactions Administrator iliana_wunsch73@yahoo.com | Admin | |
Adaline Cruickshank Lead Communications Engineer adaline_cruickshank19@yahoo.com | Admin | |
Velva Hauck Legacy Branding Representative velva.hauck16@hotmail.com | Viewer | |
Amie Barrows Product Division Orchestrator amie.barrows38@gmail.com | Member | |
Brady Abbott Internal Identity Orchestrator brady.abbott2@hotmail.com | Viewer | |
Clifton Jerde National Infrastructure Liaison clifton_jerde58@gmail.com | Member | |
Johnpaul Kohler Investor Research Engineer johnpaul_kohler@gmail.com | Member | |
Hardy Dicki National Functionality Planner hardy_dicki@hotmail.com | Member | |
Asa Feest Internal Factors Developer asa_feest42@gmail.com | Viewer | |
Hannah Von Customer Functionality Developer hannah.von@yahoo.com | Admin | |
Clarissa Morissette Regional Mobility Executive clarissa_morissette@hotmail.com | Admin | |
Emilia Hackett Legacy Division Developer emilia.hackett9@hotmail.com | Member | |
Bernadine Macejkovic Chief Quality Designer bernadine.macejkovic30@hotmail.com | Admin | |
Earlene Ruecker Central Marketing Supervisor earlene_ruecker@yahoo.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
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mona White | lysanne_stroman27@gmail.com | West Jabariberg | Active | $1,018.78 |
| Daisy Bashirian | danny_pouros49@yahoo.com | Fort Wilhelm | Inactive | $206.80 |
| Mr. Lewis Harvey | josefa_reilly33@yahoo.com | Nelleton | Inactive | $865.18 |
| Eduardo Corkery | eloise94@hotmail.com | West Terrystead | Inactive | $538.72 |
| Elvira Turcotte | shaniya.considine88@yahoo.com | West Narcisochester | Inactive | $1,072.36 |
| Total | $3,701.84 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Rodolfo Terry @grayce.turcotte | emmalee_stehr@hotmail.com | West Anissaland | Inactive | $55.27 |
Winifred Jacobson @hilda99 | noemi_runolfsdottir@hotmail.com | Port Kaylie | Inactive | $283.14 |
Mrs. Rosalie Upton @murl.tillman | catherine3@hotmail.com | Bergnaumbury | Active | $752.11 |
Ella Effertz @nicholas.brekke40 | wendy.shanahan66@gmail.com | Malvinaberg | Active | $549.92 |
Vivian Boyer @alene_davis10 | friedrich.durgan@hotmail.com | New Lura | Inactive | $156.96 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Kristina Corwin | buck_halvorson50@gmail.com | Kertzmannstad | Inactive | $496.97 |
| Dr. Larry Paucek IV | elmo43@hotmail.com | Mohrtown | Inactive | $692.83 |
| Michele Rogahn DVM | marianne.hudson82@hotmail.com | Mayerside | Inactive | $732.12 |
| Antonia Adams | emmet54@gmail.com | Kossshire | Active | $1,056.30 |
| Rosemary Powlowski | jewel11@yahoo.com | Altoona | Active | $963.52 |
| Total | $3,941.74 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Raymond Welch | raoul.schaden17@gmail.com | Rocky Mount | Active | $871.69 |
| Ralph Bins | cristopher.parisian57@yahoo.com | Jaylinchester | Active | $1,183.25 |
| Mr. Ralph Waters | devante_heaney72@yahoo.com | Lehnerboro | Active | $500.12 |
| Madeline Walker | janessa_miller@hotmail.com | Carolina | Inactive | $1,027.57 |
| Everett Kiehn | berneice41@hotmail.com | Baltimore | Active | $717.83 |
| Total | $4,300.46 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Lynn Shields Jr. | norberto.schulist@hotmail.com | New Anissabury | Inactive | $394.95 |
| Leo McGlynn | dessie50@yahoo.com | Mylesburgh | Inactive | $97.00 |
| Damon VonRueden | mae34@hotmail.com | Coralieton | Active | $383.53 |
| Mrs. Hattie Stoltenberg | dion.boyer@yahoo.com | Bonitaton | Active | $374.86 |
| Edward Schmidt-Kerluke | river98@yahoo.com | Queeniehaven | Active | $13.17 |
| Total | $1,263.51 | |||
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 | ||
|---|---|---|---|---|---|
| Santiago Ferry | ulises_stark@gmail.com | Hattiesburg | Inactive | $411.88 | |
| Daisy Kulas | chet_ruecker@yahoo.com | Grantside | Inactive | $580.23 | |
| Mercedes Braun | norwood43@yahoo.com | New Marques | Active | $249.80 | |
| Todd Walker Sr. | gideon29@gmail.com | Javierchester | Inactive | $791.31 | |
| Genevieve Weissnat | destiney10@yahoo.com | Jasperton | Active | $758.64 | |
| Total | $2,791.86 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Tanya Swaniawski | jayden.bashirian35@hotmail.com | Marquardtchester | Inactive | $10.29 | |
| Mrs. Fannie Christiansen | simone61@yahoo.com | Lake Sarah | Inactive | $242.49 | |
| Ted Ritchie | vaughn.barrows@yahoo.com | Port Maribelshire | Active | $775.09 | |
| Sally Kozey | raven.kunze62@yahoo.com | North Brianneton | Inactive | $267.67 | |
| Lillie Schulist | sebastian94@hotmail.com | Lake Sally | Active | $60.92 | |
| Total | $1,356.46 | ||||
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 | |
|---|---|---|---|---|
| Glen Crist | eriberto.kunze@yahoo.com | Lake Emmitt | Inactive | $476.25 |
| Dr. Earnest Vandervort | madisyn.schmeler36@gmail.com | North Williamcester | Inactive | $554.96 |
| Olive Schmitt | kaylah.kulas92@yahoo.com | Pomona | Active | $945.54 |
| Rolando Gottlieb | zoie_bailey-schinner@gmail.com | Fort Matteo | Active | $656.92 |
| Gina Maggio | humberto_anderson@yahoo.com | Fall River | Active | $1,119.94 |
| Dr. Nichole Dicki | tyreek.yost65@gmail.com | Encinitas | Active | $330.51 |
| Mr. Jamie Stark II | garfield77@yahoo.com | Port Estefaniaville | Active | $395.59 |
| Elijah Stanton | margarett_parisian82@gmail.com | Denafurt | Inactive | $1,182.28 |
| Morris Sawayn | domenico_macejkovic@yahoo.com | Corybury | Active | $180.84 |
| Ms. Claudia Torphy | alice_crooks@gmail.com | Bernitahaven | Inactive | $131.02 |
| Kurt Boyle | claudie54@yahoo.com | Rudyfurt | Active | $1,032.53 |
| Jody Rempel | chandler58@hotmail.com | Rathside | Inactive | $268.71 |
| Hazel Ferry III | rubye38@hotmail.com | North Zachery | Inactive | $1,141.57 |
| Desiree Dicki | ardith41@hotmail.com | South Altheashire | Inactive | $132.67 |
| Juana Block | alysa1@yahoo.com | Laurianemouth | Active | $560.38 |
| Total | $9,109.71 | |||
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 |