Quick Start

Get started with TeeGrid in minutes

Get your first TeeGrid up and running with this quick tutorial. We’ll create a simple grid, bind it to data, and customize it.

This tutorial works with both VCL and FireMonkey frameworks. Code examples show both variants where they differ.

Prerequisites

Before you begin, make sure you have:

• RAD Studio, Delphi, C++ Builder, or Lazarus installed
• TeeGrid packages installed (see Installation)
• A new VCL or FireMonkey application

Create Your First Grid

1. Add TeeGrid to your form

   VCL

   1. Open the Tool Palette in RAD Studio or Delphi
   2. Find TTeeGrid in the TeeGrid category
   3. Drop it onto your form
   4. Resize it to fill the form or use Align := alClient

   Add the required units to your uses clause:

   uses
     VCLTee.Grid, Tee.GridData.Rtti;
   

   FireMonkey

   1. Open the Tool Palette in RAD Studio or Delphi
   2. Find TTeeGrid in the TeeGrid category
   3. Drop it onto your form
   4. Resize it to fill the form or use Align := TAlignLayout.Client

   Add the required units to your uses clause:

   uses
     FMXTee.Grid, Tee.GridData.Rtti;
   
2. Define your data structure

   Create a simple record or class to hold your data:

   type
     TPerson = record
       Name: string;
       Age: Integer;
       Email: string;
       City: string;
     end;
   

   You can also use classes instead of records. TeeGrid works with both.

3. Create and populate data

   Create an array or list and fill it with data:

   var
     People: TArray<TPerson>;
     I: Integer;
   begin
     // Create array with sample data
     SetLength(People, 10);
     
     for I := 0 to 9 do
     begin
       People[I].Name := 'Person ' + IntToStr(I + 1);
       People[I].Age := 20 + Random(50);
       People[I].Email := 'person' + IntToStr(I + 1) + '@example.com';
       People[I].City := 'City ' + IntToStr(Random(5) + 1);
     end;
   

   Using TList instead of TArray

   You can also use TList<TPerson>:

   uses
     System.Generics.Collections;
   
   var
     People: TList<TPerson>;
     Person: TPerson;
     I: Integer;
   begin
     People := TList<TPerson>.Create;
     try
       for I := 0 to 9 do
       begin
         Person.Name := 'Person ' + IntToStr(I + 1);
         Person.Age := 20 + Random(50);
         Person.Email := 'person' + IntToStr(I + 1) + '@example.com';
         Person.City := 'City ' + IntToStr(Random(5) + 1);
         People.Add(Person);
       end;
       
       TeeGrid1.Data := TVirtualListData<TPerson>.Create(People);
     finally
       People.Free;
     end;
   end;
   
4. Bind data to the grid

   Connect your data to TeeGrid using a virtual data adapter:

   // For arrays
   TeeGrid1.Data := TVirtualArrayData<TPerson>.Create(People);
   

   That’s it! Run your application and you’ll see a grid with 4 columns (Name, Age, Email, City) and 10 rows.

   TeeGrid automatically creates columns from your record’s fields using RTTI (Runtime Type Information). No manual column setup required!

Customize Your Grid

Now let’s add some common customizations:

Enable Cell Editing

// Allow users to edit cells
TeeGrid1.ReadOnly := False;

// Auto-start editing on single click
TeeGrid1.Editing.AutoEdit := True;

// Or require double-click to edit (default)
TeeGrid1.Editing.DoubleClick := True;

Add Row Alternating Colors

// Enable alternating row colors
TeeGrid1.Rows.Alternate.Visible := True;
TeeGrid1.Rows.Alternate.Brush.Color := $00F0F0F0; // Light gray

Customize Column Appearance

// Right-align the Age column
TeeGrid1.Columns[1].TextAlignment := TColumnTextAlign.Custom;
TeeGrid1.Columns[1].TextAlign.Horizontal := THorizontalAlign.Right;

// Set custom column width
TeeGrid1.Columns[0].Width.Value := 150;

// Hide the Email column
TeeGrid1.Columns[2].Visible := False;

Enable Sorting

// Make headers clickable for sorting
TeeGrid1.Header.Sortable := True;

Complete Example

Here’s a complete working example that creates a grid with sample data:

VCL

