How can I customize and use the same html table multiple times?

Question

In one of my of my pages I have a few tables. These tables have the same structure but differ in colors and in the data displayed.

An example table might look like this:

<div class="container reusable-table">
    <h4 class="table_title">{{ table_title }}</h4>
    {% for item in items %}
        <div class="container row">
            <div class="container col">
                <h4>{{ item.date }}</h4>
            </div>
            <div class="container col">
                <h4>{{ item.time }}</h4>
            </div>
            <div class="container col">
                <h4>{{ item.title }}</h4>
            </div>
            <div class="container col">
                <h4>{{ item.description }}</h4>
            </div>
            <div class="container col">
                <h4>{{ item.price }}</h4>
            </div>
        </div>
    {% endfor %}
</div>

One of my options is to repeat the html and css code for the table each time. This way I risk errors and alot of duplicated code.

From my perspective, I need to find a way to substitute:

html elements, like table_title
data related elements, like {% for item in items %}
colors

Based on the comments and the answers below, also on Assign variables to child template in {% include %} tag Django, you can replace html elements and data with the following:

{% include "new_table.html" with table_title="A Title" and items=new_items %}

That leaves the color aspect, or in better terms the css aspect.

I am searching for a way to make this more efficient.

Probably [includes](https://docs.djangoproject.com/en/2.0/ref/templates/builtins/#include) would help you do this. So you could do something like `{% include 'my_table.html' with table_title='foo' items=some_items %}` — sytech, Feb 26 '18 at 06:28
@sytech Passing `table_title="foo"` works correctly. If my view returns `context["these_items"]` and `context["other_items"]`, I can't pass something like `items=other_items`, to be used in the for loop. — IordanouGiannis, Feb 26 '18 at 10:15
I'm not sure what you mean. When you include `my_table.html` it can use names from the current context or you can override them by saying `with keyword=value` -- You can even prevent the parent context names being used in rendering the included template entirely by using the `only` keyword. So its flexible even if you have name collisions or use different names. If you tried something specific using include that didn't work, can you update your question with those details? — sytech, Feb 26 '18 at 12:47
In the included html file you could replace `
Table Title
` with `
{{ table_title }}
` and do `{% include 'my_table.html' with table_title='foo'`. How would you replace `{% for item in items %}`, can you do something like {% for item in {{ items }} %} ? Essentialy how can you pass `items` in the `{% include %}` to be replaceable with a variable ? — IordanouGiannis, Feb 26 '18 at 12:55
It works just like any other template, no need to do anything special. When you include a template, you can control the names in its rendering context just like you can provide a context to templates rendered from your views. Suppose you have the name `foo_items` in your 'parent' template provided by your view... And the `my_table.html` uses `{% for item in items %}` -- You can do `{% include "my_table.html" with items=foo_items %}` just like that! — sytech, Feb 26 '18 at 13:02

score 2 · Answer 1 · answered Feb 26 '18 at 06:40

2

you can create one HTML File for the table, include the HTML table wherever you want with {% include %}

{% include "mytable.html" with items=<your_items> %}

try this...

answered Feb 26 '18 at 06:40

Shihabudheen K M

1,347
1
13
19

score 0 · Answer 2 · answered Feb 26 '18 at 13:08

You can make your table an html snippet template that you can include in other templates to make this kind of thing manageable. See the docs on include.

Suppose you have item_table.html.

<div class="container reusable-table">
    <h4 class="table_title">{{ table_title }}</h4>
    {% for item in items %}
        <div class="container row">
            <div class="container col">
                <h4>{{ item.date }}</h4>
            </div>
            <div class="container col">
                <h4>{{ item.time }}</h4>
            </div>
            <div class="container col">
                <h4>{{ item.title }}</h4>
            </div>
            <div class="container col">
                <h4>{{ item.description }}</h4>
            </div>
            <div class="container col">
                <h4>{{ item.price }}</h4>
            </div>
        </div>
    {% endfor %}
</div>

Suppose you have a view that provides a list of items to a template like

# ...
return render('some_template.html', context=dict(some_items=something))

In your some_template.html you can include item_table.html and pass it appropriate values. For example, the list of items some_items can become the items variable in the included template.

{% include "item_table.html" with table_title="My Title" items=some_items %}

How can I customize and use the same html table multiple times?

Table Title

{{ table_title }}

2 Answers2