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
INV001PaidCredit Card$679.21
INV002PaidBank Transfer$244.01
INV003PaidPayPal$255.15
INV004PaidPayPal$624.74
INV005UnpaidBank Transfer$738.24
INV006PaidPayPal$399.82
INV007UnpaidBank Transfer$861.63
Total$3,802.80

Simple

Users

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

NameTitleEmailRoleActions
Marcos CronaHuman Markets Orchestratormarcos_crona73@gmail.comViewer
Lorraine EmardGlobal Marketing Architectlorraine.emard5@gmail.comMember
Joanna StiedemannDynamic Research Architectjoanna_stiedemann@hotmail.comAdmin
Ruthie DooleyDistrict Tactics Facilitatorruthie.dooley@yahoo.comAdmin
Torrance RobelChief Paradigm Directortorrance_robel@hotmail.comAdmin
Esther EbertCorporate Applications Liaisonesther.ebert80@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Josiah Halvorson

Principal Branding Coordinator

josiah_halvorson57@yahoo.com

Viewer

Mathew Schaden-Schamberger

Investor Accounts Engineer

mathew_schaden-schamberger50@gmail.com

Member

Noel Ward

Principal Infrastructure Analyst

noel.ward@yahoo.com

Viewer

Khalid Marquardt

Senior Paradigm Developer

khalid_marquardt11@gmail.com

Viewer

Tim Simonis

National Markets Engineer

tim_simonis90@yahoo.com

Admin

Krystal Crona

Future Directives Director

krystal_crona@hotmail.com

Admin

Sticky header

Users

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

NameRoleActions

Brown Howell

Regional Directives Facilitator

brown.howell@hotmail.com

Member

Wallace Herman

Lead Mobility Representative

wallace.herman@gmail.com

Member

Elmer Mayer-Kuphal

Direct Branding Planner

elmer.mayer-kuphal@gmail.com

Admin

Shari Bogan

International Data Officer

shari_bogan@yahoo.com

Viewer

Sonya Heidenreich

Regional Solutions Specialist

sonya_heidenreich@hotmail.com

Admin

Alyssa Stamm

Direct Intranet Assistant

alyssa_stamm50@gmail.com

Member

Damon Kuhlman

Lead Implementation Engineer

damon_kuhlman41@gmail.com

Admin

Winston Nader

Internal Configuration Orchestrator

winston_nader88@gmail.com

Viewer

Kayleigh Kohler

Future Creative Coordinator

kayleigh_kohler96@gmail.com

Member

Sandrine Hilpert

Regional Solutions Producer

sandrine.hilpert50@hotmail.com

Admin

Elsa O'Hara

Regional Solutions Designer

elsa.ohara@hotmail.com

Viewer

Shanie Orn

Product Interactions Engineer

shanie_orn79@hotmail.com

Viewer

Shannon Bode

Corporate Markets Specialist

shannon.bode12@hotmail.com

Viewer

Albert Stokes

Corporate Tactics Analyst

albert_stokes@hotmail.com

Member

Dewey Barrows

Dynamic Quality Engineer

dewey_barrows@hotmail.com

Viewer

Phyllis Lindgren

Lead Paradigm Consultant

phyllis.lindgren@hotmail.com

Member

Vladimir Jerde

Senior Creative Technician

vladimir.jerde70@gmail.com

Member

Irene Torp

Internal Brand Technician

irene.torp30@gmail.com

Viewer

David Kassulke

Chief Implementation Technician

david.kassulke@gmail.com

Admin

Ryann Dach

Senior Assurance Designer

ryann.dach3@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

NameEmailLocationStatusBalance
Emanuel Greenivan18@hotmail.comRosendostadActive$1,006.45
Roslyn Schulistroy.blick@hotmail.comQuincyActive$799.11
Dayton Altenwerth-Sporerjordan.crona@yahoo.comNorth JohanInactive$348.84
Oral Smithclaudia_ankunding63@hotmail.comChandlersideInactive$640.84
Jazmyn Kleinhaylie.morar40@gmail.comSouth BonitasteadActive$796.04
Total$3,591.28

Basic table

Table with Images

