Table header color

[hendrix63]

In my app I have several tables, all working fine. There is however one thing I am struggling with and that is giving the table header a specific color. My current solution looks like this:

        TableBuilder::new(ui)
            .column(Column::auto().at_least(32.0).resizable(false))
            .column(Column::remainder().resizable(false))
            .header(20.0, |mut header| {
                header.col(|ui| {
                    ui.painter().rect_filled(
                        ui.available_rect_before_wrap(),
                        0.0,
                        Color32::LIGHT_BLUE,
                    );
                    ui.strong("ID");
                });
                header.col(|ui| {
                    ui.painter().rect_filled(
                        ui.available_rect_before_wrap(),
                        0.0,
                        Color32::LIGHT_BLUE,
                    );
                    ui.strong("Rule");
                });
            })

This however does color the column headers but leaves gaps where resizers are or if the header is not resizable.

How can i draw a solid background for the entire header?

[YgorSouza]

You can use the same trick that the table itself uses internally to paint the stripes and the selected row:

egui/crates/egui_extras/src/layout.rs

Lines 119 to 147 in ed02542

	let max_rect = self.cell_rect(&width, &height);
	// Make sure we don't have a gap in the stripe/frame/selection background:
	let item_spacing = self.ui.spacing().item_spacing;
	let gapless_rect = max_rect.expand2(0.5 * item_spacing);
	if flags.striped {
	self.ui.painter().rect_filled(
	gapless_rect,
	egui::Rounding::ZERO,
	self.ui.visuals().faint_bg_color,
	);
	}
	if flags.selected {
	self.ui.painter().rect_filled(
	gapless_rect,
	egui::Rounding::ZERO,
	self.ui.visuals().selection.bg_fill,
	);
	}
	if flags.hovered && !flags.selected && self.sense.interactive() {
	self.ui.painter().rect_filled(
	gapless_rect,
	egui::Rounding::ZERO,
	self.ui.visuals().widgets.hovered.bg_fill,
	);
	}

impl eframe::App for MyApp {
    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
        egui::CentralPanel::default().show(ctx, |ui| {
            let item_spacing = ui.spacing().item_spacing;
            let bg = Color32::LIGHT_BLUE;
            TableBuilder::new(ui)
                .column(Column::auto().resizable(true))
                .column(Column::remainder())
                .header(20.0, |mut header| {
                    let paint_bg = |ui: &mut egui::Ui| {
                        let gapless_rect = ui.max_rect().expand2(0.5 * item_spacing);
                        ui.painter().rect_filled(gapless_rect, 0.0, bg);
                    };
                    header.col(|ui| {
                        paint_bg(ui);
                        ui.heading("First column");
                    });
                    header.col(|ui| {
                        paint_bg(ui);
                        ui.heading("Second column");
                    });
                })
                .body(|mut body| {
                    body.row(30.0, |mut row| {
                        row.col(|ui| {
                            ui.label("Hello");
                        });
                        row.col(|ui| {
                            ui.button("world!");
                        });
                    });
                });
        });
    }
}

[hendrix63]

Thank you so much. That's exactly what I was looking for.

Note to myself: check egui source code first before posting a question.

[Avrahqedivra]

Thanks for the hint