The variable() function is obsolete as of v0.1.0. Please use the defineState() function, which is more flexible and more versatile.
Morph allows variables to be defined in Python functions and SQL files, but variables can also be used when executing from MDX files. For more information on using variables in Python and SQL files, see how to use variables.

​
variable function

Use varialbe function to declare variables. The type of variable is string | undefined. You cannot override the type. 
const dateRangeStart = variable(undefined);
const dateRangeEnd = variable(undefined);

​
Passing to components

When passing to a component, pass the name of the variable in the Python or SQL file as a key, in object form. In the example below, start_date and end_date are used as variables in the Python file, so they are passed as keys. 
export const name = 'index';
export const title = 'Top page';

# Stock prices with dates

export const dateRangeStart = variable(undefined);
export const dateRangeEnd = variable(undefined);

<Grid cols="1">
  <VariableDatePicker
    type="range"
    variables={[
      dateRangeStart,
      dateRangeEnd
    ]}
  />
  <div className="h-[600px] w-full">
    <DataTable
      alias="stocks"
      variables={{
        start_date: dateRangeStart,
        end_date: dateRangeEnd
      }}
    />
  </div>
</Grid>