Companies page
A full-page Companies record view, composed entirely from crisp.
Everything crisp is built toward, on one screen: the App Shell (collapsible + resizable sidebar) wrapping the real Sidebar, a view bar (SavedViews + View settings on the left, Import/Export + New on the right, not adjacent — crisp/#766, #772) with a TableToolbar Sort/Filter row below it, and a DataTable grid with 12 columns and a ColumnCalc summary footer — no mock-ups, every piece is the shipped component. Best viewed full-screen (the ⤢ button).
It's all live. Drag the sidebar's right edge to resize it, and press the panel button in the sidebar header to collapse it (a button on the left brings it back). Use the ⤢ button in the header to open it full screen (Esc to exit). In the grid: sort or filter from the toolbar, double-click an editable cell to edit it, drag a column edge to resize, hover an entity cell for its "open preview" icon (opens the peek panel; the row's own name opens the full record page), select rows for the bulk bar (Add to list / Send email / Run workflow / More → Delete), and click a summary-footer cell to pick its aggregation. In the sidebar: ⌘K opens the command palette.
Composition
import { useRef, useState } from "react";
import {
BulkBar,
BulkBarButton,
ColumnCalc,
DataTable,
SavedViews,
Sidebar,
TableToolbar,
} from "@crisp-ui-kit/crisp";
export function CompaniesPage() {
const [selected, setSelected] = useState<string[]>([]);
const viewSettingsRef = useRef<HTMLSpanElement>(null);
const importExportRef = useRef<HTMLSpanElement>(null);
return (
<div style={{ display: "flex", height: "100vh" }}>
<Sidebar />
<main style={{ flex: 1, display: "flex", flexDirection: "column" }}>
<div style={{ display: "flex", alignItems: "center" }}>
<SavedViews label="All Companies" views={views} />
<span ref={viewSettingsRef} />
<span style={{ flex: 1 }} />
<span ref={importExportRef} />
<Button intent="primary">New Company</Button>
</div>
<TableToolbar
columns={toolbarColumns}
viewSettingsRef={viewSettingsRef}
importExportRef={importExportRef}
/>
<div style={{ flex: 1, minHeight: 0 }}>
<DataTable
columns={columns}
data={rows}
selectable
selectedIds={selected}
onSelectionChange={setSelected}
showCount={false}
/>
</div>
{selected.length > 0 && (
<BulkBar count={selected.length} onClear={() => setSelected([])}>
<BulkBarButton>Add to list</BulkBarButton>
</BulkBar>
)}
</main>
</div>
);
}The header/tabs above are plain markup for the demo; the sidebar, the view bar, the toolbar and the grid are crisp components with all of their behavior intact — an entity column's summary slot hosts ColumnCalc for the footer, and a type: "entity" column's onOpenPreview wires the RecordPanel peek shown in the full example above.