Table
The unique feature of the Table component, as compared to the standard table element, is its fixed header and resizable columns.
First name Last name Email Vincenza Lindgren Delia21@yahoo.com Clark Breitenberg Nat_Moore@gmail.com Fiona Wintheiser Asa30@gmail.com <vscode-table zebra bordered-rows>
<vscode-table-header slot="header">
<vscode-table-header-cell>First name</vscode-table-header-cell>
<vscode-table-header-cell>Last name</vscode-table-header-cell>
<vscode-table-header-cell>Email</vscode-table-header-cell>
</vscode-table-header>
<vscode-table-body slot="body">
<vscode-table-row>
<vscode-table-cell>Vincenza</vscode-table-cell>
<vscode-table-cell>Lindgren</vscode-table-cell>
<vscode-table-cell>Delia21@yahoo.com</vscode-table-cell>
</vscode-table-row>
<vscode-table-row>
<vscode-table-cell>Clark</vscode-table-cell>
<vscode-table-cell>Breitenberg</vscode-table-cell>
<vscode-table-cell>Nat_Moore@gmail.com</vscode-table-cell>
</vscode-table-row>
<vscode-table-row>
<vscode-table-cell>Fiona</vscode-table-cell>
<vscode-table-cell>Wintheiser</vscode-table-cell>
<vscode-table-cell>Asa30@gmail.com</vscode-table-cell>
</vscode-table-row>
</vscode-table-body>
</vscode-table>
If the table is assigned a fixed height and the content exceeds the table’s height, the content will become scrollable.
First name Last name Vincenza Lindgren Clark Breitenberg Fiona Wintheiser Kareem Wintheiser Margot Koepp Dominique Kuhlman Elisa Leannon Holden Gleichner Robyn Jast Anjali Friesen Remington Beatty Demond Marks Gerda Boyle Micah Feest Nicolette Johnston Joe Balistreri Willy Turcotte Willie Stroman Brigitte Hirthe Celestino Weber <vscode-table class="scrollable-example">
<vscode-table-header slot="header">
<vscode-table-header-cell>First name</vscode-table-header-cell>
<vscode-table-header-cell>Last name</vscode-table-header-cell>
</vscode-table-header>
<vscode-table-body slot="body">
<vscode-table-row>
<vscode-table-cell>Vincenza</vscode-table-cell>
<vscode-table-cell>Lindgren</vscode-table-cell>
</vscode-table-row>
...
</vscode-table-body>
</vscode-table>
The table switch to compact layout mode when its narrower than the set breakpoint.
First name Last name Vincenza Lindgren Clark Breitenberg Fiona Wintheiser Kareem Wintheiser Margot Koepp Dominique Kuhlman Elisa Leannon Holden Gleichner Robyn Jast Anjali Friesen Remington Beatty Demond Marks Gerda Boyle Micah Feest Nicolette Johnston Joe Balistreri Willy Turcotte Willie Stroman Brigitte Hirthe Celestino Weber
<vscode-table
class="responsive-example"
bordered-columns
zebra
responsive
breakpoint="400"
>
<vscode-table-header slot="header">
<vscode-table-header-cell>First name</vscode-table-header-cell>
<vscode-table-header-cell>Last name</vscode-table-header-cell>
</vscode-table-header>
<vscode-table-body slot="body">
<vscode-table-row>
<vscode-table-cell>Vincenza</vscode-table-cell>
<vscode-table-cell>Lindgren</vscode-table-cell>
</vscode-table-row>
...
</vscode-table-body>
</vscode-table>
First name Last name Vincenza Lindgren Clark Breitenberg Fiona Wintheiser <vscode-table class="resizable-example" zebra bordered-columns resizable>
<vscode-table-header slot="header">
<vscode-table-header-cell>First name</vscode-table-header-cell>
<vscode-table-header-cell>Last name</vscode-table-header-cell>
</vscode-table-header>
<vscode-table-body slot="body">
<vscode-table-row>
<vscode-table-cell>Vincenza</vscode-table-cell>
<vscode-table-cell>Lindgren</vscode-table-cell>
</vscode-table-row>
...
</vscode-table-body>
</vscode-table>
First name Last name Vincenza Lindgren Clark Breitenberg Fiona Wintheiser <vscode-table class="resizable-example" zebra bordered-columns resizable delayed-resizing>
<vscode-table-header slot="header">
<vscode-table-header-cell>First name</vscode-table-header-cell>
<vscode-table-header-cell>Last name</vscode-table-header-cell>
</vscode-table-header>
<vscode-table-body slot="body">
<vscode-table-row>
<vscode-table-cell>Vincenza</vscode-table-cell>
<vscode-table-cell>Lindgren</vscode-table-cell>
</vscode-table-row>
...
</vscode-table-body>
</vscode-table>
It is also suitable for displaying large amounts of data and complex content.
Profile First name Last name Email Introduction
CD
Carmelo Dooley Colby55@yahoo.com Cum et aut assumenda. Temporibus voluptas facilis sed et accusamus est
nisi harum minus. Dolor modi quos soluta laborum repellendus
exercitationem voluptas cum. Dolorem explicabo eveniet incidunt dolorum
atque ut.
ES
Erik Shields Lorenz.Mertz@yahoo.com Possimus quidem ea ut. Necessitatibus qui occaecati explicabo hic non
id ut ea. Voluptatem in quasi incidunt aut sed deserunt iste tempore
consequatur. Aliquid explicabo deleniti saepe omnis quos aut suscipit ex
et. Cupiditate nemo tenetur possimus corrupti.
MC
Monserrate Cronin Conrad38@hotmail.com Consequatur ex ipsa vero ut aliquid assumenda. Sapiente dignissimos
molestias facilis dolores at quaerat incidunt et. Consectetur dolorum
rerum porro necessitatibus rerum.
MJ
Mossie Jacobson Monserrate.Zieme@gmail.com Non dolores et ad id incidunt. A temporibus amet eius dolores
laudantium fugiat. Maxime aliquam dolores laboriosam est eos nihil.
LH
Leda Haag Felicia.Batz73@yahoo.com Quis cupiditate ut inventore dolor. Suscipit est qui. Quae dolores enim
consequatur nostrum. Temporibus soluta aperiam asperiores a autem
similique culpa.
TB
Theodora Bechtelar Sarah84@yahoo.com Atque sit minima id et veritatis vero commodi et recusandae. Sit nemo
blanditiis velit. Quasi molestias in dolorem et consequatur distinctio
voluptas. Nihil et optio maiores eius id aspernatur commodi praesentium
deleniti. Voluptatibus veritatis repellat dignissimos quasi.
NH
Nasir Hessel Santina_Langosh5@gmail.com Saepe sit iure iure aliquid est quam recusandae distinctio. Illo non ut
rerum. Et ducimus est doloribus sed sint in.
EV
Evans Vandervort Camilla43@yahoo.com Sapiente saepe dolorum magnam sequi aperiam est. Et ratione unde
nesciunt rerum rerum beatae. Et a tempora dicta ut qui odit eum
explicabo. Aut expedita eveniet.
LQ
Lavern Quitzon Cory28@hotmail.com Excepturi quia repudiandae. Voluptatem numquam aut ad voluptatum
voluptas consequatur. Voluptatem dolore et soluta beatae eveniet tempore
laboriosam.
WB
Willie Beahan Anabelle.Nienow@yahoo.com Eos aspernatur repellendus error doloribus dolorem sint dolorum
consectetur. Est minus ab sed. Perferendis asperiores eos placeat.
NJ
Nola Jast Toy_Walter@gmail.com Sed voluptatum officia quo quo. Fugiat odit eius voluptas consequuntur
non voluptatem et. Quos quam ab et consequatur. Molestias omnis
cupiditate ut dolores et quia.
MW
Merle Watsica Misty_Bergnaum@hotmail.com Quis culpa cum sed maiores omnis et non. Architecto sequi excepturi ad
qui. Assumenda ipsam officia laudantium dolor et ratione quam nam.
Dolores molestiae quod.
LB
Laverna Bogisich Natalia_Brakus74@yahoo.com Cumque dolores dolore quia deserunt. Laudantium sed distinctio sunt.
Voluptatum et qui. Velit non illo expedita omnis quod vero et possimus
harum. Nulla eum possimus est.
NB
Nathanial Boyle Emilie65@hotmail.com Voluptatum quibusdam omnis veniam velit sint quia quia consequatur.
Voluptate sit dolor sed totam eligendi. Sit est ex a eos. Enim voluptas
perferendis minus quasi eius. Deleniti quod est quas itaque nulla cum
sit at libero.
KJ
Kiara Jones Cecile16@hotmail.com Sed nesciunt voluptas voluptates consequuntur laudantium non voluptates
sint illo. Nam officiis nihil doloribus. Sunt magnam qui molestias
voluptas.
PK
Pearlie Kunde Rhoda1@hotmail.com Laborum autem minima optio quod dolores nesciunt et aspernatur. Est
commodi provident aut cupiditate illo. Laudantium doloremque tempora
repellendus asperiores qui.
DH
Daija Hilll Jazmyne_Dach83@gmail.com Qui fugiat nihil. Alias doloremque quia esse provident. Delectus ullam
esse et sed qui facere dolores et. Facilis commodi aliquam esse ratione
beatae magnam. Sit quia ut quae et totam quisquam eum ut possimus.
KG
Katrine Greenholt Frederique.McDermott85@gmail.com Quas sapiente cum. Assumenda sint animi qui perspiciatis. Sint beatae
qui earum iusto in officiis non nihil. Tempore pariatur non est illum
ut. Fugit aut autem nemo.
JS
Jean Steuber Fritz53@hotmail.com Iure dolorem atque repellendus eum architecto ipsam. Pariatur ea unde
explicabo. Quae autem rerum ad veritatis error nemo repellat quasi.
Quibusdam repellendus voluptatum sint.
DH
Derrick Heller Tatyana.Roob@gmail.com Velit laboriosam adipisci vero eum reprehenderit voluptatum. Eum
eligendi quia laudantium ut et. Illo culpa corrupti reprehenderit quis.
LR
Lenore Ritchie Lila.Hackett@gmail.com Enim deserunt et. Saepe maxime ut et quia mollitia temporibus et nihil
cupiditate. Adipisci ipsa voluptate assumenda dolor exercitationem
pariatur nulla.
MK
Maribel Koepp Stacy_Abbott@hotmail.com Laboriosam similique illum neque ea reiciendis. Explicabo officia
distinctio. Facilis est velit. Vitae exercitationem earum quidem.
Laboriosam tempora optio laborum et nulla deserunt modi.
FE
Felicity Erdman Mellie91@gmail.com Amet beatae sint magni ipsa animi natus sequi. Ut iste ratione non quia
assumenda et porro ea facilis. Unde unde ut blanditiis exercitationem
non eos ut. Vitae quis culpa deserunt facere tempora rerum atque qui
explicabo.
RM
Rachelle McCullough Tremaine11@hotmail.com Et facere vel. Natus ipsum maxime ex consequatur atque sit at. Fugit
exercitationem voluptate debitis earum accusamus. Aspernatur quasi ad.
Sed perferendis ipsum atque eos magnam dolor. Quia enim ex quo vel.
GK
Gracie Kilback Noe45@hotmail.com Molestiae magni harum et sunt autem ut. Est omnis mollitia nostrum quo
molestiae quae dolor ut. Atque cum minus. Numquam et quod sunt sed.
MF
Marco Franecki Edward.Sanford27@yahoo.com Ad non dolorem expedita sunt cupiditate voluptatem vero eos aut. Nobis
distinctio beatae et voluptatibus earum placeat dolor quos nesciunt.
Aspernatur qui praesentium.
MC
Monte Cole Domenica22@hotmail.com Assumenda voluptatibus repellendus et enim sint error. Voluptatem et
ipsum. Voluptas accusamus ipsum et exercitationem dignissimos odio.
Dolorum ex similique mollitia optio vel quia. Sint esse nihil hic
voluptate ducimus molestias consequatur velit.
KO
Karson Oberbrunner Newton61@gmail.com Quibusdam veniam sapiente occaecati consequuntur illum nulla voluptatem
aut. Aut est perspiciatis. Delectus atque est esse.
EG
Emmanuelle Goodwin Elouise_Koss@hotmail.com Qui repellendus tempora. Animi in et placeat officiis fugiat explicabo
officia ab. Nihil aperiam maiores eum consequatur non. Quo et corporis
eos eveniet nulla assumenda ut. Aut quia corporis.
AS
Aniya Schaefer Nettie.Bashirian@yahoo.com Reiciendis perferendis delectus fuga. Et ut debitis doloremque earum.
Non maiores deleniti dolores. Vel quis vitae pariatur quaerat est saepe
rerum et vero. Omnis eligendi minus.
JH
Jillian Hand Ivory41@hotmail.com Neque dicta sunt omnis quis. Accusamus ratione iste. Atque recusandae
doloremque deserunt vel laborum consequuntur provident ducimus tenetur.
Molestiae iure ratione harum.
AG
Alvera Grant Dena.Wisoky46@yahoo.com Id omnis vel iusto. Corporis vero libero quis in cupiditate eum sit.
Temporibus inventore iure aspernatur odio sequi sed eos. Ex molestiae
repellat est similique illum quia sunt culpa. Totam nemo autem. Et est
aut qui omnis suscipit.
KO
Kamron Ondricka Gabe.Shields@hotmail.com Labore quia vitae ut ratione id et tempora. Omnis exercitationem qui
nihil dolore. Quia rerum consequatur repudiandae voluptatem sit quas
iste ad impedit.
TW
Tyra Wuckert Gennaro.Swaniawski@yahoo.com Voluptas ab repudiandae sequi deleniti voluptatem qui unde. Nulla et
quia id non similique adipisci ex est. Temporibus dolore magni
recusandae atque repellat.
GC
Gus Conroy Freddy77@yahoo.com Commodi aut dolores quis harum deleniti. Autem hic possimus ut et
voluptas error totam odit. Enim rem libero veritatis velit incidunt
recusandae porro est maxime.
JD
Jordi Douglas Macy61@hotmail.com Omnis nam consequatur enim sit illo provident vitae. Quibusdam quia
eius. Qui facilis dolor enim.
FB
Favian Beahan Estel62@yahoo.com Nesciunt cum corporis ipsam sit sequi voluptatem ex. Est voluptas
possimus tempore. Aliquam natus ut non ipsa unde sint.
OW
Orlo Wisoky Felipe9@yahoo.com Neque velit dolor distinctio quis ut molestiae odit sed quidem. Sit
assumenda aut eaque id. Eum dolorem animi in. Distinctio corrupti
recusandae eum ex provident vitae error at. Impedit assumenda ut velit
sit quisquam esse eos voluptas. Qui animi mollitia et quos.
MR
Manuel Roberts Anastacio67@gmail.com Et rerum est molestiae in nihil sunt. Impedit aut ullam magnam sed nemo
numquam porro. In aut nihil voluptate nemo unde est veritatis
distinctio.
WO
Wayne Oberbrunner Karen_Gleichner@hotmail.com Neque hic qui. Rerum corrupti quis deleniti et repellat quis ipsum
doloremque. Voluptate sapiente et iure facilis reiciendis rerum. Animi
nam velit autem. Repudiandae repellendus incidunt possimus eveniet qui
rerum nostrum rerum.
VK
Vena Kertzmann Juanita_Hoeger@yahoo.com Dolore est perferendis ut et aut fuga recusandae. Et maxime ipsam
libero exercitationem aliquid ex totam ut. Qui numquam magnam velit sunt
eius iste nam.
HL
Heaven Leffler Kaia.Leannon@hotmail.com Dolorem quis asperiores et veniam ut similique ad iure. Rerum quo
ratione tempore. Ad ut et voluptas quos culpa. Ipsam magnam et nulla
autem a alias facilis. Odit tempore sit id. Voluptatum dolores est
exercitationem consequatur cumque nihil.
NM
Nelson Mueller Armani_Vandervort@yahoo.com Consectetur quisquam facere perspiciatis laudantium. Aspernatur alias
sint. Similique numquam eos voluptatem aut mollitia occaecati.
MW
Maximillia Wiza Murphy.Hayes12@yahoo.com Reiciendis delectus officia natus possimus. Optio iste distinctio eos
animi ipsum tempore optio aut. Porro nemo et. Itaque exercitationem
consequatur.
LS
Lazaro Schultz Angie26@yahoo.com Natus eveniet quo accusamus repellat sit. Velit quis et laudantium
quibusdam numquam aut inventore quos. Consequatur sit ut sint molestias.
BB
Bernie Bauch Abagail_Kihn62@gmail.com Voluptas consequatur nihil vitae. Eveniet animi commodi a ut similique
magni. Vel unde impedit odio aut. Ullam fugit et culpa sint repudiandae
nihil eligendi totam rerum. Impedit expedita amet iste laudantium
molestiae.
MW
Mohammed Welch Sibyl.Nader49@hotmail.com Est quam neque. Voluptates iure nostrum. Eos exercitationem vel odit
eum voluptas. Optio voluptatibus velit dignissimos maiores labore. Eos
sit commodi in rerum laboriosam odit perspiciatis accusamus. Deleniti
fugiat eveniet rerum consequuntur debitis expedita commodi illum.
MD
Mireille Douglas Chelsey_Gutkowski@yahoo.com Veritatis quibusdam non fuga sunt accusantium rem id. Aut laborum
voluptates cumque minus qui et molestiae sit velit. Quia deserunt a quo
quod rerum quos. Aut sit similique non a laborum sed soluta earum ut.
Placeat animi placeat quia cupiditate dolorem ut sint quis. Doloribus
dolores vero magni fugiat optio exercitationem commodi enim.
SB
Stephany Bartoletti Dayna_Treutel@yahoo.com Qui earum sit consequatur officiis rerum consequatur culpa. Ipsum
suscipit ut et. In ut iste animi eaque dolor et voluptates nam libero.
MS
Mabelle Schroeder Ruby71@yahoo.com Quas omnis magni ut dicta ipsum. Facilis corrupti aut. Rerum voluptate
et neque autem. Sapiente molestiae et aliquam aliquid et aut molestiae
minima saepe. Ducimus explicabo minima cupiditate vel. Facere et
accusantium explicabo ratione. <vscode-table
class="complex-table-example"
columns='["52px", "80px", "80px"]'
bordered-columns
zebra
min-column-width="5"
>
<vscode-table-header slot="header">
<vscode-table-header-cell
>Profile <picture></picture>
</vscode-table-header-cell>
<vscode-table-header-cell>First name</vscode-table-header-cell>
<vscode-table-header-cell>Last name</vscode-table-header-cell>
<vscode-table-header-cell>Email</vscode-table-header-cell>
<vscode-table-header-cell>Introduction</vscode-table-header-cell>
</vscode-table-header>
<vscode-table-body slot="body">
<vscode-table-row>
<vscode-table-cell>
<div
style="align-items:center;background-color:#2c7500;color:#fff;display:flex;justify-content:center;height:32px;width:32px;"
>
CD
</div>
</vscode-table-cell>
<vscode-table-cell>Carmelo</vscode-table-cell>
<vscode-table-cell>Dooley</vscode-table-cell>
<vscode-table-cell>Colby55@yahoo.com</vscode-table-cell>
<vscode-table-cell
>Cum et aut assumenda. Temporibus voluptas facilis sed et accusamus est
nisi harum minus. Dolor modi quos soluta laborum repellendus
exercitationem voluptas cum. Dolorem explicabo eveniet incidunt dolorum
atque ut.</vscode-table-cell
>
</vscode-table-row>
...
</vscode-table-body>
</vscode-table>
.complex-table-example {
height: 500px;
width: 100%;
}
.complex-table-example:not(:defined) {
background-color: #f6f8fa;
display: block;
height: 500px;
width: 100%;
}
.complex-table-example:not(:defined) vscode-table-header,
.complex-table-example:not(:defined) vscode-table-body {
display: none;
}
.complex-table-example vscode-table-cell {
padding-top: 5px;
padding-bottom: 5px;
vertical-align: top;
white-space: normal;
}