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

Display column type in column action menu, closes #993

Browse source 
Also added new documented db.table_column_details() introspection method.
This commit is contained in:
Simon Willison 2020-10-05 17:32:10 -07:00
commit 5a184a5d21
8 changed files with 103 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

8
datasette/static/app.css
View file

@ -396,7 +396,6 @@ svg.dropdown-menu-icon {
opacity: 0.8;
}
.dropdown-menu {
display: inline-flex;
border: 1px solid #ccc;
border-radius: 4px;
line-height: 1.4;
@ -410,6 +409,13 @@ svg.dropdown-menu-icon {
margin: 0;
padding: 0;
}
.dropdown-menu .dropdown-column-type {
font-size: 0.7em;
color: #666;
margin: 0;
padding: 0;
padding: 4px 8px 4px 8px;
}
.dropdown-menu li {
border-bottom: 1px solid #ccc;
}

13
datasette/static/table.js
View file

@ -6,6 +6,7 @@ var DROPDOWN_HTML = `<div class="dropdown-menu">
<li><a class="dropdown-facet" href="#">Facet by this</a></li>
<li><a class="dropdown-not-blank" href="#">Show not-blank rows</a></li>
</ul>
<p class="dropdown-column-type"></p>
</div>`;
var DROPDOWN_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@ -115,10 +116,20 @@ var DROPDOWN_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" heig
} else {
notBlank.style.display = 'none';
}
var columnTypeP = menu.querySelector('.dropdown-column-type');
var columnType = th.dataset.columnType;
var notNull = th.dataset.columnNotNull == 1 ? ' NOT NULL' : '';
if (columnType) {
columnTypeP.style.display = 'block';
columnTypeP.innerText = `Type: ${columnType.toUpperCase()}${notNull}`;
} else {
columnTypeP.style.display = 'none';
}
menu.style.position = 'absolute';
menu.style.top = (menuTop + 6) + 'px';
menu.style.left = menuLeft + 'px';
menu.style.display = 'inline-flex';
menu.style.display = 'block';
}
var svg = document.createElement('div');
svg.innerHTML = DROPDOWN_ICON_SVG;