Problem/Motivation

Entered this table in CKEditor 4

(from the database)

<div class="usa-table-container">
<table class="usa-table usa-table--striped usa-table--stacked">
	<caption>test caption</caption>
	<thead>
		<tr>
			<th scope="col">this</th>
			<th scope="col">is&nbsp;</th>
			<th scope="col">aAliquam aliquam nulla in ante aliquet porttitor</th>
			<th scope="col">test</th>
			<th scope="col">only</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>this</td>
			<td>is</td>
			<td>Aliquam aliquam nulla in ante aliquet porttitor</td>
			<td>a</td>
			<td>test</td>
		</tr>
		<tr>
			<td>if</td>
			<td>thisAliquam aliquam nulla in ante aliquet porttitor</td>
			<td>were</td>
			<td>a</td>
			<td>real</td>
		</tr>
		<tr>
			<td>Aliquam aliquam nulla in ante aliquet porttitor</td>
			<td>it</td>
			<td>would</td>
			<td>contain</td>
			<td>actual</td>
		</tr>
		<tr>
			<td>data</td>
			<td>that</td>
			<td>might</td>
			<td>Aliquam aliquam nulla in ante aliquet porttitor</td>
			<td>useful</td>
		</tr>
	</tbody>
</table>
</div>

after being run through the Filter(filter_table_attributes) I get

<table class="usa-table usa-table--striped usa-table--stacked"><caption>test caption</caption>
	<thead><tr><th scope="row">header 1</th>
			<th scope="row">header 2</th>
			<th scope="row">header 4</th>
			<th scope="row">header 4</th>
			<th scope="row">header 5</th>
		</tr></thead><tbody><tr><td data-label="header 1">cell 1,1</td>
			<td data-label="header 1">cell 1,2</td>
			<td data-label="header 1">cell 1,3</td>
			<td data-label="header 1">cell 1,4</td>
			<td data-label="header 1">cell 1,5</td>
		</tr><tr><td data-label="header 1">cell 2,1</td>
			<td data-label="header 1">cell 2,2</td>
			<td data-label="header 1">cell 2,3</td>
			<td data-label="header 1">cell 2,4</td>
			<td data-label="header 1">cell 2,5</td>
		</tr><tr><td data-label="header 1">cell 3,1</td>
			<td data-label="header 1">cell 3,2</td>
			<td data-label="header 1">cell 3,3</td>
			<td data-label="header 1">cell 3,4</td>
			<td data-label="header 1">cell 3,5</td>
		</tr><tr><td data-label="header 1">cell 4,1</td>
			<td data-label="header 1">cell 4,2</td>
			<td data-label="header 1">cell 4,3</td>
			<td data-label="header 1">cell 4,4</td>
			<td data-label="header 1">cell 4,5</td>
		</tr></tbody></table></div>

all rows with the same header

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#5 uswds_ckeditor_integration--mobile-stacked-table-has-wring-headers-3378273-5.patch1.16 KBjrglasgow
#3 uswds_ckeditor_integration--mobile-stacked-table-has-wring-headers-3378273-3.patch1.18 KBjrglasgow

Issue fork uswds_ckeditor_integration-3378273

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

jrglasgow created an issue. See original summary.

jrglasgow’s picture

jrglasgow commented

In looking at this I noticed a few things where the table row is getting processed...

        foreach ($rows as $row) {
          if ($skip_first) {
            $skip_first = FALSE;
            continue;
          }
          $counter = 0;
          $tbodyTags = $xpath->query('//tbody//td|//th', $row);
          foreach ($tbodyTags as $tag) {
            if ($tag->nodeName === 'th') {
              $tag->setAttribute('scope', 'row');
            }
            else {
              $data_label = $table_headers[$counter];
              $tag->setAttribute('data-label', $data_label);
            }
          }
        }

in the foreach loop internal to the row the $counter variable is never incremented.

I also noticed that the xpath query $tbodyTags = $xpath->query('//tbody//td|//th', $row); returns a list of 25 items... so it was looping through not only the items in the current row, but it was also looping through all of the cells in the table for each row.

I modified this to instead just grab the 

$row->childNodes</a> of the current row and this resolved the issue... the same section of code work if you have this instead
<code>
        foreach ($rows as $row) {
          if ($skip_first) {
            $skip_first = FALSE;
            continue;
          }
          $counter = 0;
          foreach ($row->childNodes AS $tag) {
            switch ($tag->nodeName) {
              case 'th':
                $tag->setAttribute('scope', 'row');
              case 'td':
                $data_label = $table_headers[$counter];
                $tag->setAttribute('data-label', $data_label);
                $counter++;
                break;
              default:
                error_log($tag->nodeName);
            }
          }
        }
jrglasgow’s picture

jrglasgow commented
Status: Active » Needs review
StatusFileSize
new uswds_ckeditor_integration--mobile-stacked-table-has-wring-headers-3378273-3.patch1.18 KB

here is my patch

jrglasgow opened merge request !62

jrglasgow’s picture

jrglasgow commented
StatusFileSize
new uswds_ckeditor_integration--mobile-stacked-table-has-wring-headers-3378273-5.patch1.16 KB

found a couple of small issues with my patch

smustgrave made their first commit to this issue’s fork.

smustgrave’s picture

smustgrave commented
Status: Needs review » Fixed

Confirmed the issue and that your MR 62 fixed it thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.