@open-grid/vue-ui 0.1.0 → 0.2.0

package/README.md

@@ -8,6 +8,12 @@ Use this package for the reference Vue grid UI, including sorting, filtering, se
 
 Use Vue's `class` attribute, `getRowClassName(row)`, `getHeaderClassName(context)`, and `getCellClassName(context)` to attach product-owned root, row, header, and cell classes for status, risk, or workflow styling without replacing the renderer. Header contexts include the grid, column, and header; cell contexts also include the row and current value.
 
+Use `renderHeader` and `renderCell` for framework-native VNodes, `renderToolbar` for
+product commands, and the state render callbacks for component-based loading,
+error, and empty content. See the
+[custom rendering](https://goatshave.github.io/open-grid/custom-rendering) and
+[composition](https://goatshave.github.io/open-grid/composition) guides.
+
 ## Install
 
 ```bash

package/dist/index.css

@@ -115,6 +115,11 @@
   outline-offset: -2px;
 }
 
+.og-grid__toolbar-slot {
+  width: 100%;
+  margin-bottom: 8px;
+}
+
 .og-grid__controls {
   display: flex;
   align-items: center;

package/dist/index.d.ts

@@ -1,13 +1,22 @@
 import * as vue from 'vue';
 import { DefineComponent, PropType, VNodeChild, VNode } from 'vue';
-import { GridOptions, Grid, Row, HeaderContext, CellContext, Column, CellFillOptions, ClipboardPasteResult, ClipboardPasteOptions, ExportFile } from '@open-grid/core';
+import { GridOptions, Grid, Row, Column, HeaderContext, CellContext, CellFillOptions, ClipboardPasteResult, ClipboardPasteOptions, ExportFile } from '@open-grid/core';
 export { AccessorColumnOptions, AccessorFnColumnDef, AccessorKey, AccessorKeyColumnDef, AnyColumnDef, CellContext, CellCoordinate, CellEditEvent, CellEditEventParams, CellEditHistoryAction, CellEditHistoryState, CellEditOption, CellEditParserContext, CellEditPhase, CellEditValidationContext, CellEditValidationResult, CellEditValidationState, CellEditingState, CellFillOptions, CellInteractionEvent, CellInteractionEventParams, CellRange, CellRangeSelectionState, ClipboardCellContext, ClipboardCopyOptions, ClipboardPasteCellContext, ClipboardPasteCommittedCell, ClipboardPasteOptions, ClipboardPasteResult, ClipboardPasteSkippedCell, ClipboardPasteSkippedReason, ClipboardPasteValidationError, Column, ColumnDef, ColumnFilter, ColumnFiltersState, ColumnHelper, ColumnId, ColumnMovePosition, ColumnOrderState, ColumnPinningPosition, ColumnPinningState, ColumnResizeEvent, ColumnResizeEventParams, ColumnResizePhase, ColumnSizingState, ColumnVisibilityState, DisplayColumnDef, ExpandedState, ExportFile, ExportFileOptions, FilterFn, FitColumnsToWidthOptions, Grid, GridCacheDiagnostics, GridCacheDiagnosticsEntry, GridCacheKey, GridOptions, GridState, GroupColumnDef, GroupingState, Header, HeaderContext, HeaderGroup, MoveFocusOptions, PaginationState, Row, RowId, RowInteractionEvent, RowInteractionEventParams, RowModel, RowSelectionCleanupScope, RowSelectionState, SortFn, SortingRule, SortingState, Updater, fitColumnsToWidth } from '@open-grid/core';
-import { ColumnVirtualizationPrimitiveOptions, GridDensity, RowVirtualizationPrimitiveOptions } from '@open-grid/primitives';
-export { GRID_PREFERENCES_VERSION, GridDensity, GridPreferences, GridPreferencesOptions, GridPreferencesState, GridPreferencesStorageEnvironmentLike, GridPreferencesStorageLike, createGridPreferences, getBrowserGridPreferencesStorage, parseGridPreferences, readGridPreferences, removeGridPreferences, serializeGridPreferences, writeGridPreferences } from '@open-grid/primitives';
+import { ColumnVirtualizationPrimitiveOptions, GridLocalizationOverrides, GridDensity, RowVirtualizationPrimitiveOptions, GridLocalization } from '@open-grid/primitives';
+export { DEFAULT_GRID_LOCALIZATION, GRID_PREFERENCES_VERSION, GridDensity, GridLocalization, GridLocalizationOverrides, GridPreferences, GridPreferencesMigration, GridPreferencesOptions, GridPreferencesParseOptions, GridPreferencesState, GridPreferencesStorageEnvironmentLike, GridPreferencesStorageLike, createGridLocalization, createGridPreferences, getBrowserGridPreferencesStorage, migrateGridPreferences, parseGridPreferences, readGridPreferences, removeGridPreferences, serializeGridPreferences, writeGridPreferences } from '@open-grid/primitives';
 export { createColumnHelper, useGrid } from '@open-grid/vue';
 
+interface DataGridRenderContext<TData> {
+    grid: Grid<TData>;
+    rows: readonly Row<TData>[];
+    visibleColumns: readonly Column<TData, unknown>[];
+}
+interface DataGridErrorRenderContext<TData> extends DataGridRenderContext<TData> {
+    retry: (() => void) | undefined;
+}
 interface DataGridProps<TData> {
     ariaLabel?: string;
+    localization?: GridLocalizationOverrides;
     options: GridOptions<TData>;
     emptyState?: VNodeChild;
     error?: boolean;
@@ -15,6 +24,12 @@ interface DataGridProps<TData> {
     onRetry?: () => void;
     loading?: boolean;
     loadingState?: VNodeChild;
+    renderToolbar?: (context: DataGridRenderContext<TData>) => VNodeChild;
+    renderEmptyState?: (context: DataGridRenderContext<TData>) => VNodeChild;
+    renderLoadingState?: (context: DataGridRenderContext<TData>) => VNodeChild;
+    renderErrorState?: (context: DataGridErrorRenderContext<TData>) => VNodeChild;
+    renderHeader?: (context: HeaderContext<TData, unknown>) => VNodeChild;
+    renderCell?: (context: CellContext<TData, unknown>) => VNodeChild;
     onGridReady?: GridReadyHandler<TData>;
     getRowClassName?: (row: Row<TData>) => string | undefined;
     getHeaderClassName?: (context: HeaderContext<TData, unknown>) => string | undefined;
@@ -83,7 +98,11 @@ type HeaderActionMenuItems<TData> = (context: HeaderActionMenuContext<TData>) =>
 declare const DataGrid: DefineComponent<vue.ExtractPropTypes<{
     ariaLabel: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
+    };
+    localization: {
+        type: PropType<GridLocalizationOverrides>;
+        default: undefined;
     };
     options: {
         type: PropType<GridOptions<unknown>>;
@@ -91,7 +110,7 @@ declare const DataGrid: DefineComponent<vue.ExtractPropTypes<{
     };
     emptyState: {
         type: PropType<VNodeChild>;
-        default: string;
+        default: undefined;
     };
     error: {
         type: BooleanConstructor;
@@ -99,7 +118,7 @@ declare const DataGrid: DefineComponent<vue.ExtractPropTypes<{
     };
     errorState: {
         type: PropType<VNodeChild>;
-        default: () => string;
+        default: undefined;
     };
     onRetry: {
         type: PropType<() => void>;
@@ -111,7 +130,31 @@ declare const DataGrid: DefineComponent<vue.ExtractPropTypes<{
     };
     loadingState: {
         type: PropType<VNodeChild>;
-        default: () => string;
+        default: undefined;
+    };
+    renderToolbar: {
+        type: PropType<(context: DataGridRenderContext<unknown>) => VNodeChild>;
+        default: undefined;
+    };
+    renderEmptyState: {
+        type: PropType<(context: DataGridRenderContext<unknown>) => VNodeChild>;
+        default: undefined;
+    };
+    renderLoadingState: {
+        type: PropType<(context: DataGridRenderContext<unknown>) => VNodeChild>;
+        default: undefined;
+    };
+    renderErrorState: {
+        type: PropType<(context: DataGridErrorRenderContext<unknown>) => VNodeChild>;
+        default: undefined;
+    };
+    renderHeader: {
+        type: PropType<(context: HeaderContext<unknown, unknown>) => VNodeChild>;
+        default: undefined;
+    };
+    renderCell: {
+        type: PropType<(context: CellContext<unknown, unknown>) => VNodeChild>;
+        default: undefined;
     };
     onGridReady: {
         type: PropType<GridReadyHandler<unknown>>;
@@ -210,7 +253,11 @@ declare const DataGrid: DefineComponent<vue.ExtractPropTypes<{
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     ariaLabel: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
+    };
+    localization: {
+        type: PropType<GridLocalizationOverrides>;
+        default: undefined;
     };
     options: {
         type: PropType<GridOptions<unknown>>;
@@ -218,7 +265,7 @@ declare const DataGrid: DefineComponent<vue.ExtractPropTypes<{
     };
     emptyState: {
         type: PropType<VNodeChild>;
-        default: string;
+        default: undefined;
     };
     error: {
         type: BooleanConstructor;
@@ -226,7 +273,7 @@ declare const DataGrid: DefineComponent<vue.ExtractPropTypes<{
     };
     errorState: {
         type: PropType<VNodeChild>;
-        default: () => string;
+        default: undefined;
     };
     onRetry: {
         type: PropType<() => void>;
@@ -238,7 +285,31 @@ declare const DataGrid: DefineComponent<vue.ExtractPropTypes<{
     };
     loadingState: {
         type: PropType<VNodeChild>;
-        default: () => string;
+        default: undefined;
+    };
+    renderToolbar: {
+        type: PropType<(context: DataGridRenderContext<unknown>) => VNodeChild>;
+        default: undefined;
+    };
+    renderEmptyState: {
+        type: PropType<(context: DataGridRenderContext<unknown>) => VNodeChild>;
+        default: undefined;
+    };
+    renderLoadingState: {
+        type: PropType<(context: DataGridRenderContext<unknown>) => VNodeChild>;
+        default: undefined;
+    };
+    renderErrorState: {
+        type: PropType<(context: DataGridErrorRenderContext<unknown>) => VNodeChild>;
+        default: undefined;
+    };
+    renderHeader: {
+        type: PropType<(context: HeaderContext<unknown, unknown>) => VNodeChild>;
+        default: undefined;
+    };
+    renderCell: {
+        type: PropType<(context: CellContext<unknown, unknown>) => VNodeChild>;
+        default: undefined;
     };
     onGridReady: {
         type: PropType<GridReadyHandler<unknown>>;
@@ -334,12 +405,19 @@ declare const DataGrid: DefineComponent<vue.ExtractPropTypes<{
     };
 }>> & Readonly<{}>, {
     ariaLabel: string;
+    localization: Partial<GridLocalization>;
     emptyState: VNodeChild;
     error: boolean;
     errorState: VNodeChild;
     onRetry: () => void;
     loading: boolean;
     loadingState: VNodeChild;
+    renderToolbar: (context: DataGridRenderContext<unknown>) => VNodeChild;
+    renderEmptyState: (context: DataGridRenderContext<unknown>) => VNodeChild;
+    renderLoadingState: (context: DataGridRenderContext<unknown>) => VNodeChild;
+    renderErrorState: (context: DataGridErrorRenderContext<unknown>) => VNodeChild;
+    renderHeader: (context: HeaderContext<unknown, unknown>) => VNodeChild;
+    renderCell: (context: CellContext<unknown, unknown>) => VNodeChild;
     onGridReady: GridReadyHandler<unknown>;
     getRowClassName: (row: Row<unknown>) => string | undefined;
     getHeaderClassName: (context: HeaderContext<unknown, unknown>) => string | undefined;
@@ -367,4 +445,4 @@ declare const DataGrid: DefineComponent<vue.ExtractPropTypes<{
 declare function createDataGrid<TData>(): DataGridComponent<TData>;
 declare function downloadExportFile(file: ExportFile): boolean;
 
-export { type ColumnVirtualizationOptions, DataGrid, type DataGridComponent, type DataGridProps, type GridReadyHandler, type HeaderActionMenuActionItem, type HeaderActionMenuContext, type HeaderActionMenuCustomItem, type HeaderActionMenuItem, type HeaderActionMenuItems, type HeaderActionMenuLabelItem, type HeaderActionMenuSeparatorItem, type RowVirtualizationOptions, createDataGrid, downloadExportFile };
+export { type ColumnVirtualizationOptions, DataGrid, type DataGridComponent, type DataGridErrorRenderContext, type DataGridProps, type DataGridRenderContext, type GridReadyHandler, type HeaderActionMenuActionItem, type HeaderActionMenuContext, type HeaderActionMenuCustomItem, type HeaderActionMenuItem, type HeaderActionMenuItems, type HeaderActionMenuLabelItem, type HeaderActionMenuSeparatorItem, type RowVirtualizationOptions, createDataGrid, downloadExportFile };

package/dist/index.js

@@ -5,10 +5,9 @@ import {
   addPointerMoveUpListeners,
   applyResizeObserverMeasuredSizes,
   createClickSuppressionController,
+  createGridLocalization,
   createResizeObserver,
   disconnectResizeObserver,
-  GROUPING_PANEL_EMPTY_MESSAGE,
-  HEADER_ACTION_MENU_TRIGGER_TEXT,
   getCellEditorProps,
   getCellEditorEventValue,
   getCellEditorKeyboardAction,
@@ -203,9 +202,12 @@ import { createMeasuredSizeCache, createMeasuredSizeResolver, getColumnCellRende
 import { defineComponent, Fragment, h, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { fitColumnsToWidth } from "@open-grid/core";
 import {
+  DEFAULT_GRID_LOCALIZATION,
   GRID_PREFERENCES_VERSION,
+  createGridLocalization as createGridLocalization2,
   createGridPreferences,
   getBrowserGridPreferencesStorage,
+  migrateGridPreferences,
   parseGridPreferences,
   readGridPreferences,
   removeGridPreferences,
@@ -218,7 +220,11 @@ var DataGrid = defineComponent({
   props: {
     ariaLabel: {
       type: String,
-      default: "Data grid"
+      default: void 0
+    },
+    localization: {
+      type: Object,
+      default: void 0
     },
     options: {
       type: Object,
@@ -226,7 +232,7 @@ var DataGrid = defineComponent({
     },
     emptyState: {
       type: [String, Number, Object, Array],
-      default: "No rows"
+      default: void 0
     },
     error: {
       type: Boolean,
@@ -234,7 +240,7 @@ var DataGrid = defineComponent({
     },
     errorState: {
       type: [String, Number, Object, Array],
-      default: () => getGridErrorText()
+      default: void 0
     },
     onRetry: {
       type: Function,
@@ -246,7 +252,31 @@ var DataGrid = defineComponent({
     },
     loadingState: {
       type: [String, Number, Object, Array],
-      default: () => getGridLoadingText()
+      default: void 0
+    },
+    renderToolbar: {
+      type: Function,
+      default: void 0
+    },
+    renderEmptyState: {
+      type: Function,
+      default: void 0
+    },
+    renderLoadingState: {
+      type: Function,
+      default: void 0
+    },
+    renderErrorState: {
+      type: Function,
+      default: void 0
+    },
+    renderHeader: {
+      type: Function,
+      default: void 0
+    },
+    renderCell: {
+      type: Function,
+      default: void 0
     },
     onGridReady: {
       type: Function,
@@ -792,6 +822,11 @@ var DataGrid = defineComponent({
       }
     };
     return () => {
+      const localization = createGridLocalization(props.localization);
+      const ariaLabel = props.ariaLabel ?? localization.dataGridLabel;
+      const emptyState = props.emptyState ?? localization.noRows;
+      const errorState = props.errorState ?? getGridErrorText(localization);
+      const loadingState = props.loadingState ?? getGridLoadingText(localization);
       state.value;
       rowSizeVersion.value;
       columnSizeVersion.value;
@@ -805,6 +840,10 @@ var DataGrid = defineComponent({
       const rows = grid.getRowModel().rows;
       const allColumns = grid.getAllLeafColumns();
       const visibleColumns = grid.getVisibleLeafColumns();
+      const renderContext = { grid, rows, visibleColumns };
+      const resolvedEmptyState = props.renderEmptyState?.(renderContext) ?? emptyState;
+      const resolvedLoadingState = props.renderLoadingState?.(renderContext) ?? loadingState;
+      const resolvedErrorState = props.renderErrorState?.({ ...renderContext, retry: props.onRetry }) ?? errorState;
       const layout = grid.getColumnLayout();
       const columnById = new Map(visibleColumns.map((column) => [column.id, column]));
       const columnIndexById = new Map(visibleColumns.map((column, index) => [column.id, index]));
@@ -835,7 +874,7 @@ var DataGrid = defineComponent({
         style: rootStyle
       };
       const semanticGridProps = {
-        ...getGridProps(grid, { additionalHeaderRowCount, ariaLabel: props.ariaLabel, error: props.error, loading: props.loading }),
+        ...getGridProps(grid, { additionalHeaderRowCount, ariaLabel, error: props.error, loading: props.loading }),
         ...densitySizingEnabled ? getGridDensityProps(resolvedDensity) : {},
         ...gridAttrs
       };
@@ -847,61 +886,61 @@ var DataGrid = defineComponent({
         }));
         resetPaginationScroll();
       };
-      const quickFilterNode = props.quickFilterControl ? h("div", { ...getQuickFilterProps(), class: "og-grid__quick-filter" }, [
+      const quickFilterNode = props.quickFilterControl ? h("div", { ...getQuickFilterProps(localization), class: "og-grid__quick-filter" }, [
         h("input", {
-          ...getQuickFilterInputProps({ value: state.value.globalFilter }),
+          ...getQuickFilterInputProps({ value: state.value.globalFilter }, localization),
           class: "og-grid__quick-filter-input",
           onInput: (event) => setQuickFilter(getCellEditorEventValue(event))
         }),
         h(
           "button",
           {
-            ...getQuickFilterClearButtonProps(state.value.globalFilter),
+            ...getQuickFilterClearButtonProps(state.value.globalFilter, localization),
             class: "og-grid__quick-filter-clear",
             onClick: () => setQuickFilter("")
           },
-          getQuickFilterClearButtonText()
+          getQuickFilterClearButtonText(localization)
         )
       ]) : null;
       const allPageRowsSelected = props.rowSelectionControls ? grid.getIsAllPageRowsSelected() : false;
       const somePageRowsSelected = props.rowSelectionControls ? grid.getIsSomePageRowsSelected() : false;
       const selectedRowCount = props.rowSelectionControls ? grid.getSelectedRowModel().rows.length : 0;
-      const selectionControlsNode = props.rowSelectionControls ? h("div", { ...getRowSelectionControlsProps(), class: "og-grid__selection-controls" }, [
+      const selectionControlsNode = props.rowSelectionControls ? h("div", { ...getRowSelectionControlsProps(localization), class: "og-grid__selection-controls" }, [
         h("label", { class: "og-grid__selection-toggle" }, [
           h("input", {
             ...getRowSelectionCheckboxProps({
               allSelected: allPageRowsSelected,
               someSelected: somePageRowsSelected,
               disabled: rows.length === 0
-            }),
+            }, localization),
             ref: (element) => {
               setCheckboxIndeterminate(element, somePageRowsSelected);
             },
             onChange: () => grid.toggleAllPageRowsSelected(!allPageRowsSelected)
           }),
-          h("span", getRowSelectionCheckboxText())
+          h("span", getRowSelectionCheckboxText(localization))
         ]),
-        h("span", { ...getRowSelectionStatusProps(), class: "og-grid__selection-status" }, getRowSelectionStatusText(selectedRowCount)),
+        h("span", { ...getRowSelectionStatusProps(), class: "og-grid__selection-status" }, getRowSelectionStatusText(selectedRowCount, localization)),
         h(
           "button",
           {
-            ...getRowSelectionClearButtonProps(selectedRowCount === 0),
+            ...getRowSelectionClearButtonProps(selectedRowCount === 0, localization),
             class: "og-grid__selection-clear",
             onClick: () => grid.resetRowSelection()
           },
-          getRowSelectionClearButtonText()
+          getRowSelectionClearButtonText(localization)
         )
       ]) : null;
       const filteredVisibilityColumns = getFilteredColumnVisibilityColumns(allColumns, columnVisibilityQuery.value);
-      const columnVisibilityNode = props.columnVisibilityControls ? h("details", { ...getColumnVisibilityControlsProps(), class: "og-grid__column-visibility" }, [
+      const columnVisibilityNode = props.columnVisibilityControls ? h("details", { ...getColumnVisibilityControlsProps(localization), class: "og-grid__column-visibility" }, [
         h(
           "summary",
-          { ...getColumnVisibilitySummaryProps(visibleColumns.length, allColumns.length), class: "og-grid__column-visibility-summary" },
-          getColumnVisibilitySummaryText(visibleColumns.length, allColumns.length)
+          { ...getColumnVisibilitySummaryProps(visibleColumns.length, allColumns.length, localization), class: "og-grid__column-visibility-summary" },
+          getColumnVisibilitySummaryText(visibleColumns.length, allColumns.length, localization)
         ),
         h("div", { class: "og-grid__column-visibility-panel" }, [
           h("input", {
-            ...getColumnVisibilitySearchInputProps(columnVisibilityQuery.value),
+            ...getColumnVisibilitySearchInputProps(columnVisibilityQuery.value, localization),
             class: "og-grid__column-visibility-search",
             onInput: (event) => {
               columnVisibilityQuery.value = getCellEditorEventValue(event);
@@ -910,11 +949,11 @@ var DataGrid = defineComponent({
           h(
             "span",
             { ...getColumnVisibilityStatusProps(), class: "og-grid__column-visibility-status" },
-            getColumnVisibilityStatusText(visibleColumns.length, allColumns.length)
+            getColumnVisibilityStatusText(visibleColumns.length, allColumns.length, localization)
           ),
           h(
             "div",
-            { ...getColumnVisibilityListProps(), class: "og-grid__column-visibility-list" },
+            { ...getColumnVisibilityListProps(localization), class: "og-grid__column-visibility-list" },
             filteredVisibilityColumns.length > 0 ? filteredVisibilityColumns.map((column) => {
               const label = getColumnHeaderText(column);
               const visible = grid.getIsColumnVisible(column.id);
@@ -930,27 +969,27 @@ var DataGrid = defineComponent({
                 }),
                 h("span", label)
               ]);
-            }) : [h("span", { class: "og-grid__column-visibility-empty" }, getColumnVisibilityEmptyText())]
+            }) : [h("span", { class: "og-grid__column-visibility-empty" }, getColumnVisibilityEmptyText(localization))]
           ),
           h(
             "button",
             {
-              ...getColumnVisibilityResetButtonProps(allColumns.length - visibleColumns.length),
+              ...getColumnVisibilityResetButtonProps(allColumns.length - visibleColumns.length, localization),
               class: "og-grid__column-visibility-reset",
               onClick: () => grid.resetColumnVisibility()
             },
-            getColumnVisibilityResetButtonText()
+            getColumnVisibilityResetButtonText(localization)
           )
         ])
       ]) : null;
       const densityNode = props.densityControl ? h(
         "div",
-        { ...getDensityControlsProps(), class: "og-grid__density-controls" },
+        { ...getDensityControlsProps(localization), class: "og-grid__density-controls" },
         GRID_DENSITIES.map(
           (densityOption) => h(
             "button",
             {
-              ...getDensityButtonProps(densityOption, resolvedDensity),
+              ...getDensityButtonProps(densityOption, resolvedDensity, localization),
               class: "og-grid__density-button",
               onClick: () => {
                 if (props.density === void 0) {
@@ -962,13 +1001,13 @@ var DataGrid = defineComponent({
                 props.onDensityChange?.(densityOption);
               }
             },
-            getDensityButtonText(densityOption)
+            getDensityButtonText(densityOption, localization)
           )
         )
       ) : null;
       const controlsNode = props.quickFilterControl || props.rowSelectionControls || props.columnVisibilityControls || props.densityControl ? h("div", { class: "og-grid__controls" }, [selectionControlsNode, columnVisibilityNode, densityNode, quickFilterNode]) : null;
       const gridNode = h("div", rootProps, [
-        props.groupingPanel ? renderGroupingPanel(grid, groupingColumns, groupingPanelRef) : null,
+        props.groupingPanel ? renderGroupingPanel(grid, groupingColumns, groupingPanelRef, localization) : null,
         h("div", { ...semanticGridProps, class: "og-grid__scroller", onKeydown: handleKeyDown, ref: scrollerRef }, [
           h("div", { class: "og-grid__canvas", style: getInlineSizeStyleText(totalWidth) }, [
             h(
@@ -1017,7 +1056,9 @@ var DataGrid = defineComponent({
                         },
                         () => {
                           headerMenuColumnId.value = null;
-                        }
+                        },
+                        localization,
+                        props.renderHeader
                       );
                     })
                   )
@@ -1054,7 +1095,7 @@ var DataGrid = defineComponent({
                             ...getColumnFilterInputProps(column, {
                               label: getColumnHeaderText(column),
                               value: getColumnFilterText(state.value.columnFilters, column.id)
-                            }),
+                            }, localization),
                             class: "og-grid__filter-input",
                             onInput: (event) => {
                               const value = getCellEditorEventValue(event);
@@ -1082,7 +1123,7 @@ var DataGrid = defineComponent({
               rows.length === 0 ? [
                 h("div", { ...getGridEmptyRowProps({ rowIndexOffset: bodyRowIndexOffset }), class: "og-grid__empty" }, [
                   h("div", { ...getGridEmptyCellProps({ rowIndexOffset: bodyRowIndexOffset, columnCount: visibleColumns.length }), class: "og-grid__empty-cell", style: getInlineSizeStyleText(totalWidth) }, [
-                    props.emptyState
+                    resolvedEmptyState
                   ])
                 ])
               ] : visibleRowItems.map(
@@ -1137,7 +1178,9 @@ var DataGrid = defineComponent({
                           grid.cancelCellEdit(event);
                         },
                         rangeDragHandlers,
-                        props.getCellClassName
+                        props.getCellClassName,
+                        localization,
+                        props.renderCell
                       )
                     ];
                   })
@@ -1146,26 +1189,26 @@ var DataGrid = defineComponent({
             )
           ])
         ]),
-        props.error ? h("div", { ...getGridErrorOverlayProps(), class: "og-grid__status-overlay og-grid__error-overlay" }, [
-          h("span", { class: "og-grid__status-text" }, [props.errorState]),
-          props.onRetry ? h("button", { ...getGridErrorRetryButtonProps(), class: "og-grid__retry-button", onClick: props.onRetry }, getGridErrorRetryButtonText()) : null
-        ]) : props.loading ? h("div", { ...getGridLoadingOverlayProps(), class: "og-grid__status-overlay og-grid__loading-overlay" }, [
+        props.error ? h("div", { ...getGridErrorOverlayProps(localization), class: "og-grid__status-overlay og-grid__error-overlay" }, [
+          h("span", { class: "og-grid__status-text" }, [resolvedErrorState]),
+          props.onRetry ? h("button", { ...getGridErrorRetryButtonProps(localization), class: "og-grid__retry-button", onClick: props.onRetry }, getGridErrorRetryButtonText(localization)) : null
+        ]) : props.loading ? h("div", { ...getGridLoadingOverlayProps(localization), class: "og-grid__status-overlay og-grid__loading-overlay" }, [
           h("span", { class: "og-grid__loading-spinner", "aria-hidden": "true" }),
-          h("span", { class: "og-grid__status-text" }, [props.loadingState])
+          h("span", { class: "og-grid__status-text" }, [resolvedLoadingState])
         ]) : null
       ]);
-      const paginationNode = props.paginationControls ? h("nav", { ...getPaginationProps(), class: "og-grid__pagination" }, [
+      const paginationNode = props.paginationControls ? h("nav", { ...getPaginationProps(localization), class: "og-grid__pagination" }, [
         h("div", { class: "og-grid__pagination-buttons" }, [
-          h("button", { ...getPaginationButtonProps({ action: "first", disabled: !grid.getCanPreviousPage() }), class: "og-grid__pagination-button", onClick: () => runPaginationAction(() => grid.firstPage()) }, getPaginationButtonText("first")),
-          h("button", { ...getPaginationButtonProps({ action: "previous", disabled: !grid.getCanPreviousPage() }), class: "og-grid__pagination-button", onClick: () => runPaginationAction(() => grid.previousPage()) }, getPaginationButtonText("previous")),
-          h("span", { ...getPaginationStatusProps(), class: "og-grid__pagination-status" }, getPaginationPageText(grid)),
-          h("button", { ...getPaginationButtonProps({ action: "next", disabled: !grid.getCanNextPage() }), class: "og-grid__pagination-button", onClick: () => runPaginationAction(() => grid.nextPage()) }, getPaginationButtonText("next")),
-          h("button", { ...getPaginationButtonProps({ action: "last", disabled: !grid.getCanNextPage() }), class: "og-grid__pagination-button", onClick: () => runPaginationAction(() => grid.lastPage()) }, getPaginationButtonText("last"))
+          h("button", { ...getPaginationButtonProps({ action: "first", disabled: !grid.getCanPreviousPage() }, localization), class: "og-grid__pagination-button", onClick: () => runPaginationAction(() => grid.firstPage()) }, getPaginationButtonText("first")),
+          h("button", { ...getPaginationButtonProps({ action: "previous", disabled: !grid.getCanPreviousPage() }, localization), class: "og-grid__pagination-button", onClick: () => runPaginationAction(() => grid.previousPage()) }, getPaginationButtonText("previous")),
+          h("span", { ...getPaginationStatusProps(), class: "og-grid__pagination-status" }, getPaginationPageText(grid, localization)),
+          h("button", { ...getPaginationButtonProps({ action: "next", disabled: !grid.getCanNextPage() }, localization), class: "og-grid__pagination-button", onClick: () => runPaginationAction(() => grid.nextPage()) }, getPaginationButtonText("next")),
+          h("button", { ...getPaginationButtonProps({ action: "last", disabled: !grid.getCanNextPage() }, localization), class: "og-grid__pagination-button", onClick: () => runPaginationAction(() => grid.lastPage()) }, getPaginationButtonText("last"))
         ]),
         h(
           "select",
           {
-            ...getPaginationPageSizeSelectProps(state.value.pagination.pageSize),
+            ...getPaginationPageSizeSelectProps(state.value.pagination.pageSize, localization),
             class: "og-grid__pagination-size",
             onChange: (event) => {
               grid.setPageSize(Number(getCellEditorEventValue(event)));
@@ -1173,18 +1216,19 @@ var DataGrid = defineComponent({
             }
           },
           resolvedPageSizeOptions.map(
-            (pageSize) => h("option", { key: pageSize, value: pageSize }, getPaginationPageSizeOptionText(pageSize))
+            (pageSize) => h("option", { key: pageSize, value: pageSize }, getPaginationPageSizeOptionText(pageSize, localization))
           )
         )
       ]) : null;
-      return h(Fragment, null, [controlsNode, gridNode, paginationNode]);
+      const toolbarNode = props.renderToolbar ? h("div", { class: "og-grid__toolbar-slot" }, [props.renderToolbar(renderContext)]) : null;
+      return h(Fragment, null, [toolbarNode, controlsNode, gridNode, paginationNode]);
     };
   }
 });
 function createDataGrid() {
   return DataGrid;
 }
-function renderHeader(grid, renderKey, header, layout, size, colSpan, columnIndex, headerDragHandlers, columnPinningControls, headerActionMenu, headerActionMenuItems, getHeaderClassName, openHeaderMenuColumnId, onMeasureColumn, onOpenHeaderMenu, onToggleHeaderMenu, onCloseHeaderMenu) {
+function renderHeader(grid, renderKey, header, layout, size, colSpan, columnIndex, headerDragHandlers, columnPinningControls, headerActionMenu, headerActionMenuItems, getHeaderClassName, openHeaderMenuColumnId, onMeasureColumn, onOpenHeaderMenu, onToggleHeaderMenu, onCloseHeaderMenu, localization, renderHeaderProp) {
   const canSort = !header.isPlaceholder && header.column.columns.length === 0 && header.column.getCanSort();
   const canResize = !header.isPlaceholder && header.column.columns.length === 0;
   const canInteract = !header.isPlaceholder && header.column.columns.length === 0;
@@ -1204,7 +1248,7 @@ function renderHeader(grid, renderKey, header, layout, size, colSpan, columnInde
     canGroup: header.column.getCanGroup(),
     canMoveLeft,
     canMoveRight
-  }).map((descriptor) => {
+  }, localization).map((descriptor) => {
     if (descriptor.id === "sort-asc") {
       return { ...descriptor, onSelect: () => grid.toggleColumnSorting(header.column.id, false) };
     }
@@ -1268,19 +1312,19 @@ function renderHeader(grid, renderKey, header, layout, size, colSpan, columnInde
     },
     header.isPlaceholder ? "" : [
       h("button", getHeaderButtonEventProps(grid, header.column, canSort, canInteract, headerDragHandlers), [
-        h("span", { class: "og-grid__header-label" }, renderHeaderValue(grid, header)),
+        h("span", { class: "og-grid__header-label" }, normalizeRenderable(renderHeaderProp?.({ grid, column: header.column, header }) ?? renderHeaderValue(grid, header))),
         h("span", { ...getHeaderSortIndicatorProps(), class: "og-grid__sort-indicator" }, getHeaderSortIndicatorText(sortDirection, { visible: canSort }))
       ]),
-      canInteract && columnPinningControls ? h("span", { ...getColumnPinningControlsProps(header.column), class: "og-grid__pinning-controls" }, [
-        h("button", getPinningButtonProps(grid, header.column, "left", pinningPosition === "left"), getColumnPinningButtonText("left")),
-        h("button", getPinningButtonProps(grid, header.column, false, pinningPosition === false), getColumnPinningButtonText(false)),
-        h("button", getPinningButtonProps(grid, header.column, "right", pinningPosition === "right"), getColumnPinningButtonText("right"))
+      canInteract && columnPinningControls ? h("span", { ...getColumnPinningControlsProps(header.column, localization), class: "og-grid__pinning-controls" }, [
+        h("button", getPinningButtonProps(grid, header.column, "left", pinningPosition === "left", localization), getColumnPinningButtonText("left")),
+        h("button", getPinningButtonProps(grid, header.column, false, pinningPosition === false, localization), getColumnPinningButtonText(false)),
+        h("button", getPinningButtonProps(grid, header.column, "right", pinningPosition === "right", localization), getColumnPinningButtonText("right"))
       ]) : null,
       canInteract && headerActionMenu ? h("span", { class: "og-grid__header-menu" }, [
         h(
           "button",
           {
-            ...getHeaderActionMenuTriggerProps(header.column, { expanded: openHeaderMenuColumnId === header.column.id, controls: menuId }),
+            ...getHeaderActionMenuTriggerProps(header.column, { expanded: openHeaderMenuColumnId === header.column.id, controls: menuId }, localization),
             id: menuTriggerId,
             class: "og-grid__header-menu-trigger",
             onPointerdown: (event) => stopEventPropagation(event),
@@ -1298,12 +1342,12 @@ function renderHeader(grid, renderKey, header, layout, size, colSpan, columnInde
               nextTick(() => focusHeaderActionMenuItemById(document, menuId, focusPosition));
             }
           },
-          HEADER_ACTION_MENU_TRIGGER_TEXT
+          localization.headerActionMenuTrigger
         ),
         openHeaderMenuColumnId === header.column.id ? h(
           "div",
           {
-            ...getHeaderActionMenuProps(header.column),
+            ...getHeaderActionMenuProps(header.column, localization),
             class: "og-grid__header-menu-popover",
             id: menuId,
             onPointerdown: (event) => stopEventPropagation(event),
@@ -1338,7 +1382,7 @@ function renderHeader(grid, renderKey, header, layout, size, colSpan, columnInde
         ) : null
       ]) : null,
       canResize ? h("span", {
-        ...getColumnResizeHandleProps(header.column),
+        ...getColumnResizeHandleProps(header.column, {}, localization),
         class: "og-grid__resize-handle",
         onKeydown: (event) => handleResizeKeyDown(grid, header.column, Math.max(0, columnIndex), event),
         onPointerdown: (event) => handleResizePointerDown(grid, header.column, Math.max(0, columnIndex), event)
@@ -1346,9 +1390,9 @@ function renderHeader(grid, renderKey, header, layout, size, colSpan, columnInde
     ]
   );
 }
-function getPinningButtonProps(grid, column, position, active) {
+function getPinningButtonProps(grid, column, position, active, localization) {
   return {
-    ...getColumnPinningButtonProps(column, { position, active }),
+    ...getColumnPinningButtonProps(column, { position, active }, localization),
     class: "og-grid__pinning-button",
     onPointerdown: (event) => stopEventPropagation(event),
     onClick: (event) => {
@@ -1468,7 +1512,7 @@ function handleResizeKeyDown(grid, column, columnIndex, event) {
     sourceEvent: event
   });
 }
-function renderCell(grid, row, rowIndex, rowIndexOffset, column, columnIndex, layout, beforeSpacerSize, afterSpacerSize, visibleColumns, editDraft, editValidationMessage, commitCellEdit, cancelCellEdit, rangeDragHandlers, getCellClassName) {
+function renderCell(grid, row, rowIndex, rowIndexOffset, column, columnIndex, layout, beforeSpacerSize, afterSpacerSize, visibleColumns, editDraft, editValidationMessage, commitCellEdit, cancelCellEdit, rangeDragHandlers, getCellClassName, localization, renderCellProp) {
   const editing = grid.getIsCellEditing(row.id, column.id);
   const rangeSelected = grid.getIsCellRangeSelected(row.id, column.id);
   const groupLabelCell = getIsGroupLabelCell(row, column, visibleColumns);
@@ -1518,7 +1562,7 @@ function renderCell(grid, row, rowIndex, rowIndexOffset, column, columnIndex, la
       column.columnDef.editOptions ? h(
         "select",
         {
-          ...getCellEditorProps(column, { invalid: Boolean(editValidationMessage.value) }),
+          ...getCellEditorProps(column, { invalid: Boolean(editValidationMessage.value) }, localization),
           class: "og-grid__cell-editor",
           value: editDraft.value,
           onChange: (event) => {
@@ -1555,7 +1599,7 @@ function renderCell(grid, row, rowIndex, rowIndexOffset, column, columnIndex, la
         },
         column.columnDef.editOptions.map((option) => h("option", getCellEditorOptionProps(option), getCellEditorOptionText(option)))
       ) : h("input", {
-        ...getCellEditorProps(column, { invalid: Boolean(editValidationMessage.value) }),
+        ...getCellEditorProps(column, { invalid: Boolean(editValidationMessage.value) }, localization),
         class: "og-grid__cell-editor",
         value: editDraft.value,
         onInput: (event) => {
@@ -1591,13 +1635,13 @@ function renderCell(grid, row, rowIndex, rowIndexOffset, column, columnIndex, la
         }
       }),
       editValidationMessage.value ? h("span", { ...getCellValidationMessageProps(), class: "og-grid__cell-validation" }, editValidationMessage.value) : null
-    ] : fillHandleVisible ? [renderFillHandle(coordinate, rangeDragHandlers), renderCellValue(grid, row, column)] : groupLabelCell ? renderGroupCell(grid, row, column) : renderCellValue(grid, row, column)
+    ] : fillHandleVisible ? [renderFillHandle(coordinate, rangeDragHandlers), renderCellProp?.({ grid, row, column, value: row.getValue(column.id) }) ?? renderCellValue(grid, row, column)] : groupLabelCell ? renderGroupCell(grid, row, column, localization, renderCellProp) : renderCellProp?.({ grid, row, column, value: row.getValue(column.id) }) ?? renderCellValue(grid, row, column)
   );
 }
-function renderGroupCell(grid, row, column) {
+function renderGroupCell(grid, row, column, localization, renderCellProp) {
   const expanded = grid.getIsRowExpanded(row.id);
-  const fallback = row.getIsGroupFooter() || row.groupingColumnId ? void 0 : renderCellValue(grid, row, column);
-  const label = getGroupRowLabel(row, column, { fallback });
+  const fallback = row.getIsGroupFooter() || row.groupingColumnId ? void 0 : renderCellProp?.({ grid, row, column, value: row.getValue(column.id) }) ?? renderCellValue(grid, row, column);
+  const label = getGroupRowLabel(row, column, { fallback }, localization);
   const countText = getGroupRowCountText(row);
   return h(
     "span",
@@ -1609,7 +1653,7 @@ function renderGroupCell(grid, row, column) {
       row.getCanExpand() ? h(
         "button",
         {
-          ...getRowExpansionToggleProps(row, { expanded, label: String(label) }),
+          ...getRowExpansionToggleProps(row, { expanded, label: String(label) }, localization),
           class: "og-grid__group-toggle",
           onPointerdown: (event) => {
             stopEventPropagation(event);
@@ -1643,21 +1687,21 @@ function startCellEdit(grid, rowId, columnId, sourceEvent, editDraft, editValida
   editValidationMessage.value = null;
   grid.startCellEdit(rowId, columnId, sourceEvent);
 }
-function renderGroupingPanel(grid, groupingColumns, panelRef) {
+function renderGroupingPanel(grid, groupingColumns, panelRef, localization) {
   return h(
     "div",
     {
       ref: panelRef,
-      ...getGroupingPanelProps({ empty: groupingColumns.length === 0 }),
+      ...getGroupingPanelProps({ empty: groupingColumns.length === 0 }, localization),
       class: "og-grid__grouping-panel"
     },
-    groupingColumns.length === 0 ? [h("span", { ...getGroupingPanelPlaceholderProps(), class: "og-grid__grouping-placeholder" }, GROUPING_PANEL_EMPTY_MESSAGE)] : groupingColumns.map(
+    groupingColumns.length === 0 ? [h("span", { ...getGroupingPanelPlaceholderProps(), class: "og-grid__grouping-placeholder" }, localization.groupingPanelEmpty)] : groupingColumns.map(
       (column, index) => h("span", { key: column.id, ...getGroupingPanelChipProps(column), class: "og-grid__grouping-chip" }, [
         h("span", { class: "og-grid__grouping-chip-label" }, getColumnLabel(column)),
         h(
           "button",
           {
-            ...getGroupingPanelMoveButtonProps(column, { direction: "left", disabled: index === 0 }),
+            ...getGroupingPanelMoveButtonProps(column, { direction: "left", disabled: index === 0 }, localization),
             class: "og-grid__grouping-move",
             onClick: () => moveGroupedColumn(grid, groupingColumns, column.id, "left")
           },
@@ -1666,7 +1710,7 @@ function renderGroupingPanel(grid, groupingColumns, panelRef) {
         h(
           "button",
           {
-            ...getGroupingPanelMoveButtonProps(column, { direction: "right", disabled: index === groupingColumns.length - 1 }),
+            ...getGroupingPanelMoveButtonProps(column, { direction: "right", disabled: index === groupingColumns.length - 1 }, localization),
             class: "og-grid__grouping-move",
             onClick: () => moveGroupedColumn(grid, groupingColumns, column.id, "right")
           },
@@ -1675,7 +1719,7 @@ function renderGroupingPanel(grid, groupingColumns, panelRef) {
         h(
           "button",
           {
-            ...getGroupingPanelRemoveButtonProps(column),
+            ...getGroupingPanelRemoveButtonProps(column, localization),
             class: "og-grid__grouping-remove",
             onClick: () => grid.toggleColumnGrouping(column.id, false)
           },
@@ -1725,14 +1769,17 @@ function downloadExportFile(file) {
   return downloadBrowserExportFile(file);
 }
 export {
+  DEFAULT_GRID_LOCALIZATION,
   DataGrid,
   GRID_PREFERENCES_VERSION,
   createColumnHelper,
   createDataGrid,
+  createGridLocalization2 as createGridLocalization,
   createGridPreferences,
   downloadExportFile,
   fitColumnsToWidth,
   getBrowserGridPreferencesStorage,
+  migrateGridPreferences,
   parseGridPreferences,
   readGridPreferences,
   removeGridPreferences,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-grid/vue-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Optional styled Vue data grid for Open Grid.",
   "keywords": [
     "data-grid",
@@ -35,23 +35,24 @@
   "scripts": {
     "build": "tsup src/index.ts --format esm --dts --clean --external vue && mkdir -p dist && cp ../react-ui/src/index.css dist/index.css",
     "check": "tsc --noEmit",
-    "test": "vitest run --passWithNoTests",
+    "test": "vitest run",
     "lint": "tsc --noEmit"
   },
   "dependencies": {
-    "@open-grid/core": "0.1.0",
-    "@open-grid/primitives": "0.1.0",
-    "@open-grid/vue": "0.1.0",
-    "@open-grid/virtual": "0.1.0"
+    "@open-grid/core": "0.2.0",
+    "@open-grid/primitives": "0.2.0",
+    "@open-grid/vue": "0.2.0",
+    "@open-grid/virtual": "0.2.0"
   },
   "peerDependencies": {
     "vue": "^3.4.0"
   },
   "devDependencies": {
+    "@vue/server-renderer": "^3.5.42",
     "tsup": "^8.3.5",
     "typescript": "^5.7.2",
     "vitest": "^2.1.8",
-    "vue": "^3.5.41"
+    "vue": "^3.5.42"
   },
   "repository": {
     "type": "git",