How to Grid with different column widths?

[adsick]

I'm writing an app which has a lot to do with tables, but I'm new to Rust and Egui so it's unclear how to do nice looking tables here.

Now I have something like this:

fn display_table_grid(t: &Table, ui: &mut egui::Ui) {

    egui::Grid::new("Grid")
        .min_col_width(180.0)
        .striped(true)
        .show(ui, |ui| {
            for colname in &t.colnames {
                
                // if colname == &"surname" {
                    
                //     ui.set_width(5.0);
                // } 
                ui.label(format!("{}", colname));
            }
            ui.end_row();

            ui.end_row();
            for row in &t.rowstrings {
                for entry in row {
                    //ui.set_width_range(100.0..=500.0);
                    ui.selectable_label(false, format!("{}", entry));
                }
                ui.end_row();
            }
        });
}

I need every row to look like a single line by making narrow columns narrower and wide wider, but it starts to wrap contents of selectable labels where there is some amount of text and the final table may look like a mess...

[adsick]

see how redundant 'id' column gets when I use .min_col_width(180.0)?

and here what it looks like without .min_col_width(180.0)

(the app window is fullscreen, but Grid does not take all the horizontal space available and wraps text which looks kinda uneven and ugly)

[emilk]

Nice screenshots! Time to put on some Pink Floyd.

I've improved the text wrapping logic for egui 0.9.0 (probably to be released tomorrow).
I've also added a Grid::max_col_width so you can control when to wrap text in grids. If not called the text will not wrap.

PS: Roger Waters was the vocalist on lots of songs :)

[adsick]

Ok, as I know Grid is relatively new feature now.
as a temporary fix I did this in my code:

fn display_table_grid(t: &mut Table, ui: &mut egui::Ui) {
    egui::Grid::new("Grid").striped(true).show(ui, |ui| {
        for colname in &t.colnames {
            if ui.selectable_label(false, format!("{}", colname)).clicked { //logic for sorting
                if t.order_by != Some(colname.clone()) {
                    t.order_by = Some(colname.clone())
                } else {
                    t.order_dir = !t.order_dir
                }
                t.old = true;
            }
        }
        ui.end_row();
        //gap here
        ui.end_row();
        for row in &t.rowstrings {
            for entry in row {
                egui::Label::new(entry).multiline(false).ui(ui); //fixed wrong wrapping LOOK AT ME
            }
            ui.end_row();
        }
    });
}

and it looks like this:

basically does the job, but does not use all the space available.
also seems like that won't work with selectable labels.

[emilk]

.multiline(false)

The good news is this call won't be needed in egui 0.9.0 (widgets in grids will have text wrapping off by default). It will also work with SelectableLabels.