---
product: "AG Studio"
title: "Page and Widget Filters"
description: "Filter every Widget on an AG Studio page with a Page Filter, or one Widget with a Widget Filter, and learn when to use each."
framework: react
version: "3.1.0"
related:
    - title: "Filters Panel"
      url: "https://www.ag-grid.com/studio/analysts/filters-panel/"
    - title: "Filter Types"
      url: "https://www.ag-grid.com/studio/analysts/filter-types/"
    - title: "Cross-Filtering"
      url: "https://www.ag-grid.com/studio/analysts/cross-filtering/"
llms: "https://www.ag-grid.com/studio/llms.txt"
---

# Page and Widget Filters

You add and change Page Filters and Widget Filters in the [Filters Panel](https://www.ag-grid.com/studio/analysts/filters-panel/). The difference between them is how much of the page they affect. Both use the same [Filter Types](https://www.ag-grid.com/studio/analysts/filter-types/), and which types are available depends on the field and the [Widget](https://www.ag-grid.com/studio/analysts/widget-basics/).

## Page Filters

Page Filters apply to all Widgets on the current page. Use them when you want the same slice of data across the whole page, such as a single region or date range.

The example below shows a page with a date Page Filter applied. The filter affects every Widget on the page, so the KPIs and both bar charts, Net Sales by Region and Net Sales by Subcategory, all reflect the same filtered data.

#### Page Filters

```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: "a",
      widgets: {
        "kpi-net-sales": {
          type: "value",
          dataMapping: { value: [{ id: "net_sales" }] },
          format: { style: { label: { enabled: true, text: "Net Sales" } } },
        },
        "kpi-order-count": {
          type: "value",
          dataMapping: { value: [{ id: "order_count" }] },
          format: { style: { label: { enabled: true, text: "Order Count" } } },
        },
        "kpi-aov": {
          type: "value",
          dataMapping: { value: [{ id: "average_order_value" }] },
          format: {
            style: { label: { enabled: true, text: "Avg Order Value" } },
          },
        },
        "net-sales-by-region": {
          type: "bar-chart-grouped",
          dataMapping: {
            categoryKey: [{ id: "stores.region" }],
            valueKey: [{ id: "net_sales" }],
          },
          format: { title: { enabled: true, text: "Net Sales by Region" } },
        },
        "net-sales-by-subcategory": {
          type: "bar-chart-grouped",
          dataMapping: {
            categoryKey: [{ id: "products.subcategory" }],
            valueKey: [{ id: "net_sales" }],
          },
          format: {
            title: { enabled: true, text: "Net Sales by Subcategory" },
          },
        },
      },
      widgetLayout: {
        "kpi-net-sales": { xTrack: 0, yTrack: 0, xSpan: 8, ySpan: 6 },
        "kpi-order-count": { xTrack: 8, yTrack: 0, xSpan: 8, ySpan: 6 },
        "kpi-aov": { xTrack: 16, yTrack: 0, xSpan: 8, ySpan: 6 },
        "net-sales-by-region": { xTrack: 0, yTrack: 6, xSpan: 24, ySpan: 18 },
        "net-sales-by-subcategory": {
          xTrack: 0,
          yTrack: 24,
          xSpan: 24,
          ySpan: 18,
        },
      },
      filter: {
        page: [
          {
            field: { id: "orders.order_datetime" },
            view: { expanded: true },
            model: {
              operator: "greaterThan",
              value: "2024-12-01",
            },
          },
        ],
      },
    },
  ],
  selectedPageId: "a",
};

const studioProperties: AgStudioProperties = {
  mode: "edit",
  initialState,
  panels: {
    edit: {
      right: ["filters"],
    },
  },
  data: getMainDemoData("https://www.ag-grid.com/studio/example-assets"),
};

let studioApi: AgStudioApi;

const studioDiv = document.querySelector<HTMLElement>("#myStudio")!;
studioApi = createStudio(studioDiv, studioProperties);
```

[Live example: Page Filters](https://www.ag-grid.com/studio/examples/page-and-widget-filters/page-filters/typescript/)

## Widget Filters

Widget Filters apply only to one Widget. Use them when a Widget needs a different scope from the rest of the page, such as one chart showing "Top 10" while the other Widgets show all results.

In the example below, a Widget Filter applies only to the Net Sales by Subcategory chart, limiting it to three subcategories. The KPIs and the Net Sales by Region chart are unaffected and show all the data. Click the subcategory chart to see the active Widget Filter card in the Filters Panel.

#### Widget Filters

```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: "a",
      widgets: {
        "kpi-net-sales": {
          type: "value",
          dataMapping: { value: [{ id: "net_sales" }] },
          format: { style: { label: { enabled: true, text: "Net Sales" } } },
        },
        "kpi-order-count": {
          type: "value",
          dataMapping: { value: [{ id: "order_count" }] },
          format: { style: { label: { enabled: true, text: "Order Count" } } },
        },
        "kpi-aov": {
          type: "value",
          dataMapping: { value: [{ id: "average_order_value" }] },
          format: {
            style: { label: { enabled: true, text: "Avg Order Value" } },
          },
        },
        "net-sales-by-region": {
          type: "bar-chart-grouped",
          dataMapping: {
            categoryKey: [{ id: "stores.region" }],
            valueKey: [{ id: "net_sales" }],
          },
          format: {
            title: { enabled: true, text: "Net Sales by Region - All Data" },
          },
        },
        "net-sales-by-subcategory": {
          type: "bar-chart-grouped",
          dataMapping: {
            categoryKey: [{ id: "products.subcategory" }],
            valueKey: [{ id: "net_sales" }],
          },
          format: {
            title: {
              enabled: true,
              text: "Net Sales by Subcategory - Widget Filter Applied",
            },
          },
        },
      },
      widgetLayout: {
        "kpi-net-sales": { xTrack: 0, yTrack: 0, xSpan: 8, ySpan: 6 },
        "kpi-order-count": { xTrack: 8, yTrack: 0, xSpan: 8, ySpan: 6 },
        "kpi-aov": { xTrack: 16, yTrack: 0, xSpan: 8, ySpan: 6 },
        "net-sales-by-region": { xTrack: 0, yTrack: 6, xSpan: 24, ySpan: 18 },
        "net-sales-by-subcategory": {
          xTrack: 0,
          yTrack: 24,
          xSpan: 24,
          ySpan: 18,
        },
      },
      filter: {
        widget: {
          "net-sales-by-subcategory": [
            {
              field: { id: "products.subcategory" },
              view: { expanded: true },
              model: {
                operator: "isIn",
                value: [
                  "Binders & Presentation",
                  "Desk Accessories",
                  "Paper & Notebooks",
                ],
              },
            },
          ],
        },
      },
    },
  ],
  selectedPageId: "a",
};

const studioProperties: AgStudioProperties = {
  mode: "edit",
  initialState,
  panels: {
    edit: {
      right: ["filters"],
    },
  },
  data: getMainDemoData("https://www.ag-grid.com/studio/example-assets"),
};

let studioApi: AgStudioApi;

const studioDiv = document.querySelector<HTMLElement>("#myStudio")!;
studioApi = createStudio(studioDiv, studioProperties);
```

[Live example: Widget Filters](https://www.ag-grid.com/studio/examples/page-and-widget-filters/widget-filters/typescript/)