Easier way of creating custom row templates

[simonw]

I was messing around with a custom _rows_and_columns.html template and ended up with this:

{% for row in display_rows %}
  <div> 
    <hr>
    {% for cell in row %}
      {% if cell.column == "First_Name" %}
        <h2 class="scientist">{{ cell.value }}
      {% elif cell.column == "Last_Name" %}
        {{ cell.value }}</h1>
      {% elif cell.column == "Short_Description" %}
        <p><strong>{{ cell.column }}: </strong>{{ cell.value }}</p>
        <p>
      {% else %}
        <strong>{{ cell.column }}: </strong>{{ cell.value }}&nbsp;&nbsp;&nbsp;
      {% endif %}
    {% endfor %}
  </div>
{% endfor %}

This is nasty. I'd like to be able to do something like this instead:

{% for row in display_rows %}
  <h2 class="scientist">{{ row["First_Name"] }} {{ row["Last_Name"] }}</h2>
  ...

[simonw]

I think the trick is to redefine what a "cell_row" is. Each row is currently a list of cells:

datasette/datasette/views/table.py

Lines 159 to 163 in 6341f8c

	if truncate_cells and len(display_value) > truncate_cells:
	display_value = display_value[:truncate_cells] + u"\u2026"
	cells.append({"column": column, "value": display_value})
	cell_rows.append(cells)

I can redefine the row (the cells variable in the above example) as a thing-that-iterates-cells (hence behaving like a list) but that also supports __getitem__ access for looking up cell values if you know the name of the column.

[simonw]

Of course I can't do it in this part of he code because it's constructing plain JSON objects here.

I'll need to do it in the section that prepares special objects for the HTML.

[simonw]

Actually I'm OK here - display_columns_and_rows() is already only used by the HTML template rendering path.

[simonw]

This is starting to shape up. Example template:

{% for row in display_rows %}
  <div> 
    <hr>
    <h2 class="scientist">
      {{ row["First_Name"] }} {{ row["Last_Name"] }}
    </h2>
    {% if row["Link_to_Photo"] %}
      <img style="max-width: 300px" src="{{ row["Link_to_Photo"] }}">
    {% endif %}
    {% for cell in row.cells[3:] %}
      {% if cell.raw and cell.column != "createdTime" %}
        <p><strong>{{ cell.column }}: </strong>{{ cell.value }}</p>
      {% endif %}
    {% endfor %}
  </div>
{% endfor %}

[simonw]

Still needed before merge: documentation! I can expand this section: https://datasette.readthedocs.io/en/stable/custom_templates.html#custom-templates

[simonw]

Fixed by #533