Demonstrates structured data layout with flexible column distribution.

Data is often multidimensional. You need to show relationships between fields (Name, Age, ID). Aligning columns manually in a monospaced environment is painful and error-prone.

This demo showcases the Table widget’s flex modes. It renders multiple tables demonstrating how data is distributed across the available space using :legacy, :space_between, and :space_around settings.

Use it to understand how to build perfectly aligned grids for database records, logs, or file lists.

Example

Run the demo from the terminal:

ruby examples/widget_table_flex/app.rb

Source Code

# frozen_string_literal: true

# SPDX-FileCopyrightText: 2025 Kerrick Long <me@kerricklong.com>
# SPDX-License-Identifier: AGPL-3.0-or-later

$LOAD_PATH.unshift File.expand_path("../../lib", __dir__)
require "ratatui_ruby"

# Demonstrates structured data layout with flexible column distribution.
#
# Data is often multidimensional. You need to show relationships between fields (Name, Age, ID). Aligning columns manually in a monospaced environment is painful and error-prone.
#
# This demo showcases the <tt>Table</tt> widget's flex modes. It renders multiple tables demonstrating how data is distributed across the available space using <tt>:legacy</tt>, <tt>:space_between</tt>, and <tt>:space_around</tt> settings.
#
# Use it to understand how to build perfectly aligned grids for database records, logs, or file lists.
#
# === Example
#
# Run the demo from the terminal:
#
#   ruby examples/widget_table_flex/app.rb
#
# rdoc-image:/doc/images/widget_table_flex.png
class WidgetTableFlex
  def run
    RatatuiRuby.run do |tui|
      loop do
        render(tui)
        break if handle_input(tui) == :quit
      end
    end
  end

  def render(tui)
    tui.draw do |frame|
      chunks = tui.layout_split(
        frame.area,
        direction: :vertical,
        constraints: [
          tui.constraint_length(3),
          tui.constraint_fill(1),
          tui.constraint_fill(1),
          tui.constraint_fill(1),
        ]
      )

      frame.render_widget(
        tui.paragraph(
          text: "Table Flex Layout (press 'q' to quit)",
          block: tui.block(title: "Header", borders: [:all])
        ),
        chunks[0]
      )

      frame.render_widget(
        tui.table(
          header: ["Legacy (Default)", "Table"],
          rows: [["Item 1", "Item 2"], ["Item 3", "Item 4"]],
          widths: [tui.constraint_length(20), tui.constraint_length(20)],
          block: tui.block(title: "Flex: :legacy (Default)", borders: [:all])
        ),
        chunks[1]
      )

      frame.render_widget(
        tui.table(
          header: ["Space", "Between"],
          rows: [["A", "B"], ["C", "D"]],
          widths: [tui.constraint_length(20), tui.constraint_length(20)],
          block: tui.block(title: "Flex: :space_between", borders: [:all]),
          flex: :space_between
        ),
        chunks[2]
      )

      frame.render_widget(
        tui.table(
          header: ["Space", "Around"],
          rows: [["E", "F"], ["G", "H"]],
          widths: [tui.constraint_length(20), tui.constraint_length(20)],
          block: tui.block(title: "Flex: :space_around", borders: [:all]),
          flex: :space_around
        ),
        chunks[3]
      )
    end
  end

  def handle_input(tui)
    event = tui.poll_event
    :quit if event == "q" || event == :ctrl_c
  end
end

WidgetTableFlex.new.run if __FILE__ == $0