--- product: "AG Studio" title: "Fields in Widgets" description: "Control how fields behave in AG Studio Widgets: data types, formats, grouping, default aggregations such as Sum and Count, and sorting." framework: react version: "3.1.0" related: - title: "Data Panel" url: "https://www.ag-grid.com/studio/analysts/data-panel/" - title: "Calculations" url: "https://www.ag-grid.com/studio/analysts/calculations/" - title: "Formatting Values" url: "https://www.ag-grid.com/studio/analysts/formatting-values/" - title: "Blanks and Missing Values" url: "https://www.ag-grid.com/studio/analysts/blanks-and-missing-values/" llms: "https://www.ag-grid.com/studio/llms.txt" --- # Fields in Widgets A field's type, format, grouping, aggregation, and sorting shape how it behaves in widgets. The sections below explain each one, and which of them you can change. This page explains how data items behave once you place them in widgets. For how data is organised and structured across sources, see [Data Panel](https://www.ag-grid.com/studio/analysts/data-panel/). Each data item in the Data Panel has a data type and a format, which affect how you can use it and how it is displayed. The data type is the kind of data it contains, and the format controls how that data is displayed and processed in widgets. ## Data Types AG Studio supports five core data types: | Data Type | Icon | Description | Examples | | --- | --- | --- | --- | | String | ![String data type](https://www.ag-grid.com/studio/_astro/field-string.Dpm400mb.svg) | Letters, words, and alphanumeric characters | Country, Product Name, Status | | Number | ![Number data type](https://www.ag-grid.com/studio/_astro/field-number.CEW-si33.svg) | Integer or decimal values | Revenue, Quantity, Price | | Boolean | ![Boolean data type](https://www.ag-grid.com/studio/_astro/field-boolean.DbVyOblp.svg) | True or false values | Is Active, Has Discount | | Date | ![Date data type](https://www.ag-grid.com/studio/_astro/field-date.DppgaZ4R.svg) | Calendar dates | Order Date, Delivery Date | | Date Time | ![Date Time data type](https://www.ag-grid.com/studio/_astro/field-datetime.B3344a5V.svg) | Calendar dates with time | Timestamp, Created At | ## Formats A format controls how data is displayed in the interface. For example, depending on its format, a number might appear as `1,000`, `1000.00`, `$1,000` or `100%`. AG Studio offers these default formats: | Data Type | Available Formats | | --- | --- | | String | Text (default display) | | Number | Integer, Decimal, Percentage, Currency | | Boolean | Boolean (True/False) | | Date | Date (e.g., 31/12/2025) | | Date Time | Date Time (e.g., 31/12/2025, 13:00:00) | Your developer configures the available formats and their display settings. Beyond the standard formats listed above, they can also create custom formats to suit your business's needs. > **Note** > > A format affects only how values are displayed in a widget. It does not change the underlying data. ## Editing Fields If your developer has made a field editable, you can edit some of its properties directly in AG Studio. Select a field in the Data Panel to switch the [Compose Panel](https://www.ag-grid.com/studio/analysts/user-interface/#compose-panel) to its data-field view, which shows the field's properties. If the field is editable, an Edit button appears at the bottom of the panel. Select Edit to start editing, then select Save to apply your changes or Cancel to discard them. When a field is editable, you can change these properties: | Property | Editable | | --- | --- | | ID | No | | Calculation Type | No | | Format Type / Number Subtype | No | | Name | Yes | | Description | Yes | | Formatting Options | Yes, within the configured format type | As you adjust the formatting options, a live preview in the panel shows how your values will look. For more on formatting values, see [Formatting Values](https://www.ag-grid.com/studio/analysts/formatting-values/). ## Grouping When you place a field in a category slot in a [Widget](https://www.ag-grid.com/studio/analysts/building-widgets/#widget-setup), or add it as a column in a table, it is used as a Group by. Its unique values define the groups that values are aggregated across. For example, placing Region in a category slot groups the data so that each region appears as its own row or segment in the widget. Group by is available on columns and calculated columns, but not in the value axis of visualisations. ## Aggregation Aggregation defines how values are combined when a [Widget](https://www.ag-grid.com/studio/analysts/building-widgets/#widget-setup) summarises data across multiple rows. When you add data as a widget value, AG Studio applies an aggregation by default, and you can change it from the data pill menu. The aggregations available depend on the data type and the slot. A field added to a numeric slot, such as a chart's Y Axis, gets a default aggregation: - Number fields use Sum, except those with a Percentage format, which use Average. - String, Boolean, Date and Date Time fields use Count. Your developer can change which aggregations a field offers, which can change its default. You can aggregate columns and calculated columns. Measures are already aggregated, so no further aggregation can be applied to them. | Name | Short Label | Description | | --- | --- | --- | | Sum | `(sum)` | Adds all values together. | | Average | `(avg)` | Calculates the mean of all values. | | Minimum | `(min)` | Returns the smallest value in the result set. | | Maximum | `(max)` | Returns the largest value in the result set. | | Count (Distinct) | `(countd)` | Counts the number of distinct values in the result. | | Count | `(count)` | Counts the values that are not empty. | | First | `(first)` | Returns the first value in the grouped result, based on the current data order. | | Last | `(last)` | Returns the last value in the grouped result, based on the current data order. | Aggregated values change with the category grouping. For example, adding Region as a category to Total Sales gives total sales by region. The example below shows how aggregation responds to different category groupings. Both tables aggregate the Line Net calculated column in two ways, Average and Sum. The first table groups by store region and the second by customer segment. Notice how the sum and average values change with the grouping: the same aggregations give different results depending on how the data is grouped. #### Aggregation Response ```ts import { AgReportState, AgStudioApi, AgStudioProperties, createStudio, enableStudioDevValidations, } from "ag-studio"; import { getMainDemoData } from "./data.ts"; if (process.env.NODE_ENV !== "production") { // Enable extended validations only for development enableStudioDevValidations(); } const initialState: AgReportState = { pages: [ { id: "page1", widgets: { "1": { type: "grid", dataMapping: { cols: [ { id: "stores.region" }, { id: "line_net", aggregation: "avg" }, { id: "line_net", aggregation: "sum" }, ], }, format: { title: { enabled: true, text: "Line Net by Region", }, }, }, "2": { type: "grid", dataMapping: { cols: [ { id: "customers.segment" }, { id: "line_net", aggregation: "avg" }, { id: "line_net", aggregation: "sum" }, ], }, format: { title: { enabled: true, text: "Line Net by Customer Segment", }, }, }, }, widgetLayout: { "1": { xTrack: 0, yTrack: 0, xSpan: 24, ySpan: 16, }, "2": { xTrack: 0, yTrack: 16, xSpan: 24, ySpan: 16, }, }, }, ], selectedPageId: "page1", }; const studioProperties: AgStudioProperties = { mode: "edit", initialState, panels: { edit: { right: ["edit", "data"], }, }, data: getMainDemoData("https://www.ag-grid.com/studio/example-assets"), }; let studioApi: AgStudioApi; // setup Studio after the page has finished loading const studioDiv = document.querySelector("#myStudio")!; studioApi = createStudio(studioDiv, studioProperties); ``` [Live example: Aggregation Response](https://www.ag-grid.com/studio/examples/fields-in-widgets/aggregation-response/typescript/) ## Sorting You can also change the sort order from the data pill menu. The options include None, Ascending and Descending. Each Widget can have one sort applied. The example below shows the same revenue by product in three Bar Charts. The first has no sort, the second is sorted by Product in ascending order, and the third by Revenue in descending order. Select a chart, then open the menu on one of its data pills in the Setup tab to change its sort. #### Sorting ```ts import { AgReportState, AgStudioApi, AgStudioProperties, createStudio, enableStudioDevValidations, } from "ag-studio"; import { getData } from "./data.ts"; if (process.env.NODE_ENV !== "production") { // Enable extended validations only for development enableStudioDevValidations(); } const initialState: AgReportState = { pages: [ { id: "page1", widgets: { none: { type: "bar-chart-grouped", dataMapping: { categoryKey: [{ id: "sales.product" }], valueKey: [{ id: "sales.revenue", aggregation: "sum" }], tooltipKey: [], }, format: { title: { enabled: true, text: "No Sort", }, }, }, ascending: { type: "bar-chart-grouped", dataMapping: { categoryKey: [{ id: "sales.product" }], valueKey: [{ id: "sales.revenue", aggregation: "sum" }], tooltipKey: [], }, format: { title: { enabled: true, text: "Product, Ascending", }, }, sort: [ { field: { id: "sales.product" }, direction: "asc", }, ], }, descending: { type: "bar-chart-grouped", dataMapping: { categoryKey: [{ id: "sales.product" }], valueKey: [{ id: "sales.revenue", aggregation: "sum" }], tooltipKey: [], }, format: { title: { enabled: true, text: "Revenue, Descending", }, }, sort: [ { field: { id: "sales.revenue", aggregation: "sum" }, direction: "desc", }, ], }, }, widgetLayout: { none: { xTrack: 0, yTrack: 0, xSpan: 24, ySpan: 17 }, ascending: { xTrack: 0, yTrack: 17, xSpan: 24, ySpan: 17 }, descending: { xTrack: 0, yTrack: 34, xSpan: 24, ySpan: 17 }, }, }, ], selectedPageId: "page1", panels: { filters: { collapsed: true, }, data: { collapsed: true, }, }, }; const studioProperties: AgStudioProperties = { mode: "edit", initialState, data: getData(), }; let studioApi: AgStudioApi; // setup Studio after the page has finished loading const studioDiv = document.querySelector("#myStudio")!; studioApi = createStudio(studioDiv, studioProperties); ``` [Live example: Sorting](https://www.ag-grid.com/studio/examples/fields-in-widgets/sorting/typescript/)