How to format text in a table?

How-to
1

Description

I’m creating a table in my application and I want to format the text in the cells

What LVGL version are you using?

V 9.1

I want to avoid the line break as shown in this screenshot:

image

How can I change line break behavior to avoid line break in the middle of a word? Or expand the cell width to fit its content?

2

If you have a look at the docs here you will find the answer:
https://docs.lvgl.io/9.1/widgets/table.html#width-and-height

3

Hello,

Thanks but the documentation doesn’t show how to avoid line breaks (if possible).

lv_table_set_column_width(table, col_id, width) will set the width for a specific column, so will I have to use this function every time I insert new data?

lv_label have long modes so I thought there would be a way to do something similar with cell internal text.

for example, if I try this:

lv_table_set_column_width(table, col, LV_SIZE_CONTENT);

the table will not be displayed (maybe because content size is 0)
image

4

Replace LV_SIZE_CONTENT with a constant, like 100.

However if you want to control text splitting you can do so in the lv_conf.h file:

/*=================
 *  TEXT SETTINGS
 *=================*/

/**
 * Select a character encoding for strings.
 * Your IDE or editor should have the same character encoding
 * - LV_TXT_ENC_UTF8
 * - LV_TXT_ENC_ASCII
 */
#define LV_TXT_ENC LV_TXT_ENC_UTF8

/*Can break (wrap) texts on these chars*/
#define LV_TXT_BREAK_CHARS " ,.;:-_)]}"

/*If a word is at least this long, will break wherever "prettiest"
 *To disable, set to a value <= 0*/
#define LV_TXT_LINE_BREAK_LONG_LEN 0

/*Minimum number of characters in a long word to put on a line before a break.
 *Depends on LV_TXT_LINE_BREAK_LONG_LEN.*/
#define LV_TXT_LINE_BREAK_LONG_PRE_MIN_LEN 3

/*Minimum number of characters in a long word to put on a line after a break.
 *Depends on LV_TXT_LINE_BREAK_LONG_LEN.*/
#define LV_TXT_LINE_BREAK_LONG_POST_MIN_LEN 3

Regards

5

Thanks for the answer, but I think I’ll have to do some workarounds to get the desired result.

I don’t want a fixed size in the table, so I must create a callback and recalculate the column size whenever new data is added.

I was hoping that controls that exist in lv_label would be available in lv_table. That’s why I opened this topic on the forum.

6

If anyone else is having difficulty with tables, I managed to solve it as follows:

I created a style with the desired settings and added it to lv_style_selector_t LV_PART_ITEMS.

lv_style_t my_table_style;

lv_style_init(&my_table_style);
lv_style_set_max_height(&my_table_style, 50);
lv_style_set_min_width(&my_table_style, 100);
lv_style_set_max_width(&my_table_style, 200);
lv_style_set_pad_all(&my_table_style, 5);
lv_style_set_text_align(&my_table_style, LV_TEXT_ALIGN_CENTER);

lv_obj_add_style(table, &my_table_style, LV_PART_ITEMS);

I also used the example code to decorate the table with different colors for the rows:

static void draw_event_cb(lv_event_t *e)
{
    lv_draw_task_t *draw_task = lv_event_get_draw_task(e);
    lv_draw_dsc_base_t *base_dsc = draw_task->draw_dsc;
    /*If the cells are drawn...*/
    if (base_dsc->part == LV_PART_ITEMS)
    {
        if (row == 0)
        {
            lv_draw_fill_dsc_t *fill_draw_dsc = lv_draw_task_get_fill_dsc(draw_task);
            if (fill_draw_dsc)
            {
                fill_draw_dsc->color = HIRO_PALETTE_BLUE;
                fill_draw_dsc->opa = LV_OPA_COVER;
            }
        }
    }

    ...
}

Result:

image