Skip to content

Commit 61bc356

Browse files
tailor-docs-bot[bot]tailor-docs-bot[bot]
committed
Update App Shell pages
1 parent 2d841b8 commit 61bc356

4 files changed

Lines changed: 41 additions & 23 deletions

File tree

‎docs/app-shell/components/data-table.md‎

Lines changed: 30 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -142,14 +142,14 @@ function JournalsPage() {
142142

143143
`DataTable` is a namespace object. All sub-components read state from `DataTable.Root` via context.
144144

145-
| Sub-component | Description |
146-
| ---------------------- | ----------------------------------------------------------------------------------------------------------------- |
147-
| `DataTable.Root` | Context provider. Wraps all other sub-components. Required. |
148-
| `DataTable.Table` | Renders the `<table>` with headers and body. Required. |
149-
| `DataTable.Toolbar` | Container for toolbar content (e.g. filters, column visibility). Optional. |
150-
| `DataTable.Filters` | Auto-generated filter chips from column filter configs. Requires `control` from `useCollectionVariables`. |
151-
| `DataTable.Footer` | Footer container for pagination and other footer content. Optional. |
152-
| `DataTable.Pagination` | Pre-built pagination controls. Requires `control` from `useCollectionVariables`. Place inside `DataTable.Footer`. |
145+
| Sub-component | Description |
146+
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
147+
| `DataTable.Root` | Context provider. Wraps all other sub-components. Required. |
148+
| `DataTable.Table` | Renders the `<table>` with headers and body. Required. |
149+
| `DataTable.Toolbar` | Container for toolbar content (e.g. filters, column visibility). Optional. |
150+
| `DataTable.Filters` | Auto-generated filter chips from column filter configs. Requires `control` from `useCollectionVariables`. |
151+
| `DataTable.Footer` | Footer container for pagination and other footer content. Optional. |
152+
| `DataTable.Pagination` | Pre-built pagination controls with optional row count and selection info. Requires `control` from `useCollectionVariables`. Place inside `DataTable.Footer`. |
153153

154154
### `DataTable.Root` Props
155155

@@ -165,6 +165,17 @@ function JournalsPage() {
165165
| ----------------- | ---------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
166166
| `pageSizeOptions` | `number[]` | — | Available page-size options. When provided, a page-size switcher is rendered. First/Last buttons are shown only when the backend returns a `total` count. |
167167

168+
`DataTable.Pagination` automatically displays a row count and selection info text on the left side of the pagination bar based on context state:
169+
170+
| Condition | Displayed text |
171+
| ----------------------------------------- | ------------------------ |
172+
| `total` is provided | `X row(s)` |
173+
| Rows selected and `total` is provided | `Y of X row(s) selected` |
174+
| Rows selected and `total` is not provided | `Y row(s) selected` |
175+
| No selection enabled and no `total` | _(nothing displayed)_ |
176+
177+
Row selection is enabled by providing `onSelectionChange` to `useDataTable`. The `total` value comes from `DataTableData.total`.
178+
168179
## `useDataTable`
169180

170181
Creates the table state object to pass to `DataTable.Root`.
@@ -180,16 +191,17 @@ const table = useDataTable({
180191

181192
### Options
182193

183-
| Option | Type | Description |
184-
| ------------------- | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
185-
| `columns` | `Column<TRow>[]` | Column definitions. Required. |
186-
| `data` | `DataTableData<TRow> \| undefined` | Fetched data. Pass `undefined` while loading. |
187-
| `loading` | `boolean` | When `true`, renders a loading skeleton. |
188-
| `error` | `Error \| null` | When set, renders an error message in the table body. |
189-
| `control` | `CollectionControl` | Collection control from `useCollectionVariables()`. Required for `DataTable.Pagination` and `DataTable.Filters`. |
190-
| `onClickRow` | `(row: TRow) => void` | Called when the user clicks a row. Adds a pointer cursor to rows. |
191-
| `rowActions` | `RowAction<TRow>[]` | Per-row action items rendered in a kebab-menu column. The column is omitted when empty or not provided. |
192-
| `onSelectionChange` | `(ids: string[]) => void` | Called with selected row IDs on change. Providing this enables the checkbox column. Rows must have a string `id`. |
194+
| Option | Type | Description |
195+
| ------------------- | ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
196+
| `columns` | `Column<TRow>[]` | Column definitions. Required. |
197+
| `data` | `DataTableData<TRow> \| undefined` | Fetched data. Pass `undefined` while loading. |
198+
| `loading` | `boolean` | When `true`, renders a loading skeleton. |
199+
| `error` | `Error \| null` | When set, renders an error message in the table body. |
200+
| `control` | `CollectionControl` | Collection control from `useCollectionVariables()`. Required for `DataTable.Pagination` and `DataTable.Filters`. |
201+
| `onClickRow` | `(row: TRow) => void` | Called when the user clicks a row. Adds a pointer cursor to rows. |
202+
| `rowActions` | `RowAction<TRow>[]` | Per-row action items rendered in a kebab-menu column. The column is omitted when empty or not provided. |
203+
| `onSelectionChange` | `(ids: string[]) => void` | Called with selected row IDs on change. Providing this enables the checkbox column. Rows must have a string `id`. |
204+
| `sort` | `false \| { multiple?: boolean }` | Sort behaviour. `false` disables sorting entirely. `{ multiple: true }` enables multi-column sorting. Omit or pass `{}` for single-column sort (default). |
193205

194206
### `DataTableData`
195207

‎docs/app-shell/components/default-sidebar.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ function Layout() {
7878

7979
## Features
8080

81-
- **Auto-Navigation**: Automatically renders all modules and resources from AppShell
81+
- **Auto-Navigation**: Automatically renders all modules and resources from AppShell, including the root module (path `""` or `"/"`) when defined. When a `rootComponent` is passed to `AppShell` without an explicit root module, a synthetic root entry is injected with a localized `"Home"` title.
8282
- **Search Entry**: Always renders a **Search** button at the top of the navigation menu that opens the CommandPalette (equivalent to `Cmd+K` / `Ctrl+K`). This is available regardless of whether `searchSources` are configured on `AppShell`.
8383
- **Active State**: Highlights the current route
8484
- **Collapsible Groups**: Supports nested resource groups

‎docs/app-shell/components/select.md‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -126,13 +126,17 @@ const fetcher: SelectAsyncFetcher<Fruit> = async ({ signal }) => {
126126

127127
Accepts all the same props as `Select` except `items`, plus:
128128

129-
| Prop | Type | Default | Description |
130-
| ------------- | ----------------------- | -------------- | ----------------------------------------------- |
131-
| `fetcher` | `SelectAsyncFetcher<T>` | - | Fetcher called each time the dropdown is opened |
132-
| `loadingText` | `string` | `"Loading..."` | Text shown while loading |
129+
| Prop | Type | Default | Description |
130+
| ---------------------- | ----------------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
131+
| `fetcher` | `SelectAsyncFetcher<T>` | - | Fetcher called each time the dropdown is opened |
132+
| `loadingText` | `string` | `"Loading..."` | Text shown while loading |
133+
| `modal` | `boolean` | `false` | Whether the select traps focus (modal behavior). Set to `true` when rendering inside a `Dialog` or `Sheet` to preserve focus-trap. |
134+
| `alignItemWithTrigger` | `boolean` | `false` | Whether to align the selected item with the trigger when the dropdown opens. |
133135

134136
> **Note:** `Select.Async` does not support `ItemGroup<T>[]` — the fetcher must return a flat array.
135137
138+
> **Limitation:** `Select.Async` defaults to `modal={false}` and `alignItemWithTrigger={false}` to work around a Base UI scroll-lock bug with dynamically loaded items. As a result, it may not function correctly inside focus-trapping containers such as `Dialog` or `Sheet` — the focus trap can block interaction with the dropdown, or the portal may render outside the modal's visible area. If you need an async dropdown inside a `Dialog` or `Sheet`, prefer [`Combobox.Async`](combobox) which uses Popover-based positioning and does not have this constraint.
139+
136140
### SelectAsyncFetcher
137141

138142
```ts

‎docs/app-shell/components/sidebar-item.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,8 @@ const dashboardModule = defineModule({
5959
// Renders as: Dashboard
6060
```
6161

62+
For the root path (`/` or `""`), when no `meta.title` is set, the title falls back to the localized string `"Home"` (English) or `"ホーム"` (Japanese).
63+
6264
### Icon Resolution
6365

6466
Icons are resolved from the module's `meta.icon`:

0 commit comments

Comments
 (0)