Skip to content

The data grid

The main table view

The main content area is an AG Grid table. It is the primary "data table" for posts and content.

Data grid with columns: thumbnail, title, author, date, status, actions

Rows and columns

  • Rows: One row per post (or placeholder/skeleton while loading). Each row has a stable row ID (usually the post id) so selection and updates are consistent.

  • Columns: Depend on post type and column config. Default columns typically include: Image (thumbnail), Title (with optional subtitle), Author, Date, Categories, Status, Labels/Tags, and Actions. Optional: ID, Template (pages), Parent (hierarchical types), etc. Columns can be sorted, filtered (per-column), resized, and reordered (see Column management).

Cell renderers

Each column uses a renderer by data type so cells show the right UI:

  • Image – Thumbnail with fallback.

  • Title – Title and optional subtitle (link or plain text).

  • Author – Avatar and name; often editable (dropdown or popover).

  • Date – Formatted date; often editable (date picker).

  • Status – Badge or label; often editable (dropdown).

  • Category – List of categories; often editable (multi-select).

  • Labels – Tags/labels; often editable (multi-select).

  • Actions – Buttons: Edit, Duplicate, Delete (see Row actions).

Benefit: You see and edit the right kind of value in each column without opening the full editor.

Pagination and page size

  • Pagination: When enabled, the grid shows one page of rows (e.g. 20, 50, or 100). Page size selector is usually in the grid footer. You can change the page size; the list re-paginates immediately.

  • Persistence: The chosen page size can be stored in localStorage (per grid/post type) so it's remembered next time. Key is typically derived from a pageSizeStorageKey (e.g. fleekdash_posts_grid_page_size_post).

Benefit: Work with large lists in chunks and keep your preferred page size.

Performance (virtualization and buffering)

  • The grid uses client-side row model: all rows for the current filters are in memory; sorting and filtering are done in the browser.

  • Row virtualization (suppressRowVirtualisation: false) and column virtualization keep only visible (and buffered) rows/columns in the DOM, so scrolling stays smooth with many rows.

  • rowBuffer (e.g. 50) and rowHeight (e.g. 68px) help the grid pre-render rows around the viewport. animateRows gives smooth add/remove when data changes.

Benefit: Instant loading and scrolling even with hundreds or thousands of posts, without leaving the list.