Sto provando Ant Design per React, e devo dire che non è male.
Facile da integrare e con una ottima documentazione.
Il componente Table ci permette di stabilire un sorter per ogni colonna.
jQuery Mobile ha un buon supporto per la tabelle.
Inoltre, ultimamente, sono state fatte delle aggiunte interessanti; come vedremo, infatti, JQM ci da la possibilità di levare / aggiungere delle colonne in visualizzazione, nascondendone alcune in base allo schermo.
Però di default le tabelle non hanno la possibilità di essere ordinate; andremo quindi ad integrare il tutto con un alro plugin per fare in modo che si possa ordinare la tabella cliccando sull'intestazione.
Il plugin lo trovare qua; una volta scaricato e scompattato va aggiunto alla pagina:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="tablesorter/jquery.tablesorter.min.js"></script>
A questo punto mettiamo su la tabella:
<div data-role="content">
<table data-role="table" id="table-column-toggle" data-mode="columntoggle"
class="ui-body-d ui-shadow table-stripe ui-responsive"
data-column-btn-theme="a" data-column-popup-theme="c">
<thead>
<tr class="ui-bar-a">
<th data-priority="1">Titolo</th>
<th data-priority="1">Creazione</th>
<th data-priority="2">Modifica</th>
<th data-priority="3">Count</th>
</tr>
</thead>
<tbody>
<?php foreach ($articoli->getArticoliPerPubblicazione() as $a): ?>
<tr>
<td><?php echo $a['a_titolo']; ?></td>
<td><?php echo $a['a_creazione']; ?></td>
<td><?php echo $a['a_modifica']; ?></td>
<td><?php echo $a['a_count']; ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
Articolo riscritto
In questo articolo vediamo come impostare un filtro in una JTable, scrivendo dentro una JTextfield.
In pratica vogliamo ottenere quell'effetto per cui man mano che scriviamo, rimangono solo i dati che "assomigliano" a ciò che scriviamo.
Quello che ci serve è un TableRowSorter, impostato dopo l'inizializzazzione della nostra JTable.
Poi aggiungete una JTextField alla finestra, ed impostate un evento che intercetta quando scrivete.