To use Morph data, a dedicated component is used to pass the name of the Python function or SQL file as a property.

Below is an example of a table display of a DataFrame from a Python run.

index.mdx

export const name = 'index';
export const title = 'Top page';

# Top page

export const date = variable();

<VariableDatePicker type='single' variable={date}>

import { DataTable } from '@use-morph/page';

<div className="h-[600px] w-full">
  <DataTable 
    alias="aggregate_py" 
    variable={{ date: date }} 
    headerKeys={['date', 'new_deal_count', 'diff']}
  />
</div>

The components for data display are presented below.

​
Common Properties

PropertyTypeDescription
aliasstringThe name of the Python function or SQL file
variables{ [key: string]: Variable }Variables to pass to the Python function or SQL file. Declare using the variable() function.

​
DataTable

The DataTable component displays the results of a Python function or SQL file execution in a table.

PropertyTypeDescription
headerKeysstring[]Name of the columns to show. You can specify the order too.
import { DataTable } from '@use-morph/page';

<DataTable alias="aggregate_py" />

​
Embed (HTML, Plotly, etc.)

The Embed component displays HTML when the result of a Python function execution is HTML.


import { Embed } from '@use-morph/page';

<Embed alias="plotly_py" />
PropertyTypeDescription
widthstring (optional)Width of the element
heightstring (optional)Height of the element

​
Metrics

The Metrics component displays the value of a specific column from the first row of the execution result of a Python function or SQL file.

<Metrics alias="aggregate_py" valueKey="amount" />
PropertyTypeDescription
valueKeystringColumn name of the value to display
labelstring (optional)String displayed above the value
unitstring (optional)String displayed to the right of the value

​
MetricsGrid

The MetricsGrid component displays each row of a Python function or SQL file execution result in the Metrics component.

The display is in grid format.

<MetricsGrid alias="aggregate_py" cols="3" valueKey="amount" labelKey="name" />
PropertyTypeDescription
colsnumberNumber of grids in a row
valueKeystringColumn name of the value to display
labelstring (optional)String displayed above the value
labelKeystring (optional)Column name of label when you need to get label string from the data
unitstring (optional)String displayed to the right of the value

​
Displaying data without components

To display the results of a Python function or SQL file execution without using components, use the getJson and value functions.


# My Page

export const employeeData = getJson('employee_data_py');

## We have {value(employeeData).length} employees.

The getJson function is used to retrieve the result of executing a Python function or SQL file in an MDX file. The return value is not just an object, so use the value function to retrieve the value.

​
How do I use this?

For example, you may want to return a list of employees from a Python file, display it in a select box, and pass the ID of the selected employee as a variable to the DataTable.

In that case, you would write the following


# Employee Detail

export const employees = getJson({
  alias: 'employee_list_py'
});
export const selectedEmployee = variable();

<VariableSelect variable={selectedEmployee}>
  <VariableSelectItems items={employee} />
</VaraibleSelect>

## Work log

<DataTable alias="work_log_py" variables={{ employee_id: selectedEmployee }} />