xBa

Posted: **Sat Feb 21, 2026 5:22 am**

@ai I have a CUSTOMER.DBF file with fields NOMBRE, TELEFONO, EMAIL, SALDO. I want to display it in a professional-looking data grid with column headers, zebra striping, and the ability to click on a row. What is the best way to do this in WebX?

Posted: **Sat Feb 21, 2026 5:22 am**

Displaying DBF Data in a Professional Grid

The best approach in WebX is to use TXBrowse, which gives you exactly what you need: column headers, zebra striping (alternating row colors), row selection, and professional styling — all with minimal code.

Basic Example

Code: Select all

#include "WebX.ch"

FUNCTION Main()
   LOCAL oWnd, oBrw
   PUBLIC Designed_Resolution := {1366, 768, .T.}

   USE "CUSTOMER.DBF"

   DEFINE WINDOW oWnd TITLE "Customer Directory"
   
   @ 50, 50 XBROWSE oBrw TO oWnd ;
      SIZE 1200, 600 ;
      ALIAS "CUSTOMER" ;
      COLUMNS { "NOMBRE", "TELEFONO", "EMAIL", "SALDO" }

   ACTIVATE WINDOW oWnd CENTERED
RETURN NIL

Enhanced Version with Row Click Handling

Code: Select all

#include "WebX.ch"

FUNCTION Main()
   LOCAL oWnd, oBrw
   PUBLIC Designed_Resolution := {1366, 768, .T.}

   USE "CUSTOMER.DBF"

   DEFINE WINDOW oWnd TITLE "Customer Directory"
   
   @ 50, 50 XBROWSE oBrw TO oWnd ;
      SIZE 1200, 600 ;
      ALIAS "CUSTOMER" ;
      COLUMNS { "NOMBRE", "TELEFONO", "EMAIL", "SALDO" }

   // Handle row click
   oBrw:bLClicked := { || MsgInfo( "Selected: " + CUSTOMER->NOMBRE ) }

   // Column headers
   oBrw:aHeaders := { "Customer Name", "Phone", "Email", "Balance" }

   // Zebra striping (alternating row colors)
   oBrw:lStripes := .T.

   ACTIVATE WINDOW oWnd CENTERED
RETURN NIL

Key Features

Column Headers: Set via oBrw:aHeaders to customize display names
Zebra Striping: Enable with oBrw:lStripes := .T. for alternating row colors
Row Click: Assign a codeblock to oBrw:bLClicked to handle clicks
Sorting: Click column headers to sort (automatic)
Responsive: Automatically scales to any screen size via Designed_Resolution

Styling Tips

You can further customize appearance with:

oBrw:nHeaderHeight — Header row height
oBrw:nRowHeight — Data row height
oBrw:oFont — Font for data cells
oBrw:oHeaderFont — Font for headers
oBrw:nClrPane — Background color

TXBrowse compiles to clean HTML5/CSS3 with professional styling out of the box. No additional configuration needed.

---
Generated by WebX AI Assistant

xBa

Displaying data in a grid (TXBrowse / TBrowse)

Displaying data in a grid (TXBrowse / TBrowse)

Re: Displaying data in a grid (TXBrowse / TBrowse)