/    Sign up×
Bounties /Pin to ProfileBookmark

HTML Tables – sortable & filterable

+ 1,000
Copy linkTweet thisAlerts:
Nov 03.2023

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

to post a answer
CSSHTMLJavaScript

7 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.

Was this helpful?

Copy linkTweet thisAlerts:
@kiwisauthorNov 03.2023 — That is semi helpful.

Is there a way I can

1) sort based on a raw number / string. What if inside my td tag I have a div for example?
2) can i filter a range of rows based on a single click. For example, using your code - have a button called Show Canada and it removes all but Canada
Copy linkTweet thisAlerts:
@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.
@SempervivumThanks for these links. SlickGrid and Tabulator seem to be fine and lightweight alternatives to datatables.Nov 15.2023
Copy linkTweet thisAlerts:
@SempervivumNov 07.2023 — I totally agree that jQuery is outdated. However if there is a skript like datatables which is powerful and well proven I would accept that it's using it.
No benefit in inventing the wheel again.
Copy linkTweet thisAlerts:
@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.
Copy linkTweet thisAlerts:
@gordonJan 24.2024 — Is jQuery aging?
Is Javascript aging?

*headscratch*
Copy linkTweet thisAlerts:
@andrettiFeb 16.2024 — There are many useful JavaScript libraries for creating dynamic tables, with searching and sorting capabilities.

Here is a site with many examples of those tools: https://www.sitepoint.com/jquery-tables/, https://datatables.net/, jQuery.js, or Bootstrap.js, among others.
×

Success!

Help @kiwis spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...