Skip to main content

Create Data Drilldown View

This page shows you how to build a data drilldown view from a master dataset on a Table or a List widget.

Prerequisites​

  • A datasource containing the data to display. For the list of datasources supported by Appsmith, see Datasources.

Drilldown view from Table​

To create a data drilldown view using a Table widget, follow these steps:

  1. Set the Table data property of the Table widget in the property pane to bind data.

    Example:

    {{fetch_passengers.data}}

  2. Drop a Modal widget, and add the required widgets to display specific details.

  3. Add a new column to the Table widget and set its Column Type to Button. Set the onClick event of the button to trigger the Modal display.

  4. In the Modal, bind data to the widgets corresponding to the triggered row from the Table widget. For example, to bind data to a Text widget, use the following code where tbl_passengersTable is the name of the Table widget, and passenger_name is the column:

    {{tbl_passengersTable.triggeredRow.passenger_name}}

    You can format the data and display in the drilldown. For example, to format dates, use the following code:

    {{moment(tbl_passengersTable.triggeredRow.dob).format('MMMM Do YYYY, h:mm:ss a')}}

    For more information, see Moment.js.

Drilldown view from List​

To create a data drilldown view using a List widget, follow these steps:

  1. Set the Items property of the List widget under Data, using the following code where fetch_passengers is the fetch query: 
    {{fetch_passengers.data}}
  2. Drop a Button widget on the List and set it's onClick event to trigger the Modal display.
  3. In the Modal, bind data to the widgets corresponding to the triggered item from the List widget. For example, to bind data to a Text widget in the Modal, use the following code where lst_passengers is the name of the List widget: 
    {{lst_passengers.triggeredItem.name}}

See also​