View change notice
A quiet line above a table saying what its View lost when a field was archived or deleted. Said once, on the first load that shows it.
Playground
Change the controls to try each prop. The preview puts one item in its notice; the code lists only the props you changed.
- undefined on Salary band is paused because the field was archived · Restore field
import { ViewChangeNoticeItem } from '@/ui/view-change-notice';<ViewChangeNoticeItem field="Salary band" restoreHref="/components/add-column-and-field-editor" />Above the table
Between the toolbar and the header row, one line per change. An archived field names itself and is paused; a deleted field's sort, filter or grouping is gone.
- Filter on Salary band is paused because the field was archived · Restore field
- Sort on a deleted field was removed
| Candidate | Stage |
|---|---|
| Maya Chen | Placed |
import { Table, type TableColumn } from '@/ui/table';
import { ViewChangeNotice, ViewChangeNoticeItem } from '@/ui/view-change-notice';
type Candidate = { id: string; name: string; stage: string };
const columns: TableColumn<Candidate>[] = [
{ key: 'name', label: 'Candidate', cell: (row) => row.name },
{ key: 'stage', label: 'Stage', cell: (row) => row.stage },
];
export default function ViewChangeNoticeAboveTheTable() {
return (
<div className="flex w-full flex-col bg-surface">
<ViewChangeNotice>
<ViewChangeNoticeItem kind="filter" field="Salary band" restoreHref="#settings-fields" />
<ViewChangeNoticeItem kind="sort" />
</ViewChangeNotice>
<Table label="Candidates" columns={columns} rows={[{ id: 'c1', name: 'Maya Chen', stage: 'Placed' }]} />
</div>
);
}Someone who can't manage fields
Restore field shows only to people who can manage fields, and only for an archived field. Everyone else reads the same line without it.
- Grouping on Seniority is paused because the field was archived
import { ViewChangeNotice, ViewChangeNoticeItem } from '@/ui/view-change-notice';
// Someone who can't manage fields gets the same line without Restore field.
export default function ViewChangeNoticeMember() {
return (
<ViewChangeNotice className="w-full bg-surface">
<ViewChangeNoticeItem kind="group" field="Seniority" />
</ViewChangeNotice>
);
}Long field names
A long or non-Latin field name wraps onto the next line; nothing clips.
- Filter on Notice period agreed with the current employer (weeks) is paused because the field was archived · Restore field
- Sort on Mức lương mong muốn is paused because the field was archived
- Grouping on a deleted field was removed
import { ViewChangeNotice, ViewChangeNoticeItem } from '@/ui/view-change-notice';
// A long field name wraps; the line never clips.
export default function ViewChangeNoticeLongFieldName() {
return (
<ViewChangeNotice className="w-full max-w-120 bg-surface">
<ViewChangeNoticeItem kind="filter" field="Notice period agreed with the current employer (weeks)" restoreHref="#settings-fields" />
<ViewChangeNoticeItem kind="sort" field="Mức lương mong muốn" />
<ViewChangeNoticeItem kind="group" />
</ViewChangeNotice>
);
}Table toolbar
The 44px bar above every grid. Filter and its chips on the left; search, the save controls and Display on the right.
View tabs and view menu
Saved Views sit as tabs in the page header, Archived last, then + to save the current table as a new View. Rename, delete and restore live in Display.