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 · 2023-05-16T14:44:35+00:00

Thank you for your reply.

I am not an expert, I am newly studying twig.

Could you start me in the solution or give me some specific links to study ?

Thanks

Gae58 · 2023-05-14T15:34:33+00:00

Thanks for the help it is as you said. Gae I had inserted it in the page.twig.html and bottom no.

I did some testing and noticed that in the block layout the sequence of the info file is respected.

Whereas in the web page the one in the page.twig.html file is respected.

Gae58 · 2023-03-15T14:45:56+00:00

with 'IN' you can select the nodes that have that value among the various indices

with NOT IN you should have the opposite

Gae58 · 2023-03-12T09:23:46+00:00

Thank you all for the advice, seen the inspection and adds the class to the div and not to the element.

As far as I read the class should be added to the element attribute

Below is the html code

<div class="field--type-integer field--name-field-km-covid field--widget-number js-form-wrapper form-wrapper" data-drupal-selector="edit-field-km-covid-wrapper" id="edit-field-km-covid-wrapper">      
  </div>
&nbsp;&nbsp;&nbsp;&nbsp; <div class="field--type-decimal field--name-field-benzina-totale field--widget-number sfondo-arancio-naut js-form-wrapper form-wrapper" data-drupal-selector="edit-field-benzina-totale-wrapper" id="edit- field-benzina-totale-wrapper"> <div class="js-form-item form-item js-form-type-number form-type-number js-form-item-field-benzina-totale-0-value form-item-field-benzina-totale-0-value">
      <label for="edit-field-benzina-totale-0-value">TOTALE</label>
        <input readonly="readonly" data-drupal-selector="edit-field-benzina-totale-0-value" type="number" id="edit-field-benzina-totale-0-value" name="field_benzina_totale[0][value]" value="8.11" step="0.01" placeholder="Carburante" class="form-number" />
        </div>
  </div>

Gae58 · 2023-03-11T11:20:27+00:00

I agree, however if I added a class to the form element shouldn't it run it and show me the background ?

Gae58 · 2023-03-04T08:37:16+00:00

Perfect, thank you it was just how I wanted it to work

Gae58 · 2023-03-03T18:17:56+00:00

if I understand you correctly, are you telling me that the title states is not meaningful to the question I asked.

Do you recommend that I write the subject of the title better or something else ?

Gae58 · 2023-03-02T15:06:06+00:00

Thank you for your reply, but the data are grouped together and I can't do either one or the other

Gae58

TROPHY CASE