Skip to main content
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

  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;
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;
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: 
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.

​
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

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;
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);
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.

Build docs developers (and LLMs) love

Get started for freeTalk to us