Website Builder > Customize Page List Columns

Customize Page List Columns

Learn how to add, replace, remove, or reposition columns in the Website Builder page list table.

WHAT YOU'LL LEARN

how to add a column to the page list table
how to render custom cell content
how to control column position, visibility, and sortability
how to remove or replace an existing column

Overview

The page list table displays all pages in a folder. By default, it shows the following columns:

Name — the page title and path
Author — the createdBy identity
Created — the createdOn date
Modified — the savedOn date
Status — the status and version of the current page revision
Live — whether any revision of the page is currently published

Columns are configured using PageListConfig. You create an extension file, define your columns inside it, and register it as an Admin.Extension in webiny.config.tsx.

Add a Column

To add a column with a custom cell renderer, pass a React component via the cell prop. The component can access the current row via useTableRow() and isFolderRow() from PageListConfig.Browser.Table.Column:

extensions/websiteBuilder/PagesListColumns.tsx

name — unique identifier for the column; also used to reference it in before, after, and remove
header — column header label
cell — React component to render each cell; receives row data via useTableRow()
useTableRow() — returns { row } with the full page data at row.data
isFolderRow(row) — returns true when the row is a folder rather than a page; always handle this case to avoid rendering errors

Page data shape — row.data is a PageDto with these fields available in cell renderers:

Field	Type	Description
`id`	`string`	Page ID
`status`	`string`	Current revision status (`draft`, `published`, …)
`version`	`number`	Revision number
`createdBy`	identity	`{ id, displayName, type }`
`createdOn`	`string`	ISO date string
`savedBy`	identity	`{ id, displayName, type }`
`savedOn`	`string`	ISO date string
`modifiedBy`	identity	`{ id, displayName, type }`
`modifiedOn`	`string`	ISO date string
`properties`	object	Page properties (e.g. `title`, `path`, `seo`)
`live`	object	Live revision info, or `null` if not published

Sortable Column

Set sortable={true} to allow users to sort by the column:

Column Size

Use size to control the initial column width (default: 100). The value is proportional — 200 means twice the default width. Set resizable={false} to prevent users from resizing the column:

Column Visibility

By default columns are visible. Set visible={false} to hide a column initially — users can still show it via the column settings menu:

Set hideable={false} to lock a column as always-visible, preventing users from toggling it off:

Custom Class Names

Use className to apply CSS class names to both the column header and cells:

Position a Column

Use before or after to position a column relative to an existing one. The built-in column names are: name, createdBy, createdOn, savedOn, status, live, actions.

Discover Existing Column Names

To find the names of built-in columns for use with before, after, or remove, use your browser’s React DevTools and search for BaseColumns.

Remove a Column

Pass remove to remove an existing column by name:

Replace a Column

Reference an existing column by name and pass a new cell component to replace its renderer:

Registering the Extension

webiny.config.tsx