Table

The unique feature of the Table component, as compared to the standard table element, is its fixed header and resizable columns.

Basic example

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>

Scrollable body

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>

Responsive layout

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
Resize it 
<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>

Resizable columns

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>

Delayed resizing

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>

Complex content

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;
}