CSS with attr for resposible table

Hi,

thanks for your post, and sorry for the trouble.

Unfortunately, there’s currently no existing feature that adds these attributes. You could maybe try using the tablepress_cell_tag_attributes filter hook (see https://github.com/TobiasBg/TablePress/blob/master/classes/class-render.php#L716 ) here.

Another approach could be to use JavaScript code to add these on the fly, e.g. something like

<script>
const theads = document.querySelectorAll( 'thead' );
const tbodys = document.querySelectorAll( 'tbody' );
let header_cells = [];

for ( let i = 0, thead; thead = theads[i]; i++ ) {
	header_cells[ i ] = [];
	for ( let j = 0, header_cell; header_cell = thead.rows[0].cells[ j ]; j++ ) {
		header_cells[ i ].push( header_cell.textContent );
	}
}

for ( let h = 0, tbody; tbody = tbodys[ h ]; h++ ) {
	for ( let i = 0, row; row = tbody.rows[i]; i++ ) {
		for ( let j = 0, cell; cell = row.cells[ j ]; j++ ) {
			cell.dataset.column = header_cells[ h ][ j ];
		}
	}
}
</script>

(I haven’t tested this though.)

Regards,
Tobias

Thank you very much, Tobias!

Well, my first approach was trying to add scope=”col” like I saw in other posts in this forum (It’s not what I want to do, but it would be my first step.)

function ada_tablepress_add_scope( $tag_attributes, $table_id, $cell_content, $row_number, $col_number, $colspan, $rowspan ) {
    if ( $row_number === 1 ) {
        $tag_attributes['scope'] = "col";
    }
    return $tag_attributes;
}
add_filter( 'tablepress_cell_tag_attributes', 'ada_tablepress_add_scope', 10, 7 );

Wouldn’t be expected this filter add scope=”col” on first TH tag?

I put it in functions.php but nothing happened with the table I created using Tablepress.

What could I be doing wrong?

Hi,

this should work. Did you check while logged-in into WordPress? Can you maybe make and save a dummy change in the table to clear the cache?

Regards,
Tobias

The first time I tested I was logged-in into WordPress. But then I saved a “test page” and searched in the source code (not logged in). I also flushed CDN cache and browser cache… But nope. No sign of scope=”col” in any part of the table.

Can you please suggest me a simple filter that alter something in the table, just for testing purposes? I need to understand what’s going on

• This reply was modified 3 years, 8 months ago by jrvcosta.
• This reply was modified 3 years, 8 months ago by jrvcosta.

Hi,

can you then please try the tablepress_cell_content filter for a check if the filtering works? See https://github.com/TobiasBg/TablePress/blob/master/classes/class-render.php#L623

Regards,
Tobias

Hi Tobias.

It worked! Thank you!

But, please, I need some guidance to reach my goal.

I will try to be very clear. Let′s take this simple table:

<table>
   <thead>
      <tr>
         <th>Column 1</th>
         <th>Column 2</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
      </tr>
   </tbody>
</table>

I would like to add the data-column attribute to each TD with the value of the corresponding column header. The final table would be:

<table>
   <thead>
      <tr>
         <th>Column 1</th>
         <th>Column 2</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td data-column="Column 1">Data 1</td>
         <td data-column="Column 2">Data 2</td>
      </tr>
   </tbody>
</table>

It is important to me that this happens for all tables generated by TablePress.

But I have no clue how to code this (using tablepress_cell_tag_attributes filter? tablepress_cell_content filter?). How? Can you help me?

• This reply was modified 3 years, 8 months ago by jrvcosta.

Hi,

it turns out that this is a bit tricky… The tablepress_cell_tag_attributes filter hook would be able to add this attribute, but unfortunately, it does not directly have access to the content of the table header cells.
You would first have to use one of the other filter hooks, like tablepress_render_data, to extract the values of the header cells into a custom variable, and you could then add them to the attributes with tablepress_cell_tag_attributes. This will need a bit of custom code though, so maybe use the JavaScript method, which should be easier. You would just have to add that JS to the pages with the tables.

Regards,
Tobias

Well, since I didn’t quite understand the implementation of the JS you gave at the beginning of this post – and since all the tables I need to insert these attributes are in two specific categories, my work-around solution was pure PHP:

function ada_tablepress_add_scope( $tag_attributes, $table_id, $cell_content, $row_number, $col_number, $colspan, $rowspan ) {
if (in_category(array('123','321')) ) {
$data_tags = array("Data 1","Data 2","Data 3","Data 4");
for ($i = 1; $i <= 4; $i++) {
	if ( $col_number === $i ) {	$tag_attributes['data-column'] = $data_tags[$i - 1]; }
	}
} 
return $tag_attributes;
}
add_filter( 'tablepress_cell_tag_attributes', 'ada_tablepress_add_scope', 10, 7 );

it’s far from the best solution and it may not be nice-looking, but for now it works for me!

Thank you for your time, Tobias! Take care.

Hi,

yes, putting in the table header data in a static form will also work. Nice idea! ??

Best wishes,
Tobias