UI Thing

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

A list of your recent invoices.
InvoiceStatusMethodAmount
INV001PendingCredit Card$604.10
INV002UnpaidPayPal$564.51
INV003PaidBank Transfer$195.14
INV004PaidCredit Card$713.99
INV005PendingPayPal$981.74
INV006UnpaidCredit Card$598.57
INV007PendingCredit Card$810.60
Total$4,468.65

Simple

Users

A list of all the users in your account including their name, title, email and role.

NameTitleEmailRoleActions
Elvera KlockoFuture Intranet Associateelvera.klocko@gmail.comMember
Sasha HegmannCentral Data Assistantsasha.hegmann@yahoo.comViewer
Allen CummingsProduct Optimization Coordinatorallen.cummings@yahoo.comViewer
Ariane LehnerCentral Group Orchestratorariane_lehner@yahoo.comViewer
Michelle FisherCorporate Brand Plannermichelle_fisher@hotmail.comAdmin
Melanie BoscoLead Brand Supervisormelanie.bosco34@hotmail.comAdmin

Stacked on mobile

Users

A list of all the users in your account including their name, title, email and role.

NameRoleActions

Delores Runolfsson

Forward Data Associate

delores_runolfsson45@yahoo.com

Viewer

Kristopher Barton

Principal Response Technician

kristopher.barton17@gmail.com

Viewer

Ciara Wuckert

District Directives Designer

ciara_wuckert25@gmail.com

Admin

Cecil Runolfsdottir

Chief Response Strategist

cecil_runolfsdottir@hotmail.com

Admin

Sam Schiller

Lead Security Developer

sam_schiller61@yahoo.com

Admin

Lois Littel

Customer Branding Technician

lois.littel@gmail.com

Viewer

Sticky header

Users

A list of all the users in your account including their name, title, email and role.

NameRoleActions

Agustina Boyle

Human Assurance Developer

agustina_boyle@yahoo.com

Viewer

Eudora Kohler

International Functionality Director

eudora_kohler@gmail.com

Viewer

Aubrey Franecki

Dynamic Research Supervisor

aubrey.franecki@yahoo.com

Viewer

Edwin Rohan

Lead Response Producer

edwin_rohan99@hotmail.com

Viewer

Sheldon Hamill-Smith

Principal Identity Architect

sheldon.hamill-smith55@yahoo.com

Member

Caden Durgan

District Accounts Representative

caden.durgan69@gmail.com

Viewer

Elizabeth Schmidt

Investor Tactics Developer

elizabeth_schmidt7@hotmail.com

Member

Rebekah Cronin

Chief Accounts Facilitator

rebekah_cronin23@hotmail.com

Member

Abner Turner

International Integration Director

abner_turner@yahoo.com

Admin

Kendra Franey-Macejkovic

Chief Integration Supervisor

kendra_franey-macejkovic94@yahoo.com

Admin

Johanna Little

Future Accounts Coordinator

johanna_little24@gmail.com

Viewer

Chelsie Gutmann

Global Paradigm Agent

chelsie_gutmann@yahoo.com

Member

Deron Kulas

Product Factors Strategist

deron_kulas36@yahoo.com

Member

Lola Abshire

Direct Paradigm Supervisor

lola.abshire25@yahoo.com

Viewer

Wiley Mante

Direct Response Manager

wiley.mante@yahoo.com

Member

Moriah Ondricka

Investor Optimization Technician

moriah.ondricka43@gmail.com

Admin

Sylvia Streich

District Group Administrator

sylvia.streich@hotmail.com

Admin

Retha Mann

Corporate Directives Producer

retha.mann@gmail.com

Member

Harold Terry

International Response Designer

harold.terry28@yahoo.com

Member

Carla Cummerata

Internal Research Director

carla.cummerata@gmail.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

NameEmailLocationStatusBalance
Glenn Grimes-Bauchdestin67@yahoo.comEast VictorviewActive$24.15
Maeve Strackekatharina62@yahoo.comWest SacramentoInactive$8.46
Victoria Sipes Vmelinda_kessler13@hotmail.comAlexafieldActive$656.59
Reginald Boscoarmando29@gmail.comNew WilberburyActive$568.56
Verda Terrykarlee30@gmail.comJacobifieldInactive$1,172.56
Total$2,430.32

Basic table

Table with Images

