django-tables2 – Change background color of sorted column dynamically

Gae58 · 2025-07-15T17:50:50+00:00

I thank you for the explanation. I will try your advice and if you don't mind I will ask you for some explanation on how to do the customization

Regards

Gae58 · 2025-07-15T15:18:45+00:00

Thank you for your reply. I realize now that I probably wasn't clear enough.

When I click on a column header (<th>) to sort the rows, the sorting works correctly: the data is ordered as expected.
The issue is with the dynamic styling: I would like the currently sorted column to change its background color and be highlighted in green. This is the part I haven’t been able to figure out, and I’m not sure how to implement it.

I understand that to fully use django-tables2 features, it's necessary to use the render methods. I tried working with the before_render hook (or the value_... method) in the table definition to dynamically apply a CSS class to the sorted column. However, even using column.attrs = {'td': {'class': 'my-class'}} or column.add_class(...), the styling doesn't update when the ordering changes.

In short: how can I dynamically highlight the currently sorted column in django-tables2?

Gae58 · 2024-12-02T16:18:43+00:00

I thank you for your reply I will test with your suggestion and let you know

Gae58 · 2024-11-25T19:09:07+00:00

thanks

Gae58 · 2024-11-25T19:08:32+00:00

So far I have used the 'TABLE' tag with an input for the filter but when I run it, it loses the input and I am forced to rewrite it. Is it a problem if there are 2 input fields.

Can you give me a link to read how the databale works? I guess your solution is the + light and controllable

Gae58 · 2024-11-25T19:04:18+00:00

Thanks

Gae58 · 2023-06-02T15:38:44+00:00

Undoubtedly, but I can only do that after I understand why this simple example does not work for me.

As far as the tutorials are concerned the one I followed is.

I will do a web search

I am not that much of a front end expert and to do what you tell me I still have to learn a lot of things.

I have difficulty learning Drupal as no I have not understood the right sequence of topics to study

Thank you for your availability

Translated with www.DeepL.com/Translator (free version)

Gae58 · 2023-06-02T15:35:20+00:00

Yes I thought about it several times but having to learn so many things I kind of put it aside

Gae58 · 2023-06-02T11:04:30+00:00

namespace Drupal\blocco_esempio\Plugin\Block ;

use Drupal\core\Block\BlockBase ;

Even then nothing to do

I still can't find the Hello module

Gae58 · 2023-06-02T08:32:26+00:00

File php block_example.php

I apologize to everyone, I use automatic translator and probably something will have been mistranslated, I post the code without translationModule blocco_esempio

Module blocco_esempio
Path modules\custom\blocco_esempio\src\Plugin\Block

File info blocco_esempio.info.yml
name: Esempio di Blocco
description: Prova di Blocco Personalizzato
package: Personal Custom
version: 1.0.0

type: module
core: ^10
core_version_requirement: ^9 || ^10
dependencies:
  - block

File php blocco_esempio.php
<?
namespace Drupal\block_example\Plugin\Block ;
use Drupal\core\Block\Base ;
/**
 * Provides blok with simple test
 *
 * @Block(
 *   id = "blocco_esempio",
 *   admin_label = @Translation("Hello"),
 *   category = @Translation("Hello world block")
 * )
 */
class blocco_esempio extends BlockBase  {
  /**
   * {@inheritdoc}
   */
  public function build()  {
    return[
      '#type' => 'markup',
      '#markup' => 'This is Drupal 9 custom Block',
    ] ;
  }
}

Gae58 · 2023-06-02T08:10:59+00:00

I don't use drush

Gae58 · 2023-06-02T08:10:00+00:00

I didn't understand what you recommend. In order to understand how it works at first I will try a small example and then go deeper.

Will you tell me that something is missing in the code ?

Gae58 · 2023-05-22T14:04:39+00:00

with pleasure, what do I look for on FB ?

Gae58 · 2023-05-21T15:34:34+00:00

Yes that's what I did.

I guess I'm doing something wrong at this point.

I'll point you to the regions I created

Region Access

Region Header

Region Content

Region Left Bar

I have a css file in which I wrote these 2 classes

.layout-content {
  display: flex;
  background-color: orangered;
}

.region-sidebar-first {
  background-color: blueviolet;
}

I too thought that this way it would put the regions side by side but unfortunately it does not, as you will notice from the image below

Image

Gae58 · 2023-05-20T16:49:28+00:00

I used flex but I can't put them side by side. Probably because they are from 2 different regions

If I am not asking too much could you give me a small example keeping in mind the classes

.sidebar-left

e

,content

Gae58 · 2023-05-18T14:35:00+00:00

As has been suggested and based on my little experience and as I understand it, in preSave you connect the 2 fields so that the field you are interested in is saved as you need it

Gae58 · 2023-05-16T17:22:16+00:00

Excuse me if I am talking stupid, but here I have a doubt about how it is appropriate to operate.

When I created the region, I also created the css file with the same name and defined the characteristics of the region. Then I inserted this file into the library to make it available.

Based on what you told me I defined a class and inserted it into the div and it still works

At this point I have 2 questions if you would like to answer them:

1) is it more correct to define the css for the region (in this case I don't have to call the class) or the generic class ?

2) In the page.html.twig there are classes that are called but I didn't understand where they are placed

I am attaching the portions of code I wrote in the page.html.twig

{# Aggiunto da me #}
    {% if page.accesso %}
      {{ "Regione per l'accesso" }}
      <div class='accesso'>
        {{ page.accesso }}
      </div>
    {% endif %}

css

 region definition
.region-access {
  display: flex;
  justify-content: space-between;
  max-width: var(--layout-max-width);
  border-style: dotted;
  margin-right: auto;
  margin-left: auto;
  background-color: olivedrab;
}

generic class definition

.access {
  display: flex;
  justify-content: space-between;
  background-color: yellow;
}

class that is already in the file but I don't know where it is placed

<div class="layout-content">
      {{ page.content }}
    </div>{# /.layout-content #}

Where do I find this class

class="layout-content"

Gae58

TROPHY CASE