How to set style of one cell in an lv_table

How-to
1

LVGL version 9.2.

I have searched a lot about this subject but cannot find a working example.
The use case is a table which enables the user to change settings.
The table consists of rows which have a column holding the setting name and the next column holding the setting value.

My board has a small hardware keyboard with up down left right and ok buttons.
When the user for example presses the down button the current row or current setting value’s “selected” style (for example blue) is removed and the style of the next row or settings value is added.
Pressing the OK button the cell value is opened in a dialog, etc.

How can I apply a style to a particular cell in my table?
Like lv_obj_add_style(table, row, col, &cell_style);.

2

Hello Raymond

You will need to use a custom draw event to color (or otherwise style) a certain cell. See my post here Custom cell-draw in lv_table V9 - #2 by Tinus (still works on 9.2) and one the examples in the documentation: Table (lv_table) — LVGL documentation with the blue cells on top. You can assign a custom cell control to a cell and check whether or not that cell has the control flag set to “select” specific cells to color.

It’s a bit complicated but I hope this helps.

3

Hello Tinus,

Thank you for your reply.
You are right that is quite complicated and I really cannot understand why there is no easy to use lv_obj_add_style(table, row, col, &cell_style); function.

Best regards,
Raymond

4

Hello,

Styles cannot be set per cell because the table is all drawn on the fly, which is why it is so memory efficient compared to drawing a bunch of rectangles with labels in them. See the documentation
https://docs.lvgl.io/master/details/widgets/table.html#overview

All it does is store strings and dynamically draw these into the columns. This is also why column height cannot be set but column width can. I thought I had an example of styling only certain cells but I cannot find it right now.

5

Hello Tinus,

Do I understand you correctly that the post you mention cannot style one specific cell? I need that otherwise I cannot get my use case to work.

Best regards,
Raymond

6

Hello Raymond,

You can but it’s complicated and you cannot really define a style for every property easily. It is possible if you make your own struct to define which parameters are set with your own “style”.

Here is an example for setting the background of a cell with a custom cell control:
I have not tested it so it may not work completely but it gives you an idea.

#define CELL_STYLE_BLACK    LV_TABLE_CELL_CTRL_CUSTOM_1

static void ev_TableDraw_cb(lv_event_t* event)
{
   lv_obj_t* table = lv_event_get_target(event);
   if (table == NULL) { return; }

   lv_draw_task_t * draw_task = lv_event_get_draw_task(event);
   lv_draw_dsc_base_t * base_dsc = draw_task->draw_dsc;

   // Drawn part is not a cell, exit function
   if (base_dsc->part != LV_PART_ITEMS)
   {
      return;
   }
   
   uint32_t row = base_dsc->id1;
   uint32_t col = base_dsc->id2;

   // Draw task is of type fill, used to draw the background of the cell
   if (draw_task->type == LV_DRAW_TASK_TYPE_FILL)
   {
      lv_draw_fill_dsc_t* fill_dsc = lv_draw_task_get_fill_dsc(draw_task);
      if (fill_dsc == NULL)
      {
         return;
      }
    
      if(lv_table_has_cell_ctrl(table, row, col, CELL_STYLE_BLACK))
      {
            fill_dsc->color = lv_color_black();         
      }
   }
}

void main(void)
{
   lv_obj_t* table = lv_table_create(screen);
   
   // Set size, style whatever
   
    lv_obj_add_event_cb(table, ev_TableDraw_cb, LV_EVENT_DRAW_TASK_ADDED, NULL);
    lv_obj_add_flag(table, LV_OBJ_FLAG_SEND_DRAW_TASK_EVENTS);
    
    lv_table_add_cell_ctrl(table, 0, 0, CELL_STYLE_BLACK);
}