# How to Filter Articles by Author and Date in the WeChat Article Exporter UI

> Learn how article filtering by author and date is implemented in the WeChat Article Exporter UI using AG Grid's custom filters and value getters for Unix timestamps.

- Repository: [公众号文章工具箱/wechat-article-exporter](https://github.com/wechat-article/wechat-article-exporter)
- Tags: how-to-guide
- Published: 2026-05-26

---

**The wechat-article-exporter dashboard implements article filtering by author and date using AG Grid's built-in set and date filters, configured with custom value getters and comparators to handle Unix timestamp data.**

The **wechat-article/wechat-article-exporter** repository provides a Vue-based dashboard for managing WeChat articles. When you filter articles by author and date in the UI, the application leverages AG Grid's enterprise-grade filtering capabilities defined in the article listing component, processing data client-side for instant results.

## AG Grid Column Definitions

The article list renders inside [`pages/dashboard/article.vue`](https://github.com/wechat-article/wechat-article-exporter/blob/main/pages/dashboard/article.vue) using the `<ag-grid-vue>` component. Filtering behavior is controlled through the `columnDefs` array, where each column specifies its filter type via the `filter` property.

### Filtering by Author with Set Filters

The **author** column targets the `author_name` field and utilizes AG Grid’s **set filter** (`agSetColumnFilter`). This component automatically scans `globalRowData` to generate a dropdown checklist of distinct authors, allowing users to include or exclude specific writers without explicit backend integration.

From [`pages/dashboard/article.vue`](https://github.com/wechat-article/wechat-article-exporter/blob/main/pages/dashboard/article.vue) (lines 121-128):

```typescript
{
  field: 'author_name',
  headerName: '作者',
  cellDataType: 'text',
  filter: 'agSetColumnFilter',
  minWidth: 150,
  cellClass: 'flex justify-center items-center',
}

```

### Filtering by Date with Custom Parameters

For temporal data, both the **creation time** (`create_time`, labeled "创建时间") and **publish time** (`update_time`, labeled "发布时间") columns employ `agDateColumnFilter`. These require special configuration because the underlying data stores timestamps as Unix seconds rather than JavaScript Date objects.

The configuration in [`pages/dashboard/article.vue`](https://github.com/wechat-article/wechat-article-exporter/blob/main/pages/dashboard/article.vue) (lines 107-115) imports helper parameters from [`utils/grid.ts`](https://github.com/wechat-article/wechat-article-exporter/blob/main/utils/grid.ts):

```typescript
{
  headerName: '创建时间',
  field: 'create_time',
  valueFormatter: p => formatTimeStamp(p.value),
  filter: 'agDateColumnFilter',
  filterParams: createDateColumnFilterParams(),
  filterValueGetter: (params) => new Date(params.getValue('create_time') * 1000),
  // Similar configuration applies to update_time (发布时间)
}

```

## Date Filter Comparator Implementation

The `createDateColumnFilterParams()` function exported from [`utils/grid.ts`](https://github.com/wechat-article/wechat-article-exporter/blob/main/utils/grid.ts) (lines 24-38) defines the available filter operations and comparison logic:

```typescript
export function createDateColumnFilterParams(): IDateFilterParams {
  return {
    filterOptions: ['lessThan', 'greaterThan', 'inRange'],
    comparator: (filterLocalDateAtMidnight: Date, cellValue: Date) => {
      const t = filterLocalDateAtMidnight;
      if (cellValue < t) return -1;
      if (cellValue === t) return 0;
      return 1;
    },
  };
}

```

This configuration exposes three **filter options**—less than, greater than, and in range—while the `filterValueGetter` converts Unix timestamps to Date objects by multiplying by 1000, enabling proper chronological sorting and filtering.

## Client-Side Data Processing

When users interact with these filters, AG Grid applies the filter logic directly against the `globalRowData` array on the client side. The grid maintains the **filter model** internally, updating the visible rows instantly as users select author checkboxes or date ranges, eliminating server round-trips for filter operations.

## Summary

- The **author filter** uses `agSetColumnFilter` on the `author_name` field to generate dynamic checklists of distinct authors from the dataset.
- **Date filters** rely on `agDateColumnFilter` configured through `createDateColumnFilterParams()` located in [`utils/grid.ts`](https://github.com/wechat-article/wechat-article-exporter/blob/main/utils/grid.ts).
- The `filterValueGetter` converts Unix timestamps (seconds) to JavaScript Date objects (milliseconds) for accurate comparison.
- Three filter options are available for dates: **less than**, **greater than**, and **in range**.
- All filtering occurs **client-side** against `globalRowData` for immediate visual feedback.

## Frequently Asked Questions

### How does the author filter populate its dropdown list?

The `agSetColumnFilter` component automatically extracts unique values from the `author_name` column across all rows in `globalRowData`. It builds the dropdown checklist dynamically based on the current dataset, requiring no manual enumeration of author names in the configuration.

### Why does the date filter multiply timestamps by 1000?

WeChat article data stores timestamps in seconds since the Unix epoch, while JavaScript Date constructors expect milliseconds. The `filterValueGetter` function—`(params) => new Date(params.getValue('create_time') * 1000)`—performs this conversion to ensure accurate date comparisons within AG Grid's filter logic.

### Can I add additional date filter options beyond the three provided?

The current implementation restricts options to `['lessThan', 'greaterThan', 'inRange']` as defined in [`utils/grid.ts`](https://github.com/wechat-article/wechat-article-exporter/blob/main/utils/grid.ts). To enable predicates like "equals" or "not equal," you would modify the `filterOptions` array in `createDateColumnFilterParams()` to include AG Grid-supported values such as `'equals'` or `'notEqual'`.

### Where is the filter state maintained when users interact with the grid?

AG Grid maintains the **filter model** in its internal state management. While the column definitions in [`pages/dashboard/article.vue`](https://github.com/wechat-article/wechat-article-exporter/blob/main/pages/dashboard/article.vue) configure how filtering behaves, the grid instance itself stores the active filter criteria and applies boolean logic to the `globalRowData` array provided as the row datasource.