diff --git a/blocks/table/table.css b/blocks/table/table.css new file mode 100644 index 0000000..91f3f9f --- /dev/null +++ b/blocks/table/table.css @@ -0,0 +1,69 @@ +.table { + --table-border-color: var(--color-gray-200); + + 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 var(--table-border-color); + border-bottom: 2px solid var(--table-border-color); +} + +.table table tbody tr { + border-bottom: 1px solid var(--table-border-color); +} + +.table table th { + font-weight: 700; +} + +.table table th, +.table table td { + padding: 0.5em; + text-align: left; +} + +.table table th p, +.table table td p { + margin: 0; +} + +.table table td p + p { + margin-top: 0.25em; +} + +/* no header variant */ +.table.no-header table tbody tr { + border-top: 1px solid var(--table-border-color); +} + +/* striped variant */ +.table.striped tbody tr:nth-child(odd) { + background-color: var(--light-color); +} + +/* bordered variant */ +.table.bordered table th, +.table.bordered table td { + border: 1px solid var(--table-border-color); +} \ No newline at end of file diff --git a/blocks/table/table.js b/blocks/table/table.js new file mode 100644 index 0000000..deac4b4 --- /dev/null +++ b/blocks/table/table.js @@ -0,0 +1,38 @@ +/* + * 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); + const align = col.getAttribute('data-align'); + const valign = col.getAttribute('data-valign'); + if (align) cell.style.textAlign = align; + if (valign) cell.style.verticalAlign = valign; + cell.innerHTML = col.innerHTML; + row.append(cell); + }); + }); + block.innerHTML = ''; + block.append(table); +} \ No newline at end of file