unit Unit1;

interface

uses
  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants,
  System.Classes, Vcl.Graphics, Vcl.Controls, Vcl.Forms, Vcl.Dialogs,
  VCLTee.Grid, Tee.GridData.Rtti;

type
  TPerson = record
    Name: string;
    Age: Integer;
    Email: string;
    City: string;
  end;

  TForm1 = class(TForm)
    TeeGrid1: TTeeGrid;
    procedure FormCreate(Sender: TObject);
  private
    People: TArray<TPerson>;
  end;

var
  Form1: TForm1;

implementation

{$R *.dfm}

procedure TForm1.FormCreate(Sender: TObject);
var
  I: Integer;
begin
  // Create sample data
  SetLength(People, 100);
  for I := 0 to 99 do
  begin
    People[I].Name := 'Person ' + IntToStr(I + 1);
    People[I].Age := 20 + Random(50);
    People[I].Email := 'person' + IntToStr(I + 1) + '@example.com';
    People[I].City := 'City ' + IntToStr(Random(5) + 1);
  end;

  // Bind to grid
  TeeGrid1.Data := TVirtualArrayData<TPerson>.Create(People);

  // Customize
  TeeGrid1.ReadOnly := False;
  TeeGrid1.Rows.Alternate.Visible := True;
  TeeGrid1.Header.Sortable := True;
end;

end.

FireMonkey

unit Unit1;

interface

uses
  System.SysUtils, System.Types, System.UITypes, System.Classes,
  System.Variants, FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics,
  FMX.Dialogs, FMXTee.Grid, Tee.GridData.Rtti;

type
  TPerson = record
    Name: string;
    Age: Integer;
    Email: string;
    City: string;
  end;

  TForm1 = class(TForm)
    TeeGrid1: TTeeGrid;
    procedure FormCreate(Sender: TObject);
  private
    People: TArray<TPerson>;
  end;

var
  Form1: TForm1;

implementation

{$R *.fmx}

procedure TForm1.FormCreate(Sender: TObject);
var
  I: Integer;
begin
  // Create sample data
  SetLength(People, 100);
  for I := 0 to 99 do
  begin
    People[I].Name := 'Person ' + IntToStr(I + 1);
    People[I].Age := 20 + Random(50);
    People[I].Email := 'person' + IntToStr(I + 1) + '@example.com';
    People[I].City := 'City ' + IntToStr(Random(5) + 1);
  end;

  // Bind to grid
  TeeGrid1.Data := TVirtualArrayData<TPerson>.Create(People);

  // Customize
  TeeGrid1.ReadOnly := False;
  TeeGrid1.Rows.Alternate.Visible := True;
  TeeGrid1.Header.Sortable := True;
end;

end.

Next Steps

Now that you have a working grid, explore more features:

Data Binding

Learn about different data sources (DataSets, arrays, lists, custom)

Cell Editing

Add custom editors, validation, and edit events

Themes

Customize the visual appearance with themes

Examples

Browse complete working examples

Common Issues

Columns are not showing

Make sure you’re using a data type (record or class) with public fields or published properties. TeeGrid uses RTTI to discover columns automatically.

// Good - public fields
type
  TPerson = record
    Name: string;    // Public by default in records
    Age: Integer;
  end;

// Good - published properties
type
  TPerson = class
  published
    property Name: string read FName write FName;
    property Age: Integer read FAge write FAge;
  end;

Grid is empty

Check that:

1. You assigned data to TeeGrid1.Data
2. Your data array/list contains items
3. You called Create() on the virtual data adapter

// Make sure the data source has items
if Length(People) > 0 then
  TeeGrid1.Data := TVirtualArrayData<TPerson>.Create(People);

Cannot edit cells

To enable editing:

1. Set TeeGrid1.ReadOnly := False
2. Make sure individual columns aren’t read-only
3. The data type must support writing (not const)

TeeGrid1.ReadOnly := False;
TeeGrid1.Editing.AutoEdit := True;  // Optional: edit on single click

What You’ve Learned

• How to add TTeeGrid to a form
• How to create and bind data using arrays
• How to enable basic features like editing and sorting
• How to customize appearance with alternating row colors

Ready to dive deeper? Check out the Core Concepts to understand TeeGrid’s architecture.