Headless / Collections

Data table

Build collection table on your collection's schema, query and permissions.

76 public parts · 5examples

@slices.sh/collection/headlessView as Markdown ↗

Your design. Our behavior.

Explore the tree to see what each part controls. Gates reveal the relevant state; roots outline their scope.

Behavior / inputGateGenericRenderer · not headlessScope

COMPONENT ANATOMYHover · focus · tap

ONE POSSIBLE DESIGNStatic preview

Collection.Root · Scope

Collection.RootThe root, and the parts that choose what is drawn under it: one of several views, the data a view needs, and one of two screens by width.

Filter records Record detail Create a record Select and edit records Kanban board Hierarchical records

Installation

Choose what your component needs. Run these commands in an initialized Next.js app.

Before you start

The steps below run in a Next.js app with shadcn set up (it has a components.json). In an existing Next.js app, such as one from create-next-app, set shadcn up first:

npx shadcn@latest init -t next -b base -p nova

Or start fresh: the slices CLI creates the app and sets it up.

npx slices.sh install

Install the service registry

Adds services/index.ts, which import "@/services" loads. A provider setup writes the same file, so skip this if your app has one.

npx add services

Install the headless library

npm

Add the React parts to your app, then compose them with your own elements.

npm install @slices.sh/collection@^0.1.6

Import from @slices.sh/collection/headless.

Install the service

Connect the parts to a provider. Skip this step if this service is already configured in your app.

Provider

npx add collection.memory

Adds service configuration and API routes to your app, with the provider dependencies. For a headless composition, add import "@/services" after "use client".

The slices CLI installs the service and provisions its required resources in one command.

Provider setup notes

