Getting started
Extensions
Optional components outside the Full files, and the files each one needs.
Calendar, Date Picker, Date & Time Picker, Color Picker, DataTable, Chart and Sortable are not in the Full script, the Full stylesheet or the ESM root, so a page that uses one loads its files too.
Files
Add an extension’s stylesheets after pelatform-ui.min.css and its scripts after pelatform-ui.min.js, in the order listed; with Core and single components instead of Full, also load the files in the last column. Each file has a minified .min version and Prefixed CSS uses the .prefixed.css files. An extension’s guide lists the files its examples use, Full and Modular, and the package manifest (@pelatform/ui/manifest) lists each file with its ID and dependencies.
| Extension | Files, in order | With Core instead of Full, also load |
|---|---|---|
| DataTable | extensions/datatable., extensions/datatable.; optionally after them, extensions/datatable-excel., extensions/datatable-pdf. | components/button., components/form., components/table. |
| Calendar | extensions/calendar., extensions/calendar. | components/button., components/form., components/select., components/select. |
| Date Picker | extensions/calendar., extensions/date-picker., extensions/calendar., extensions/date-picker. | components/button., components/form., components/popover., components/select., components/popover., components/select. |
| Date Range Picker | extensions/calendar., extensions/date-picker., extensions/calendar., extensions/date-picker. | components/button., components/form., components/popover., components/select., components/popover., components/select. |
| Date & Time Picker | extensions/calendar., extensions/date-picker., extensions/date-time-picker., extensions/calendar., extensions/date-time-picker. | components/button., components/form., components/popover., components/select., components/popover., components/select. |
| Color Picker | extensions/color-picker., extensions/color-picker. | components/button., components/form., components/popover., components/popover. |
| Sortable | extensions/sortable., extensions/sortable. | Nothing |
| Chart | extensions/chart., extensions/chart. | components/table. |
| Editor | extensions/editor., extensions/editor. | components/button., components/form., components/popover., components/toggle., components/popover. |
Browser scripts
After the Full script, an extension script starts its elements as it loads, also with defer. With Core and single component scripts, call PLF.init() once every file has loaded, as the Modular files in each extension’s guide do.
Browser extension bundles include their vendors and dependency notices. A Browser export adapter registers against an already loaded, matching DataTable.
ESM imports
Import an extension from @pelatform/ui/extensions/{name} and its CSS from the /css or /css/prefixed export, and register it with use() so that init() starts it. use() also registers the extension’s JavaScript dependencies; load its CSS dependencies yourself, as JavaScript never imports CSS.
import {init, use} from '@pelatform/ui';
import {DataTable} from '@pelatform/ui/extensions/datatable';
import {excelAdapter} from '@pelatform/ui/extensions/datatable-excel';
DataTable.registerExportAdapter('xlsx', excelAdapter);
use(DataTable);
init();Vendors
ESM vendors are optional peer dependencies: install only those the extensions you use need. The standard components need none.
| Vendor | Version | Needed by |
|---|---|---|
chart. |
4.5.1 | Chart |
exceljs |
4.4.0 | DataTable Excel adapter |
pdf-lib and @pdf-lib/fontkit |
1.17.1 and 1.1.1 | DataTable PDF adapter |
@tiptap/core, @tiptap/pm, @tiptap/starter-kit, @tiptap/extensions and @tiptap/extension-link |
3.31.4 | Editor |