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

  • July 18, 2025

    Embed deployment license automatically into your applications

  • July 17, 2025

    New Class to Perform UDP Communications

  • July 17, 2025

    Managing Calendar Events with Microsoft 365 or Google in 4D: Create, Update, Delete

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

  • 4D View Pro
  • 4D Write Pro
  • 4D for Mobile
  • Email
  • Development Mode
  • 4D Language
  • ORDA
  • User Interface / GUI
  • Qodly Studio
  • Server
  • Maintenance
  • Deployment
  • 4D Tutorials
  • Generic
  • 4D Summit sessions and other online videos

Tags

4D-Analyzer 4D for Android 4D for iOS 4D NetKit 4D Qodly Pro 4D View Pro 4D Write Pro 20 R9 20 R10 Administration Authentication Build application CI/CD Class Client/Server Code editor Collections Compatibility settings Formula Google Listbox Logs Mail Microsoft 365 Network Objects ORDA PDF Pictures Preemptive Programming REST Scalability Security Session Source control Speed Spreadsheet Tutorial UI User Experience v20 vscode Web Word processor

Tags

4D-Analyzer 4D for Android 4D for iOS 4D NetKit 4D Qodly Pro 4D View Pro 4D Write Pro 20 R9 20 R10 Administration Authentication Build application CI/CD Class Client/Server Code editor Collections Compatibility settings Formula Google Listbox Logs Mail Microsoft 365 Network Objects ORDA PDF Pictures Preemptive Programming REST Scalability Security Session Source control Speed Spreadsheet Tutorial UI User Experience v20 vscode Web Word processor
Subscribe to 4D Newsletter

© 2025 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