Rows are lost when the server restarts, and live updates reach only watchers in the process that wrote. Move on with npx shadcn@latest add @slices/collection.mongodb (or -neon, -supabase): services/collection/*.config.ts and rules.ts are yours and stay.

Only for “One owner's records”: npm install @slices.sh/auth@^0.1.10

Start small

Parts bring the behavior. Use their default elements, or supply your own with render.

example.tsx

"use client"// services/index.ts comes from https://slices.sh/r/services.json (or any provider setup)import "@/services"import { Collection } from "@slices.sh/collection/headless"import type { CollectionSchema } from "@slices.sh/collection/services/types"export function Example({ schema }: { schema: CollectionSchema }) {  return (    <Collection.Root collection={schema.collection} schema={schema}>      <Collection.Grid render={<table />}>        <tbody>          <Collection.Row render={<tr />}>            <Collection.Cell render={<td />}>              <Collection.Value />            </Collection.Cell>          </Collection.Row>        </tbody>      </Collection.Grid>      <Collection.Empty>No projects yet.</Collection.Empty>    </Collection.Root>  )}

The schema below, saved under services/collection/schemas/, defines the collection and its columns. Row and Cell repeat for you.

services/collection/schemas/projects.ts

import { defineCollection } from "@slices.sh/collection/services/define-collection"export const projects = defineCollection({  collection: "projects",  title: "Projects",  singular: "Project",  fields: [    { name: "name", label: "Name", type: "string", example: "Website redesign", primary: true, searchable: true, sortable: true, filterable: false },    { name: "status", label: "Status", type: "enum", options: ["todo", "doing", "done"], example: "doing", primary: false, searchable: false, sortable: true, filterable: true },    { name: "due", label: "Due", type: "date", example: "2026-11-01", primary: false, searchable: false, sortable: true, filterable: true },  ],})

The schema is the registration. The services/collection/default.config.ts a collection setup writes collects every file in services/collection/schemas/, so there is nothing to add to it. A config you wrote yourself lists it: collection({ provider, collections: [projects] }).

app/page.tsx

import { Example } from "@/components/example"import { projects } from "@/services/collection/schemas/projects"export default function Page() {  return <Example schema={projects} />}

Hands the schema to the example, which reads its columns from it.

API reference

Every public part used by this experience is listed below. Gates render children without adding an element. Element parts accept native element props and render; function children receive the state declared in their props. Scopes provide context rather than a visual element.

Collection.Rootscope

The root, and the parts that choose what is drawn under it: one of several views, the data a view needs, and one of two screens by width.

Props

25 documented props

Collection.Root props
Prop	Type	Default
`treeParent`	`string`	`—`
`view`	`"table" \| "list" \| "grid" \| "board" \| "tree" \| "detail"`	`—`
`views`	`readonly CollectionViewValue[]`	`—`
`cardSize`	`"small" \| "medium" \| "large"`	`—`
`savedViews`	`readonly SavedView[]`	`—`
`onSaveView`	`(view: SavedView) => void \| Promise<void>`	`—`
`groupBy`	`string \| null`	`—`
`onGroupByChange`	`(field: string \| null) => void`	`—`
`enabled` Left out or `true`: required, and a missing service throws. `"optional"`: renders its children with no rows, and every part inside renders nothing. `false`: off. A capability name (`"live"`) requires the service and that capability.	`Enabled`	`—`
`config` The collection config, `"default"` when left out. `collection` names one inside it.	`string`	`—`
`groupSumFields`	`readonly string[]`	`—`
`cardSizing`	`boolean`	`false`
`lanes`	`boolean`	`false`
`collection`Required	`string`	`—`
`schema`Required	`CollectionSchema`	`—`
`density`	`"compact" \| "comfortable" \| "spacious"`	`—`
`onDensityChange`	`(density: DensityValue) => void`	`—`
`palette`	`boolean`	`false`
`pageSize`	`number`	`10`
`infinite`	`boolean`	`false`
`live`	`boolean`	`false`
`urlState` Whether the search, the sort and the filter travel in the address bar.	`boolean`	`true`
`search` `false` when nothing on screen searches: no search applies, from the address or a saved view.	`boolean`	`true`
`filters` `false` when nothing on screen filters: no filter applies, from the address or a saved view.	`boolean`	`true`
`children` Content rendered inside this part.	`ReactNode`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/root.tsx

Collection.Layoutcontent

One of two screens, by how much room there is. A gate rather than a breakpoint class, because a phone does not want the same *elements* as a desktop with smaller text: eight columns at 375px is a sideways scroll nobody asked for, and the answer is cards. A class can hide a table; only a gate can stop building one.

Required scope

Collection.Layout must be inside <Collection.Root>.

Props

3 documented props

Collection.Layout props
Prop	Type	Default
`mode`Required	`"wide" \| "narrow"`	`—`
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/layout.tsx

Collection.Viewgate

The root, and the parts that choose what is drawn under it: one of several views, the data a view needs, and one of two screens by width.

Required scope

Collection.View requires Collection.Root.

Props

2 documented props

Collection.View props
Prop	Type	Default
`name`Required	`CollectionViewValue \| readonly CollectionViewValue[]`	`—`
`children` Content rendered inside this part.	`ReactNode`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/view.tsx

Collection.ViewDatascope

Presentation-specific reads stay below the common query, selection and open-record root.

Required scope

ViewData requires Collection.Root.

Props

2 documented props

Collection.ViewData props
Prop	Type	Default
`parent`	`string`	`"parent"`
`children` Content rendered inside this part.	`ReactNode`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/view-data.tsx

CollectionPointer.Rootscope

The isolated pointer engine: a 5 px or 200 ms activation with a mouse, a 250 ms press on touch, and a drop that becomes one move write (group, and position when orderBy is numeric). A refused write rolls the card back and returns focus to it.

Required scope

Pointer.Root requires Collection.Root.

Props

1 documented props

CollectionPointer.Root props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/collection-pointer/root.tsx

Collection.Gridcontent · <table>

Row focus is the default. Cell mode preserves the existing APG grid keyboard.

Props

4 documented props · Native <table> attributes supported

Collection.Grid props
Prop	Type	Default
`focus`	`"row" \| "cell"`	`"row"`
`selectable`	`boolean`	`false`
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/grid.tsx

Collection.Viewportcontent · <div>

The box a long list scrolls inside, and the only thing in the family that decides a row is not worth drawing. Without it every loaded row is in the DOM: a board of five thousand cards is five thousand card subtrees, and a `dragover` measured every one of them. With it the DOM holds a window and two empty spacers, and `pageSize` stops being a limit on what a browser can take. Inside a lane it counts that lane's cards rather than the board's, so each lane scrolls on its own — which is what a board is. Rows are taken to be one height, declared as `rowHeight`: a list of cards whose height depends on their content should not virtualize, and saying so is cheaper than measuring every row and being wrong about the ones not drawn yet.

Required scope

Collection.Viewport requires Collection.Root.

Collection.Viewport must be inside <Collection.Root>.

Props

5 documented props · Native <div> attributes supported

Collection.Viewport props
Prop	Type	Default
`grouped` Disable for an intrinsically hierarchical view or a custom renderer without Group parts.	`boolean`	`true`
`rowHeight` What one row is worth in pixels, which only the screen knows.	`number \| Readonly<Record<DensityValue, number>>`	`—`
`threshold` Under this many rows the list is drawn whole.	`number`	`—`
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/viewport.tsx

Collection.Rowcontent · <tr>

The row surface of a list, grid or board, the row repeated per record, the cell repeated per field (all, primary, media or details, or one field by name) and the value formatted by field type. Value renders nothing when the field is empty.

Required scope

Collection.Row must be inside <Collection.Root>.

Collection.Row requires Collection.Root.

Props

3 documented props · Native <tr> attributes supported

Collection.Row props
Prop	Type	Default
`openOnClick`	`boolean`	`false`
`children` Content rendered inside this part.	`ReactNode \| ((state: { selected: boolean; dragging: boolean }) => ReactNode)`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/row.tsx

Collection.RowSurfacecontent · <div>

A grid whose records, rather than cells, hold its roving tab stop.

Required scope

Collection.RowSurface requires Collection.Root.

Props

6 documented props · Native <div> attributes supported

Collection.RowSurface props
Prop	Type	Default
`defaultTag`	`"div" \| "table"`	`"div"`
`header`	`boolean`	`false`
`selectable`	`boolean`	`false`
`layout`	`"linear" \| "grid" \| "board"`	`"linear"`
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/row-surface.tsx

CollectionPointer.Rowcontent · <div>

Lane makes a lane a drop target, empty lanes included. Row registers a card as sortable within its lane and keeps the row's role, tabIndex, aria and data attributes, so the engine never replaces selection semantics.

Capability: order (positions within a lane need a numeric orderBy)

Required scope

Pointer.Row requires Collection.Row.

Pointer.Row requires Collection.Lane.

Pointer.Row requires Collection.Root.

Props

2 documented props · Native <div> attributes supported

CollectionPointer.Row props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/collection-pointer/row.tsx

Collection.Cellcontent · <td>

Required scope

Collection.Cell must be inside <Collection.Root>.

Props

4 documented props · Native <td> attributes supported

Collection.Cell props
Prop	Type	Default
`field`	`string`	`—`
`fields`	`"all" \| "primary" \| "media" \| "details"`	`—`
`children` Content rendered inside this part.	`ReactNode \| ((state: { field: SchemaField }) => ReactNode)`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/cell.tsx

Collection.Valuecontent · <img>

Required scope

Collection.Value must be inside <Collection.Row>.

Collection.Value must be inside a part that repeats over fields, like <Collection.Cell>.

Props

2 documented props · Native <img> attributes supported

Collection.Value props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: ValueState) => ReactNode)`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/value.tsx

Collection.Columncontent · <th>

A grid that holds one tab stop, headers that repeat per field with sort triggers (Shift adds a key), a switch per column, a cell spanning the table and skeleton rows for the first load only.

Required scope

Collection.Column must be inside <Collection.Root>.

Props

4 documented props · Native <th> attributes supported

Collection.Column props
Prop	Type	Default
`field`	`string`	`—`
`fields`	`"all" \| "primary" \| "media" \| "details"`	`—`
`children` Content rendered inside this part.	`ReactNode \| ((state: ColumnState) => ReactNode)`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/column.tsx

Collection.ColumnLabelcontent

A grid that holds one tab stop, headers that repeat per field with sort triggers (Shift adds a key), a switch per column, a cell spanning the table and skeleton rows for the first load only.

Required scope

Collection.ColumnLabel must be inside a part that repeats over fields, like <Collection.Column>.

Props

2 documented props

Collection.ColumnLabel props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/column-label.tsx

Collection.Unsortablegate

A grid that holds one tab stop, headers that repeat per field with sort triggers (Shift adds a key), a switch per column, a cell spanning the table and skeleton rows for the first load only.

Required scope

Collection.Unsortable must be inside <Collection.Column>.

Props

1 documented props

Collection.Unsortable props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/unsortable.tsx

Collection.SortTriggeraction · <button>

Sorts by the field it is inside: unsorted, ascending, descending, unsorted again. Shift-clicking adds a key instead of replacing the one before it, which is what `useSort`'s `additive` was written for and what nothing ever passed — so a table that could sort by status and then by amount could only ever be asked for one of them. Plain clicking still replaces, because a table that piled up keys would answer a question nobody asked by the third click. `rank` is how a pattern says which key is which: state rather than a data attribute, because the shared attribute vocabulary is not this family's to widen. A screen reader hears the direction from `aria-sort` on the header cell; the order is a number beside the icon, which is what every grid does with it.

Required scope

Collection.SortTrigger must be inside <Collection.Column>.

Collection.SortTrigger must be inside <Collection.Root>.

Props

2 documented props · Native <button> attributes supported

Collection.SortTrigger props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: SortState) => ReactNode)`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/sort-trigger.tsx

Collection.Searchinput · <input>

A search box over the collection's searchable fields, with data-pending until the rows answer. It renders nothing when no field is searchable or the provider cannot search.

Capability: search

Required scope

Collection.Search requires Collection.Root.

Collection.Search must be inside <Collection.Root>.

Props

2 documented props · Native <input> attributes supported

Collection.Search props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/search.tsx

Collection.PageRangecontent

Which rows of the collection are on screen: "11–20 of 312". Here from the first render, before there is a range to say. Patterns draw this in an `<output>`, which is a `status` region, and a live region only announces what arrives after it is mounted — so a range that appeared together with its own first text announced nothing, and a query that matched no rows announced nothing ever, because the element was never there to say so. Empty until there is a page, like `Collection.ResultCount`. `to` is 0 while no page has arrived, which is what a caller branches on: "0–0 of 0" is a claim about an empty collection, and a page in flight is not that.

Capability: countMatching (PageNumbers, PageRange total)

Required scope

Collection.PageRange must be inside <Collection.Root>.

Props

2 documented props

Collection.PageRange props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: PageRangeState) => ReactNode)`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/page-range.tsx

Collection.PageNumbersscope

A row of page numbers, each in its own scope. Renders nothing at all when the backend did not count the rows: `pages` is `null` then, not a guess, and a pager numbered from a guess sends people to pages that are not there. Previous and Next still work in that case, which is why a numbered pager keeps them. → docs/rules/capability-honesty.md

Capability: countMatching (PageNumbers, PageRange total)

Required scope

Collection.PageNumbers must be inside <Collection.Root>.

Props

1 documented props

Collection.PageNumbers props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/page-numbers.tsx

Collection.PageNumberaction · <button>

One page, to go to. A button rather than a link, because the page is client state and never an address here. `data-state` is `current` or `other`, which is what a skin marks the one you are on by — and `aria-current` says the same thing to a screen reader, which cannot see the mark.

Capability: countMatching (PageNumbers, PageRange total)

Required scope

Collection.PageNumber must be inside <Collection.PageNumbers>.

Collection.PageNumber must be inside <Collection.Root>.

Props

2 documented props · Native <button> attributes supported

Collection.PageNumber props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { page: number; current: boolean }) => ReactNode)`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/page-number.tsx

Collection.PageGapcontent · <span>

Where a numbered pager left pages out. Hidden from a screen reader: it is a mark that some numbers are missing, which is only information to somebody who can see the row it is missing from. Reading "ellipsis" between two page numbers says nothing.

Capability: countMatching (PageNumbers, PageRange total)

Required scope

Collection.PageGap must be inside <Collection.PageNumbers>.

Props

2 documented props · Native <span> attributes supported

Collection.PageGap props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/page-gap.tsx

Collection.PrevPageaction · <button>

The range on screen, previous and next, and page numbers between them. PageNumbers renders nothing when the provider did not count, so previous and next still work; PageRange says its total as null.

Capability: countMatching (PageNumbers, PageRange total)

Required scope

Collection.PrevPage must be inside <Collection.Root>.

Props

2 documented props · Native <button> attributes supported

Collection.PrevPage props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { pending: boolean }) => ReactNode)`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/prev-page.tsx

Collection.NextPageaction · <button>

The range on screen, previous and next, and page numbers between them. PageNumbers renders nothing when the provider did not count, so previous and next still work; PageRange says its total as null.

Capability: countMatching (PageNumbers, PageRange total)

Required scope

Collection.NextPage must be inside <Collection.Root>.

Props

2 documented props · Native <button> attributes supported

Collection.NextPage props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { pending: boolean }) => ReactNode)`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/next-page.tsx

Collection.ViewOptionaction · <button>

The root, and the parts that choose what is drawn under it: one of several views, the data a view needs, and one of two screens by width.

Required scope

Collection.ViewOption requires Collection.Root.

Props

3 documented props · Native <button> attributes supported

Collection.ViewOption props
Prop	Type	Default
`value`Required	`"table" \| "list" \| "grid" \| "board" \| "tree" \| "detail"`	`—`
`children` Content rendered inside this part.	`ReactNode \| ((state: { active: boolean }) => ReactNode)`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/view-option.tsx

Collection.Display.Triggeraction · <button>

The root, its trigger and its popup.

Props

2 documented props · Native <button> attributes supported

Collection.Display.Trigger props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

Display.Trigger from @slices.sh/collection/headless/display

Source: @slices.sh/collection/src/headless/display/trigger.tsx

Collection.Display.Rootscope

The root, its trigger and its popup.

Props

1 documented props

Collection.Display.Root props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

Display.Root from @slices.sh/collection/headless/display

Source: @slices.sh/collection/src/headless/display/root.tsx

Collection.Display.Popupcontent · <div>

The root, its trigger and its popup.

Required scope

Display.Popup requires Display.Root.

Props

4 documented props · Native <div> attributes supported

Collection.Display.Popup props
Prop	Type	Default
`label`Required	`string`	`—`
`popup` The popover the options open in, which the pattern styles; it aligns to its trigger's end unless told otherwise.	`ReactElement<ComponentProps<typeof MotionPopover>>`	`—`
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

Display.Popup from @slices.sh/collection/headless/display

Source: @slices.sh/collection/src/headless/display/popup.tsx

Collection.Densityinput · <select>

Row density, and card size where the root offers it.

Required scope

Collection.Density requires Collection.Root.

Props

2 documented props · Native <select> attributes supported

Collection.Density props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/density.tsx

Collection.CardSizeinput · <select>

Row density, and card size where the root offers it.

Required scope

Collection.CardSize requires Collection.Root.

Props

2 documented props · Native <select> attributes supported

Collection.CardSize props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/card-size.tsx

Collection.WhenCardSizinggate

Row density, and card size where the root offers it.

Required scope

Collection.WhenCardSizing requires Collection.Root.

Props

1 documented props

Collection.WhenCardSizing props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/when-card-sizing.tsx

Collection.ColumnToggleaction · <button>

One switch per column, for a view-options menu. `useColumns` was written, unit-tested and imported by nothing: hiding a column needed a context, a part and a param in seven `item.json`s, and the friction of doing that seven times is why nobody did. This is the part. It also lifts the install-time cap of eight fields, which existed because a wide table with no way to narrow it is unusable. Repeats over the columns in their own order rather than the schema's, so a reorder shows. The field is in scope inside, which is what makes `Collection.ColumnLabel` work here.

Required scope

Collection.ColumnToggle must be inside <Collection.Root>.

Props

2 documented props · Native <button> attributes supported

Collection.ColumnToggle props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: ToggleState) => ReactNode)`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/column-toggle.tsx

Collection.Display.WhenSortablegate

The gate that hides sorting when a host turns it off, a toggle per sortable field (click cycles, Shift adds a key) and clearing the sort.

Required scope

Display.WhenSortable requires Collection.Root.

Props

2 documented props

Collection.Display.WhenSortable props
Prop	Type	Default
`enabled`	`boolean`	`true`
`children` Content rendered inside this part.	`ReactNode`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

Display.WhenSortable from @slices.sh/collection/headless/display

Source: @slices.sh/collection/src/headless/display/when-sortable.tsx

Collection.Display.SortFieldaction · <button>

The gate that hides sorting when a host turns it off, a toggle per sortable field (click cycles, Shift adds a key) and clearing the sort.

Required scope

Display.SortField requires Collection.Root.

Props

2 documented props · Native <button> attributes supported

Collection.Display.SortField props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: SortFieldState) => ReactNode)`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

Display.SortField from @slices.sh/collection/headless/display

Source: @slices.sh/collection/src/headless/display/sort-field.tsx

Collection.Display.ClearSortaction · <button>

The gate that hides sorting when a host turns it off, a toggle per sortable field (click cycles, Shift adds a key) and clearing the sort.

Required scope

Display.ClearSort requires Collection.Root.

Props

2 documented props · Native <button> attributes supported

Collection.Display.ClearSort props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

Display.ClearSort from @slices.sh/collection/headless/display

Source: @slices.sh/collection/src/headless/display/clear-sort.tsx

Collection.SavedViews.Rootscope

The root, the gate around everything (renders while views exist or can be saved) and the gate around writing (renders only with onSaveView).

Required scope

SavedViews.Root requires Collection.Root.

Props

3 documented props

Collection.SavedViews.Root props
Prop	Type	Default
`savedViews`	`readonly SavedView[]`	`—`
`onSaveView`	`(view: SavedView) => void \| Promise<void>`	`—`
`children` Content rendered inside this part.	`ReactNode`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

SavedViews.Root from @slices.sh/collection/headless/saved-views

Source: @slices.sh/collection/src/headless/saved-views/root.tsx

Collection.SavedViews.WhenAvailablegate

The root, the gate around everything (renders while views exist or can be saved) and the gate around writing (renders only with onSaveView).

Required scope

SavedViews.WhenAvailable requires Collection.Root.

Props

1 documented props

Collection.SavedViews.WhenAvailable props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

SavedViews.WhenAvailable from @slices.sh/collection/headless/saved-views

Source: @slices.sh/collection/src/headless/saved-views/when-available.tsx

Collection.SavedViews.Selectinput · <select>

A select of the saved views and an option per view, the marker of unsaved changes, and reset to the selected view.

Required scope

SavedViews.Select requires Collection.Root.

Props

2 documented props · Native <select> attributes supported

Collection.SavedViews.Select props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

SavedViews.Select from @slices.sh/collection/headless/saved-views

Source: @slices.sh/collection/src/headless/saved-views/select.tsx

Collection.SavedViews.Optioncontent · <option>

A select of the saved views and an option per view, the marker of unsaved changes, and reset to the selected view.

Required scope

SavedViews.Option requires Collection.Root.

Props

2 documented props · Native <option> attributes supported

Collection.SavedViews.Option props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { view: SavedView }) => ReactNode)`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

SavedViews.Option from @slices.sh/collection/headless/saved-views

Source: @slices.sh/collection/src/headless/saved-views/option.tsx

Collection.SavedViews.Unsavedcontent · <span>

A select of the saved views and an option per view, the marker of unsaved changes, and reset to the selected view.

Required scope

SavedViews.Unsaved requires Collection.Root.

Props

2 documented props · Native <span> attributes supported

Collection.SavedViews.Unsaved props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

SavedViews.Unsaved from @slices.sh/collection/headless/saved-views

Source: @slices.sh/collection/src/headless/saved-views/unsaved.tsx

Collection.SavedViews.WhenWritablegate

The root, the gate around everything (renders while views exist or can be saved) and the gate around writing (renders only with onSaveView).

Required scope

SavedViews.WhenWritable requires Collection.Root.

Props

1 documented props

Collection.SavedViews.WhenWritable props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

SavedViews.WhenWritable from @slices.sh/collection/headless/saved-views

Source: @slices.sh/collection/src/headless/saved-views/when-writable.tsx

Collection.SavedViews.Nameinput · <input>

The name of a new view, Save (or Save create for a new id) with { pending }, and the refusal, which keeps the old baseline.

Required scope

SavedViews.Name requires Collection.Root.

Props

2 documented props · Native <input> attributes supported

Collection.SavedViews.Name props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

SavedViews.Name from @slices.sh/collection/headless/saved-views

Source: @slices.sh/collection/src/headless/saved-views/name.tsx

Collection.SavedViews.Saveaction · <button>

The name of a new view, Save (or Save create for a new id) with { pending }, and the refusal, which keeps the old baseline.

Required scope

SavedViews.Save requires Collection.Root.

Props

3 documented props · Native <button> attributes supported

Collection.SavedViews.Save props
Prop	Type	Default
`create`	`boolean`	`false`
`children` Content rendered inside this part.	`ReactNode \| ((state: { pending: boolean }) => ReactNode)`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

SavedViews.Save from @slices.sh/collection/headless/saved-views

Source: @slices.sh/collection/src/headless/saved-views/save.tsx

Collection.SavedViews.Resetaction · <button>

A select of the saved views and an option per view, the marker of unsaved changes, and reset to the selected view.

Required scope

SavedViews.Reset requires Collection.Root.

Props

2 documented props · Native <button> attributes supported

Collection.SavedViews.Reset props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

SavedViews.Reset from @slices.sh/collection/headless/saved-views

Source: @slices.sh/collection/src/headless/saved-views/reset.tsx

Collection.SavedViews.Errorcontent · <p>

The name of a new view, Save (or Save create for a new id) with { pending }, and the refusal, which keeps the old baseline.

Required scope

SavedViews.Error requires Collection.Root.

Props

2 documented props · Native <p> attributes supported

Collection.SavedViews.Error props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { message: string }) => ReactNode)`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

SavedViews.Error from @slices.sh/collection/headless/saved-views

Source: @slices.sh/collection/src/headless/saved-views/error.tsx

Collection.WhenGroupablegate

Choosing the enum field rows are grouped by. WhenGroupable hides the selector when no field can group.

Required scope

Collection.WhenGroupable requires Collection.Root.

Props

2 documented props

Collection.WhenGroupable props
Prop	Type	Default
`enabled`	`boolean`	`true`
`children` Content rendered inside this part.	`ReactNode`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/when-groupable.tsx

Collection.GroupByinput · <select>

Choosing the enum field rows are grouped by. WhenGroupable hides the selector when no field can group.

Required scope

Collection.GroupBy requires Collection.Root.

Props

2 documented props · Native <select> attributes supported

Collection.GroupBy props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/group-by.tsx

Collection.GroupOptioncontent · <option>

Choosing the enum field rows are grouped by. WhenGroupable hides the selector when no field can group.

Required scope

Collection.GroupOption requires Collection.Root.

Props

2 documented props · Native <option> attributes supported

Collection.GroupOption props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { field: SchemaField }) => ReactNode)`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/group-option.tsx

Collection.GroupNonecontent · <option>

Choosing the enum field rows are grouped by. WhenGroupable hides the selector when no field can group.

Required scope

Collection.GroupNone requires Collection.Root.

Props

2 documented props · Native <option> attributes supported

Collection.GroupNone props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/group-none.tsx

Collection.Group.Rootscope

The root that repeats a section per group, its heading, the group's label and the heading's table cell.

Required scope

Group.Root requires Collection.Root.

Props

2 documented props

Collection.Group.Root props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

Group.Root from @slices.sh/collection/headless/group

Source: @slices.sh/collection/src/headless/group/root.tsx

Collection.Group.Headingcontent · <div>

The root that repeats a section per group, its heading, the group's label and the heading's table cell.

Required scope

Group.Heading requires Group.Root.

Group.Heading requires Collection.Root.

Props

3 documented props · Native <div> attributes supported

Collection.Group.Heading props
Prop	Type	Default
`table`	`boolean`	`false`
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

Group.Heading from @slices.sh/collection/headless/group

Source: @slices.sh/collection/src/headless/group/heading.tsx

Collection.Group.Labelcontent

The root that repeats a section per group, its heading, the group's label and the heading's table cell.

Required scope

Group.Label requires Group.Root.

Group.Label requires Collection.Root.

Props

2 documented props

Collection.Group.Label props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { value: string \| null; count: number \| null }) => ReactNode)`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

Group.Label from @slices.sh/collection/headless/group

Source: @slices.sh/collection/src/headless/group/label.tsx

Collection.Group.Cellcontent · <td>

The root that repeats a section per group, its heading, the group's label and the heading's table cell.

Required scope

Group.Cell requires Collection.Root.

Props

4 documented props · Native <td> attributes supported

Collection.Group.Cell props
Prop	Type	Default
`selectionColumn`	`boolean`	`false`
`actionsColumn`	`boolean`	`false`
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

Group.Cell from @slices.sh/collection/headless/group

Source: @slices.sh/collection/src/headless/group/cell.tsx

Collection.Group.Sumscontent · <span>

The group's sums over groupSumFields. A sum the provider cannot compute is null, never zero.

Capability: groupSums

Required scope

Group.Sums requires Collection.Root.

Group.Sums requires Group.Root.

Props

2 documented props · Native <span> attributes supported

Collection.Group.Sums props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: SumState) => ReactNode)`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

Group.Sums from @slices.sh/collection/headless/group

Source: @slices.sh/collection/src/headless/group/sums.tsx

CollectionToolbar.Rootscope

The root; the trigger, which renders only on a compact screen; and the content, a labelled group inline on a desktop and a popover with native focus, Escape and motion on a compact screen. A custom render element cannot remove those.

Props

1 documented props

CollectionToolbar.Root props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/collection-toolbar/root.tsx

CollectionToolbar.Triggeraction · <button>

Required scope

CollectionToolbar.Trigger requires CollectionToolbar.Root.

Props

2 documented props · Native <button> attributes supported

CollectionToolbar.Trigger props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/collection-toolbar/trigger.tsx

CollectionToolbar.Contentcontent · <div>

A custom inner renderer cannot remove the popup's native focus, Escape or Motion lifetime.

Required scope

CollectionToolbar.Content requires CollectionToolbar.Root.

Props

4 documented props · Native <div> attributes supported

CollectionToolbar.Content props
Prop	Type	Default
`label`Required	`string`	`—`
`popup` The popover the controls fold into on a narrow screen, which the pattern styles.	`ReactElement<ComponentProps<typeof MotionPopover>>`	`—`
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/collection-toolbar/content.tsx

Collection.Loadinggate

The first load, a refresh with the old rows still on screen, nothing to show (and whether search or filters caused it), the read refused, the last write refused, and a server that answers config-missing at runtime.

Required scope

Collection.Loading must be inside <Collection.Root>.

Props

1 documented props

Collection.Loading props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/loading.tsx

Collection.SkeletonRowcontent · <tr>

A grid that holds one tab stop, headers that repeat per field with sort triggers (Shift adds a key), a switch per column, a cell spanning the table and skeleton rows for the first load only.

Required scope

Collection.SkeletonRow must be inside <Collection.Root>.

Props

2 documented props · Native <tr> attributes supported

Collection.SkeletonRow props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/skeleton-row.tsx

Collection.SpanningCellcontent · <td>

A grid that holds one tab stop, headers that repeat per field with sort triggers (Shift adds a key), a switch per column, a cell spanning the table and skeleton rows for the first load only.

Required scope

Collection.SpanningCell must be inside <Collection.Root>.

Props

2 documented props · Native <td> attributes supported

Collection.SpanningCell props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/spanning-cell.tsx

Collection.Emptygate

Required scope

Collection.Empty must be inside <Collection.Root>.

Props

1 documented props

Collection.Empty props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { filtered: boolean }) => ReactNode)`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/empty.tsx

Collection.Errorgate

Required scope

Collection.Error must be inside <Collection.Root>.

Props

1 documented props

Collection.Error props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: ErrorState) => ReactNode)`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/error.tsx

Collection.WriteErrorgate

The last write this collection refused. `Collection.Error` is the *read* refusing — no rows, nothing to show. This is the other half, and it was missing: a move that the server would not take rolled the card home again and said nothing, which reads as a board that ignores you. A delete refused from a menu that has already closed said nothing either. `denied` means retrying cannot help, so the words differ: "you don't have access to these records" rather than "try again". `dismiss` closes it; so does the next write that works.

Required scope

Collection.WriteError must be inside <Collection.Root>.

Props

1 documented props

Collection.WriteError props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { message: string; denied: boolean; dismiss(): void }) => ReactNode)`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/write-error.tsx

Collection.MissingConfigurationgate

The server this collection reads from answered that it lacks configuration. The family's own name for the shared gate, with the service already chosen: a screen that draws a collection should not have to know which string a collection's routes answer with, and another service's trouble (a transcription key) is not this screen's notice.

Props

1 documented props

Collection.MissingConfiguration props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { scopes: readonly string[] }) => ReactNode)`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/missing-configuration.tsx

Collection.LoadSampleRowsaction · <button>

Inserts the rows generated from the schema's examples. It renders nothing unless the provider offers development seeding.

Capability: seed

Required scope

Collection.LoadSampleRows needs Root.

Props

2 documented props · Native <button> attributes supported

Collection.LoadSampleRows props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { pending: boolean; error: string \| null }) => ReactNode)`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/load-sample-rows.tsx

Collection.Spacercontent · <div>

The empty room a virtualized list keeps where its undrawn rows would be. Its own part, twice, rather than padding on the viewport, because a `tbody` ignores padding and a row is the only thing a table will make room for. Nothing at all when the list is drawn whole, so a short list is the same DOM it always was.

Props

3 documented props · Native <div> attributes supported

Collection.Spacer props
Prop	Type	Default
`side`Required	`"before" \| "after"`	`—`
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/spacer.tsx

Collection.LoadMoreaction · <button>

A Load more button, a sentinel that loads on scroll, the gate while a page is on its way and the gate at the end.

Required scope

Collection.LoadMore must be inside <Collection.Root>.

Props

2 documented props · Native <button> attributes supported

Collection.LoadMore props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { pending: boolean }) => ReactNode)`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/load-more.tsx

Collection.Sentinelcontent · <div>

The end of a feed, which asks for the next page by coming into view. It renders only while there is more to read, so a reader who has reached the end is not left watching a marker that will never do anything. Nothing is drawn into it: what it carries is the pending state, for a spinner a skin decides on.

Required scope

Collection.Sentinel must be inside <Collection.Root>.

Props

2 documented props · Native <div> attributes supported

Collection.Sentinel props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { pending: boolean }) => ReactNode)`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/sentinel.tsx

Collection.LoadingMoregate

While a feed is fetching the next page. Not the first load, which `Collection.Loading` is for and which the skeleton rows already stand in for: this is the one that appears under records already on screen.

Required scope

Collection.LoadingMore must be inside <Collection.Root>.

Props

1 documented props

Collection.LoadingMore props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/loading-more.tsx

Collection.Refreshinggate

While a newer answer to the same query is on its way and the old rows are still on screen. Not `Collection.Loading`, which is the first load and has skeleton rows to stand in for what is coming. This is the page turn, the search a keystroke changed, the sort somebody clicked: the rows are worth keeping and the wait is worth saying, or a table that takes a second to answer looks like one that did not hear.

Required scope

Collection.Refreshing must be inside <Collection.Root>.

Props

1 documented props

Collection.Refreshing props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/refreshing.tsx

Collection.Exhaustedgate

The end of a feed, once there is no more to read. A feed has no last page to land on, so this is the only thing that ever says the reader has seen everything. It stays away while the feed is empty: nothing read is not the end.

Required scope

Collection.Exhausted must be inside <Collection.Root>.

Props

1 documented props

Collection.Exhausted props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { count: number }) => ReactNode)`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/exhausted.tsx

Collection.Owner.Rootscope

The root holds the choice. Select is a native <select> whose value is the chosen principal, "" for none; Any is its <option value=""> for every record. The other options are Principals.PersonalOption and Principals.OrganizationOption.

Props

2 documented props

Collection.Owner.Root props
Prop	Type	Default
`defaultOwner`	`string \| null`	`null`
`children` Content rendered inside this part.	`ReactNode`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

Owner.Root from @slices.sh/collection/headless/owner

Source: @slices.sh/collection/src/headless/owner/root.tsx

Collection.Owner.Selectinput · <select>

Required scope

Collection.Owner.Select must be inside <Collection.Owner.Root>.

Props

2 documented props · Native <select> attributes supported

Collection.Owner.Select props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

Owner.Select from @slices.sh/collection/headless/owner

Source: @slices.sh/collection/src/headless/owner/select.tsx

Collection.Owner.Anycontent · <option>

Props

2 documented props · Native <option> attributes supported

Collection.Owner.Any props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`
`render` Replace the default element with your own while retaining the part’s behavior and accessibility.	`ReactElement`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

Owner.Any from @slices.sh/collection/headless/owner

Source: @slices.sh/collection/src/headless/owner/any.tsx

Collection.Owner.Rowsscope

Rows ANDs { owner } into every read below it (lists, counts, facets, live changes) and the writes beside them. Another owner remounts what is inside, so no row, page or selection leaks across.

Required scope

Collection.Owner.Rows must be inside <Collection.Owner.Root>.

Props

1 documented props

Collection.Owner.Rows props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

Owner.Rows from @slices.sh/collection/headless/owner

Source: @slices.sh/collection/src/headless/owner/rows.tsx

Collection.Owner.WhenAnygate

WhenAny renders while no owner is chosen; WhenChosen renders once one is, with { owner }.

Required scope

Collection.Owner.WhenAny must be inside <Collection.Owner.Root>.

Props

1 documented props

Collection.Owner.WhenAny props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

Owner.WhenAny from @slices.sh/collection/headless/owner

Source: @slices.sh/collection/src/headless/owner/when-any.tsx

Collection.Owner.WhenChosengate

WhenAny renders while no owner is chosen; WhenChosen renders once one is, with { owner }.

Required scope

Collection.Owner.WhenChosen must be inside <Collection.Owner.Root>.

Props

1 documented props

Collection.Owner.WhenChosen props
Prop	Type	Default
`children` Content rendered inside this part.	`ReactNode \| ((state: { owner: string }) => ReactNode)`	`—`

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports

Owner.WhenChosen from @slices.sh/collection/headless/owner

Source: @slices.sh/collection/src/headless/owner/when-chosen.tsx

When something is missing

No service configuration: Install the collection setup below and import "@/services". Required service roots report missing setup; gates do not replace that configuration.
Missing capability or parent scope: Follow each part’s context requirements and the example composition. Capability-aware controls hide when the provider cannot perform their action.

Read the setup guide →