Add Table demo

Author: bendera

packages/demo/src/main.tsx

@@ -8,6 +8,7 @@ import CheckboxPage from "./routes/CheckboxPage.tsx";
 import RadioPage from "./routes/RadioPage.tsx";
 import SingleSelectPage from "./routes/SingleSelectPage.tsx";
 import SplitLayoutPage from "./routes/SplitLayout.tsx";
+import TablePage from "./routes/TablePage.tsx";
 import TextareaPage from "./routes/Textarea.tsx";
 import TextfieldPage from "./routes/Textfield.tsx";
 
@@ -40,6 +41,10 @@ const router = createBrowserRouter([
         path: "/split-layout",
         element: <SplitLayoutPage />,
       },
+      {
+        path: "/table",
+        element: <TablePage />,
+      },
       {
         path: "/textarea",
         element: <TextareaPage />,

packages/demo/src/routes/Root.tsx

@@ -11,6 +11,7 @@ export default function Root() {
           <li><a href="/radio">Radio</a></li>
           <li><a href="/single-select">Single Select</a></li>
           <li><a href="/split-layout">Split Layout</a></li>
+          <li><a href="/table">Table</a></li>
           <li><a href="/textarea">Textarea</a></li>
           <li><a href="/textfield">Textfield</a></li>
         </ul>

packages/demo/src/routes/TablePage.tsx

@@ -0,0 +1,40 @@
+import {
+  VscodeTable,
+  VscodeTableHeader,
+  VscodeTableHeaderCell,
+  VscodeTableBody,
+  VscodeTableRow,
+  VscodeTableCell,
+} from "@vscode-elements/react-elements";
+
+export default function TablePage() {
+  return (
+    <div>
+      <h1>Table</h1>
+      <VscodeTable zebra>
+        <VscodeTableHeader>
+          <VscodeTableHeaderCell>First name</VscodeTableHeaderCell>
+          <VscodeTableHeaderCell>Last name</VscodeTableHeaderCell>
+          <VscodeTableHeaderCell>E-mail</VscodeTableHeaderCell>
+        </VscodeTableHeader>
+        <VscodeTableBody>
+          <VscodeTableRow>
+            <VscodeTableCell>Vincenza</VscodeTableCell>
+            <VscodeTableCell>Lindgren</VscodeTableCell>
+            <VscodeTableCell>Delia21@yahoo.com</VscodeTableCell>
+          </VscodeTableRow>
+          <VscodeTableRow>
+            <VscodeTableCell>Vincenza</VscodeTableCell>
+            <VscodeTableCell>Lindgren</VscodeTableCell>
+            <VscodeTableCell>Delia21@yahoo.com</VscodeTableCell>
+          </VscodeTableRow>
+          <VscodeTableRow>
+            <VscodeTableCell>Vincenza</VscodeTableCell>
+            <VscodeTableCell>Lindgren</VscodeTableCell>
+            <VscodeTableCell>Delia21@yahoo.com</VscodeTableCell>
+          </VscodeTableRow>
+        </VscodeTableBody>
+      </VscodeTable>
+    </div>
+  );
+}