Text alignment inside table cells

[TheMiles]

Hi,

I'm trying to build a table with some text being right aligned in the table cells.

So far I haven't found a flag to set a column to "right aligned"

The only solution I found so far is described on Stackoverflow. But using this solution in a table does not work.

This is an example:

auto drawCell = [](float v){
    constexpr size_t valueSize = 128;
    char value[valueSize];
    snprintf(value, valueSize, "%.1f", v);

    const auto rightEdge = ImGui::GetCursorPosX() + ImGui::GetColumnWidth();
    const auto textWidth = ImGui::CalcTextSize(value).x + 2 * ImGui::GetStyle().ItemSpacing.x;
    const auto posX = (rightEdge - textWidth - ImGui::GetScrollX());
    ImGui::SetCursorPosX(posX);

    ImGui::TableNextColumn();
    ImGui::Text("%s", value);
};

ImGui::BeginTable("Test",3, ImGuiTableFlags_SizingFixedFit);

ImGui::TableNextColumn();
ImGui::Text("Foo");

drawCell(0.f);
drawCell(23.3f);

ImGui::TableNextColumn();
ImGui::Text("Bar");

drawCell(1234.f);
drawCell(0.1f);

ImGui::EndTable();

But this still renders left aligned:

Are there any plans to make text alignment available in tables?

Cheers,

Miles

[sakiodre]

The problem is that you called TableNextColumn() right after SetCursorPosX(), making it has no effect, call TableNextColumn() at the beginning of drawCell() or before it should work.

[TheMiles]

Thanks for the reply,

I moved the TableNextColumn() before SetCursorPosX(), but it didn't help. The result was clearly different but completely messed up:

I started looking into the values I get in the different scenarios, adding cout with some of the values:

std::cout << "[where  ] ColumnWidth " << ImGui::GetColumnWidth() << " CursorPosX " << ImGui::GetCursorPosX() << " posX " <<  posX << " textWidth " << textWidth << std::endl;

TableNextColum After SetCursorPosX

My initial setup:

calculation of posX
SetCursorPosX(posX)
TableNextColumn()
Text()

The four drawCell calls yielded:

// drawCell(0.f);
[Before everything  ] ColumnWidth 20 CursorPosX 8
[After SetCursorPosX] ColumnWidth 33 CursorPosX -5 posX -5 textWidth 33
[After TableNextCol ] ColumnWidth 37 CursorPosX 36 posX -5 textWidth 33
[After Text         ] ColumnWidth 37 CursorPosX 36 posX -5 textWidth 33

// drawCell(23.3f);
[Before everything  ] ColumnWidth 37 CursorPosX 36
[After SetCursorPosX] ColumnWidth 40 CursorPosX 33 posX 33 textWidth 40
[After TableNextCol ] ColumnWidth 24 CursorPosX 81 posX 33 textWidth 40
[After Text         ] ColumnWidth 24 CursorPosX 81 posX 33 textWidth 40

// drawCell(1234.f);
[Before everything  ] ColumnWidth 20 CursorPosX 8
[After SetCursorPosX] ColumnWidth 53 CursorPosX -25 posX -25 textWidth 53
[After TableNextCol ] ColumnWidth 37 CursorPosX 36 posX -25 textWidth 53
[After Text         ] ColumnWidth 37 CursorPosX 36 posX -25 textWidth 53

// drawCell(0.1f);
[Before everything  ] ColumnWidth 37 CursorPosX 36
[After SetCursorPosX] ColumnWidth 33 CursorPosX 40 posX 40 textWidth 33
[After TableNextCol ] ColumnWidth 24 CursorPosX 81 posX 40 textWidth 33
[After Text         ] ColumnWidth 24 CursorPosX 81 posX 40 textWidth 33

TableNextColum before SetCursorX

Move TableNextColum before SetCursorX but after the calculation of posX

calculation of posX
TableNextColumn()
SetCursorPosX(posX)
Text()

