filamentgroup / tablesaw

A group of plugins for responsive tables.
MIT License
5.48k stars 434 forks source link

Prevent application of 'tablesaw-cell-hidden' at all viewport sizes for designated cells #300

Closed HongPong closed 7 years ago

HongPong commented 7 years ago

I am aiming to prevent some cells that span the entire table from being hidden regardless of the window width.

In this instance the table generally has four columns and the cells in the first column should always show. By designating like (simplified):

<table>
<thead>
<tr>
<th class='tablesaw-cell-persist' data-tablesaw-sortable-col data-tablesaw-priority="persist">thisrow</th>
<th>state</th>
<th>state</th>
<th>state</th>
</tr>
</thead>
<tbody>
<tr>...rows and cells of data</tr>
<tr >
                        <td colspan="4"  data-tablesaw-priority="persist" >
                            <div class="sd--blurb">my blurb that needs to show all the time</div>
                        </td>
                    </tr>
</tbody>
</table>

I have not been able to force the colspan 4 row to stay visible, although the first column otherwise does stay visible. After I narrow the window enough 'tablesaw-cell-hidden' becomes applied to the TD

Also data-tablesaw-ignorerow="" applied to the row around the colspan 4 does not have an effect. I would just like tablesaw to wholly ignore these colspan 4 rows. If additional information is required I would be happy to provide it.

HongPong commented 7 years ago

The problem seems to be that the first column can't be set to persist while allowing colspanned cells (like in example above). If i try to force the matter by setting "display: table-cell" on the cells I really want, that works okay for if they span the whole way, but if I try it on the first column then it can't calculate the width of the remaining columns correctly and they come in too narrow.

zachleat commented 7 years ago

What table types are you using? This should work for the column toggle type using the data-tablesaw-ignorerow attribute on the <tr> element.

HongPong commented 7 years ago

Swipe table types. This is the table tag we have right now (twig):

<table class="tablesaw tablesaw-swipe sd-subsection" data-tablesaw-mode="swipe" data-tablesaw-mode-switch="" data-tablesaw-minimap="" summary="{{ row.summary }}">

zachleat commented 7 years ago

Swipe tables didn’t have support for data-tablesaw-ignorerow yet. It’s kind of an “off the books” feature as of right now.

But I’ve added it in and it’ll work in 3.0.3.

HongPong commented 7 years ago

Thanks, appreciate the consideration on this. The only other issue we had with tablesaw was it's hard to tell on MS Edge what prompts tables to kick into tablesaw mode instead of regular display mode.