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 | Paid | Credit Card | $675.84 |
| INV002 | Unpaid | Credit Card | $846.36 |
| INV003 | Paid | Credit Card | $331.00 |
| INV004 | Unpaid | Credit Card | $842.63 |
| INV005 | Pending | Credit Card | $850.78 |
| INV006 | Unpaid | Credit Card | $460.81 |
| INV007 | Paid | PayPal | $680.84 |
| Total | $4,688.26 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Edwin Corkery | Customer Group Director | edwin.corkery79@yahoo.com | Viewer | |
| Emmanuelle Lueilwitz | International Interactions Orchestrator | emmanuelle.lueilwitz72@gmail.com | Admin | |
| Cayla Kuhlman | Principal Metrics Associate | cayla_kuhlman@gmail.com | Viewer | |
| Valerie Collins | Forward Metrics Planner | valerie.collins@gmail.com | Member | |
| Evans Ryan | International Division Director | evans_ryan@yahoo.com | Admin | |
| Jaycee Brekke | National Brand Orchestrator | jaycee_brekke61@yahoo.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 |
|---|---|---|
Nettie Lynch Principal Usability Director nettie_lynch52@yahoo.com | Member | |
Katherine Schmeler Principal Accounts Strategist katherine_schmeler@hotmail.com | Member | |
Forrest Lind Internal Applications Producer forrest_lind@hotmail.com | Admin | |
Allison Ebert Senior Intranet Administrator allison_ebert@hotmail.com | Member | |
Kallie Flatley Forward Interactions Producer kallie.flatley@hotmail.com | Viewer | |
Carl Kuphal Central Marketing Director carl.kuphal87@hotmail.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Jess Pouros-Thiel Customer Division Coordinator jess_pouros-thiel33@hotmail.com | Member | |
Bert Zieme Product Accounts Architect bert_zieme54@yahoo.com | Viewer | |
Colleen Harvey Future Assurance Administrator colleen_harvey@gmail.com | Member | |
Connie Quigley Product Optimization Planner connie.quigley9@gmail.com | Viewer | |
Viviane Lockman Future Response Engineer viviane_lockman@yahoo.com | Member | |
Aurelio Wilderman Legacy Assurance Engineer aurelio.wilderman@hotmail.com | Member | |
Lorenz Legros Customer Division Agent lorenz.legros51@gmail.com | Viewer | |
Guy Haley Product Applications Facilitator guy.haley46@hotmail.com | Viewer | |
Angelica Schneider Chief Infrastructure Liaison angelica.schneider44@gmail.com | Viewer | |
Ronnie D'Amore Corporate Branding Representative ronnie_damore97@hotmail.com | Admin | |
Newell Rempel Corporate Functionality Representative newell.rempel@gmail.com | Admin | |
Jeannie Kassulke Customer Branding Agent jeannie_kassulke@yahoo.com | Viewer | |
Judge Gerhold Forward Usability Strategist judge_gerhold54@gmail.com | Viewer | |
Craig Frami Internal Configuration Officer craig.frami@yahoo.com | Viewer | |
Unique Dach District Usability Technician unique_dach73@yahoo.com | Viewer | |
Meda Fritsch International Markets Technician meda.fritsch@gmail.com | Member | |
Brock Torphy Corporate Web Director brock_torphy@gmail.com | Admin | |
Morris Crist Senior Mobility Specialist morris_crist@gmail.com | Viewer | |
Luke Leffler Internal Configuration Engineer luke_leffler@yahoo.com | Viewer | |
Linwood Little Global Brand Officer linwood.little64@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 | |
|---|---|---|---|---|
| Mrs. Lillie Cole-Beatty | lamar_medhurst@gmail.com | North Jessy | Inactive | $211.84 |
| Neil Schoen | jennifer48@hotmail.com | Gislasonton | Active | $1,028.03 |
| Mike Toy | georgianna_fisher-prohaska76@gmail.com | Altadena | Inactive | $551.34 |
| Doyle Kunze V | cierra_reichel-daniel@hotmail.com | Lillianhaven | Active | $1,143.69 |
| Albert Lowe I | margarita.kulas@gmail.com | West Marianne | Inactive | $5.17 |
| Total | $2,940.07 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Elna Kohler @ellen_kozey85 | jo_lueilwitz97@yahoo.com | Eldastad | Active | $346.15 |
Amelia Gleason-Sanford V @vada_becker53 | fannie_gorczany@yahoo.com | Adamston | Active | $831.08 |
Alvah Heidenreich @patsy_jaskolski32 | brisa83@hotmail.com | Demarcoboro | Active | $902.85 |
Allene O'Keefe @dashawn.doyle-schulist | jude_bahringer49@hotmail.com | North Melissaworth | Active | $815.44 |
Mrs. Broderick Hane @vivian16 | burley_gulgowski@yahoo.com | Carmel | Active | $1,097.17 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Kathy McClure | dolores_hickle@gmail.com | Rosenbaumchester | Inactive | $1,105.04 |
| Maximillia Ullrich | shane_kozey6@gmail.com | Lake Inez | Active | $251.90 |
| Mrs. Cassandra Fahey | amir66@hotmail.com | Marietta | Inactive | $1,035.82 |
| Rodney Lesch | perry.kautzer@yahoo.com | Wilburberg | Inactive | $986.25 |
| Rogelio Mohr | alycia.wilderman@yahoo.com | South Thelma | Active | $776.01 |
| Total | $4,155.02 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Rodolfo Ondricka | ora86@hotmail.com | Elbertville | Inactive | $336.09 |
| Fleta Bechtelar | shawna_langosh11@hotmail.com | Beahanside | Inactive | $673.64 |
| Dr. Yvonne Morissette | andrew.nader@hotmail.com | Anchorage | Active | $105.21 |
| Clyde Rice | roland80@yahoo.com | Claytonhaven | Inactive | $877.09 |
| Albert Lueilwitz | elias52@gmail.com | New Zoe | Active | $606.47 |
| Total | $2,598.50 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Frankie Mills IV | gilberto87@hotmail.com | Arnulfofurt | Active | $661.82 |
| Meghan Pfeffer | margret_hyatt@hotmail.com | Joelfurt | Inactive | $137.46 |
| Alvin Torphy | mandy24@hotmail.com | New Georgia | Inactive | $790.45 |
| Kristin Beier Sr. | julian92@yahoo.com | Hirtheton | Inactive | $362.42 |
| Lenny Walker-D'Amore | everett.denesik@yahoo.com | Fort Friedrich | Active | $3.69 |
| Total | $1,955.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 | ||
|---|---|---|---|---|---|
| Lyle Mohr | al_wisoky@gmail.com | North Arch | Active | $1,117.23 | |
| Fredrick Cronin | lois.dicki@yahoo.com | Roseville | Inactive | $279.33 | |
| Deonte Windler-Hettinger | angelita79@gmail.com | Rutherfordburgh | Active | $706.31 | |
| Ms. Daniella Bednar | jenna.koepp@yahoo.com | New Barrett | Inactive | $985.20 | |
| Ms. Lorene Purdy | cathy65@yahoo.com | Lake Elvieworth | Active | $1,118.67 | |
| Total | $4,206.74 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Jeffery King | aiden58@yahoo.com | Fort Aiden | Active | $396.60 | |
| Loma Carroll | otis56@hotmail.com | Waelchiland | Inactive | $965.34 | |
| Richard Frami | elvie85@yahoo.com | Felipahaven | Active | $1,017.54 | |
| Julian Towne | isabel.upton18@yahoo.com | South Dedrick | Inactive | $190.67 | |
| Miss Narciso Dicki | joy77@yahoo.com | Salmaside | Inactive | $320.22 | |
| Total | $2,890.37 | ||||
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 | |
|---|---|---|---|---|
| Maddison VonRueden IV | hipolito.rice86@gmail.com | East Ruby | Active | $452.70 |
| Libbie Kris | bertha_simonis@gmail.com | Terrellbury | Active | $484.99 |
| Wilfrid Mante | vallie.schoen@gmail.com | Denesikton | Active | $208.45 |
| Elise Harvey | trevion.terry0@yahoo.com | Luellaland | Inactive | $1,181.58 |
| Blaise Welch | lyle_quigley41@hotmail.com | Feeneyboro | Active | $145.29 |
| Mrs. Deanna Purdy | jasper.bernhard@yahoo.com | North Rexstad | Inactive | $718.83 |
| Albert Greenholt | thomas.okon31@gmail.com | Killeen | Active | $717.76 |
| Molly Ward | wesley_anderson93@yahoo.com | Lake Trenton | Inactive | $179.15 |
| Kaylie Stehr | malcolm_ziemann-treutel47@gmail.com | Kristinestad | Active | $72.98 |
| Ronnie Bayer | makayla.morar98@hotmail.com | Colehaven | Active | $35.42 |
| Francisca Abbott | olive_jast@hotmail.com | East Asachester | Active | $795.47 |
| Samuel Morissette | krista36@yahoo.com | North Irmaborough | Active | $262.79 |
| Marty Bednar | perry_sawayn55@yahoo.com | Lake Elwinside | Active | $336.42 |
| Ashtyn Abbott DVM | cindy31@hotmail.com | Jennieport | Inactive | $549.77 |
| Trey Rodriguez | brandy.wunsch@gmail.com | Davie | Inactive | $534.94 |
| Total | $6,676.54 | |||
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 |