4D Blog

Home Product 4D View Pro: Display your Collections as Tables

4D View Pro: Display your Collections as Tables

July 14, 2022

Product

You know it already; 4D View Pro allows you to easily load and display data in spreadsheets.
4D v19 R6 brings exciting news. This blog post will show you the new table feature that enables you to do much more and benefit from additional properties like headers, table resize, summary row, column sorting, filters, and more. You’ll also discover how to quickly load data from data classes and collections. And don’t miss out on the demo, which provides a complete example and some visual charts as a bonus.

HDI: 4DVP Create Table

There are two ways to create a table:

  • Create an empty table and populate it cell by cell with the existing commands like VP SET VALUES or VP SET VALUE
  • Create a table automatically from a collection contained in the data context.

 

Say hello to VP CREATE TABLE

populate manually a table

First, you need to create a table with no source. Use the new VP CREATE TABLE command and pass it as a parameter the range where the table should appear:

VP CREATE TABLE(VP Cells("ViewProArea"; 1; 1; 3; 4); "EmptyTable")

It creates an empty table with default name columns:

Now we just have to fill in our table with the help of the VP SET VALUES command:

$data:=New collection
// Titles 
$data.push(New collection("First Name"; "Last Name"; "Score"))
// Data
$data.push(New collection("Andrea"; "Butterfield"; "70"))
$data.push(New collection("Faye"; "Back"; "100"))
$data.push(New collection("Shane"; "Frazier"; "50"))

VP SET VALUES(VP Cell("ViewProArea"; 1; 1); $data)

The table is now populated with the values present in the collection:

blank

You can now filter or sort the table easily:

blank

Populate a table from the data context

To display an entity selection as a table:

blank

you need to convert your entity selection into a collection and add it to your sheet data context, define the columns, and create your table.

First, you must create a data context containing a collection of the data you need to show. In the example below, we read data from a database and convert it into a collection, then we encapsulate it in an object:

$p:=ds.People.all().toCollection()

$data:=New object
$data.people:=$p

VP SET DATA CONTEXT("ViewProArea"; $data)

Now that the data context is created, we define which columns to show:

$parameter:=New object
$parameter.tableColumns:=New collection
$parameter.tableColumns.push(New object("name"; "First name"; "dataField"; "Firstname"))
$parameter.tableColumns.push(New object("name"; "Last name"; "dataField"; "Lastname"))
$parameter.tableColumns.push(New object("name"; "Email"; "dataField"; "email"))
$parameter.tableColumns.push(New object("name"; "Birthday"; "dataField"; "Birthday"; "formatter"; "dddd dd MMMM yyyy"))
$parameter.tableColumns.push(New object("name"; "Country"; "dataField"; "Country"))

All that remains is to use the VP CREATE TABLE command, indicating that we want to show the collection contained in the attribute people of the data context:

// Table creation
VP CREATE TABLE(VP Cells("ViewProArea"; 1; 1; $parameter.tableColumns.length; 1); "ContextTable"; "people"; $parameter)
// Automatic column sizing
VP COLUMN AUTOFIT(VP Column($area; 0; 4))

blank

Check out the HDI above to see these commands in action. Also, make sure to read the documentation for more details!

Discuss

Tags 4D View Pro, Data table, Spreadsheet, v19 R6, v20

Latest related posts

  • February 3, 2026

    4D Write Pro – Adding a margin automatically when bullets are set using standard actions

  • January 22, 2026

    Transform Static Documents into Actionable Knowledge with AIKit

  • January 22, 2026

    Deploy Fluent UI effortlessly in your 4D applications

Fabrice Mainguené
Fabrice Mainguené
• Product Owner •Fabrice Mainguené joined 4D Program team in November, 2016. As a Product Owner, he is in charge of writing the user stories then translating it to functional specifications. His role is also to make sure that the feature implementation delivered is meeting the customer need.After obtaining a Bachelor degree in Computer Science at CNAM, Fabrice joined a small software publishing company as a Windev developer. Then he worked for different companies in industry and trade areas as a Windev and web developer as well as technical advisor on new features.
  • Deutsch
  • Français
  • English
  • Português
  • Čeština
  • Español
  • Italiano
  • 日本語

Categories

Browse categories

  • AI
  • 4D View Pro
  • 4D Write Pro
  • Email, Microsoft 365, Gmail
  • Development Mode
  • 4D Language
  • ORDA
  • User Interface / GUI
  • 4D Qodly Pro
  • Server
  • Maintenance
  • Deployment
  • 4D Tutorials
  • Generic
  • 4D Summit sessions and other online videos

Tags

4D AIKit 4D for Android 4D for iOS 4D NetKit 4D Qodly Pro 4D View Pro 4D Write Pro 21 21 R2 Administration AI Artificial Intelligence Build application CI/CD Class Client/Server Code editor Collections Formula Google Listbox Logs Mail Microsoft 365 Network Objects OpenAI ORDA PDF Pictures Preemptive Programming REST Scalability Security Session Source control Speed Spreadsheet Tutorial UI User Experience vscode Web Word processor

Tags

4D AIKit 4D for Android 4D for iOS 4D NetKit 4D Qodly Pro 4D View Pro 4D Write Pro 21 21 R2 Administration AI Artificial Intelligence Build application CI/CD Class Client/Server Code editor Collections Formula Google Listbox Logs Mail Microsoft 365 Network Objects OpenAI ORDA PDF Pictures Preemptive Programming REST Scalability Security Session Source control Speed Spreadsheet Tutorial UI User Experience vscode Web Word processor
Subscribe to 4D Newsletter

© 2026 4D SAS - All rights reserved
Terms & Conditions | Legal Notices | Data Policy | Cookie Policy | Contact us | Write for us


Subscribe to 4D Newsletter

* Your privacy is very important to us. Please click here to view our Policy

Contact us

Got a question, suggestion or just want to get in touch with the 4D bloggers? Drop us a line!

* Your privacy is very important to us. Please click here to view our Policy