Add more table components

sveltia · Jun 14, 2023 · ee711d4 · ee711d4
1 parent 5a463ff
commit ee711d4
Show file tree

Hide file tree

Showing 7 changed files with 157 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -201,11 +201,26 @@
       "svelte": "./package/components/table/table-cell.svelte",
       "default": "./package/components/table/table-cell.svelte"
     },
+    "./components/table/table-col-header.svelte": {
+      "types": "./package/components/table/table-col-header.svelte.d.ts",
+      "svelte": "./package/components/table/table-col-header.svelte",
+      "default": "./package/components/table/table-col-header.svelte"
+    },
+    "./components/table/table-foot.svelte": {
+      "types": "./package/components/table/table-foot.svelte.d.ts",
+      "svelte": "./package/components/table/table-foot.svelte",
+      "default": "./package/components/table/table-foot.svelte"
+    },
     "./components/table/table-head.svelte": {
       "types": "./package/components/table/table-head.svelte.d.ts",
       "svelte": "./package/components/table/table-head.svelte",
       "default": "./package/components/table/table-head.svelte"
     },
+    "./components/table/table-row-header.svelte": {
+      "types": "./package/components/table/table-row-header.svelte.d.ts",
+      "svelte": "./package/components/table/table-row-header.svelte",
+      "default": "./package/components/table/table-row-header.svelte"
+    },
     "./components/table/table-row.svelte": {
       "types": "./package/components/table/table-row.svelte.d.ts",
       "svelte": "./package/components/table/table-row.svelte",
@@ -411,9 +426,18 @@
       "components/table/table-cell.svelte": [
         "./package/components/table/table-cell.svelte.d.ts"
       ],
+      "components/table/table-col-header.svelte": [
+        "./package/components/table/table-col-header.svelte.d.ts"
+      ],
+      "components/table/table-foot.svelte": [
+        "./package/components/table/table-foot.svelte.d.ts"
+      ],
       "components/table/table-head.svelte": [
         "./package/components/table/table-head.svelte.d.ts"
       ],
+      "components/table/table-row-header.svelte": [
+        "./package/components/table/table-row-header.svelte.d.ts"
+      ],
       "components/table/table-row.svelte": [
         "./package/components/table/table-row.svelte.d.ts"
       ],

diff --git a/src/lib/components/table/table-col-header.svelte b/src/lib/components/table/table-col-header.svelte
@@ -0,0 +1,25 @@
+<!--
+  @component
+  The equivalent of the HTML `<th scope="col">` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
+  @see https://w3c.github.io/aria/#columnheader
+-->
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {string}
+   */
+  let className = '';
+
+  export { className as class };
+</script>
+
+<div role="columnheader" class="sui table-col-header {className}" {...$$restProps}>
+  <slot />
+</div>
+
+<style lang="scss">
+  .table-col-header {
+    display: table-cell;
+  }
+</style>
diff --git a/src/lib/components/table/table-foot.svelte b/src/lib/components/table/table-foot.svelte
@@ -0,0 +1,25 @@
+<!--
+  @component
+  The equivalent of the HTML `<tfoot>` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot
+  @see https://w3c.github.io/aria/#rowgroup
+-->
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {string}
+   */
+  let className = '';
+
+  export { className as class };
+</script>
+
+<div role="rowgroup" class="sui table-foot {className}" {...$$restProps}>
+  <slot />
+</div>
+
+<style lang="scss">
+  .table-foot {
+    display: table-footer-group;
+  }
+</style>
diff --git a/src/lib/components/table/table-row-header.svelte b/src/lib/components/table/table-row-header.svelte
@@ -0,0 +1,25 @@
+<!--
+  @component
+  The equivalent of the HTML `<th scope="row">` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
+  @see https://w3c.github.io/aria/#rowheader
+-->
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {string}
+   */
+  let className = '';
+
+  export { className as class };
+</script>
+
+<div role="rowheader" class="sui table-row-header {className}" {...$$restProps}>
+  <slot />
+</div>
+
+<style lang="scss">
+  .table-row-header {
+    display: table-cell;
+  }
+</style>
diff --git a/src/lib/components/table/table.svelte b/src/lib/components/table/table.svelte
@@ -33,5 +33,16 @@
   .table {
     display: table;
     width: 100%;
+
+    &:global(.data) {
+      border-collapse: collapse;
+
+      :global(.table-col-header),
+      :global(.table-row-header),
+      :global(.table-cell) {
+        border: 1px solid var(--secondary-border-color);
+        padding: 8px 8px;
+      }
+    }
   }
 </style>
diff --git a/src/lib/index.js b/src/lib/index.js
@@ -58,7 +58,10 @@ export { default as Slider } from './components/slider/slider.svelte';
 export { default as Switch } from './components/switch/switch.svelte';
 export { default as TableBody } from './components/table/table-body.svelte';
 export { default as TableCell } from './components/table/table-cell.svelte';
+export { default as TableColHeader } from './components/table/table-col-header.svelte';
+export { default as TableFoot } from './components/table/table-foot.svelte';
 export { default as TableHead } from './components/table/table-head.svelte';
+export { default as TableRowHeader } from './components/table/table-row-header.svelte';
 export { default as TableRow } from './components/table/table-row.svelte';
 export { default as Table } from './components/table/table.svelte';
 export { default as TabList } from './components/tabs/tab-list.svelte';

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -32,6 +32,13 @@
     Tab,
     TabList,
     TabPanel,
+    Table,
+    TableBody,
+    TableCell,
+    TableColHeader,
+    TableHead,
+    TableRow,
+    TableRowHeader,
     TextArea,
     TextInput,
   } from '$lib';
@@ -535,7 +542,43 @@
       </div>
     </section>
     <section>
-      <h3>Data Grid</h3>
+      <h3>Table</h3>
+      <div>
+        <Table class="data">
+          <TableHead>
+            <TableRow>
+              <TableColHeader />
+              <TableColHeader>Column 1</TableColHeader>
+              <TableColHeader>Column 2</TableColHeader>
+              <TableColHeader>Column 3</TableColHeader>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            <TableRow>
+              <TableRowHeader>Row 1</TableRowHeader>
+              <TableCell>Cell 1</TableCell>
+              <TableCell>Cell 2</TableCell>
+              <TableCell>Cell 3</TableCell>
+            </TableRow>
+          </TableBody>
+          <TableBody>
+            <TableRow>
+              <TableRowHeader>Row 2</TableRowHeader>
+              <TableCell>Cell 4</TableCell>
+              <TableCell>Cell 5</TableCell>
+              <TableCell>Cell 6</TableCell>
+            </TableRow>
+          </TableBody>
+          <TableBody>
+            <TableRow>
+              <TableColHeader />
+              <TableColHeader>Column 1</TableColHeader>
+              <TableColHeader>Column 2</TableColHeader>
+              <TableColHeader>Column 3</TableColHeader>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
     </section>
   </section>
 </main>