Using Bryntum Grid with Vue

[]`. Sample code for tree store creation with `ModelConfig` and `StoreConfig` classes: ```typescript import { Store, StoreConfig, ModelConfig } from '@bryntum/grid'; const storeConfig: Partial = { tree : true, data : [ { id : 1, children : [ { id : 2 } ] as Partial[] } ] as Partial[] }; new Store(storeConfig); ``` ## Wrappers The Vue wrappers encapsulate Bryntum Grid and other Bryntum widgets in Vue components that expose configuration options, properties, features and events. The wrapped all Bryntum UI components so they can be used the usual Vue way. To use native API package classes with wrappers import them from `@bryntum/grid`. ```javascript import { Grid } from '@bryntum/grid'; ``` ### Installing the wrappers package The wrappers are distributed as a separate package `@bryntum/grid-vue` that is installed according to the used package manager. Please refer to this [guide for Bryntum NPM repository access](#Grid/guides/npm-repository.md). ### Wrappers Overview Wrappers are Vue components which provide full access to Bryntum API widget class configs, properties, events and features. Each Wrapper has it's own HTML tag which can be used in vue templates. This is the list of available wrappers for Bryntum Grid Vue package: | Wrapper tag name | API widget reference | |------------------|----------------------| | <bryntum-button/> | [Button](#Core/widget/Button) | | <bryntum-button-group/> | [ButtonGroup](#Core/widget/ButtonGroup) | | <bryntum-checkbox/> | [Checkbox](#Core/widget/Checkbox) | | <bryntum-chip-view/> | [ChipView](#Core/widget/ChipView) | | <bryntum-color-field/> | [ColorField](#Core/widget/ColorField) | | <bryntum-color-picker/> | [ColorPicker](#Core/widget/ColorPicker) | | <bryntum-combo/> | [Combo](#Core/widget/Combo) | | <bryntum-container/> | [Container](#Core/widget/Container) | | <bryntum-date-field/> | [DateField](#Core/widget/DateField) | | <bryntum-date-picker/> | [DatePicker](#Core/widget/DatePicker) | | <bryntum-date-time-field/> | [DateTimeField](#Core/widget/DateTimeField) | | <bryntum-display-field/> | [DisplayField](#Core/widget/DisplayField) | | <bryntum-duration-field/> | [DurationField](#Core/widget/DurationField) | | <bryntum-field-filter-picker/> | [FieldFilterPicker](#Core/widget/FieldFilterPicker) | | <bryntum-field-filter-picker-group/> | [FieldFilterPickerGroup](#Core/widget/FieldFilterPickerGroup) | | <bryntum-file-field/> | [FileField](#Core/widget/FileField) | | <bryntum-file-picker/> | [FilePicker](#Core/widget/FilePicker) | | <bryntum-filter-field/> | [FilterField](#Core/widget/FilterField) | | <bryntum-grid/> | [Grid](#Grid/view/Grid) | | <bryntum-grid-base/> | [GridBase](#Grid/view/GridBase) | | <bryntum-grid-field-filter-picker/> | [GridFieldFilterPicker](#Grid/widget/GridFieldFilterPicker) | | <bryntum-grid-field-filter-picker-group/> | [GridFieldFilterPickerGroup](#Grid/widget/GridFieldFilterPickerGroup) | | <bryntum-group-bar/> | [GroupBar](#Grid/widget/GroupBar) | | <bryntum-label/> | [Label](#Core/widget/Label) | | <bryntum-list/> | [List](#Core/widget/List) | | <bryntum-menu/> | [Menu](#Core/widget/Menu) | | <bryntum-number-field/> | [NumberField](#Core/widget/NumberField) | | <bryntum-paging-toolbar/> | [PagingToolbar](#Core/widget/PagingToolbar) | | <bryntum-panel/> | [Panel](#Core/widget/Panel) | | <bryntum-password-field/> | [PasswordField](#Core/widget/PasswordField) | | <bryntum-radio/> | [Radio](#Core/widget/Radio) | | <bryntum-radio-group/> | [RadioGroup](#Core/widget/RadioGroup) | | <bryntum-slider/> | [Slider](#Core/widget/Slider) | | <bryntum-slide-toggle/> | [SlideToggle](#Core/widget/SlideToggle) | | <bryntum-splitter/> | [Splitter](#Core/widget/Splitter) | | <bryntum-sub-grid/> | [SubGrid](#Grid/view/SubGrid) | | <bryntum-tab-panel/> | [TabPanel](#Core/widget/TabPanel) | | <bryntum-text-area-field/> | [TextAreaField](#Core/widget/TextAreaField) | | <bryntum-text-area-picker-field/> | [TextAreaPickerField](#Core/widget/TextAreaPickerField) | | <bryntum-text-field/> | [TextField](#Core/widget/TextField) | | <bryntum-time-field/> | [TimeField](#Core/widget/TimeField) | | <bryntum-time-picker/> | [TimePicker](#Core/widget/TimePicker) | | <bryntum-toolbar/> | [Toolbar](#Core/widget/Toolbar) | | <bryntum-tree-combo/> | [TreeCombo](#Grid/widget/TreeCombo) | | <bryntum-tree-grid/> | [TreeGrid](#Grid/view/TreeGrid) | | <bryntum-widget/> | [Widget](#Core/widget/Widget) | | <bryntum-year-picker/> | [YearPicker](#Core/widget/YearPicker) | ### Using the wrapper in your application Now you can use the component defined in the wrapper in your application: Sample code for `App.vue`: ```html ``` As shown above you can assign values and bind to Vue data with `tooltip="gridConfig.tooltip"` or `v-bind` option. Listen to events with `@click="onClick"`, or use `v-on`. `AppConfig.js` should contain a simple Bryntum Grid configuration. We recommend to keep it in a separate file because it can become lengthy especially for more advanced configurations. Sample code for `AppConfig.js`: ```javascript export const gridConfig = { tooltip : "My cool Bryntum Grid component" // Bryntum Grid config options }; ``` Add `sass-loader` to your `package.json` if you used SCSS. You will also need to import CSS file for Bryntum Grid. The ideal place for doing it is the beginning of `App.scss/App.css` that would be imported in `App.vue`: ```javascript @import "~@bryntum/grid/grid.stockholm.css"; ``` ### Embedding widgets inside wrapper Wrappers are designed to allow using Bryntum widgets as Vue components, but they themselves cannot contain other Bryntum wrappers inside their tag. To embed Bryntum widgets inside a wrapper you should instead use the available configuration options for the wrapper's widget. Please note that not all widgets may contain inner widgets, please refer to the API docs to check for valid configuration options. This example shows how to use a `Toolbar` widget inside the wrapper for Bryntum Grid: Sample code for `AppConfig.js`: ```javascript export const gridConfig = { // Toolbar (tbar) config tbar: { items : [ { type : 'button', text : 'My button' } ] } // Bryntum Grid config options }; ``` ### Syncing bound data changes The stores used by the wrapper enable [syncDataOnLoad](#Core/data/Store#config-syncDataOnLoad) by default (Stores not used by the wrapper have it disabled by default). It is done to make Vue column renderer update the value. Without `syncDataOnLoad`, each time a new array of data is set to the store would apply the data as a completely new dataset. With `syncDataOnLoad`, the new state is instead compared to the old, and the differences are applied. ## Using Vue components in cells The wrapper implements support for using Vue Components to render the cell content. There are several steps needed to configure that in the application: 1. Register Vue component globally 2. Implement column renderer 3. Implement methods called in Vue component You can see the online examples here: * Vue 2: [Rendering components into cells demo (Vue 2)](https://bryntum.com/products/grid/examples/frameworks/vue/javascript/vue-renderer/dist/) * Vue 3: [Components in cells demo (Vue 3)](https://bryntum.com/products/grid/examples/frameworks/vue-3/javascript/vue-renderer/dist/) ### Register Vue component This is usually implemented in `main.js` before the global Vue instance is created. ```javascript import Vue from 'vue'; import App from './App.vue'; import BlueButton from './components/BlueButton.vue'; import RedButton from './components/RedButton.vue'; import PercentBar from './components/PercentBar.vue'; // Register components globally to be accessible in renderers Vue.component('BlueButton', BlueButton); Vue.component('RedButton', RedButton); Vue.component('PercentBar', PercentBar); // etc... ``` The `BlueButton` could look like this: ```javascript ``` ### Implement column renderer The column with Vue component must have a specific configuration: ```javascript { text : 'Button', field : 'city', vue : true, renderer({ grid: { extraData : { clickHandler } }, record }) { // The object needed by the wrapper to render the component return { // Required. Name of the component to render. // The component must be registered globally in main.js // https://vuejs.org/v2/guide/components.html#Dynamic-Components is : 'BlueButton', // `BlueButton` gets its text from `record` record, // Button click handler defined above clickHandler }; } ``` `vue : true` is mandatory and `is` property of the returned object is also required. ### Implement methods called in Vue component Should the component be interactive it needs handlers to process the user actions. The handler can be implemented locally to the component if it does not need any outside data or it can be passed to the component from an upper level. For example: ```javascript ``` ## Configs, properties and events All Bryntum Vue Wrappers support the full set of the public configs, properties and events of a component. ### Using dataChange event to synchronize data Bryntum Grid keeps all data in its stores which are automatically synchronized with the UI and the user actions. Nevertheless, it is sometimes necessary for the rest of the application to be informed about data changes. For that it is easiest to use `dataChange` event. ```javascript ``` ### Wrapper configs * `relayStoreEvents` - set it to `true` to relay events from stores to `Grid` instance. `dataChange` event fires twice if set to true. Defaults to `false`. ## Features Features are suffixed with `Feature` and act as both configs and properties for `BryntumGridComponent`. They are mapped to the corresponding API features of the Bryntum Grid `instance`. This is a list of all `BryntumGridComponent` features: |Wrapper feature name|API feature reference | |--------------------|----------------------| | cellCopyPasteFeature | [CellCopyPaste](#Grid/feature/CellCopyPaste) | | cellEditFeature | [CellEdit](#Grid/feature/CellEdit) | | cellMenuFeature | [CellMenu](#Grid/feature/CellMenu) | | cellTooltipFeature | [CellTooltip](#Grid/feature/CellTooltip) | | columnAutoWidthFeature | [ColumnAutoWidth](#Grid/feature/ColumnAutoWidth) | | columnDragToolbarFeature | [ColumnDragToolbar](#Grid/feature/ColumnDragToolbar) | | columnPickerFeature | [ColumnPicker](#Grid/feature/ColumnPicker) | | columnRenameFeature | [ColumnRename](#Grid/feature/ColumnRename) | | columnReorderFeature | [ColumnReorder](#Grid/feature/ColumnReorder) | | columnResizeFeature | [ColumnResize](#Grid/feature/ColumnResize) | | excelExporterFeature | [ExcelExporter](#Grid/feature/experimental/ExcelExporter) | | fileDropFeature | [FileDrop](#Grid/feature/experimental/FileDrop) | | fillHandleFeature | [FillHandle](#Grid/feature/FillHandle) | | filterFeature | [Filter](#Grid/feature/Filter) | | filterBarFeature | [FilterBar](#Grid/feature/FilterBar) | | groupFeature | [Group](#Grid/feature/Group) | | groupSummaryFeature | [GroupSummary](#Grid/feature/GroupSummary) | | headerMenuFeature | [HeaderMenu](#Grid/feature/HeaderMenu) | | mergeCellsFeature | [MergeCells](#Grid/feature/MergeCells) | | pdfExportFeature | [PdfExport](#Grid/feature/export/PdfExport) | | printFeature | [Print](#Grid/feature/export/Print) | | quickFindFeature | [QuickFind](#Grid/feature/QuickFind) | | regionResizeFeature | [RegionResize](#Grid/feature/RegionResize) | | rowCopyPasteFeature | [RowCopyPaste](#Grid/feature/RowCopyPaste) | | rowExpanderFeature | [RowExpander](#Grid/feature/RowExpander) | | rowReorderFeature | [RowReorder](#Grid/feature/RowReorder) | | rowResizeFeature | [RowResize](#Grid/feature/RowResize) | | searchFeature | [Search](#Grid/feature/Search) | | sortFeature | [Sort](#Grid/feature/Sort) | | splitFeature | [Split](#Grid/feature/Split) | | stickyCellsFeature | [StickyCells](#Grid/feature/StickyCells) | | stripeFeature | [Stripe](#Grid/feature/Stripe) | | summaryFeature | [Summary](#Grid/feature/Summary) | | treeFeature | [Tree](#Grid/feature/Tree) | | treeGroupFeature | [TreeGroup](#Grid/feature/TreeGroup) | ## Bryntum Grid API instance It is important to know that the Vue `BryntumGridComponent` is **not** the native Bryntum Grid instance, it is a wrapper or an interface between the Vue application and the Bryntum Grid itself. All available configs, properties and features are propagated from the wrapper down to the underlying Bryntum Grid instance, but there might be the situations when you want to access the Bryntum Grid directly. That is fully valid approach and you are free to do it.

Vue 2 Vue 3

If you need to access Bryntum Grid functionality not exposed by the wrapper, you can access the Bryntum Grid instance directly. Within the Vue 2 wrapper it is available under the instance property. This simple example shows how you could use it: App.vue:

```html ```

When accessing instance directly, use wrapper's API widget reference docs from the list above to get available configs and properties.

If you need to access Bryntum Grid functionality not exposed by the wrapper, you can access the Bryntum Grid instance directly. Within the Vue 3 wrapper it is available under the instance.value property. This simple example shows how you could use it: App.vue:

```html ```

When accessing instance directly, use wrapper's API widget reference docs from the list above to get available configs and properties.

## Troubleshooting Please refer to this [Troubleshooting guide](#Grid/guides/integration/vue/troubleshooting.md). ## References * Config options, features, events and methods [Bryntum Grid API docs](#api) * Visit [Vue Framework Homepage](https://vuejs.org) * Post your questions to [Bryntum Support Forum](https://forum.bryntum.com/) * [Contact us](https://bryntum.com/contact/)

Last modified on 2023-10-26 8:26:40