This was my solution/hack…
/config-templatebuilder/avia-shortcodes/table.php
line 294:
$responsive_style .= ".avia-table-".self::$table_count." td:nth-of-type(" . ($counter + 1) . "):before { content: '".$row['content'][$counter]['content']."'; } ";
And I used this custom CSS to fix the hiding/showing of headline column headers:
@media only screen and (max-width: 767px){
.responsive .avia-data-table .avia-button-row, .responsive .avia-data-table tr:first-child th {
display: block;
}
.responsive .avia-data-table .avia-heading-row .avia-center-col {
display: none;
}
}
The only thing that isn’t working now is changing the label if you have multiple headline rows within a data table..
I am also seeing this problem and trying to debug it to come up with a fix.. It makes grids really confusing when viewing them on mobile.
I don’t think it can be fixed by CSS alone.. it looks like a bug in the data_table function around line number 254 in /config-templatebuilder/avia-shortcodes/table.php