---
url: "https://vueda.dev/v3/reference/theming/keys/ViewList.md"
title: "ViewList"
---
# ViewList
Source: `client/lib/theme/vueda-tailwind/views/index.js`
> Class forwarded to the `selected_` checkbox column on the embedded [ObjectsGrid](/v3/reference/theming/keys/ObjectsGrid.md). Collapses the column to `w-0` at the `lg+` table breakpoint so card layouts keep room for the selection toggle while the table layout absorbs it into the row chrome. The breakpoint is hard-coded rather than derived from the `tableBreakpoint` prop because Tailwind purges classes it cannot see at build time; keep this aligned with the prop default.
Vue component: [ViewList](/v3/reference/api/vue/ViewList.md)
| Slot | Default classes | Description |
| --- | --- | --- |
| [selectedCheckbox](/v3/reference/theming/keys/ViewList.md#theme-key-ViewList-selectedCheckbox) | `lg:w-0` | Class forwarded to the `selected_` checkbox column on the embedded [ObjectsGrid](/v3/reference/theming/keys/ObjectsGrid.md). Collapses the column to `w-0` at the `lg+` table breakpoint so card layouts keep room for the selection toggle while the table layout absorbs it into the row chrome. The breakpoint is hard-coded rather than derived from the `tableBreakpoint` prop because Tailwind purges classes it cannot see at build time; keep this aligned with the prop default. |
| [searchInput](/v3/reference/theming/keys/ViewList.md#theme-key-ViewList-searchInput) | `lg:max-w-[30ch]` | Class forwarded to the [InputGroupInput](/v3/reference/theming/keys/InputGroupInput.md) inside the search slot. Caps the input at 30ch on `lg+` so the search field does not consume the entire control bar on wide viewports. |
| [bulkActionButton](/v3/reference/theming/keys/ViewList.md#theme-key-ViewList-bulkActionButton) | `grow sm:grow-0` | Per-button class applied to bulk-action `LinkModelView` entries inside the bulk-actions strip. `grow` on narrow viewports lets each button claim its share of the row width; `sm:grow-0` reverts to natural width once the row can hold the buttons inline. |
| [targetlessActionButton](/v3/reference/theming/keys/ViewList.md#theme-key-ViewList-targetlessActionButton) | | Per-button class applied to targetless-action entries rendered in the [PageTitle.buttons](/v3/reference/theming/keys/PageTitle.md#theme-key-PageTitle-buttons) cluster. Empty by default; the buttons inherit the [PageTitle](/v3/reference/theming/keys/PageTitle.md) cluster layout and only need an override when a consumer wants action-specific chrome. |
| [filterControls](/v3/reference/theming/keys/ViewList.md#theme-key-ViewList-filterControls) | `flex items-center gap-2` | Left cluster of the under-actions bar: the add-filter trigger (teleported in from [FilterGroup](/v3/reference/theming/keys/FilterGroup.md)) and the mobile sort affordance, opposite the right-aligned [ViewList.listControlBar](/v3/reference/theming/keys/ViewList.md#theme-key-ViewList-listControlBar). |
| [filterTriggerZone](/v3/reference/theming/keys/ViewList.md#theme-key-ViewList-filterTriggerZone) | `contents` | Teleport landing zone for the FilterGroup add-filter trigger. `contents` so the teleported trigger participates directly in the [ViewList.filterControls](/v3/reference/theming/keys/ViewList.md#theme-key-ViewList-filterControls) flex row rather than nesting in an extra box. |
| [objectsGrid](/v3/reference/theming/keys/ViewList.md#theme-key-ViewList-objectsGrid) | `w-full rounded-none !shadow-none` | Class forwarded to the embedded [ObjectsGrid.root](/v3/reference/theming/keys/ObjectsGrid.md#theme-key-ObjectsGrid-root). Suppresses the grid's own card edge and radius so the ViewList strips above and below own the visible chrome; the grid renders as a flush slab between the filter strip and the pagination strip. The edge is the `hairline` inset box-shadow, not a border, so it takes `!shadow-none`: a plain `shadow-none` and `hairline` are both single-class utilities, and stylesheet order, not array order, would pick the winner. |
| [underActionsBar](/v3/reference/theming/keys/ViewList.md#theme-key-ViewList-underActionsBar) | 2 classes | Strip beneath the title row that holds the search input and the column-hiding select. Card-toned with a bottom hairline; shares the page-chrome rhythm with the title row above and the [NavigationPaginationBar](/v3/reference/theming/keys/NavigationPaginationBar.md) below, so the chrome reads as a matched frame around the grid. |
| [bulkActionsBar](/v3/reference/theming/keys/ViewList.md#theme-key-ViewList-bulkActionsBar) | 2 classes | Bulk-actions strip that surfaces once one or more rows are selected. 6 %-mix primary fill and 12 px / 500 type so it reads as an active selection band, not a passive section. Sits in the sticky-stack bottom zone just above the [PaginationFooter](/v3/reference/theming/keys/PaginationFooter.md); the top hairline separates it from the grid above, mirroring the pagination strip's rhythm so the chrome below the grid reads as a matched pair. |
| [selectionCount](/v3/reference/theming/keys/ViewList.md#theme-key-ViewList-selectionCount) | `flex items-center gap-2` | Selection read-out at the leading edge of the bulk-actions strip ("✓ N selected"). Inline flex row that holds the check glyph, the count, and the trailing word; sits before [ViewList.actionButtonGroupBar](/v3/reference/theming/keys/ViewList.md#theme-key-ViewList-actionButtonGroupBar) so the count anchors the band. |
| [selectionCountIcon](/v3/reference/theming/keys/ViewList.md#theme-key-ViewList-selectionCountIcon) | `text-primary-text` | Check glyph leading the selection read-out. Tinted `--primary` so the confirm mark carries the accent while the surrounding count text stays in the strip's `--foreground` tone. |
| [selectionCountValue](/v3/reference/theming/keys/ViewList.md#theme-key-ViewList-selectionCountValue) | `font-semibold tabular-nums` | The numeric count inside the selection read-out. `font-semibold` lifts it one weight above the strip's 500 body so the figure reads first; `tabular-nums` keeps its width stable as the selection grows. |
| [actionButtonGroupBar](/v3/reference/theming/keys/ViewList.md#theme-key-ViewList-actionButtonGroupBar) | `flex flex-wrap gap-1 2xl:gap-2 w-full sm:w-fit sm:max-w-max` | Button cluster inside the bulk-actions strip. Wraps so a large action menu folds across rows rather than overflowing the strip; `sm:w-fit sm:max-w-max` snaps the cluster to its content width once the viewport can hold all buttons inline. |
| [listControlBar](/v3/reference/theming/keys/ViewList.md#theme-key-ViewList-listControlBar) | `flex flex-row gap-1 2xl:gap-2 grow sm:grow-0 sm:ml-auto` | Right-aligned control cluster inside [ViewList.underActionsBar](/v3/reference/theming/keys/ViewList.md#theme-key-ViewList-underActionsBar) (search input + columns select). From `sm` up, `ml-auto` pushes the cluster to the end of the strip so the title row above and this row align on the right. Below `sm` the strip wraps the cluster onto its own row, where a right-pushed cluster would leave a ragged gap on the left, so it grows to the full row instead. `grow` and `ml-auto` do not combine: an auto margin absorbs the free space before `flex-grow` can claim it, which is why the two swap at the breakpoint rather than stack. |
| [columnTotalCell](/v3/reference/theming/keys/ViewList.md#theme-key-ViewList-columnTotalCell) | `border-t-2` | Cell class for the column-totals row appended below the body rows when any column declares a total. The 2 px top border separates the totals row from the data rows above it; the cell otherwise inherits [ObjectsGridBodyCell](/v3/reference/theming/keys/ObjectsGridBodyCell.md) chrome. |
## selectedCheckbox
> Class forwarded to the `selected_` checkbox column on the embedded [ObjectsGrid](/v3/reference/theming/keys/ObjectsGrid.md). Collapses the column to `w-0` at the `lg+` table breakpoint so card layouts keep room for the selection toggle while the table layout absorbs it into the row chrome. The breakpoint is hard-coded rather than derived from the `tableBreakpoint` prop because Tailwind purges classes it cannot see at build time; keep this aligned with the prop default.
Default classes:
`lg:w-0`
Source: `client/lib/theme/vueda-tailwind/views/ViewList.theme.js:17`
## searchInput
> Class forwarded to the [InputGroupInput](/v3/reference/theming/keys/InputGroupInput.md) inside the search slot. Caps the input at 30ch on `lg+` so the search field does not consume the entire control bar on wide viewports.
Default classes:
`lg:max-w-[30ch]`
Source: `client/lib/theme/vueda-tailwind/views/ViewList.theme.js:21`
## bulkActionButton
> Per-button class applied to bulk-action `LinkModelView` entries inside the bulk-actions strip. `grow` on narrow viewports lets each button claim its share of the row width; `sm:grow-0` reverts to natural width once the row can hold the buttons inline.
Default classes:
`grow sm:grow-0`
Source: `client/lib/theme/vueda-tailwind/views/ViewList.theme.js:25`
## targetlessActionButton
> Per-button class applied to targetless-action entries rendered in the [PageTitle.buttons](/v3/reference/theming/keys/PageTitle.md#theme-key-PageTitle-buttons) cluster. Empty by default; the buttons inherit the [PageTitle](/v3/reference/theming/keys/PageTitle.md) cluster layout and only need an override when a consumer wants action-specific chrome.
Source: `client/lib/theme/vueda-tailwind/views/ViewList.theme.js:29`
## filterControls
> Left cluster of the under-actions bar: the add-filter trigger (teleported in from [FilterGroup](/v3/reference/theming/keys/FilterGroup.md)) and the mobile sort affordance, opposite the right-aligned [ViewList.listControlBar](/v3/reference/theming/keys/ViewList.md#theme-key-ViewList-listControlBar).
Default classes:
`flex items-center gap-2`
Source: `client/lib/theme/vueda-tailwind/views/ViewList.theme.js:33`
## filterTriggerZone
> Teleport landing zone for the FilterGroup add-filter trigger. `contents` so the teleported trigger participates directly in the [ViewList.filterControls](/v3/reference/theming/keys/ViewList.md#theme-key-ViewList-filterControls) flex row rather than nesting in an extra box.
Default classes:
`contents`
Source: `client/lib/theme/vueda-tailwind/views/ViewList.theme.js:37`
## objectsGrid
> Class forwarded to the embedded [ObjectsGrid.root](/v3/reference/theming/keys/ObjectsGrid.md#theme-key-ObjectsGrid-root). Suppresses the grid's own card edge and radius so the ViewList strips above and below own the visible chrome; the grid renders as a flush slab between the filter strip and the pagination strip. The edge is the `hairline` inset box-shadow, not a border, so it takes `!shadow-none`: a plain `shadow-none` and `hairline` are both single-class utilities, and stylesheet order, not array order, would pick the winner.
Default classes:
`w-full rounded-none !shadow-none`
Source: `client/lib/theme/vueda-tailwind/views/ViewList.theme.js:41`
## underActionsBar
> Strip beneath the title row that holds the search input and the column-hiding select. Card-toned with a bottom hairline; shares the page-chrome rhythm with the title row above and the [NavigationPaginationBar](/v3/reference/theming/keys/NavigationPaginationBar.md) below, so the chrome reads as a matched frame around the grid.
Default classes:
```text
w-full flex items-center flex-wrap gap-3 px-5 py-3
border-b-hairline bg-card text-foreground
```
Source: `client/lib/theme/vueda-tailwind/views/ViewList.theme.js:45`
## bulkActionsBar
> Bulk-actions strip that surfaces once one or more rows are selected. 6 %-mix primary fill and 12 px / 500 type so it reads as an active selection band, not a passive section. Sits in the sticky-stack bottom zone just above the [PaginationFooter](/v3/reference/theming/keys/PaginationFooter.md); the top hairline separates it from the grid above, mirroring the pagination strip's rhythm so the chrome below the grid reads as a matched pair.
Default classes:
```text
w-full flex items-center flex-wrap gap-[10px] px-5 py-[10px]
border-t-hairline bg-primary/[0.06] text-foreground text-[12px] font-medium
```
Source: `client/lib/theme/vueda-tailwind/views/ViewList.theme.js:49`
## selectionCount
> Selection read-out at the leading edge of the bulk-actions strip ("✓ N selected"). Inline flex row that holds the check glyph, the count, and the trailing word; sits before [ViewList.actionButtonGroupBar](/v3/reference/theming/keys/ViewList.md#theme-key-ViewList-actionButtonGroupBar) so the count anchors the band.
Default classes:
`flex items-center gap-2`
Source: `client/lib/theme/vueda-tailwind/views/ViewList.theme.js:56`
## selectionCountIcon
> Check glyph leading the selection read-out. Tinted `--primary` so the confirm mark carries the accent while the surrounding count text stays in the strip's `--foreground` tone.
Default classes:
`text-primary-text`
Source: `client/lib/theme/vueda-tailwind/views/ViewList.theme.js:60`
## selectionCountValue
> The numeric count inside the selection read-out. `font-semibold` lifts it one weight above the strip's 500 body so the figure reads first; `tabular-nums` keeps its width stable as the selection grows.
Default classes:
`font-semibold tabular-nums`
Source: `client/lib/theme/vueda-tailwind/views/ViewList.theme.js:64`
## actionButtonGroupBar
> Button cluster inside the bulk-actions strip. Wraps so a large action menu folds across rows rather than overflowing the strip; `sm:w-fit sm:max-w-max` snaps the cluster to its content width once the viewport can hold all buttons inline.
Default classes:
`flex flex-wrap gap-1 2xl:gap-2 w-full sm:w-fit sm:max-w-max`
Source: `client/lib/theme/vueda-tailwind/views/ViewList.theme.js:68`
## listControlBar
> Right-aligned control cluster inside [ViewList.underActionsBar](/v3/reference/theming/keys/ViewList.md#theme-key-ViewList-underActionsBar) (search input + columns select). From `sm` up, `ml-auto` pushes the cluster to the end of the strip so the title row above and this row align on the right. Below `sm` the strip wraps the cluster onto its own row, where a right-pushed cluster would leave a ragged gap on the left, so it grows to the full row instead. `grow` and `ml-auto` do not combine: an auto margin absorbs the free space before `flex-grow` can claim it, which is why the two swap at the breakpoint rather than stack.
Default classes:
`flex flex-row gap-1 2xl:gap-2 grow sm:grow-0 sm:ml-auto`
Source: `client/lib/theme/vueda-tailwind/views/ViewList.theme.js:72`
## columnTotalCell
> Cell class for the column-totals row appended below the body rows when any column declares a total. The 2 px top border separates the totals row from the data rows above it; the cell otherwise inherits [ObjectsGridBodyCell](/v3/reference/theming/keys/ObjectsGridBodyCell.md) chrome.
Default classes:
`border-t-2`
Source: `client/lib/theme/vueda-tailwind/views/ViewList.theme.js:76`