github/datasette
1
0
Fork 0
mirror of https://github.com/simonw/datasette.git synced 2025-12-10 16:51:24 +01:00
Code Issues Projects Releases Packages Wiki Activity

?_col=/?_nocol= to show/hide columns on the table page

Browse source 
Closes #615

* Cog icon for hiding columns
* Show all columns cog menu item
* Do not allow hide column on primary keys
* Allow both ?_col= and ?_nocol=
* De-duplicate if ?_col= passed multiple times
* 400 error if user tries to ?_nocol= a primary key
* Documentation for ?_col= and ?_nocol=
This commit is contained in:
Simon Willison 2021-05-26 21:17:43 -07:00 • committed by GitHub
commit f1c29fd6a1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 142 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

45
datasette/static/table.js
View file

@ -4,6 +4,8 @@ var DROPDOWN_HTML = `<div class="dropdown-menu">
<li><a class="dropdown-sort-asc" href="#">Sort ascending</a></li>
<li><a class="dropdown-sort-desc" href="#">Sort descending</a></li>
<li><a class="dropdown-facet" href="#">Facet by this</a></li>
<li><a class="dropdown-hide-column" href="#">Hide this column</a></li>
<li><a class="dropdown-show-all-columns" href="#">Show all columns</a></li>
<li><a class="dropdown-not-blank" href="#">Show not-blank rows</a></li>
</ul>
<p class="dropdown-column-type"></p>
@ -24,7 +26,7 @@ var DROPDOWN_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" heig
}
function paramsToUrl(params) {
var s = params.toString();
return s ? "?" + s : "";
return s ? "?" + s : location.pathname;
}
function sortDescUrl(column) {
var params = getParams();
@ -45,6 +47,16 @@ var DROPDOWN_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" heig
params.append("_facet", column);
return paramsToUrl(params);
}
function hideColumnUrl(column) {
var params = getParams();
params.append("_nocol", column);
return paramsToUrl(params);
}
function showAllColumnsUrl() {
var params = getParams();
params.delete("_nocol");
return paramsToUrl(params);
}
function notBlankUrl(column) {
var params = getParams();
params.set(`${column}__notblank`, "1");
@ -87,18 +99,33 @@ var DROPDOWN_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" heig
var sortDesc = menu.querySelector("a.dropdown-sort-desc");
var facetItem = menu.querySelector("a.dropdown-facet");
var notBlank = menu.querySelector("a.dropdown-not-blank");
var hideColumn = menu.querySelector("a.dropdown-hide-column");
var showAllColumns = menu.querySelector("a.dropdown-show-all-columns");
if (params.get("_sort") == column) {
sort.style.display = "none";
sort.parentNode.style.display = "none";
} else {
sort.style.display = "block";
sort.parentNode.style.display = "block";
sort.setAttribute("href", sortAscUrl(column));
}
if (params.get("_sort_desc") == column) {
sortDesc.style.display = "none";
sortDesc.parentNode.style.display = "none";
} else {
sortDesc.style.display = "block";
sortDesc.parentNode.style.display = "block";
sortDesc.setAttribute("href", sortDescUrl(column));
}
/* Show hide columns options */
if (params.get("_nocol")) {
showAllColumns.parentNode.style.display = "block";
showAllColumns.setAttribute("href", showAllColumnsUrl());
} else {
showAllColumns.parentNode.style.display = "none";
}
if (th.getAttribute("data-is-pk") != "1") {
hideColumn.parentNode.style.display = "block";
hideColumn.setAttribute("href", hideColumnUrl(column));
} else {
hideColumn.parentNode.style.display = "none";
}
/* Only show facet if it's not the first column, not selected, not a single PK */
var isFirstColumn =
th.parentElement.querySelector("th:first-of-type") == th;
@ -110,9 +137,9 @@ var DROPDOWN_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" heig
params.getAll("_facet").includes(column) ||
isSinglePk
) {
facetItem.style.display = "none";
facetItem.parentNode.style.display = "none";
} else {
facetItem.style.display = "block";
facetItem.parentNode.style.display = "block";
facetItem.setAttribute("href", facetUrl(column));
}
/* Show notBlank option if not selected AND at least one visible blank value */
@ -123,10 +150,10 @@ var DROPDOWN_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" heig
params.get(`${column}__notblank`) != "1" &&
tdsForThisColumn.filter((el) => el.innerText.trim() == "").length
) {
notBlank.style.display = "block";
notBlank.parentNode.style.display = "block";
notBlank.setAttribute("href", notBlankUrl(column));
} else {
notBlank.style.display = "none";
notBlank.parentNode.style.display = "none";
}
var columnTypeP = menu.querySelector(".dropdown-column-type");
var columnType = th.dataset.columnType;