-
|
I am rendering markdown documentation from templates with large datatables. Right now I have enabled the sortable columns feature as explained in the docs. Is there a way to enable filetering on columns and pagination to avoid printing the whole table at once? |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 17 replies
-
|
Material for MkDocs doesn't provide this functionality out of the box, but it's not difficult to add by using a third-party library, for example something like TableFilter. Integration is similar to TableSort. |
Beta Was this translation helpful? Give feedback.
-
|
I was playing around with dataTables and got what I was looking for. The downside is that they are not markdown tables but plain HTML syntax. Wish there was a native markdown solution at some point in the future :) |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, Markdown tables are meh. I think I've seen some extensions to the standard Markdown table syntax, but can't remember. |
Beta Was this translation helpful? Give feedback.
-
|
@gusmb @squidfunk I have:
Of course, "nothing shows up". I suspect that my .js gist is not working. Any advice? Thanks |
Beta Was this translation helpful? Give feedback.
-
|
I had to mention the right |
Beta Was this translation helpful? Give feedback.
-
|
I mean the functionality works but is ugly to say the least: Any way to just add a small filter icon and only then show the input fields for the filter? Something like this: |
Beta Was this translation helpful? Give feedback.
-
|
You're going to have to ask the people who wrote tablefilter. |
Beta Was this translation helpful? Give feedback.
-
|
You're right. Sorry, last commit 4y ago. I thought this thread would be more appropriate. 😅 |
Beta Was this translation helpful? Give feedback.
-
|
Anyway, for future reference, this is as far as I've gotten: 
Code - click to preview!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Filterable Table</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<article>
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr><td>Alice</td><td>24</td><td>New York</td></tr>
<tr><td>Bob</td><td>30</td><td>Los Angeles</td></tr>
<tr><td>Charlie</td><td>22</td><td>Chicago</td></tr>
<!-- Add more rows as needed -->
</tbody>
</table>
</article>
<script src="script.js"></script>
</body>
</html>
document.addEventListener("DOMContentLoaded", function() {
var table = document.querySelector('table');
var headers = table.querySelectorAll("th");
headers.forEach(function(header, index) {
// Create a container for the header content
var container = document.createElement('div');
container.className = 'header-container';
container.innerHTML = header.innerHTML;
// Create filter icon
var filterIcon = document.createElement('span');
filterIcon.className = 'filter-icon';
filterIcon.innerHTML = '🌪️';
// Create clear icon
var clearIcon = document.createElement('span');
clearIcon.className = 'clear-icon';
clearIcon.innerHTML = '🧹';
// Create filter input
var input = document.createElement('input');
input.type = 'text';
input.className = 'filter-input';
// Append icons and input to the container
container.appendChild(filterIcon);
container.appendChild(clearIcon);
container.appendChild(input);
// Replace header content with the container
header.innerHTML = '';
header.appendChild(container);
filterIcon.addEventListener("click", function(event) {
event.stopPropagation();
hideAllInputs();
if (input.style.display === "none" || input.style.display === "") {
input.style.display = "block";
input.style.left = filterIcon.offsetLeft + "px";
input.style.top = filterIcon.offsetTop + filterIcon.offsetHeight + "px";
} else {
input.style.display = "none";
}
input.focus();
});
clearIcon.addEventListener("click", function(event) {
event.stopPropagation();
input.value = "";
filterTable(table, index, "");
input.style.display = "none";
clearIcon.style.display = "none";
});
input.addEventListener("input", function() {
filterTable(table, index, input.value);
clearIcon.style.display = input.value ? "inline" : "none";
});
document.addEventListener("click", function(event) {
if (input.style.display === "block" && !input.contains(event.target) && !filterIcon.contains(event.target)) {
input.style.display = "none";
}
});
input.addEventListener("click", function(event) {
event.stopPropagation();
});
});
function hideAllInputs() {
var inputs = document.querySelectorAll(".filter-input");
inputs.forEach(function(input) {
input.style.display = "none";
});
}
function filterTable(table, column, query) {
var rows = table.querySelectorAll("tbody tr");
rows.forEach(function(row) {
var cell = row.cells[column].textContent.trim();
if (cell.toLowerCase().includes(query.toLowerCase())) {
row.style.display = "";
} else {
row.style.display = "none";
}
});
}
});
.filter-icon, .clear-icon {
cursor: pointer;
margin-left: 5px;
}
.filter-input {
display: none;
position: absolute;
background: white;
border: 1px solid #ccc;
z-index: 1000;
padding: 5px;
}
.header-container {
position: relative;
}
.clear-icon {
display: none;
} |
Beta Was this translation helpful? Give feedback.
Material for MkDocs doesn't provide this functionality out of the box, but it's not difficult to add by using a third-party library, for example something like TableFilter. Integration is similar to TableSort.