> ## Documentation Index
> Fetch the complete documentation index at: https://www.propeldata.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Group By
> Break down data by dimensions.
Wrap with the [Filter Provider](/docs/embeddable-ui/components/filter-provider) to apply the selected group by to child components.
```jsx /group-by/page.tsx theme={"system"}
import {
FilterProvider,
Flex,
GroupBy,
} from "@propeldata/ui-kit";
export default async function GroupByExample() {
return (
);
}
```
## Props API
GroupBy query props
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.
, "options" | "disableClearable">`}
>
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
string`}>
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
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
The global theme gray color. This color is used for text and background colors
The global theme radius color. This color is used for border radius
The global theme scaling. This value is used to scale components
The global theme panel background. This value is used to set the panel background