diff --git a/packages/components/src/components/@shared/_kol-table-stateless-mixin.scss b/packages/components/src/components/@shared/_kol-table-stateless-mixin.scss index 27b68b9920..da3029f070 100644 --- a/packages/components/src/components/@shared/_kol-table-stateless-mixin.scss +++ b/packages/components/src/components/@shared/_kol-table-stateless-mixin.scss @@ -68,6 +68,11 @@ } } + tr.foot-spacer, + tr.head-spacer { + display: none; + } + .selection-header-cell { width: 0; } diff --git a/packages/components/src/components/table-stateless/component.tsx b/packages/components/src/components/table-stateless/component.tsx index 13172d8d07..a73da3a34b 100644 --- a/packages/components/src/components/table-stateless/component.tsx +++ b/packages/components/src/components/table-stateless/component.tsx @@ -657,19 +657,24 @@ export class KolTableStateless implements TableStatelessAPI { ); } - /** - * Renders the table footer (``) using the provided footer data. - * It maps over each row in the footer and renders it similarly to a body row. - * - * @returns {JSX.Element} - The rendered table footer or an empty string if no footer data is provided. - */ - private renderFoot(): JSX.Element { + + private renderSpacer(variant: 'foot' | 'head', cellDefs: KoliBriTableHeaderCell[][] | KoliBriTableCell[][]): JSX.Element { + const colspan = cellDefs?.[0].reduce((acc, row) => acc + (row.colSpan || 1), 0); + + return ( + + + + ); + } + + private renderFoot(): JSX.Element[] | null { if (!this.state._dataFoot || this.state._dataFoot.length === 0) { - return ''; + return null; } const rows: KoliBriTableCell[][] = this.createDataField(this.state._dataFoot, this.state._headerCells, true); - return {rows.map(this.renderTableRow)}; + return {[this.renderSpacer('foot', rows), rows.map(this.renderTableRow)]}; } public render(): JSX.Element { @@ -702,40 +707,43 @@ export class KolTableStateless implements TableStatelessAPI { {Array.isArray(this.state._headerCells.horizontal) && ( - {this.state._headerCells.horizontal.map((cols, rowIndex) => ( - - {this.state._selection && this.renderHeadingSelectionCell()} - {cols.map((cell, colIndex) => { - if (cell.asTd === true) { - return ( - 0, - }} - colSpan={cell.colSpan} - rowSpan={cell.rowSpan} - style={{ - textAlign: cell.textAlign, - width: cell.width, - }} - ref={ - typeof cell.render === 'function' - ? (el) => { - this.cellRender(cell, el); - } - : undefined - } - > - {typeof cell.render !== 'function' ? cell.label : ''} - - ); - } else { - return this.renderHeadingCell(cell, rowIndex, colIndex); - } - })} - - ))} + {[ + this.state._headerCells.horizontal.map((cols, rowIndex) => ( + + {this.state._selection && this.renderHeadingSelectionCell()} + {cols.map((cell, colIndex) => { + if (cell.asTd === true) { + return ( + 0, + }} + colSpan={cell.colSpan} + rowSpan={cell.rowSpan} + style={{ + textAlign: cell.textAlign, + width: cell.width, + }} + ref={ + typeof cell.render === 'function' + ? (el) => { + this.cellRender(cell, el); + } + : undefined + } + > + {typeof cell.render !== 'function' ? cell.label : ''} + + ); + } else { + return this.renderHeadingCell(cell, rowIndex, colIndex); + } + })} + + )), + this.renderSpacer('head', this.state._headerCells.horizontal), + ]} )} {dataField.map(this.renderTableRow)} diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png index 9689ce20a2..182ab0f9e2 100644 Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png differ diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-column-alignment-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-column-alignment-firefox-linux.png index d4fd740ac4..6189656a38 100644 Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-column-alignment-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-column-alignment-firefox-linux.png differ diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-complex-headers-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-complex-headers-firefox-linux.png index d7de6f4ab8..59e64f9f4d 100644 Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-complex-headers-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-complex-headers-firefox-linux.png differ diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-pagination-position-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-pagination-position-firefox-linux.png index 03957a0ffa..e7c9ce8c0d 100644 Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-pagination-position-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-pagination-position-firefox-linux.png differ diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-sort-data-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-sort-data-firefox-linux.png index d48261dc0d..cca00d242b 100644 Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-sort-data-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-sort-data-firefox-linux.png differ diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateful-with-selection-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateful-with-selection-firefox-linux.png index f8d08f514c..38230ed610 100644 Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateful-with-selection-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateful-with-selection-firefox-linux.png differ diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateful-with-single-selection-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateful-with-single-selection-firefox-linux.png index ab6e173481..83caca3e31 100644 Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateful-with-single-selection-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateful-with-single-selection-firefox-linux.png differ diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-firefox-linux.png index b3d5c841aa..f15cd8c4e8 100644 Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-firefox-linux.png differ diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-with-selection-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-with-selection-firefox-linux.png index 21dcd76d06..9db93509b5 100644 Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-with-selection-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-with-selection-firefox-linux.png differ diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-with-single-selection-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-with-single-selection-firefox-linux.png index e1a2e71bd0..3fdd8c4f92 100644 Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-with-single-selection-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-stateless-with-single-selection-firefox-linux.png differ diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-with-footer-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-with-footer-firefox-linux.png index 36bda8b26e..52bfcf14cf 100644 Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-with-footer-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-with-footer-firefox-linux.png differ diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-with-pagination-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-with-pagination-firefox-linux.png index bc89fcad10..b79311ffa0 100644 Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-with-pagination-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-table-with-pagination-firefox-linux.png differ diff --git a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-table-sort-data-firefox-linux.png b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-table-sort-data-firefox-linux.png index 37e1234000..7a7b6cba17 100644 Binary files a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-table-sort-data-firefox-linux.png and b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-table-sort-data-firefox-linux.png differ diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png index a8a6332b4e..182ab0f9e2 100644 Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png differ diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-column-alignment-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-column-alignment-firefox-linux.png index d4fd740ac4..6189656a38 100644 Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-table-column-alignment-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-column-alignment-firefox-linux.png differ diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-complex-headers-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-complex-headers-firefox-linux.png index d7de6f4ab8..59e64f9f4d 100644 Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-table-complex-headers-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-complex-headers-firefox-linux.png differ diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-pagination-position-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-pagination-position-firefox-linux.png index d6b45a5830..e7c9ce8c0d 100644 Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-table-pagination-position-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-pagination-position-firefox-linux.png differ diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-sort-data-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-sort-data-firefox-linux.png index d48261dc0d..cca00d242b 100644 Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-table-sort-data-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-sort-data-firefox-linux.png differ diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateful-with-selection-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateful-with-selection-firefox-linux.png index 3a83c79fff..38230ed610 100644 Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateful-with-selection-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateful-with-selection-firefox-linux.png differ diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateful-with-single-selection-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateful-with-single-selection-firefox-linux.png index a2fa24a9ef..83caca3e31 100644 Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateful-with-single-selection-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateful-with-single-selection-firefox-linux.png differ diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-firefox-linux.png index b3d5c841aa..f15cd8c4e8 100644 Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-firefox-linux.png differ diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-with-selection-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-with-selection-firefox-linux.png index 31fdec49ec..9db93509b5 100644 Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-with-selection-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-with-selection-firefox-linux.png differ diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-with-single-selection-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-with-single-selection-firefox-linux.png index 366330d0e8..3fdd8c4f92 100644 Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-with-single-selection-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-stateless-with-single-selection-firefox-linux.png differ diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-with-footer-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-with-footer-firefox-linux.png index 36bda8b26e..52bfcf14cf 100644 Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-table-with-footer-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-with-footer-firefox-linux.png differ diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-table-with-pagination-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-table-with-pagination-firefox-linux.png index 376c1bd998..b79311ffa0 100644 Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-table-with-pagination-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-table-with-pagination-firefox-linux.png differ diff --git a/packages/themes/default/src/mixins/kol-table-stateless-wc.scss b/packages/themes/default/src/mixins/kol-table-stateless-wc.scss index 310142488f..29bbc4b1df 100644 --- a/packages/themes/default/src/mixins/kol-table-stateless-wc.scss +++ b/packages/themes/default/src/mixins/kol-table-stateless-wc.scss @@ -51,8 +51,8 @@ } table, - table thead tr:last-child th, - table thead tr:last-child td { + table thead tr:nth-last-child(2) th, + table thead tr:nth-last-child(2) td { border-width: 0; border-bottom-width: calc(var(--border-width) * 2); border-style: solid; @@ -75,7 +75,7 @@ align-items: center; } - tr:nth-child(even) { + table tbody tr:nth-child(even) { background-color: var(--color-mute); } @@ -89,6 +89,17 @@ font-weight: 700; } + tr.foot-spacer, + tr.head-spacer { + display: inherit; + height: rem(24); + + td { + border: none; + padding: 0; + } + } + .input { input { &:hover {