Font Size:

Ask Joget AI

Multi Columns Datalist Template

Introduction

This Datalist Template plugin provides a flexible and organized way to display tabular data. It allows multiple columns to be arranged horizontally, with the ability to designate specific columns as headings, descriptions, or other types of content. Additionally, it supports placing row-specific actions at the bottom of each row, giving users an intuitive interface to interact with individual records directly.

Plugin Information

Plugin Available in the Bundle:

Multi Columns Datalist Template

This plugin bundle is compatible with Joget DX 8.

Get Started

Where to get the plugin

You can obtain the .jar file from Joget Marketplace.
Upload the plugin .jar file in Joget via Settings > Manage Plugins.

Steps for Creating the App from Scratch

In Form Builder, create a form that includes the required fields, such as a Text Field or any other relevant elements.
Click Generate App and click Generate CRUD. Launch the UI using the Click here option.
In the List Builder, navigate to the Settings tab and select List - Multi Columns datalist template from the template dropdown.
Configure the template properties according to your requirements (see the properties section below, including the Separator option that lets you define the symbol or text used to divide metadata fields)
After you have selected List – Multi Columns Datalist Template in the List Builder, the list will first look like this (see image below).
In the Design tab, drag the fields inside the row that you want to use as metadata (for example: Name, Date, Category/Type) so that they are placed next to each other horizontally beneath the title, which occupies the top of the row.

After rearranging, your row should look similar to this:
Once the fields are in place horizontally, the Multi Columns Datalist Template renders each record as an organized card layout.
If you would like to refine the visual appearance of each field or the entire row, click on the field → Styles and configure the styles for the List Row, Title, Metadata, and Description fields.

Steps to run the plugin

In runtime, navigate to the page that contains the datalist configured with the Multi Columns Datalist Template. Each record will be rendered as a card-style row, showing the image, title, metadata line (separated using the configured Separator), and description, with the row actions displayed as buttons or a dropdown at the bottom of the card.