NameEmailLocationStatusBalance
Mckenna Kohler
@christa15
joesph.boehm@yahoo.comFort SylvanInactive$875.69
Gregg Wuckert
@adrian15
brittany.casper12@yahoo.comMiami GardensInactive$651.40
Leroy Harber
@jackie_barrows
coy90@gmail.comRodriguezsteadInactive$399.92
Kieran Gorczany
@mae.brakus-hirthe
heather_dicki@yahoo.comPort AntoniochesterInactive$181.85
Annabel Dibbert-Ondricka
@leda63
maeve_price@gmail.comFlatleycesterInactive$259.62

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Toni Lindgrenjackeline84@hotmail.comTacomaActive$817.95
Mr. Josie Green IIdandre87@yahoo.comSouth JaquelineActive$1,176.20
Jordan Blicksam.hoeger@yahoo.comSouth JeramyboroughActive$813.82
Sophie Haagjaylon.berge60@yahoo.comWest LorineportActive$636.11
Sherwood Kshlerinhenry.padberg50@gmail.comKundeviewInactive$530.50
Total$3,974.58

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Ova Wizaitzel.roob65@gmail.comShawneeActive$1,143.87
Erin Farrell IIIclaudia98@hotmail.comMercedActive$661.71
Winnifred Nolankailey65@yahoo.comKreigerlandActive$301.55
Rosie Predovicjack.johns0@hotmail.comGrand JunctionActive$1,027.06
Jessica Welchchris.hirthe40@hotmail.comNew LeilaniInactive$455.27
Total$3,589.46

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Donna Rowerufus40@hotmail.comSouth KittyportActive$1,000.17
Daija Gerlach Vmonique_hansen@yahoo.comPort HugofieldInactive$688.03
Mario Steuber Itatyana.halvorson@hotmail.comTarastadActive$484.11
Leigh Bahringeranne.white38@hotmail.comSouth KenyaActive$634.96
Gunner Swaniawski Vmyra58@gmail.comNew JanyActive$1,127.20
Total$3,934.47

Table with vertical lines

Dense Table

NameRelease YearDeveloperTypingParadigmExtensionLatest VersionPopularity
JavaScript1995Brendan EichDynamicMulti-paradigm.jsES2021High
Python1991Guido van RossumDynamicMulti-paradigm.py3.10High
Java1995James GoslingStaticObject-oriented.java17High
C++1985Bjarne StroustrupStaticMulti-paradigm.cppC++20High
Ruby1995Yukihiro MatsumotoDynamicMulti-paradigm.rb3.0Low

Dense table

Row Selection

NameEmailLocationStatusBalance
Ellis Bodeangelo_fadel22@yahoo.comAllanburghInactive$805.66
Sandra Langwortharlene58@gmail.comWelchtonInactive$542.45
Dr. Idell Jakubowski Vleah82@yahoo.comMcKenziehavenActive$325.07
Clare Schillerrhett22@yahoo.comEast DanielaInactive$188.59
Genevieve Conroygrady77@gmail.comLittletonInactive$429.10
Total$2,290.87

Table with row selection

Card Table

NameEmailLocationStatusBalance
Aaron Harrisrandolph.hermann@gmail.comMelvinmouthActive$768.29
Dessie Ryanisidro_cormier68@gmail.comWeissnatworthInactive$302.70
Krista Legrosotis.gerhold44@hotmail.comNew JaedenActive$820.86
Colin Labadievickie.gleichner6@hotmail.comLake EarlmouthActive$401.16
Floyd Carterrussel73@gmail.comEast AnnesteadActive$744.65
Total$3,037.66

Table with row selection

Vertical Table

NameDavid Kim
Emaild.kim@company.com
LocationSeoul, KR
StatusActive
Balance$1,000.00

Vertical table

Sticky Header 2

NameEmailLocationStatusBalance
Oswaldo Leffler-Corkery DDSchristopher_veum@yahoo.comLake AnitamouthActive$902.54
Donnie Wintheisersanford43@gmail.comNewport BeachActive$943.58
Marjorie Armstrongleila_koepp@yahoo.comEast LansingActive$412.77
Thora Schmidtdarla_kihn39@gmail.comEast NoemieActive$230.48
Dr. Viola Ziemannada_collier@hotmail.comLake DianesideInactive$1,110.41
Macie Kuhiceleanore_becker@hotmail.comSouth KennediburghInactive$118.22
Roselyn Howeaiden_willms90@yahoo.comFerrysteadInactive$487.37
Sebastian Baileynichole56@hotmail.comLaytonActive$840.25
Rachel Kingalisa49@yahoo.comMorartonActive$1,082.60
Anissa Ernsergrayson_carroll93@gmail.comSouth LorraineActive$721.20
Melanie Raynorflorence_dibbert@hotmail.comSouth BereniceActive$121.20
Ross Stamm IIIabel29@hotmail.comWest JohathanInactive$638.95
Dr. Melyna Jenkinsmindy_treutel76@hotmail.comBedfordInactive$325.58
Trycia O'Haraharmony11@hotmail.comBeattyworthInactive$1,016.75
Shyann Bechtelarclarissa_mclaughlin10@yahoo.comFrederiquemouthInactive$313.36
Total$9,265.26

Table with sticky header

Browser Support

Desktop browsersMobile browsers
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox AndroidOpera AndroidSafari iOSSamsung Internet
scroll-timelineSupported
115
Supported
115
Not supported
111
Supported
101
Not supported
No
Supported
115
Not supported
No
Supported
77
Not supported
No
Supported
23
view-timelineSupported
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-adjustSupported
127
Supported
127
Not supported
3
Supported
113
Supported
16.4
Supported
127
Supported
4
Supported
84
Supported
16.4
Not supported
No

Switch

A control that allows the user to toggle between checked and not checked.

Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.