Wrap with the Filter Provider to apply the selected group by to child components.
import {
FilterProvider,
Flex,
GroupBy,
} from "@propeldata/ui-kit";
export default async function GroupByExample() {
return (
<Flex p="7" justify="center" width="100%">
<FilterProvider>
<GroupBy
query={{
dataPool: { name: "TacoSoft Demo Data" }
}}
includeColumns={[
"taco_name",
"restaurant_name",
"sauce_name",
"tortilla_name"
]}
prettifyColumnNames={true}
defaultOpen
/>
</FilterProvider>
</Flex>
);
}
Props API
GroupBy query props
dataPool
{
id?: string;
name?: string;
}
Data pool to fetch columns from
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.
Props that the select input will receive
Columns to group by for static mode, if passed, the component will ignore the built-in GraphQL operations
When true, shows a skeleton loader
If true, it will format camelCase and snake_case column names to a readable format
Function to format column names
Columns to include, if not passed, all columns will be included, pass ["*"] to include all columns
Maximum number of group by columns
If true, the dropdown will be open by default
Show Theme Provider Props
The initial theme used as a base. It provides a default set of styling
from which customizations can be applied.
The global theme accent color. This color is used to highlight elements
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
GrayColors
"auto" | "gray" | "mauve" | "slate" | "sage" | "olive" | "sand"
The global theme radius color. This color is used for border radius
Radii
"none" | "small" | "medium" | "large" | "full"
The global theme scaling. This value is used to scale components
Scalings
"90%" | "95%" | "100%" | "105%" | "110%"
The global theme panel background. This value is used to set the panel background
