List attributes — Django Suit 0.2.21 documentation

# List attributes

Using few callable helpers you can customize change list row and cell attributes based on object instance variables.

## List header columns

As soon as you add `suit` to your apps, all your changelist table header columns will have specific field CSS class present.

For example for column `country` list header tag will look like this `<th class="country-column">`. Which means you can change it’s appearance using CSS.

    .country-column .text, .country-column a {
        text-align: center;
    }

## List row attributes

To add html attributes like `class` or `data` to list rows, you must define `suit_row_attributes` callable (function). Callable receives object instance and the request as arguments and must return `dict` with attributes for current row.

Example:

    from django.contrib.admin import ModelAdmin

    class CountryAdmin(ModelAdmin):
        ...

        def suit_row_attributes(self, obj, request):
            return {'class': 'type-%s' % obj.type}

        # Or bit more advanced example
        def suit_row_attributes(self, obj, request):
            css_class = {
                1: 'success',
                0: 'warning',
                -1: 'error',
            }.get(obj.status)
            if css_class:
                return {'class': css_class, 'data': obj.name}

Note

Twitter bootstrap already provides handy CSS classes for table row styling: `error`, `warning`, `info` and `success`

Preview:

## List cell attributes

To add html attributes like `class` or `data` to list cells, you must define `suit_cell_attributes` callable (function). Callable receives object instance and column name as arguments and must return `dict` with attributes for current cell.

Example:

    from django.contrib.admin import ModelAdmin

    class CountryAdmin(ModelAdmin):
        ...

        def suit_cell_attributes(self, obj, column):
            if column == 'countries':
                return {'class': 'text-center'}
            elif column == 'name' and obj.status == -1:
                return {'class': 'text-error'}

Note

Twitter bootstrap already provides handy CSS classes for table cell alignment: `text-left`, `text-center`, `text-right`