On this page
Visualizations
Data Grid
Visualize records in table format.
Props API
DataGrid query props
Show DataGridQueryProps
Show DataGridQueryProps
The columns to retrieve, if not passed, all columns will be included, Pass [’*’] to retrieve all columns
The index of the column to order the table by. The index is 1-based. If not provided, records will be ordered by their timestamp by default.
The sort order of the rows. It can be ascending (
ASC) or descending (DESC) order. Defaults to descending (DESC) order when not provided.Show Sort
Show Sort
The available sort orders.
ASC: Sort in ascending order.DESC: Sort in descending order.
Indicates specific time zone region
Specify the time range for a time series, counter, or leaderboard Metric query
Show TimeRangeInput
Show TimeRangeInput
The fields required to specify the time range for a time series, counter, or leaderboard Metric query.If no relative or absolute time ranges are provided, Propel defaults to an absolute time range beginning with the earliest record in the Metric’s Data Pool and ending with the latest record.If both relative and absolute time ranges are provided, the relative time range will take precedence.If a
LAST_N relative time period is selected, an n ≥ 1 must be provided. If no n is provided or n < 1, a BAD_REQUEST error will be returned.The timestamp field to use when querying. Defaults to the timestamp configured on the Data Pool or Metric, if any.
Set this to filter on an alternative timestamp field.
The relative time period.
Show RelativeTimeRange
Show RelativeTimeRange
The Relative time ranges are based on the current date and time.
THIS - The current unit of time. For example, if today is June 8, 2022, and
THIS_MONTH is selected, then data for June 2022 would be returned.PREVIOUS - The previous unit of time. For example, if today is June 8, 2022, and
PREVIOUS_MONTH is selected, then data for May 2022 would be returned. It excludes
the current unit of time.NEXT - The next unit of time. For example, if today is June 8, 2022, and
NEXT_MONTH is selected, then data for July 2022 would be returned. It excludes
the current unit of time.LAST_N - The last n units of time, including the current one. For example, if today
is June 8, 2022 and LAST_N_YEARS with n = 3 is selected, then data for 2020, 2021, and
2022 will be returned. It will include the current time period.THIS_HOUR: Starts at the zeroth minute of the current hour and continues for 60 minutes.TODAY: Starts at 12:00:00 AM of the current day and continues for 24 hours.THIS_WEEK: Starts on Monday, 12:00:00 AM of the current week and continues for seven days.THIS_MONTH: Starts at 12:00:00 AM on the first day of the current month and continues for the duration of the month.THIS_QUARTER: Starts at 12:00:00 AM on the first day of the current calendar quarter and continues for the duration of the quarter.THIS_YEAR: Starts on January 1st, 12:00:00 AM of the current year and continues for the duration of the year.PREVIOUS_HOUR: Starts at the zeroth minute of the previous hour and continues for 60 minutes.YESTERDAY: Starts at 12:00:00 AM on the day before the today and continues for 24 hours.PREVIOUS_WEEK: Starts on Monday, 12:00:00 AM, a week before the current week, and continues for seven days.PREVIOUS_MONTH: Starts at 12:00:00 AM on the first day of the month before the current month and continues for the duration of the month.PREVIOUS_QUARTER: Starts at 12:00:00 AM on the first day of the calendar quarter before the current quarter and continues for the duration of the quarter.PREVIOUS_YEAR: Starts on January 1st, 12:00:00 AM, the year before the current year, and continues for the duration of the year.NEXT_HOUR: Starts at the zeroth minute of the next hour and continues for 60 minutes.TOMORROW: ” Starts at 12:00:00 AM, the day after the current day, and continues for 24 hours.NEXT_WEEK: Starts on Monday, 12:00:00 AM, the week after the current week, and continues for the duration of the week.NEXT_MONTH: Starts at 12:00:00 AM on the first day of the next month and continues for the duration of the month.NEXT_QUARTER: Starts at 12:00:00 AM on the first day of the next calendar quarter and continues for the duration of the quarter.NEXT_YEAR: Starts on January 1st, 12:00:00 AM of the next year and continues for the duration of the year.LAST_N_MINUTES: Starts at the zeroth secondn- 1 minute(s) before the current minute and continues through the current minute. It includes this minute.LAST_N_HOURS: Starts at the zeroth minute of then- 1 hour(s) before the current hour, and continues through the current hour. It includes this hour.LAST_N_DAYS: Starts at 12:00:00 AM,n- 1 day(s) before the current day, and continues through the current day. It includes today.LAST_N_WEEKS: Starts on Monday, 12:00:00 AM,n- 1 week(s) before the current week, and continues through the current week. It includes this week.LAST_N_MONTHS: Starts at 12:00:00 AM on the first day of the month,n- 1 month(s) before the current month, and continues through the current month. It includes this month.LAST_N_QUARTERS: Starts at 12:00:00 AM on the first day of the calendar quartern- 1 quarter(s) before the current quarter and continues through the current quarter. It includes this quarter.LAST_N_YEARS: Starts on January 1st, 12:00:00 AM of the yearn- 1 year(s) before the current year and continues through the current year. It includes this year.LAST_15_MINUTESLAST_30_MINUTESLAST_HOURLAST_4_HOURSLAST_12_HOURSLAST_24_HOURSLAST_7_DAYSLAST_30_DAYSLAST_90_DAYSLAST_3_MONTHSLAST_6_MONTHSLAST_YEARLAST_2_YEARSLAST_5_YEARS
The number of time units for the
LAST_N relative periods.The optional start timestamp (inclusive). Defaults to the timestamp of the earliest record in the Data Pool.
The optional end timestamp (exclusive). Defaults to the timestamp of the latest record in the Data Pool.
Filters that the chart will respond to
Show FilterInput
Show FilterInput
The fields of a filter.You can construct more complex filters using you could writeNote that
and and or. For example, to construct a filter equivalent toCopy
(value > 0 AND value <= 100) OR status = "confirmed"
Copy
{
"column": "value",
"operator": "GREATER_THAN",
"value": "0",
"and": [{
"column": "value",
"operator": "LESS_THAN_OR_EQUAL_TO",
"value": "0"
}],
"or": [{
"column": "status",
"operator": "EQUALS",
"value": "confirmed"
}]
}
and takes precedence over or.The name of the column to filter on.
The operation to perform when comparing the column and filter values.
Show FilterOperator
Show FilterOperator
The available Filter operators.
EQUALS: Selects values that are equal to the specified value.NOT_EQUALS: Selects values that are not equal to the specified value.GREATER_THAN: Selects values that are greater than the specified value.GREATER_THAN_OR_EQUAL_TO: Selects values that are greater or equal to the specified value.LESS_THAN: Selects values that are less than the specified value.LESS_THAN_OR_EQUAL_TO: Selects values that are less or equal to the specified value.IS_NULL: Selects values that are null. This operator does not accept a value.IS_NOT_NULL: Selects values that are not null. This operator does not accept a value.LIKE: Selects values that match the specified pattern.NOT_LIKE: “Selects values that do not match the specified pattern.
The value to compare the column to.
Additional filters to AND with this one. AND takes precedence over OR.
Additional filters to OR with this one. AND takes precedence over OR.
Access token used for the query. While you can pass this one to each component, we recommend wrapping components in the
AccessTokenProvider instead:Interval in milliseconds for refetching the data
Whether to retry on errors.
This prop allows you to override the URL for Propel’s GraphQL API. You shouldn’t need to set this unless you are testing.
When false, the component will not make any GraphQL requests, default is true.
If true, the table columns will be resizable
If passed along with
rows the component will ignore the built-in GraphQL operationsIf passed along with
headers the component will ignore the built-in GraphQL operationsWhen true, shows a skeleton loader
Props that will affect pagination
If true, the pagination footer will be hidden
Determines how the table lines are shown, defaults to “both”
Show SlotProps
Show SlotProps
Props to be applied to the
footer elementProps to be applied to the
table elementProps to be applied to the
cell elementProps to be applied to the
button elementProps to be applied to the
select elementProps to be applied to the
header elementIf true, the table border will be hidden
The color of the table border
The color of the grid lines
The global theme accent color. This color is used to highlight elements
If true, the headers will be prettified
If true, row count will be shown in the footer
Show Theme Provider Props
Show Theme Provider Props
The initial theme used as a base. It provides a default set of styling
from which customizations can be applied.
Show ThemeAppearances
Show ThemeAppearances
The global theme accent color. This color is used to highlight elements
Show AccentColors
Show AccentColors
AccentColors
"amber" | "blue" | "bronze" | "brown" | "crimson" | "cyan" | "gold" | "grass" | "gray" | "green" | "indigo" | "iris" | "jade" | "lime" | "mint" | "orange" | "pink" | "plum" | "purple" | "red" | "ruby" | "sky" | "teal" | "tomato" | "violet" | "yellow"
The global theme gray color. This color is used for text and background colors
Show GrayColors
Show GrayColors
The global theme radius color. This color is used for border radius
Show Radii
Show Radii
The global theme scaling. This value is used to scale components
Show Scalings
Show Scalings
Show Deprecated Fields
Show Deprecated Fields
This type is deprecated, use
errorFallbackProps and errorFallback insteadWas this page helpful?
Assistant
Responses are generated using AI and may contain mistakes.