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 | Bank Transfer | $824.60 |
| INV002 | Pending | Credit Card | $963.26 |
| INV003 | Paid | Bank Transfer | $408.43 |
| INV004 | Pending | Credit Card | $233.05 |
| INV005 | Unpaid | Bank Transfer | $210.18 |
| INV006 | Unpaid | Bank Transfer | $898.72 |
| INV007 | Unpaid | PayPal | $252.87 |
| Total | $3,791.11 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Vito Bogan | National Functionality Consultant | vito.bogan1@hotmail.com | Viewer | |
| Uriel Walter | Internal Directives Strategist | uriel_walter90@hotmail.com | Member | |
| Misael Langosh | Legacy Applications Planner | misael_langosh56@gmail.com | Member | |
| Constance McLaughlin | International Response Liaison | constance_mclaughlin5@hotmail.com | Member | |
| Dedric Schaden | Senior Program Orchestrator | dedric.schaden@hotmail.com | Viewer | |
| Devon Beier | Forward Security Manager | devon.beier93@hotmail.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 |
|---|---|---|
Daniella Stokes Forward Applications Engineer daniella_stokes66@gmail.com | Viewer | |
Wyman Cummerata Future Intranet Planner wyman_cummerata33@gmail.com | Admin | |
Autumn Sporer Direct Mobility Administrator autumn.sporer50@gmail.com | Viewer | |
Ebba Predovic Legacy Assurance Analyst ebba_predovic98@yahoo.com | Admin | |
Deshaun O'Kon Principal Intranet Developer deshaun.okon@gmail.com | Viewer | |
Royce Johns Chief Division Associate royce_johns81@yahoo.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Brionna Crist National Markets Liaison brionna.crist@yahoo.com | Viewer | |
Naomi Hartmann Investor Implementation Coordinator naomi.hartmann@hotmail.com | Admin | |
Gladys Hyatt Investor Metrics Manager gladys_hyatt@yahoo.com | Member | |
Lurline Hyatt Investor Functionality Manager lurline.hyatt70@yahoo.com | Member | |
Haskell Paucek Internal Configuration Engineer haskell_paucek@yahoo.com | Admin | |
Lydia Dare Forward Research Coordinator lydia_dare@gmail.com | Admin | |
Talon Welch Customer Directives Developer talon_welch@gmail.com | Viewer | |
Rosemarie Kulas Forward Integration Liaison rosemarie_kulas54@yahoo.com | Admin | |
Thurman Mills Lead Intranet Developer thurman_mills@gmail.com | Member | |
Etha Nicolas-Pagac Principal Security Architect etha.nicolas-pagac58@gmail.com | Viewer | |
Belle Friesen Direct Branding Specialist belle_friesen@yahoo.com | Admin | |
Lionel Hansen-Schmidt Forward Creative Associate lionel.hansen-schmidt@gmail.com | Member | |
Keith Brakus Lead Optimization Engineer keith.brakus24@hotmail.com | Admin | |
Tess Schuppe Central Assurance Manager tess_schuppe61@yahoo.com | Member | |
Tiana Conroy-Gerlach Lead Interactions Strategist tiana.conroy-gerlach68@hotmail.com | Member | |
Juliana Turcotte Central Division Architect juliana_turcotte22@hotmail.com | Member | |
Manuela Hettinger Principal Accounts Officer manuela.hettinger72@yahoo.com | Member | |
Luis Jerde Internal Directives Engineer luis.jerde@gmail.com | Admin | |
Tara Walker Central Intranet Liaison tara.walker35@hotmail.com | Admin | |
Ciara Rempel Human Research Agent ciara.rempel@hotmail.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
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Myra Hills | rogers.kemmer@yahoo.com | Cape Coral | Inactive | $641.67 |
| Levi Prosacco | easter_orn23@hotmail.com | Mishawaka | Inactive | $335.80 |
| Peter Feeney | brando_kulas@yahoo.com | Meridian | Active | $164.95 |
| Jan Schmeler | willie.medhurst@hotmail.com | North Ronnymouth | Inactive | $657.26 |
| Lena Botsford | autumn_frami9@gmail.com | Donnellymouth | Active | $730.84 |
| Total | $2,530.52 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Joshua Feest MD @burdette.kilback | heather_gorczany61@gmail.com | Okunevaview | Inactive | $760.83 |
Colin Rempel @lenny_tillman | sienna.hoeger9@hotmail.com | Hodkiewiczcester | Inactive | $867.04 |
Terry Howe-Mueller @dayton_klocko35 | trudie72@gmail.com | Jamarcusberg | Inactive | $969.37 |
Miss Leah Bergstrom @alia.cruickshank45 | aylin_bruen-little30@hotmail.com | Lindgrenworth | Active | $365.96 |
Ricky Erdman @jordi_murazik | norene54@yahoo.com | Boscoland | Inactive | $216.27 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Johnnie Kutch | sanford_vandervort@yahoo.com | Brandon | Inactive | $255.77 |
| Dallas Gorczany | fay49@yahoo.com | Appleton | Inactive | $36.59 |
| Katie Corwin-Gottlieb | tiana42@yahoo.com | Smithberg | Inactive | $642.44 |
| Alberto Ernser | kelli29@gmail.com | Greenholtfort | Active | $767.90 |
| Everett Weber | jerrold.weber@yahoo.com | Blue Springs | Active | $685.14 |
| Total | $2,387.84 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Timmy Leuschke | ellen.turcotte@gmail.com | New Londonfurt | Inactive | $686.79 |
| Celia Kuvalis | reece87@yahoo.com | East Schuyler | Active | $909.95 |
| Paula Stoltenberg | arturo57@yahoo.com | Ryanside | Active | $329.88 |
| Eric Bode | natalia.quigley6@gmail.com | Antonefield | Active | $1,193.71 |
| Noel Roberts | omer13@gmail.com | West Lisandroberg | Inactive | $606.42 |
| Total | $3,726.75 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Candace Reichert | cordie.hoppe84@hotmail.com | Lake Corbinville | Active | $198.03 |
| Mario Durgan DDS | irma.lueilwitz@yahoo.com | Winston-Salem | Inactive | $310.30 |
| Alexis Bogan II | esmeralda.weimann27@yahoo.com | Rempelmouth | Active | $984.95 |
| Elias Glover | magnolia.daugherty@hotmail.com | South Oranfurt | Active | $518.72 |
| Christie Schaden MD | kip.hansen98@gmail.com | Tulsa | Inactive | $866.40 |
| Total | $2,878.40 | |||
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 | ||
|---|---|---|---|---|---|
| Jorge Blanda | terrance_watsica@hotmail.com | Norfolk | Inactive | $766.13 | |
| Valerie Breitenberg | maria.daniel@gmail.com | East Lera | Active | $535.95 | |
| Ronald Breitenberg | jacinthe94@hotmail.com | Kleintown | Active | $915.18 | |
| Lela Beahan | albin58@yahoo.com | Kemmerfield | Inactive | $127.78 | |
| Melissa Connelly | helmer.beatty90@yahoo.com | Burleson | Active | $803.19 | |
| Total | $3,148.23 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Rita Howe | josephine63@yahoo.com | Bednarstad | Inactive | $806.91 | |
| Ms. Diana Hilll | casey_kiehn23@hotmail.com | Port Gersonfurt | Active | $789.05 | |
| Carrie Huels | zelda_halvorson@hotmail.com | Wisokyberg | Active | $709.59 | |
| Dr. Antonio Robel | christina61@hotmail.com | Danbury | Active | $15.65 | |
| Tommy McLaughlin | wilbert3@yahoo.com | Torreystead | Inactive | $884.68 | |
| Total | $3,205.88 | ||||
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 | |
|---|---|---|---|---|
| Miss Isabel Franey | winnifred_hickle@yahoo.com | Irondequoit | Inactive | $155.04 |
| Tammy Muller-Fisher | torrance_koelpin58@yahoo.com | Fort Destineychester | Inactive | $292.02 |
| Cesar Anderson | raven_feeney44@yahoo.com | Aylastad | Active | $372.38 |
| Blanche Bartoletti | brooks_corwin38@gmail.com | Sigridport | Active | $21.91 |
| Dr. Ruben Collier | isobel.batz@hotmail.com | South Onieboro | Inactive | $1,113.78 |
| Kent Shields | carmen_langworth85@hotmail.com | Guaynabo | Active | $843.10 |
| Krystal Klein | geovany21@yahoo.com | East Danial | Active | $943.90 |
| Shane Mayer | carol.halvorson17@yahoo.com | Kshlerintown | Inactive | $172.70 |
| Miss Anne Roob | keyon78@gmail.com | Las Vegas | Inactive | $988.24 |
| Rolando Anderson | pasquale53@yahoo.com | New Piper | Active | $957.00 |
| Dr. Janice Reilly | kacey_kozey36@gmail.com | East Melba | Active | $855.78 |
| Eileen Gutmann | eleanora.volkman-oconnell13@gmail.com | Rogahnfort | Inactive | $1,011.15 |
| Bruce Rolfson | austyn34@hotmail.com | West Jordanside | Inactive | $959.00 |
| Mindy Cartwright-Fisher | cristian88@yahoo.com | Port Havenberg | Active | $318.58 |
| Adrian Wisoky | maybelle81@hotmail.com | West Arthur | Inactive | $353.73 |
| Total | $9,358.31 | |||
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 |