Components
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 | $731.04 |
| INV002 | Pending | PayPal | $399.22 |
| INV003 | Pending | Credit Card | $387.48 |
| INV004 | Pending | PayPal | $371.80 |
| INV005 | Paid | Credit Card | $403.50 |
| INV006 | Paid | Credit Card | $362.20 |
| INV007 | Paid | Bank Transfer | $827.26 |
| Total | $3,482.50 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Dora Kerluke | Direct Metrics Strategist | dora.kerluke68@hotmail.com | Admin | |
| Brandon Wiegand | Direct Program Supervisor | brandon_wiegand@gmail.com | Admin | |
| Emily Bartoletti-Volkman | Legacy Solutions Associate | emily_bartoletti-volkman@hotmail.com | Admin | |
| Caleigh Littel | Direct Quality Supervisor | caleigh.littel@gmail.com | Viewer | |
| Ron Hand | International Program Associate | ron_hand@yahoo.com | Member | |
| Paige Bernier | Central Infrastructure Assistant | paige.bernier96@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 |
|---|---|---|
Kamren Leannon Direct Interactions Architect kamren_leannon@hotmail.com | Member | |
Carol Greenfelder Lead Usability Supervisor carol_greenfelder@hotmail.com | Admin | |
Melanie Stokes Internal Integration Assistant melanie.stokes56@gmail.com | Viewer | |
Aaliyah Heathcote National Marketing Representative aaliyah.heathcote64@hotmail.com | Member | |
Lucious Ebert Principal Creative Representative lucious.ebert23@gmail.com | Admin | |
Desiree McLaughlin-Cummings National Solutions Consultant desiree.mclaughlin-cummings31@gmail.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Luciano Jakubowski Direct Directives Designer luciano.jakubowski@hotmail.com | Viewer | |
Cruz Trantow Corporate Data Architect cruz.trantow@gmail.com | Admin | |
Casper Ruecker Internal Program Architect casper_ruecker@gmail.com | Member | |
Rachael Wisozk Forward Identity Specialist rachael.wisozk@yahoo.com | Member | |
Payton Rosenbaum Dynamic Communications Specialist payton.rosenbaum@yahoo.com | Admin | |
Logan Johnson Global Solutions Associate logan_johnson@hotmail.com | Viewer | |
Hillard Bode Internal Paradigm Strategist hillard_bode@yahoo.com | Viewer | |
Francisco Johnston Regional Mobility Manager francisco.johnston@yahoo.com | Admin | |
Clemens Auer Forward Applications Liaison clemens_auer50@yahoo.com | Member | |
Herminia Homenick Customer Assurance Consultant herminia_homenick@hotmail.com | Viewer | |
Marie Carroll Global Functionality Supervisor marie_carroll53@yahoo.com | Admin | |
Roscoe Ferry Dynamic Data Facilitator roscoe_ferry60@gmail.com | Viewer | |
Benedict Howe-Towne Human Program Strategist benedict.howe-towne@gmail.com | Viewer | |
Santos Lakin Forward Group Executive santos_lakin@gmail.com | Admin | |
Velda Armstrong Central Directives Director velda_armstrong@gmail.com | Member | |
Mildred Smith Human Metrics Planner mildred_smith@gmail.com | Member | |
Rudy Turcotte Future Infrastructure Supervisor rudy_turcotte61@hotmail.com | Viewer | |
Johnny Steuber Central Mobility Engineer johnny_steuber81@gmail.com | Member | |
Stephen Hoppe Customer Factors Designer stephen.hoppe@hotmail.com | Admin | |
Rozella Ondricka Internal Integration Representative rozella.ondricka@gmail.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 | |
|---|---|---|---|---|
| Payton Ferry | hope2@yahoo.com | South Whittier | Active | $588.18 |
| Shad Tillman | haleigh_gislason81@gmail.com | Zulaufberg | Active | $169.25 |
| Ova Weissnat | lauren72@hotmail.com | Vidalton | Inactive | $183.55 |
| Mrs. Denise Satterfield | sabryna38@gmail.com | Lake Denisehaven | Inactive | $288.11 |
| Felicia Fisher-Jast | alexander_damore@gmail.com | Port Keenanport | Inactive | $1,158.68 |
| Total | $2,387.77 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Ellis Doyle @hope87 | brent77@hotmail.com | Kassulkeboro | Active | $690.71 |
Mr. Yasmin Murray @gregg_cormier-conn | aaron50@yahoo.com | Port Andyton | Inactive | $729.21 |
Sonja Maggio @shawna.morissette94 | ashley99@gmail.com | Bakersfield | Inactive | $1,067.59 |
Domingo Mayer @madeline_senger70 | soledad.zulauf13@hotmail.com | Wizafort | Active | $701.12 |
Elinore Kunde @rosie12 | neha.bins@hotmail.com | Cruickshankcester | Active | $700.37 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Hassie Homenick | doreen_rutherford@gmail.com | Rippinport | Inactive | $64.03 |
| Clementina Boyer | alexie3@yahoo.com | Lake Rosalinda | Inactive | $175.00 |
| Misty Miller | emilie67@gmail.com | North Ellen | Inactive | $1,104.24 |
| Carey McGlynn | anika_schimmel50@gmail.com | North Marguerite | Active | $377.33 |
| Martine Gerlach | mohammad.funk93@hotmail.com | South Ashabury | Active | $451.99 |
| Total | $2,172.59 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Keshawn Treutel | myrtle81@gmail.com | Gorczanycester | Active | $740.16 |
| Rafael Powlowski | edwin99@hotmail.com | Imogenebury | Inactive | $415.58 |
| Marie Glover-Kunze | gladys.hamill@hotmail.com | Powlowskiport | Inactive | $205.96 |
| Mr. Rodolfo Satterfield | verna21@yahoo.com | South Yasmeen | Active | $908.96 |
| Hector Mraz | damon_bauch@gmail.com | South Joshworth | Active | $387.28 |
| Total | $2,657.94 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Raul McGlynn IV | heidi_kutch-effertz@yahoo.com | Angelitaport | Inactive | $300.04 |
| Florence Blanda | antoinette61@hotmail.com | Emiliaworth | Inactive | $141.32 |
| Maybell Morissette | kirk_jakubowski23@gmail.com | Smithambury | Inactive | $219.70 |
| Otha Huel | vickie_lang14@gmail.com | Halvorsonbury | Inactive | $478.81 |
| Hermina Gerlach-Leuschke | esta.heathcote80@yahoo.com | Port Georgiatown | Active | $1,107.67 |
| Total | $2,247.54 | |||
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 | ||
|---|---|---|---|---|---|
| Mr. Arden Friesen | miguel.schulist47@hotmail.com | Louisaworth | Inactive | $333.34 | |
| Naomie Kuhlman | kirstin.steuber88@gmail.com | McDermotthaven | Inactive | $226.87 | |
| Josh Bernier | ericka.langworth@yahoo.com | Port Isabelletown | Active | $168.44 | |
| Tomasa Hilpert | demarco69@gmail.com | Macejkoviccester | Inactive | $470.20 | |
| Miss Emily Heathcote | walter_mclaughlin51@yahoo.com | West Javierstad | Active | $571.09 | |
| Total | $1,769.94 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Mr. John Pollich | alex_bosco88@hotmail.com | Lake Dennisworth | Inactive | $793.22 | |
| Judson Denesik | rachael.prosacco38@gmail.com | Braun-Farrellcester | Inactive | $1,046.30 | |
| Frank Haley | melany.bergnaum89@hotmail.com | Hettingercester | Inactive | $300.78 | |
| Brooks Waters DVM | sharon_sporer@hotmail.com | South Douglas | Inactive | $59.61 | |
| Mrs. Janice Cummerata Jr. | belinda_hartmann75@hotmail.com | Johnsonchester | Active | $18.05 | |
| Total | $2,217.96 | ||||
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 | |
|---|---|---|---|---|
| Alison Morissette | geoffrey_lakin@hotmail.com | Virginia Beach | Active | $910.56 |
| Sherri Jones | else_wehner63@hotmail.com | Port Ryderville | Active | $160.15 |
| Mr. Barry Johnson-Grimes | janessa.bahringer21@hotmail.com | Strosincester | Active | $846.09 |
| Dorian Graham | jaiden.gislason@gmail.com | West Blake | Inactive | $897.37 |
| Dr. Orlo Adams | fannie.hagenes@hotmail.com | Port Daphnee | Active | $72.37 |
| Rosemary Ebert | juan.nader@yahoo.com | Palatine | Active | $417.92 |
| Stephen Metz | harriet_kuphal@gmail.com | Stratford | Inactive | $206.59 |
| Byron Jacobs | mariam_haag20@yahoo.com | Lake Bryantown | Inactive | $768.29 |
| Lester Jerde PhD | alessandra_schroeder@gmail.com | Velvaberg | Active | $472.51 |
| Janick Schaden | laverne8@hotmail.com | Murray | Inactive | $768.72 |
| Marsha Zboncak | clayton_emmerich12@yahoo.com | East Adellefort | Inactive | $822.19 |
| Lloyd Heller | guy.daniel@yahoo.com | South Julius | Active | $428.12 |
| Roy Treutel | lelia_bailey@gmail.com | East Erick | Active | $545.77 |
| Dane Farrell | todd_torp60@gmail.com | East Donna | Inactive | $796.70 |
| Melba Pollich | wendy_gerhold@gmail.com | Port Conorboro | Active | $18.28 |
| Total | $8,131.63 | |||
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 |