// drawCell(0.f);
[Before everything  ] ColumnWidth 20 CursorPosX 8
[After TableNextCol ] ColumnWidth 4 CursorPosX 36 posX -5 textWidth 33
[After SetCursorPosX] ColumnWidth 45 CursorPosX -5 posX -5 textWidth 33
[After Text         ] ColumnWidth 4 CursorPosX 36 posX -5 textWidth 33

// drawCell(23.3f);
[Before everything  ] ColumnWidth 4 CursorPosX 36
[After TableNextCol ] ColumnWidth 4 CursorPosX 48 posX 0 textWidth 40
[After SetCursorPosX] ColumnWidth 52 CursorPosX 0 posX 0 textWidth 40
[After Text         ] ColumnWidth 4 CursorPosX 48 posX 0 textWidth 40

// drawCell(1234.f);
[Before everything  ] ColumnWidth 20 CursorPosX 8
[After TableNextCol ] ColumnWidth 4 CursorPosX 36 posX -25 textWidth 53
[After SetCursorPosX] ColumnWidth 65 CursorPosX -25 posX -25 textWidth 53
[After Text         ] ColumnWidth 4 CursorPosX 36 posX -25 textWidth 53

// drawCell(0.1f);
[Before everything  ] ColumnWidth 4 CursorPosX 36
[After TableNextCol ] ColumnWidth 4 CursorPosX 48 posX 7 textWidth 33
[After SetCursorPosX] ColumnWidth 45 CursorPosX 7 posX 7 textWidth 33
[After Text         ] ColumnWidth 4 CursorPosX 48 posX 7 textWidth 33

TableNextColumn at beginning

TableNextColumn()
calculation of posX
SetCursorPosX(posX)
Text()

// drawCell(0.f);
[Before everything  ] ColumnWidth 20 CursorPosX 8
[After TableNextCol ] ColumnWidth 4 CursorPosX 36 posX 7 textWidth 33
[After SetCursorPosX] ColumnWidth 33 CursorPosX 7 posX 7 textWidth 33
[After Text         ] ColumnWidth 4 CursorPosX 36 posX 7 textWidth 33

// drawCell(23.3f);
[Before everything  ] ColumnWidth 4 CursorPosX 36
[After TableNextCol ] ColumnWidth 4 CursorPosX 48 posX 12 textWidth 40
[After SetCursorPosX] ColumnWidth 40 CursorPosX 12 posX 12 textWidth 40
[After Text         ] ColumnWidth 4 CursorPosX 48 posX 12 textWidth 40

// drawCell(1234.f);
[Before everything  ] ColumnWidth 20 CursorPosX 8
[After TableNextCol ] ColumnWidth 4 CursorPosX 36 posX -13 textWidth 53
[After SetCursorPosX] ColumnWidth 53 CursorPosX -13 posX -13 textWidth 53
[After Text         ] ColumnWidth 4 CursorPosX 36 posX -13 textWidth 53

// drawCell(0.1f);
[Before everything  ] ColumnWidth 4 CursorPosX 36
[After TableNextCol ] ColumnWidth 4 CursorPosX 48 posX 19 textWidth 33
[After SetCursorPosX] ColumnWidth 33 CursorPosX 19 posX 19 textWidth 33
[After Text         ] ColumnWidth 4 CursorPosX 48 posX 19 textWidth 33

It seems that the calculation of the column width is getting out of sync when I do SetCursorPosX. Right after SetCursorPosX seems to use the TextWidth value?

[TheMiles]

BTW using v0.16

[tpecholt]

instead of Text you can use Selectable. It has SelectableTextAlign style which can be used for right alignment

[lailoken]

I've been trying to do the same thing, and I've had decent success in getting it to work (but not perfect), there are these points to consider:

• Your column headers may need to align as well, and if you write your own table headers, then you also need to implement column reordering, sorting etc. etc. This is a big pain, but possible if you only need some features.
• Table headers use ellipsis; you will need to implement this if you need it as well... but need to be careful not to break things like 'size columns to fit' etc. (something I needed to watch out when I added this to all my cells.)

The ideal would be for ImGui to support this.