Retain zebra striping of table after rows are filtered with Alpine.js - alpine.js

Question

I have a table that has zebra striping.
I'm using Alpine.js to filter rows based on buttons you click.
When the table is filtered, the row striping is from the original, unfiltered state.
I'd like the striping to be recalculated when the filter is updated.
Code is below and I've created a CodePen.
<div x-data="{ filterID: 'all', filter: (id, allowed) => allowed.includes(id) }">
<nav class="mb-4">
<a
class="bg-purple-200 hover:bg-purple-400"
#click.prevent="filterID = 'all', striping"
:class="{ 'bg-purple-400' : filterID === 'all' }"
href="#"
>All</a>
<a
class="bg-purple-200 hover:bg-purple-400"
#click.prevent="filterID = 'A'"
:class="{ 'bg-purple-400' : filterID === 'A' }"
href="#"
>A</a>
<a
class="bg-purple-200 hover:bg-purple-400"
#click.prevent="filterID = 'B'"
:class="{ 'bg-purple-400' : filterID === 'B' }"
href="#"
>B</a>
</nav>
<table>
<thead>
<th>Column A</th>
<th>Column B</th>
</thead>
<tbody>
<tr
x-show.transition="filter(filterID, [ 'A' ]) || filterID === 'all'"
:class="{ 'active': filter(filterID, [ 'A' ]) }"
class=""
>
<td>Data 1A</td>
<td>Data 1B</td>
</tr>
<tr
x-show.transition="filter(filterID, [ 'B' ]) || filterID === 'all'"
:class="{ 'active': filter(filterID, [ 'B' ]) }"
class="bg-purple-200"
>
<td>Data 2A</td>
<td>Data 2B</td>
</tr>
<tr
x-show.transition="filter(filterID, [ 'A' ]) || filterID === 'all'"
:class="{ 'active': filter(filterID, [ 'A' ]) }"
class=""
>
<td>Data 3A</td>
<td>Data 3B</td>
</tr>
</tbody>
</table>
</div>

Answer 1

use :key="row.id" in order to give those items specific ids. This way, alpine.js will remove the inactive rows from the DOM so the odd/even count will not be messed up with the rows being hidden.