Getting Started with TMS FNC Table View

TTMSFNCTableView is a mobile-style scrollable list with built-in support for HTML formatted items, category sections, swipe actions, edit mode, filtering, and pull-to-refresh.

Prerequisites

Delphi with TMS FNC UI Pack installed.
A VCL, FMX, or WEB application.

Steps

1. Drop the component

Drop a TTMSFNCTableView from the TMS FNC UI Pack palette page onto a form. It ships pre-populated with sample items — remove them to start fresh.

2. Add items

2. Add itemsPascalC++

TMSFNCTableView1.Items.Clear;
TMSFNCTableView1.AddItem('Alice Johnson');
TMSFNCTableView1.AddItem('Bob Smith');
TMSFNCTableView1.AddItem('Carol Lee');

TMSFNCTableView1->Items->Clear();
TMSFNCTableView1->AddItem("Alice Johnson");
TMSFNCTableView1->AddItem("Bob Smith");
TMSFNCTableView1->AddItem("Carol Lee");

3. Enable categories (optional)

3. Enable categories (optional)PascalC++

TMSFNCTableView1.CategoryType := tvctAlphaBetic;
TMSFNCTableView1.Sort;

TMSFNCTableView1->CategoryType = tvctAlphaBetic;
TMSFNCTableView1->Sort();

4. React to selection

4. React to selectionPascalC++

procedure TForm1.TMSFNCTableView1ItemSelected(
  Sender: TObject; AItem: TTMSFNCTableViewItem);
begin
  ShowMessage(AItem.Text);
end;

void __fastcall TForm1::TMSFNCTableView1ItemSelected(
  TObject *Sender, TTMSFNCTableViewItem *AItem)
{
  ShowMessage(AItem->Text);
}

5. Enable swipe actions (optional)

5. Enable swipe actions (optional)PascalC++

var
  mo: TTMSFNCTableViewMoreOption;
begin
  mo := TMSFNCTableView1.MoreOptions.Add;
  mo.Text := 'Delete';
  mo.Color := gcRed;
  mo.FontColor := gcWhite;
end;

TTMSFNCTableViewMoreOption *mo = TMSFNCTableView1->MoreOptions->Add();
mo->Text = "Delete";
mo->Color = gcRed;
mo->FontColor = gcWhite;