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

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 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 (lines 121-128):

{
  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 (lines 107-115) imports helper parameters from utils/grid.ts:

{
  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 (lines 24-38) defines the available filter operations and comparison logic:

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.
• 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. 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}