> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/Steema/TeeGrid-VCL-FMX-Samples/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

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

## Prerequisites

Before you begin, make sure you have:

* RAD Studio, Delphi, C++ Builder, or Lazarus installed
* TeeGrid packages installed (see [Installation](/installation))
* A new VCL or FireMonkey application

## Create Your First Grid

<Steps>
  <Step title="Add TeeGrid to your form">
    <Tabs>
      <Tab title="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:

        ```pascal theme={null}
        uses
          VCLTee.Grid, Tee.GridData.Rtti;
        ```
      </Tab>

      <Tab title="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:

        ```pascal theme={null}
        uses
          FMXTee.Grid, Tee.GridData.Rtti;
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Define your data structure">
    Create a simple record or class to hold your data:

    ```pascal theme={null}
    type
      TPerson = record
        Name: string;
        Age: Integer;
        Email: string;
        City: string;
      end;
    ```

    You can also use classes instead of records. TeeGrid works with both.
  </Step>

  <Step title="Create and populate data">
    Create an array or list and fill it with data:

    ```pascal theme={null}
    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;
    ```

    <Accordion title="Using TList instead of TArray">
      You can also use `TList<TPerson>`:

      ```pascal theme={null}
      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;
      ```
    </Accordion>
  </Step>

  <Step title="Bind data to the grid">
    Connect your data to TeeGrid using a virtual data adapter:

    ```pascal theme={null}
    // 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.

    <Note>
      TeeGrid automatically creates columns from your record's fields using RTTI (Runtime Type Information). No manual column setup required!
    </Note>
  </Step>
</Steps>

## Customize Your Grid

Now let's add some common customizations:

### Enable Cell Editing

```pascal theme={null}
// 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

```pascal theme={null}
// Enable alternating row colors
TeeGrid1.Rows.Alternate.Visible := True;
TeeGrid1.Rows.Alternate.Brush.Color := $00F0F0F0; // Light gray
```

### Customize Column Appearance

```pascal theme={null}
// 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

```pascal theme={null}
// Make headers clickable for sorting
TeeGrid1.Header.Sortable := True;
```

## Complete Example

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

<Tabs>
  <Tab title="VCL">
    ```pascal theme={null}
    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.
    ```
  </Tab>

  <Tab title="FireMonkey">
    ```pascal theme={null}
    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.
    ```
  </Tab>
</Tabs>

## Next Steps

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

<CardGroup cols={2}>
  <Card title="Data Binding" icon="database" href="/concepts/data-binding">
    Learn about different data sources (DataSets, arrays, lists, custom)
  </Card>

  <Card title="Cell Editing" icon="pen" href="/features/cell-editing">
    Add custom editors, validation, and edit events
  </Card>

  <Card title="Themes" icon="palette" href="/features/themes">
    Customize the visual appearance with themes
  </Card>

  <Card title="Examples" icon="code" href="/examples/basic-grid">
    Browse complete working examples
  </Card>
</CardGroup>

## Common Issues

<AccordionGroup>
  <Accordion title="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.

    ```pascal theme={null}
    // 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;
    ```
  </Accordion>

  <Accordion title="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

    ```pascal theme={null}
    // Make sure the data source has items
    if Length(People) > 0 then
      TeeGrid1.Data := TVirtualArrayData<TPerson>.Create(People);
    ```
  </Accordion>

  <Accordion title="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)

    ```pascal theme={null}
    TeeGrid1.ReadOnly := False;
    TeeGrid1.Editing.AutoEdit := True;  // Optional: edit on single click
    ```
  </Accordion>
</AccordionGroup>

## 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](/concepts/grid-architecture) to understand TeeGrid's architecture.