Stop losing filter state: Shareable URLs for AG grid with ag-grid-url-sync

AG Grid is a leading data grid component for modern web applications, trusted by teams ranging from startups to Fortune 500 companies. Its flexibility, high performance, and rich feature set make it a top choice for building complex tables and dashboards.

Despite its power, AG Grid doesn’t offer a native way to share a filtered view with a colleague or to return to a specific filter state later — without manually reapplying filters. If you’ve ever taken a screenshot just to show someone the data you’re seeing, you’re not alone.

That’s where ag-grid-url-sync comes in. This library bridges the gap, enabling you to capture, share, and restore filtered grid states with simple, shareable URLs — so everyone lands on the exact same view, every time.

Most grids don’t preserve filter state across sessions, refreshes, or shares. ag-grid-url-sync turns that limitation on its head by serialising filter state into readable, shareable URLs.

For example:

https://analytics.company.com/sales?f_region_eq=West&f_revenue_gte=100000&f_quarter_eq=Q4&f_closed_after=2024-01-01

No tokens. No encoded blobs. Just a clean, human-readable query string describing the exact state of your grid: "West region, ≥ $100k revenue, Q4, closed after 1st Jan 2024."

Click it, and you're instantly looking at the same data — no setup required .

It’s one thing to handle the simple cases like basic text filters, a few numbers, maybe a date or two. But real-world grids are rarely that tidy.

Sales reps might filter by region and revenue band. Analysts dig into ranges, blanks, and boundaries. PMs want precise timelines. And when you're trying to share a view, all of those filters need to travel with the URL, not just the obvious ones.

That’s exactly where ag-grid-url-sync comes in.

The library supports all 26 native AG Grid filter operations, including:

• Text filters like contains, equals, notContains, endsWith, and more
• Number operations including ranges (f_salary_range=75000,120000) and inequality (f_score_gte=85)
• Date filtering with ISO 8601 support, including strict matching and ranges (f_deadline_before=2024-12-31)

Even edge cases like blank values (f_notes_blank=true) are handled out of the box.

This isn’t a partial solution. It’s comprehensive.

ag-grid-url-sync is designed to fit seamlessly into a variety of codebases, whether you’re working in React or another framework. Here are the two main ways to integrate it:

1. Framework-agnostic core

You can use the core API in any JavaScript environment—React, Vue, Angular, or plain JavaScript—by interacting directly with the grid’s API.

import { Grid } from 'ag-grid-community';
import { createUrlSync } from 'ag-grid-url-sync';

const gridOptions = {
  columnDefs: [...],
  rowData: [...],
  onGridReady: (params) => {
    const gridApi = params.api;
    const urlSync = createUrlSync(gridApi);
    const shareableUrl = urlSync.generateUrl();
    // Example: Apply filter state from a URL
    urlSync.applyFromUrl('https://app.com/data?f_make_eq=Toyota&f_price_gte=30000');
  }
};

document.addEventListener('DOMContentLoaded', function () {
  const gridDiv = document.querySelector('#myGrid');
  new Grid(gridDiv, gridOptions);
});

This approach gives you full control and can be adapted to any setup where you have access to the grid API.

2. React hook

For React projects, a custom hook simplifies integration even further. The hook manages all the boilerplate — lifecycle, state, and error handling — so you can focus on the user experience.

import { useAGGridUrlSync } from 'ag-grid-url-sync/react'

function DataGrid() {
  const [gridApi, setGridApi] = useState()

  const { shareUrl, clearFilters, hasFilters, isReady } = useAGGridUrlSync(gridApi, {
    autoApplyOnMount: true
  })

  return (
    <div>
      <button onClick={() => navigator.clipboard.writeText(shareUrl())} 
			        disabled={!isReady}>
        Share This View
      </button>
      <button onClick={clearFilters} disabled={!hasFilters}>
        Reset Filters
      </button>
    </div>
  )
}

In this example, the “Share This View” button copies a shareable URL of the current grid filters to your clipboard, making it easy to send or save a filtered view. The “Reset Filters” button clears all active filters, instantly restoring the default, unfiltered grid. These controls allow users to quickly share their current data context with others or return to a baseline state—all with minimal setup.

This makes it easy to add shareable URLs and filter management to any AG Grid in your React app with minimal code.

Despite its flexibility, ag-grid-url-sync is lean — ~3KB gzipped. It’s also fast:

• Sub-20ms processing for 100+ filters
• Tree-shakeable imports
• Intelligent caching to avoid redundant updates
• Fails gracefully if a URL is malformed

Selective imports are supported too:

import { parseUrlFilters } from 'ag-grid-url-sync/url-parser'    // ~1KB
import { generateUrl } from 'ag-grid-url-sync/url-generator'     // ~0.8KB
import { validateFilterValue } from 'ag-grid-url-sync/validation' // ~300B

At Nearform, we use AG Grid extensively- across internal tools, client projects, and data-heavy dashboards. And like many teams, we kept running into the same issue:

We’d apply filters to a grid, find the exact view we needed… then lose it. A page refresh? Filters gone. Sharing with teammates? Screenshots and Slack instructions. It was slowing us down, especially in async, cross-functional teams.

So we built ag-grid-url-sync— first as an internal utility, then as a reusable library — and now, as an open-source package for the entire community. It solved a real problem for us, and we know it will for others too.

How We Use It

Here are just a few examples of how we’ve considered or integrated ag-grid-url-sync across Nearform projects:

• Analytics dashboards: Team members drop filter-specific URLs into Slack or project docs, so everyone sees exactly the same data view — no back-and-forth.
• Customer success tools: Our support engineers share deep-linked filtered views with clients to troubleshoot and debug more efficiently.
• Internal ops: Sales and delivery teams run weekly pipeline reviews from shared links that load pre-filtered, role-specific data — no setup time required.

It’s a small feature that’s made a big impact.

Readable URLs

/employees?f_department_eq=Engineering&f_salary_gte=90000

No base64, no opaque tokens. Anyone can read and reason about what’s being filtered.

Multi-grid support

createUrlSync(gridApi, { paramPrefix: 'team_' })

Need separate filter states for different grids on the same page? Prefix support keeps things tidy.

Error handling, your way

createUrlSync(gridApi, {
  onParseError: (err) => console.warn('Invalid filter in URL:', err.message)
})

Malformed parameters don’t crash your app—they’re caught and handled gracefully.

npm install ag-grid-url-sync

It works out of the box with AG Grid’s column definitions:

• filter: 'agTextColumnFilter' → Handled
• filter: 'agDateColumnFilter' → Handled
• filter: true → Handled
• cellDataType: 'number' → Handled

There’s no extra config. It just works.

As teams become more distributed and data-centric, the ability to share precise views — without meetings, screenshots, or back-and-forth — isn’t just convenient. It’s critical.

This isn’t about fancy features. It’s about enabling faster decisions, clearer collaboration, and better user experiences.

ag-grid-url-sync came out of a real need, and it’s helped us ship better internal tools and dashboards faster. So we’ve released it as an open-source package for anyone working with AG Grid and modern web apps.

ag-grid-url-sync solves a common problem with minimal overhead, excellent performance, and clean developer ergonomics.

You can start using it in minutes — no rewrites, no vendor lock-in. 👉 Check it out on GitHub or if you need help implementing AG Grid at scale, or building high-performance data tooling like this? Reach out!