Menu
Bounties /Pin to ProfileBookmark
Davinci•003 auto-replyTo make an HTML table sortable and filterable, you can use JavaScript or a library like jQuery. Here's a simple example using plain JavaScript:
First, let's create a basic HTML table:
``
This will make your table both sortable and filterable.
@XPXWORDNov 05.2023 — #Handsontable (https://handsontable.com/): Handsontable is a JavaScript data grid library that allows you to create spreadsheet-like tables with features like sorting, filtering, pagination, and cell styling. It supports a wide range of data sources and provides an easy-to-use API for manipulating and interacting with the table.
ag-Grid (https://www.ag-grid.com/): ag-Grid is a feature-rich JavaScript grid library that offers advanced table functionalities such as sorting, filtering, grouping, and aggregation. It provides a flexible and customizable API for styling cells and supports various data sources and frameworks.
SlickGrid (https://github.com/mleibman/SlickGrid): SlickGrid is a fast and lightweight JavaScript grid library that focuses on performance and extensibility. It supports a wide range of features, including sorting, filtering, and cell styling. SlickGrid's modular architecture allows you to customize and enhance its functionality as per your needs.
Tabulator (http://tabulator.info/): As mentioned earlier, Tabulator is another lightweight JavaScript library for creating interactive tables. It offers features like sorting, filtering, pagination, and custom cell formatting. Tabulator provides an easy-to-use API and supports various data sources.
@rodrigors3012Jan 05.2024 — #If you're seeking alternatives to Google Charts and DataTables, especially with an emphasis on flexibility in cell content, styling, and additional features like sorting, pagination, and filtering, there are several options you can consider:
jqGrid: It offers advanced search, modular design allowing you to choose the necessary modules, multiple export options (CSV, Excel, PDF), and is known for being easy to pick up. It also allows updating various cell types including text, checkbox, select, image, and button.
Handsontable: This option is well-documented and widely used, offering detailed tutorials and extensive documentation. However, it might have issues with non-Latin scripts in cells. Handsontable is actively developed, providing a growing community and support.
Webix: Known for a wide range of widgets and views that can be constructed using JavaScript without HTML, Webix is a comprehensive UI component library. It's considered stable and simple to implement, but it's not free for commercial applications and is not very modular.
List.js: A free and open-source option, List.js is a tiny, powerful vanilla JavaScript library that adds search, sort, filters, and flexibility to HTML lists, tables, or anything. It's particularly popular for web-based applications.
ag-Grid: This is a feature-rich data grid available in both free and enterprise versions. It integrates easily with frameworks to offer filtering, grouping, aggregation, pivoting, and more.
RevoGrid: Another free and open-source option, RevoGrid offers powerful data grid capabilities with features like cell and range edit, fixed rows, columns, and full customization options.
Each of these alternatives offers unique features and capabilities that might suit your specific requirements for table management and data presentation. You might want to explore these options further to determine which one aligns best with your project's needs.
HTML Tables – sortable & filterable
I’m currently using Google Charts tables, I’m a little limited with what I can put into a table cell so I’m looking for alternative.
I’ve seen https://datatables.net/ but it’s based on jquery which in my opinion is an aging library. Has anyone else seen something good and free out there?
I’d love to be able to control the styles within a table cell. Includes html / div / images etc but also sort, paginate and filter. Ideally clicking a button on my page for example which will run a script to filter the table.
Thanks
Sign in
to post a answer7 Replies ↴
Davinci•003 auto-replyTo make an HTML table sortable and filterable, you can use JavaScript or a library like jQuery. Here's a simple example using plain JavaScript:First, let's create a basic HTML table:
``
html
<table id="myTable">
<tr>
<th onclick="sortTable(0)">Name</th>
<th onclick="sortTable(1)">Country</th>
</tr>
<tr>
<td>John</td>
<td>USA</td>
</tr>
<tr>
<td>Mary</td>
<td>Canada</td>
</tr>
<tr>
<td>Abe</td>
<td>USA</td>
</tr>
<tr>
<td>Sam</td>
<td>UK</td>
</tr>
</table>
`
Now, let's add a JavaScript function to sort the table when a column header is clicked:
javascript
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
switching = true;
dir = "asc";
while (switching) {
switching = false;
rows = table.rows;
for (i = 1; i < (rows.length - 1); i++) {
shouldSwitch = false;
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
shouldSwitch= true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
switchcount ++;
} else {
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
`
For filtering, you can add an input field and a JavaScript function to filter the table rows:
html
<input type="text" id="myInput" onkeyup="filterTable()" placeholder="Search for names..">
<script>
function filterTable() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
``This will make your table both sortable and filterable.
0
@XPXWORDNov 05.2023 — #Handsontable (https://handsontable.com/): Handsontable is a JavaScript data grid library that allows you to create spreadsheet-like tables with features like sorting, filtering, pagination, and cell styling. It supports a wide range of data sources and provides an easy-to-use API for manipulating and interacting with the table.ag-Grid (https://www.ag-grid.com/): ag-Grid is a feature-rich JavaScript grid library that offers advanced table functionalities such as sorting, filtering, grouping, and aggregation. It provides a flexible and customizable API for styling cells and supports various data sources and frameworks.
SlickGrid (https://github.com/mleibman/SlickGrid): SlickGrid is a fast and lightweight JavaScript grid library that focuses on performance and extensibility. It supports a wide range of features, including sorting, filtering, and cell styling. SlickGrid's modular architecture allows you to customize and enhance its functionality as per your needs.
Tabulator (http://tabulator.info/): As mentioned earlier, Tabulator is another lightweight JavaScript library for creating interactive tables. It offers features like sorting, filtering, pagination, and custom cell formatting. Tabulator provides an easy-to-use API and supports various data sources.
0
@rodrigors3012Jan 05.2024 — #If you're seeking alternatives to Google Charts and DataTables, especially with an emphasis on flexibility in cell content, styling, and additional features like sorting, pagination, and filtering, there are several options you can consider:jqGrid: It offers advanced search, modular design allowing you to choose the necessary modules, multiple export options (CSV, Excel, PDF), and is known for being easy to pick up. It also allows updating various cell types including text, checkbox, select, image, and button.
Handsontable: This option is well-documented and widely used, offering detailed tutorials and extensive documentation. However, it might have issues with non-Latin scripts in cells. Handsontable is actively developed, providing a growing community and support.
Webix: Known for a wide range of widgets and views that can be constructed using JavaScript without HTML, Webix is a comprehensive UI component library. It's considered stable and simple to implement, but it's not free for commercial applications and is not very modular.
List.js: A free and open-source option, List.js is a tiny, powerful vanilla JavaScript library that adds search, sort, filters, and flexibility to HTML lists, tables, or anything. It's particularly popular for web-based applications.
ag-Grid: This is a feature-rich data grid available in both free and enterprise versions. It integrates easily with frameworks to offer filtering, grouping, aggregation, pivoting, and more.
RevoGrid: Another free and open-source option, RevoGrid offers powerful data grid capabilities with features like cell and range edit, fixed rows, columns, and full customization options.
Each of these alternatives offers unique features and capabilities that might suit your specific requirements for table management and data presentation. You might want to explore these options further to determine which one aligns best with your project's needs.
