### pageId \ A unique identifier for the list page. This is important to support customization functionality that relies on page IDs and makes your component extensible. ### route \ AnyRoute)`} /> * The TanStack Router `Route` object, which will be defined in the component file. ### title \ * The page title, which will display in the header area. ### listQuery \ This DocumentNode of the list query, i.e. a query that fetches PaginatedList data with "items" and "totalItems", such as: *Example* ```tsx export const collectionListDocument = graphql(` query CollectionList($options: CollectionListOptions) { collections(options: $options) { items { id createdAt updatedAt name slug breadcrumbs { id name slug } children { id name } # ... etc } totalItems } } `); // ... ``` ### deleteMutation \`} /> Providing the `deleteMutation` will automatically add a "delete" menu item to the actions column dropdown. Note that if this table already has a "delete" bulk action, you don't need to additionally provide a delete mutation, because the bulk action will be added to the action column dropdown already. ### transformVariables \ V`} /> This prop can be used to intercept and transform the list query variables before they are sent to the Admin API. This allows you to implement specific logic that differs from the standard filter/sort handling. *Example* ```tsx { const filterTerm = input.options?.filter?.name?.contains; // If there is a filter term set // we want to return all results. Else // we only want top-level Collections const isFiltering = !!filterTerm; return { options: { ...input.options, topLevelOnly: !isFiltering, }, }; }} /> ``` ### onSearchTermChange \ NonNullable['filter']`} /> Allows you to customize how the search term is used in the list query options. For instance, when you want the term to filter on specific fields. *Example* ```tsx { return { firstName: { contains: searchTerm }, lastName: { contains: searchTerm }, emailAddress: { contains: searchTerm }, }; }} /> ``` ### customizeColumns \`} /> Allows you to customize the rendering and other aspects of individual columns. By default, an appropriate component will be chosen to render the column data based on the data type of the field. However, in many cases you want to have more control over how the column data is rendered. *Example* ```tsx { const isExpanded = row.getIsExpanded(); const hasChildren = !!row.original.children?.length; return (

); }, }, // Use `meta.disabled` to completely exclude a column from the table, // including the column visibility toggle. This is useful when you need // to fetch certain fields for use in custom cell renderers, but don't // want those fields to appear as their own columns. productVariantCount: { meta: { disabled: true }, }, ``` ### additionalColumns \ Allows you to define extra columns that are not related to actual fields returned in the query result. For example, in the Administrator list, we define an additional "name" column composed of the `firstName` and `lastName` fields. *Example* ```tsx ( ), }, /> ``` ### defaultColumnOrder \ | keyof AC | CustomFieldKeysOfItem>)[]`} /> Allows you to specify the default order of columns in the table. When not defined, the order of fields in the list query document will be used. ### defaultSort \ Allows you to specify the default sorting applied to the table. *Example* ```tsx defaultSort={[{ id: 'updatedAt', desc: true }]} ``` ### defaultVisibility \ | keyof AC | CustomFieldKeysOfItem>, boolean> >`} /> Allows you to specify the default columns that are visible in the table. If you set them to `true`, then only those will show by default. If you set them to `false`, then *all other* columns will be visible by default. *Example* ```tsx ``` ### children \ ### facetedFilters \`} /> Allows you to define pre-set filters based on an array of possible selections *Example* ```tsx ``` ### rowActions \>[]`} /> Allows you to specify additional "actions" that will be made available in the "actions" column. By default, the actions column includes all bulk actions defined in the `bulkActions` prop. ### transformData \ any[]`} /> Allows the returned list query data to be transformed in some way. This is an advanced feature that is not often required. ### setTableOptions \) => TableOptions`} /> Allows you to directly manipulate the TanStack Table `TableOptions` object before the table is created. And advanced option that is not often required. ### bulkActions \BulkActionsInput`} /> Bulk actions are actions that can be applied to one or more table rows, and include things like * Deleting the rows * Assigning the rows to another channel * Bulk editing some aspect of the rows See the [BulkAction](/current/core/reference/dashboard/list-views/bulk-actions#bulkaction) docs for an example of how to build the component. *Example* ```tsx ``` ### registerRefresher \ Register a function that allows you to assign a refresh function for this list. The function can be assigned to a ref and then called when the list needs to be refreshed. ### onReorder \ void | Promise`} /> Callback when items are reordered via drag and drop. Only applies to top-level items. When provided, enables drag-and-drop functionality. ### disableDragAndDrop \ When true, drag and drop will be disabled. This will only have an effect if the onReorder prop is also set Useful when filtering or searching. Defaults to false. Only relevant when `onReorder` is provided.