{% extends "admin/base_site.html" %} {% load i18n %} {% block bodyclass %}grp-doc{% endblock %} {% block content-class %}{% endblock %} {% block title %}Grappelli Documentation » Tables{% endblock %} {% block extrahead %} {% endblock %} {% block breadcrumbs %} {% endblock %} {% block content %}

Tables

Basic Tables

Feel free to use everything a table structure allows. To cycle the background-color of rows, use the classes .grp-row-even and .grp-row-odd.

Prename Surname Instrument
Prename Surname Instrument
Stéphane Grappelli Violin
Django Reinhardt Guitar
Eddie South Violin
Joe Venuti Violin
Stuff Smith Violin
{% filter force_escape %}
Prename Surname Instrument
Prename Surname Instrument
Stéphane Grappelli Violin
Django Reinhardt Guitar
Eddie South Violin
Joe Venuti Violin
Stuff Smith Violin
{% endfilter %}

Full width table

Just add .grp-full-width.

Prename Surname Instrument
Prename Surname Instrument
Stéphane Grappelli Violin
Django Reinhardt Guitar
Eddie South Violin
Joe Venuti Violin
Stuff Smith Violin
{% filter force_escape %}

    ...
{% endfilter %}

Sortable Tables

Tables may be sortable (e.g. with change-lists) — to do so, add the class .grp-sortable to the table. To define a th as a sortable header, you have to add .sortable. If it's already sorted, you further have to add .sorted.ascending or .sorted.descending.

Each th in a sortable table has to contain one or more of the following elements:

  • A div.grp-text containing an a with the title if the th is sortable and a span if it's not.
  • If it is already sorted, a div.grp-sortoptions containing the following elements:
    • An a.grp-sortremove to remove the sorting
    • A span.grp-sortpriority showing the priority if more than one th is sorted
    • An a.grp-toggle with the additional class .grp-ascending or .grp-descending that shows the sorting direction

To view the full code of a sortable table take a look at Grappellis change_list_results.html.

2
Surname
1
Stuff Smith Violin 5
Stéphane Grappelli Violin 1
Joe Venuti Violin 3
Eddie South Violin 4
Django Reinhardt Guitar 2
{% filter force_escape %}

        .
        .
        .
    
2
Surname
1
Stuff Smith Violin 5
{% endfilter %}

Form Fields & Errors in Tables

You may use all types of form fields in tables as well as error elements.

Non-form error with some instruments

Prename Surname Instrument Action
  • Non-field error with Stuffs Violin
Stuff Smith Violin
  • Field error: Tuning failed
  • Field error: Not able to tune it up
Stéphane Grappelli Violin
Joe Venuti Violin
  • Non-field error with Eddies Violin
Eddie South Violin
  • Field error: Tuning failed
  • Field error: Not able to tune it up
Django Reinhardt Guitar
{% filter force_escape %}

        .
        .
        .
    
Prename Surname Instrument Action
  • Non-field error with Stuffs Violin
Stuff Smith Violin
  • Field error: Tuning failed
  • Field error: Not able to tune it up
{% endfilter %}
{% endblock %}