Skip to content

Add table spanning support #420

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Sep 22, 2022
Merged

Add table spanning support #420

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
ae12e5b
feat: add table cell merging
Aug 10, 2022
5988fc2
chore: add tests
Aug 12, 2022
3c514d4
refactor: add spanned class for tables that have col/row span
Aug 24, 2022
a51c311
refactor: rely on docc to specify which fields should be skipped.
Aug 30, 2022
62d483f
refactor: better naming for index vars
Sep 16, 2022
0d675c1
Merge branch 'main' into dhristov/r98017748-add-table-spanning
Sep 16, 2022
d01e537
Merge branch 'main' into dhristov/r98017748-add-table-spanning
Sep 16, 2022
2ef92f4
fix: add forgotten css property
Sep 21, 2022
e0cfb3f
Merge branch 'main' into dhristov/r98017748-add-table-spanning
Sep 21, 2022
48e10de
refactor: remove special classes
Sep 21, 2022
9224354
Merge branch 'main' into dhristov/r98017748-add-table-spanning
Sep 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 37 additions & 37 deletions src/components/ContentNode.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,29 +114,35 @@ function renderNode(createElement, references) {
))
));

const renderTableChildren = (rows, headerStyle = TableHeaderStyle.none) => {
const renderTableCell = (
element, attrs, data, cellIndex, rowIndex, extendedData,
) => {
const { colspan, rowspan } = extendedData[`${rowIndex}_${cellIndex}`] || {};
// if either is `0`, then its spanned over and should not be rendered
if (colspan === 0 || rowspan === 0) return null;
return createElement(element, { attrs: { ...attrs, colspan, rowspan } }, (
renderChildren(data)
));
};

const renderTableChildren = (rows, headerStyle = TableHeaderStyle.none, extendedData = {}) => {
// build the matrix for the array
switch (headerStyle) {
// thead with first row and th for each first row cell
// tbody with rows where first cell in each row is th, others are td
case TableHeaderStyle.both: {
const [firstRow, ...otherRows] = rows;
return [
createElement('thead', {}, [
createElement('tr', {}, firstRow.map(cell => (
createElement('th', { attrs: { scope: 'col' } }, (
renderChildren(cell)
))
createElement('tr', {}, firstRow.map((cell, cellIndex) => (
renderTableCell('th', { scope: 'col' }, cell, cellIndex, 0, extendedData)
))),
]),
createElement('tbody', {}, otherRows.map(([firstCell, ...otherCells]) => (
createElement('tbody', {}, otherRows.map(([firstCell, ...otherCells], rowIndex) => (
createElement('tr', {}, [
createElement('th', { attrs: { scope: 'row' } }, (
renderChildren(firstCell)
)),
...otherCells.map(cell => (
createElement('td', {}, (
renderChildren(cell)
))
renderTableCell('th', { scope: 'row' }, firstCell, 0, rowIndex + 1, extendedData),
...otherCells.map((cell, cellIndex) => (
renderTableCell('td', {}, cell, cellIndex + 1, rowIndex + 1, extendedData)
)),
])
))),
Expand All @@ -145,15 +151,11 @@ function renderNode(createElement, references) {
// tbody with rows, th for first cell of each row, td for other cells
case TableHeaderStyle.column:
return [
createElement('tbody', {}, rows.map(([firstCell, ...otherCells]) => (
createElement('tbody', {}, rows.map(([firstCell, ...otherCells], rowIndex) => (
createElement('tr', {}, [
createElement('th', { attrs: { scope: 'row' } }, (
renderChildren(firstCell)
)),
...otherCells.map(cell => (
createElement('td', {}, (
renderChildren(cell)
))
renderTableCell('th', { scope: 'row' }, firstCell, 0, rowIndex, extendedData),
...otherCells.map((cell, cellIndex) => (
renderTableCell('td', {}, cell, cellIndex + 1, rowIndex, extendedData)
)),
])
))),
Expand All @@ -164,17 +166,13 @@ function renderNode(createElement, references) {
const [firstRow, ...otherRows] = rows;
return [
createElement('thead', {}, [
createElement('tr', {}, firstRow.map(cell => (
createElement('th', { attrs: { scope: 'col' } }, (
renderChildren(cell)
))
createElement('tr', {}, firstRow.map((cell, cellIndex) => renderTableCell(
'th', { scope: 'col' }, cell, cellIndex, 0, extendedData,
))),
]),
createElement('tbody', {}, otherRows.map(row => (
createElement('tr', {}, row.map(cell => (
createElement('td', {}, (
renderChildren(cell)
))
createElement('tbody', {}, otherRows.map((row, rowIndex) => (
createElement('tr', {}, row.map((cell, cellIndex) => (
renderTableCell('td', {}, cell, cellIndex, rowIndex + 1, extendedData)
)))
))),
];
Expand All @@ -183,12 +181,10 @@ function renderNode(createElement, references) {
// tbody with all rows and every cell is td
return [
createElement('tbody', {}, (
rows.map(row => (
rows.map((row, rowIndex) => (
createElement('tr', {}, (
row.map(cell => (
createElement('td', {}, (
renderChildren(cell)
))
row.map((cell, cellIndex) => (
renderTableCell('td', {}, cell, cellIndex, rowIndex, extendedData)
))
))
))
Expand Down Expand Up @@ -268,8 +264,12 @@ function renderNode(createElement, references) {
return renderFigure(node);
}

return createElement(Table, {}, (
renderTableChildren(node.rows, node.header)
return createElement(Table, {
props: {
spanned: !!node.extendedData,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this still needed since the class isn't being used anymore?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably not, just thought it might help future devs, if they want to style these tables in some way with custom styling 🤔

},
}, (
renderTableChildren(node.rows, node.header, node.extendedData)
));
case BlockType.termList:
return createElement('dl', {}, node.items.map(({ term, definition }) => [
Expand Down
22 changes: 19 additions & 3 deletions src/components/ContentNode/Table.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,23 @@
-->

<template>
<div class="table-wrapper"><table><slot /></table></div>
<div class="table-wrapper">
<table :class="{ spanned }">
<slot />
</table>
</div>
</template>

<script>
export default { name: 'Table' };
export default {
name: 'Table',
props: {
spanned: {
type: Boolean,
default: false,
},
},
};
</script>

<style lang="scss">
Expand All @@ -35,6 +47,10 @@ export default { name: 'Table' };
-webkit-overflow-scrolling: touch;
}

table {
border-style: hidden;
}

/deep/ {
th {
font-weight: $font-weight-semibold;
Expand All @@ -44,7 +60,7 @@ export default { name: 'Table' };
th {
border-color: var(--color-fill-gray-tertiary);
border-style: solid;
border-width: 1px 0;
border-width: var(--table-border-width, 1px 1px);
padding: rem(10px);
}
}
Expand Down
Loading