Question

I have been working on a Spotify app which displays a track listing using code like this:

var tpl = new models.Playlist();
var tempList = new views.List(tpl);
body.document.appendChild(tempList.node);
tpl.add(track1);
tpl.add(track2);
...
tpl.add(trackn);

However, this only displays the contents of the columns and doesn’t display the headers (Track, Artist, Album, etc.).
Ideally I want to include these, as the ui guidelines say “For best clarification please add a header of column descriptions to your tracklist”.

Is there a standard way to include these headers, or does this require something custom (in which case I would think it might be tricky to line them up exactly with the columns)?

Answer 1

You should be able to restrict to a specific size. Use the inspector to figure out all of the class names and then set each field to be a certain width, then you should be able to put a div above the list with the same class names and the header text there.

For instance:

.sp-track-field-name { width: 150px; }

Then

<div class="list-header">
    <span class="sp-track-field-name">Title</span>
</div>
<div id="playlist" />

Where playlist is the node you attach the List view to.

Otherwise, use javascript to get the actual width of the columns and set it programmatically