NameEmailLocationStatusBalance
Jason Pfeffer
@clarabelle80
tony81@yahoo.comCallieworthActive$617.93
Ivan Nitzsche III
@peggie62
kylee96@hotmail.comKreigerboroughInactive$74.11
Cristina McCullough
@kira.buckridge
lois19@hotmail.comOtissteadActive$503.02
Leticia Steuber
@audrey_swaniawski
cedrick68@hotmail.comPort AnahichesterInactive$140.79
Lorene Carroll DVM
@joann_koelpin22
leslie72@yahoo.comWest MerlInactive$540.93

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Jeremie Weimannricardo.bartell50@hotmail.comFort EulahfieldInactive$952.47
Mrs. Cara Cummerataida.tromp77@gmail.comNew TatyanasideActive$377.50
Lance Ebertamerica_mcclure99@hotmail.comEast HunterboroughInactive$797.95
Muriel Torphytabitha_nitzsche@yahoo.comBeahanmouthInactive$1,012.79
Dora Hoppe-Klingkrystal_crooks@yahoo.comFort EladiocesterActive$894.39
Total$4,035.10

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Dr. Kelsi Kovacekpolly_lowe88@hotmail.comEast StantonsideInactive$451.52
Sherri Bahringerpearl.dickinson@hotmail.comOndrickatownInactive$47.84
Francis Bashirian Sr.alana_johnson@hotmail.comDeckowportInactive$524.82
Kristy Volkmanalicia_gibson@gmail.comLake CloydburghInactive$1,129.80
Leroy Wolffadele_gibson39@hotmail.comRohanbergInactive$738.31
Total$2,892.29

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Rodney Bartolettisean_cruickshank@gmail.comKirklandInactive$278.80
Gabriella Donnellyaaliyah.stroman82@hotmail.comArdithtownInactive$176.84
Ms. Iris Smithfrancis.sawayn-schimmel@yahoo.comFort WorthActive$853.95
Teri Pollichwilma2@yahoo.comHeidiboroActive$594.75
Moriah Watersdwight.sporer6@hotmail.comHintzboroughActive$94.97
Total$1,999.31

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
Nettie Braunloraine86@gmail.comNorth MiamiInactive$574.28
Bruce Beckerleon_crona@hotmail.comEast StellaInactive$1,082.15
Verdie Romagueraann_simonis70@hotmail.comNorth TheoActive$167.73
Laurianne Konopelskisydni66@gmail.comBartolettimouthInactive$652.66
Minnie Stromangarrett_bergstrom@yahoo.comEast FrancocesterActive$1,047.88
Total$3,524.70

Table with row selection

Card Table

NameEmailLocationStatusBalance
Thomas Mayerroman74@yahoo.comArlingtonActive$112.32
Mason Greenfeldergloria.hoppe4@yahoo.comNorth LeopoldochesterActive$523.90
Erica Dickinson Jr.damion.stracke@gmail.comAlexandriaburghInactive$420.14
Tara Bartolettiberneice63@gmail.comChaddstadActive$466.95
Dr. Olive Wymanmarty29@yahoo.comLysannefurtActive$224.46
Total$1,747.77

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
Ora Whitereece98@yahoo.comHuntersvilleInactive$940.42
Adam Cummingscelia_stehr47@gmail.comWest LennavilleInactive$632.27
Tavares Sipesshane.schuster72@hotmail.comBricechesterInactive$892.53
Samir Towneinez18@hotmail.comHoegerboroActive$469.60
Mr. Zena Mannmeagan80@hotmail.comLednerviewInactive$713.28
Gregory Klocko IIIkhalid_reichel@gmail.comElkhartInactive$1,028.22
Jerrell Haag-Hilpertabdullah.powlowski7@yahoo.comSt. CloudInactive$766.41
Duane Goodwinguadalupe_hoeger3@hotmail.comSouth ShaniesteadActive$1,029.26
Ms. Sara Hanehenry.swaniawski50@yahoo.comShadsteadActive$21.59
Milo Bernierrick.padberg@hotmail.comNew AlexandreaburghActive$1,041.16
Dr. Jesus Romagueracecilia.hammes81@yahoo.comJeannevilleInactive$1,019.77
Jena Aufderharmelissa_turner63@yahoo.comMargueritefortActive$983.29
Quinten Waelchilinnea_cronin44@gmail.comWest OtiliasteadActive$43.73
Philip Kutchsheila.bruen54@yahoo.comLarkinburyInactive$696.30
Bret Kuhlmanharry_corwin@gmail.comAltenwerthboroInactive$1,059.49
Total$11,337.32

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.