Recipes¶
Each recipe names a task and the page with its worked example, for React (<PivotReport>) and the
web component (<pivot-report>).
The view¶
| Task | React | Web component |
|---|---|---|
| Start the report with a view | defaultView |
default-view |
| Keep the view in your app, store it, start from a stored one | controlled view with onViewChange |
controlled and uncontrolled |
| Keep the view across reloads of a tab | persistView="session" |
persist-view="session" |
| Check a view from outside (a file, a database) | normalize |
normalize |
Saved and shared views¶
| Task | React | Web component |
|---|---|---|
| Offer shared views (presets) | templates |
templates property |
| Save the user's views on your server | onSaveTemplate, onDeleteTemplate |
pivot-template-save with respondWith() |
| Keep the user's views in the browser, no server | templateStore="browser" |
template-store="browser" |
| Let admins publish a view for everyone | canPublish, onPublishTemplate |
can-publish, pivot-template-publish |
| Ship views inside an OpenAPI document | x-pivotkit-views |
x-pivotkit-views |
| Share a report as a link | shareLink |
share-link |
| Name the data a view is made for, switch to it | source, sources, onSourceSwitch |
source-id, pivot-source-switch |
| Read and write view files on a server | toViewFile, fromViewFile |
toViewFile, fromViewFile |
Data and fields¶
| Task | Where |
|---|---|
| Pass rows the app rebuilds on every render | dataKey |
| Show the skeleton while the data loads | loading |
| Give fields clear names, descriptions and links | Field descriptions and names |
| Take labels and descriptions from a JSON Schema or OpenAPI document | fieldDefaultsFromSchema |
| Set how a field is summarized and formatted, its order of items | fieldDefaults |
Columnar data ({ columns, rows }) |
FAQ |
| Dates a day off | time zones, FAQ |
| Pivots on a server, without UI | engine on a server |
Look and language¶
| Task | Where |
|---|---|
| Match your design, light and dark | Theming |
| Change a text, add a language | Localisation |
| Adjust the chart beyond its menus (font sizes, axis names) | chartOptions |
| A taller report on phones | web component, layout |
| Keep, log or block every export and copy | onExport |
Pages and hosts¶
| Task | Where |
|---|---|
| PHP and other server-rendered pages | web component |
| Angular | web component, zone.js |
| PowerShell Universal | React |
| A page without a bundler (import map) | bundlers and import maps |
| A strict Content-Security-Policy | security, element |
| Several reports on one page | FAQ |
| The report inside a dialog of your page | Escape and the host page |