From 3df62ecf6720b6c16a03195dc8a1888c61eb1763 Mon Sep 17 00:00:00 2001
From: Tomasz Dziezyk <tomasz.dziezyk@ds.pl>
Date: Fri, 7 Jun 2024 16:01:16 +0200
Subject: [PATCH] Add table block

---
 blocks/table/table.css | 58 ++++++++++++++++++++++++++++++++++++++++++
 blocks/table/table.js  | 36 ++++++++++++++++++++++++++
 2 files changed, 94 insertions(+)
 create mode 100644 blocks/table/table.css
 create mode 100644 blocks/table/table.js

diff --git a/blocks/table/table.css b/blocks/table/table.css
new file mode 100644
index 0000000..7f18772
--- /dev/null
+++ b/blocks/table/table.css
@@ -0,0 +1,58 @@
+.table {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.table table {
+  width: 100%;
+  max-width: 100%;
+  border-collapse: collapse;
+  font-size: var(--body-font-size-xs);
+}
+
+@media (width >= 600px) {
+  .table table {
+    font-size: var(--body-font-size-s);
+  }
+}
+
+@media (width >= 900px) {
+  .table table {
+    font-size: var(--body-font-size-m);
+  }
+}
+
+.table table thead tr {
+  border-top: 2px solid;
+  border-bottom: 2px solid;
+}
+
+.table table tbody tr {
+  border-bottom: 1px solid;
+}
+
+.table table th {
+  font-weight: 700;
+}
+
+.table table th,
+.table table td {
+  padding: 8px 16px;
+  text-align: left;
+}
+
+/* no header variant */
+.table.no-header table tbody tr {
+  border-top: 1px solid;
+}
+
+/* striped variant */
+.table.striped tbody tr:nth-child(odd) {
+  background-color: var(--overlay-background-color);
+}
+
+/* bordered variant */
+.table.bordered table th,
+.table.bordered table td {
+  border: 1px solid;
+}
\ No newline at end of file
diff --git a/blocks/table/table.js b/blocks/table/table.js
new file mode 100644
index 0000000..f545f38
--- /dev/null
+++ b/blocks/table/table.js
@@ -0,0 +1,36 @@
+/*
+ * Table Block
+ * Recreate a table
+ * https://www.hlx.live/developer/block-collection/table
+ */
+
+function buildCell(rowIndex) {
+  const cell = rowIndex ? document.createElement('td') : document.createElement('th');
+  if (!rowIndex) cell.setAttribute('scope', 'col');
+  return cell;
+}
+
+export default async function decorate(block) {
+  const table = document.createElement('table');
+  const thead = document.createElement('thead');
+  const tbody = document.createElement('tbody');
+
+  const header = !block.classList.contains('no-header');
+  if (header) {
+    table.append(thead);
+  }
+  table.append(tbody);
+
+  [...block.children].forEach((child, i) => {
+    const row = document.createElement('tr');
+    if (header && i === 0) thead.append(row);
+    else tbody.append(row);
+    [...child.children].forEach((col) => {
+      const cell = buildCell(header ? i : i + 1);
+      cell.innerHTML = col.innerHTML;
+      row.append(cell);
+    });
+  });
+  block.innerHTML = '';
+  block.append(table);
+}