mythitorium / egui-grid

Create dynamic grid-based layouts for egui

egui_grid

Create dynamic grid layouts for egui.

Grids are flexible, easy to create, with behavior similar to egui_extra's strip creation. They're compact and allow for more complex layouts using less indentation, with functionalities like nesting grids and aligning cells within a row.

Installing

Add this to your Cargo.toml:

[dependencies]
egui_grid = "0.5.2"

Example

// Quick example, by no means does it fully demo
// how flexible building grids can be.
use egui_grid::GridBuilder;
use egui_extras::Size;

GridBuilder::new()
    // Allocate a new row
    .new_row(Size::exact(200.0))
    // Give this row a couple cells
    .cell(Size::exact(85.0))
    .cell(Size::remainder())
    // Allocate another row
    .new_row(Size::remainder())
    // Batch method, allocate multiple cells at once
    .cells(Size::remainder(), 3)
    .show(ui, |mut grid| {
        // Cells are represented as they were allocated
        grid.cell(|ui| {
            ui.label("Top row, left cell");
        });
        grid.cell(|ui| {
            ui.label("Top row, right cell");
        });
        grid.cell(|ui| {
            ui.label("Bottom row, left cell");
        });
        grid.empty();
        grid.cell(|ui| {
            ui.label("Bottom row, right cell");
        });
    });

Grid Nesting Example

// You can nest grids, allowing for complex layouts without much indentation
use egui_grid::GridBuilder;
use egui_extras::Size;

// The grid which will be nested
let nested_grid = GridBuilder::new()
    // 2 rows, with 1 cell each
    .new_row(Size::remainder()).cell(Size::remainder())
    .new_row(Size::remainder()).cell(Size::remainder());


// The main grid, of which one cell will receive the nested grid
GridBuilder::new()
    // One row with 3 cells
    .new_row(Size::remainder())
    .cell(Size::remainder())
    .cell(Size::remainder()) .nest(nested_grid) // Nesting the grid in the middle cell
    .cell(Size::remainder())

    .show(ui, |mut grid| {
        // The nested grid replaces the cell it was nested in; 
        // And the cells within that nested grid replace it in the order, too.
        //
        // So despite there being 5 cells allocated total 
        // (2 from the nested grid and 3 from the main), only 4 exist.
        grid.cell(|ui| {
            ui.label("Left cell");
        });
        grid.cell(|ui| {
            ui.label("Nested grid, top cell");
        });
        grid.cell(|ui| {
            ui.label("Nested grid, bottom cell");
        });
        grid.cell(|ui| {
            ui.label("Right cell");
        });
    });

Usage

Check the docs for details and more info on usage.

Issues

Currently this is feature complete. Bug fixes, optimizations, and staying up to date with egui releases are the only ways this crate will be expanding for the foreseeable future.

While you are free to open an issue, contacting me (@mythit) on the egui discord server might be more worth your time.