diff --git a/examples/grid-lite/components-react/src/App.tsx b/examples/grid-lite/components-react/src/App.tsx
index 6a8be0f..2c4e00e 100644
--- a/examples/grid-lite/components-react/src/App.tsx
+++ b/examples/grid-lite/components-react/src/App.tsx
@@ -127,7 +127,7 @@ function App() {
Team directory
-
Grid Pro Components
Declarative API with gridKey and event props
;
+export type DataProps = Shared.DataProps;
+export type ColumnDefaultsProps = Shared.ColumnDefaultsProps<
+ GridLite.Options['columnDefaults']
+>;
+export type ColumnProps = Shared.ColumnProps<
+ Omit
+>;
+export type DescriptionProps = Shared.DescriptionProps<
+ GridLite.Options['description']
+>;
+export type PaginationProps = Shared.PaginationProps<
+ GridLite.Options['pagination']
+>;
+export type HeaderProps = Shared.HeaderProps;
+
+export const Caption = Shared.Caption as (props: CaptionProps) => null;
+export const Data = Shared.Data as (props: DataProps) => null;
+export const ColumnDefaults = Shared.ColumnDefaults as (
+ props: ColumnDefaultsProps
+) => null;
+export const Column = Shared.Column as (props: ColumnProps) => null;
+export const Description = Shared.Description as (
+ props: DescriptionProps
+) => null;
+export const Pagination = Shared.Pagination as (
+ props: PaginationProps
+) => null;
+export const Header = Shared.Header as (props: HeaderProps) => null;
+
export type {
GridInstance,
GridRefHandle,
- CaptionProps,
- DescriptionProps,
- DataProps,
DataColumns,
DataColumnValue,
- ColumnProps,
ColumnOptionsProps,
ColumnDataType,
ColumnSortingOrder,
CellValueGetterContext,
- PaginationProps,
- HeaderProps,
GroupedHeaderOptions,
HeaderCellAccessibilityProps
} from '@highcharts/grid-shared-react';
diff --git a/packages/grid-pro-react/src/index.ts b/packages/grid-pro-react/src/index.ts
index 01e6fee..02723e8 100644
--- a/packages/grid-pro-react/src/index.ts
+++ b/packages/grid-pro-react/src/index.ts
@@ -7,40 +7,51 @@
*
*/
-import type { ComponentType } from 'react';
-import {
- Column as SharedColumn,
- Data as SharedData,
- Pagination as SharedPagination,
- Caption,
- ColumnDefaults,
- Description,
- Header
-} from '@highcharts/grid-shared-react';
+import * as Shared from '@highcharts/grid-shared-react';
+import type { GridProOptions } from './utils/mappers/grid';
import type { ProColumnProps } from './utils/mappers/column';
import type { ProPaginationProps } from './utils/mappers/pagination';
export { default as Grid } from './Grid';
export { default as GridPro } from './Grid';
-export { Caption, ColumnDefaults, Description, Header };
-export const Column = SharedColumn as ComponentType;
-export const Data = SharedData;
-export const Pagination = SharedPagination as ComponentType;
export { DataTable, DataConnector } from '@highcharts/grid-pro';
export { merge } from '@highcharts/grid-pro/es-modules/Shared/Utilities.js';
+
+export type CaptionProps = Shared.CaptionProps;
+export type DataProps = Shared.DataProps;
+export type ColumnDefaultsProps = Shared.ColumnDefaultsProps<
+ GridProOptions['columnDefaults']
+>;
+export type DescriptionProps = Shared.DescriptionProps<
+ GridProOptions['description']
+>;
+export type HeaderProps = Shared.HeaderProps;
+export type ColumnProps = ProColumnProps;
+export type PaginationProps = ProPaginationProps;
+
+export const Caption = Shared.Caption as (props: CaptionProps) => null;
+export const Data = Shared.Data as (props: DataProps) => null;
+export const ColumnDefaults = Shared.ColumnDefaults as (
+ props: ColumnDefaultsProps
+) => null;
+export const Description = Shared.Description as (
+ props: DescriptionProps
+) => null;
+export const Header = Shared.Header as (props: HeaderProps) => null;
+export const Column = Shared.Column as (props: ProColumnProps) => null;
+export const Pagination = Shared.Pagination as (
+ props: ProPaginationProps
+) => null;
+
export type {
GridInstance,
GridRefHandle,
- CaptionProps,
- DescriptionProps,
- DataProps,
DataColumns,
DataColumnValue,
ColumnOptionsProps,
ColumnDataType,
ColumnSortingOrder,
CellValueGetterContext,
- HeaderProps,
GroupedHeaderOptions,
HeaderCellAccessibilityProps
} from '@highcharts/grid-shared-react';
diff --git a/packages/grid-pro-react/src/utils/mappers/column/columnOptions.ts b/packages/grid-pro-react/src/utils/mappers/column/columnOptions.ts
index a1e3bce..55ff4d7 100644
--- a/packages/grid-pro-react/src/utils/mappers/column/columnOptions.ts
+++ b/packages/grid-pro-react/src/utils/mappers/column/columnOptions.ts
@@ -10,6 +10,7 @@
import { isObject } from '@highcharts/grid-shared-react';
import { mapEventsProps } from '../../mapEventsProps';
import type { ColumnProps } from '@highcharts/grid-shared-react';
+import type { IndividualColumnOptions } from '@highcharts/grid-pro/es-modules/Grid/Core/Options';
import type {
CellEventCallback,
ColumnEventCallback
@@ -55,7 +56,9 @@ export type ProColumnEventProps = (
/**
* Column props for Grid Pro, including event handlers.
*/
-export type ProColumnProps = ColumnProps & ProColumnEventProps;
+export type ProColumnProps = ColumnProps<
+ Omit
+> & ProColumnEventProps;
/** Flat event prop → nested Grid option path for columns. */
const COLUMN_EVENT_ALIASES = {
diff --git a/packages/grid-pro-react/src/utils/mappers/pagination/paginationOptions.ts b/packages/grid-pro-react/src/utils/mappers/pagination/paginationOptions.ts
index 855a0c8..87972dc 100644
--- a/packages/grid-pro-react/src/utils/mappers/pagination/paginationOptions.ts
+++ b/packages/grid-pro-react/src/utils/mappers/pagination/paginationOptions.ts
@@ -10,6 +10,7 @@
import { isObject } from '@highcharts/grid-shared-react';
import { mapEventsProps } from '../../mapEventsProps';
import type { PaginationProps } from '@highcharts/grid-shared-react';
+import type { GridProOptions } from '../grid/gridOptions';
import type {
AfterPageChangeEvent,
AfterPageSizeChangeEvent,
@@ -30,7 +31,9 @@ export interface PaginationEventProps {
/**
* Pagination props for Grid Pro, including event handlers.
*/
-export type ProPaginationProps = PaginationProps & PaginationEventProps;
+export type ProPaginationProps = PaginationProps<
+ GridProOptions['pagination']
+> & PaginationEventProps;
/** Flat event prop → nested Grid option path for pagination. */
const PAGINATION_EVENT_ALIASES = {
diff --git a/packages/grid-pro-react/tests/mappers/columnOptions.test.tsx b/packages/grid-pro-react/tests/mappers/columnOptions.test.tsx
index 4562165..2b39512 100644
--- a/packages/grid-pro-react/tests/mappers/columnOptions.test.tsx
+++ b/packages/grid-pro-react/tests/mappers/columnOptions.test.tsx
@@ -12,11 +12,11 @@ describe('mapColumnEventProps', () => {
const onCellClick = vi.fn();
expect(mapColumnEventProps({
- columnId: 'name',
+ id: 'name',
onAfterSort,
onCellClick
})).toEqual({
- columnId: 'name',
+ id: 'name',
events: {
afterSort: onAfterSort
},
@@ -33,11 +33,11 @@ describe('mapColumnEventProps', () => {
const onHeaderAfterRender = vi.fn();
expect(mapColumnEventProps({
- columnId: 'name',
+ id: 'name',
onHeaderClick,
onHeaderAfterRender
})).toEqual({
- columnId: 'name',
+ id: 'name',
header: {
events: {
click: onHeaderClick,
@@ -64,7 +64,7 @@ describe('mergeColumnEventProps', () => {
}}
/>
diff --git a/packages/grid-pro-react/tests/mappers/gridOptions.test.tsx b/packages/grid-pro-react/tests/mappers/gridOptions.test.tsx
index dc07360..180d7c1 100644
--- a/packages/grid-pro-react/tests/mappers/gridOptions.test.tsx
+++ b/packages/grid-pro-react/tests/mappers/gridOptions.test.tsx
@@ -67,7 +67,7 @@ describe('buildGridOptions', () => {
it('maps declarative children and builds full grid options', () => {
const options = buildGridOptions(
'GRID-KEY',
- getChildProps(),
+ getChildProps(),
void 0,
{ gridKey: 'GRID-KEY' } as GridProProps
);
diff --git a/packages/grid-shared-react/src/components/BaseGrid.tsx b/packages/grid-shared-react/src/components/BaseGrid.tsx
index b9df08f..5874a07 100644
--- a/packages/grid-shared-react/src/components/BaseGrid.tsx
+++ b/packages/grid-shared-react/src/components/BaseGrid.tsx
@@ -29,7 +29,7 @@ export interface GridRefHandle {
*/
export interface GridProps {
/**
- * Grid configuration options
+ * Options JSON, same as in the Grid JS API.
*/
options?: TOptions;
/**
diff --git a/packages/grid-shared-react/src/components/options/caption/Caption.tsx b/packages/grid-shared-react/src/components/options/caption/Caption.tsx
index 99c9199..629be79 100644
--- a/packages/grid-shared-react/src/components/options/caption/Caption.tsx
+++ b/packages/grid-shared-react/src/components/options/caption/Caption.tsx
@@ -9,7 +9,7 @@
import { ReactNode } from 'react';
-export interface CaptionProps {
+export interface CaptionProps {
/**
* The custom CSS class name for the table caption.
*/
@@ -18,10 +18,14 @@ export interface CaptionProps {
* The HTML tag to use for the caption.
*/
htmlTag?: string;
+ /**
+ * Options JSON, same as in the Grid JS API (`caption`).
+ */
+ options?: TOptions;
children?: ReactNode;
}
-export function Caption(_props: CaptionProps) {
+export function Caption(_props: CaptionProps) {
return null;
}
diff --git a/packages/grid-shared-react/src/components/options/columns/Column.tsx b/packages/grid-shared-react/src/components/options/columns/Column.tsx
index f5cd44a..0c96a7d 100644
--- a/packages/grid-shared-react/src/components/options/columns/Column.tsx
+++ b/packages/grid-shared-react/src/components/options/columns/Column.tsx
@@ -9,7 +9,7 @@
import type { ColumnProps } from './columnProps';
-export function Column(_props: ColumnProps) {
+export function Column(_props: ColumnProps) {
return null;
}
diff --git a/packages/grid-shared-react/src/components/options/columns/ColumnDefaults.tsx b/packages/grid-shared-react/src/components/options/columns/ColumnDefaults.tsx
index d5a1faf..9bdf822 100644
--- a/packages/grid-shared-react/src/components/options/columns/ColumnDefaults.tsx
+++ b/packages/grid-shared-react/src/components/options/columns/ColumnDefaults.tsx
@@ -9,11 +9,8 @@
import type { ColumnOptionsProps } from './columnProps';
-/**
- * ColumnDefaults props include shared column options plus grid-level row
- * class hooks (lifted to `rendering.rows` during normalize).
- */
-export interface ColumnDefaultsProps extends ColumnOptionsProps {
+export interface ColumnDefaultsProps
+ extends ColumnOptionsProps {
/**
* CSS class names on every body ``.
* Maps to Core `rendering.rows.className`.
@@ -24,9 +21,15 @@ export interface ColumnDefaultsProps extends ColumnOptionsProps {
* Maps to Core `rendering.rows.evenClassName`.
*/
evenRowClassName?: string;
+ /**
+ * Options JSON, same as in the Grid JS API (`columnDefaults`).
+ */
+ options?: TOptions;
}
-export function ColumnDefaults(_props: ColumnDefaultsProps) {
+export function ColumnDefaults(
+ _props: ColumnDefaultsProps
+) {
return null;
}
diff --git a/packages/grid-shared-react/src/components/options/columns/columnProps.ts b/packages/grid-shared-react/src/components/options/columns/columnProps.ts
index 1452f99..937cd94 100644
--- a/packages/grid-shared-react/src/components/options/columns/columnProps.ts
+++ b/packages/grid-shared-react/src/components/options/columns/columnProps.ts
@@ -57,18 +57,21 @@ export interface ColumnOptionsProps {
exportable?: boolean;
}
-export interface ColumnProps extends ColumnOptionsProps {
+export interface ColumnProps extends ColumnOptionsProps {
/**
- * HTML `id` attribute for styling hooks. Not passed to Grid options.
+ * Column identity in Grid. Maps to Core `columns[].id`.
+ * Not an HTML id — this component does not render a DOM node.
*/
- id?: string;
+ id: string;
/**
- * References the column to configure (data field id). Maps header, cells,
- * sorting, filtering, etc. to Grid Core column options.
- *
- * Becomes `options.columns[].id` in Grid Core (same identifier).
+ * Data-source column id. `undefined` defaults to `id`. `null` forces
+ * the column to be unbound (virtual / computed).
*/
- columnId?: string;
+ dataId?: string | null;
className?: string;
enabled?: boolean;
+ /**
+ * Options JSON, same as in the Grid JS API (`columns[]`).
+ */
+ options?: TOptions;
}
diff --git a/packages/grid-shared-react/src/components/options/data/Data.tsx b/packages/grid-shared-react/src/components/options/data/Data.tsx
index 7ec764a..6299b66 100644
--- a/packages/grid-shared-react/src/components/options/data/Data.tsx
+++ b/packages/grid-shared-react/src/components/options/data/Data.tsx
@@ -11,7 +11,7 @@ export type DataColumnValue = boolean | null | number | string | undefined;
export type DataColumns = Record>;
-export interface DataProps {
+export interface DataProps {
/**
* The type of the data provider.
*
@@ -51,9 +51,13 @@ export interface DataProps {
* The column ID that contains the stable, unique row IDs.
*/
idColumn?: string;
+ /**
+ * Options JSON, same as in the Grid JS API (`data`).
+ */
+ options?: TOptions;
}
-export function Data(_props: DataProps) {
+export function Data(_props: DataProps) {
return null;
}
diff --git a/packages/grid-shared-react/src/components/options/description/Description.tsx b/packages/grid-shared-react/src/components/options/description/Description.tsx
index c6ee575..d3d32ba 100644
--- a/packages/grid-shared-react/src/components/options/description/Description.tsx
+++ b/packages/grid-shared-react/src/components/options/description/Description.tsx
@@ -9,15 +9,21 @@
import { ReactNode } from 'react';
-export interface DescriptionProps {
+export interface DescriptionProps {
/**
* The custom CSS class name for the description.
*/
className?: string;
+ /**
+ * Options JSON, same as in the Grid JS API (`description`).
+ */
+ options?: TOptions;
children?: ReactNode;
}
-export function Description(_props: DescriptionProps) {
+export function Description(
+ _props: DescriptionProps
+) {
return null;
}
diff --git a/packages/grid-shared-react/src/components/options/header/Header.tsx b/packages/grid-shared-react/src/components/options/header/Header.tsx
index b952ef3..bd96ca4 100644
--- a/packages/grid-shared-react/src/components/options/header/Header.tsx
+++ b/packages/grid-shared-react/src/components/options/header/Header.tsx
@@ -9,7 +9,7 @@
import type { HeaderProps } from './headerProps';
-export function Header(_props: HeaderProps) {
+export function Header(_props: HeaderProps) {
return null;
}
diff --git a/packages/grid-shared-react/src/components/options/header/headerProps.ts b/packages/grid-shared-react/src/components/options/header/headerProps.ts
index 86f57bb..72d9d35 100644
--- a/packages/grid-shared-react/src/components/options/header/headerProps.ts
+++ b/packages/grid-shared-react/src/components/options/header/headerProps.ts
@@ -26,11 +26,9 @@ export interface GroupedHeaderOptions {
columns?: Array;
}
-export interface HeaderProps {
+export interface HeaderProps {
/**
- * Header tree: column order, inclusion, and grouping.
- * Each entry is a column id (`string`) or a {@link GroupedHeaderOptions}
- * object. Maps to Grid Core `options.header`.
+ * Options JSON, same as in the Grid JS API (`header`).
*/
- header?: Array;
+ options?: TOptions;
}
diff --git a/packages/grid-shared-react/src/components/options/pagination/Pagination.tsx b/packages/grid-shared-react/src/components/options/pagination/Pagination.tsx
index 8a169d7..b4ada71 100644
--- a/packages/grid-shared-react/src/components/options/pagination/Pagination.tsx
+++ b/packages/grid-shared-react/src/components/options/pagination/Pagination.tsx
@@ -9,7 +9,9 @@
import type { PaginationProps } from './paginationProps';
-export function Pagination(_props: PaginationProps) {
+export function Pagination(
+ _props: PaginationProps
+) {
return null;
}
diff --git a/packages/grid-shared-react/src/components/options/pagination/paginationProps.ts b/packages/grid-shared-react/src/components/options/pagination/paginationProps.ts
index 3e31579..bae839b 100644
--- a/packages/grid-shared-react/src/components/options/pagination/paginationProps.ts
+++ b/packages/grid-shared-react/src/components/options/pagination/paginationProps.ts
@@ -7,7 +7,7 @@
*
*/
-export interface PaginationProps {
+export interface PaginationProps {
/**
* Whether pagination should be rendered.
* Defaults to `true` when the `` component is used.
@@ -74,4 +74,8 @@ export interface PaginationProps {
* Whether to show the previous and next page navigation buttons.
*/
previousNext?: boolean;
+ /**
+ * Options JSON, same as in the Grid JS API (`pagination`).
+ */
+ options?: TOptions;
}
diff --git a/packages/grid-shared-react/src/utils/getChildProps.ts b/packages/grid-shared-react/src/utils/getChildProps.ts
index aca622a..baeb6e2 100644
--- a/packages/grid-shared-react/src/utils/getChildProps.ts
+++ b/packages/grid-shared-react/src/utils/getChildProps.ts
@@ -10,6 +10,7 @@
import { Fragment, isValidElement, ReactElement, ReactNode } from 'react';
import type { BaseGridOptionsComponent, BaseGridOptions } from '../components/BaseGridOptions';
import { isObject } from './isObject';
+import { mergeComponentOptions } from './mergeOptions';
function flattenChildren(childNodes: ReactNode): ReactNode[] {
if (childNodes == null || childNodes === false) {
@@ -115,17 +116,9 @@ function getEffectiveMeta(
function parseColumnElement(child: ReactElement): Record {
const {
children,
- id,
- columnId,
...props
} = getChildPropsFromElement(child);
void children;
- void id;
-
- // columnId selects the column; Core expects the same value as `id`.
- if (columnId !== void 0) {
- props.id = columnId;
- }
return props;
}
@@ -223,8 +216,8 @@ export function getChildProps(children: ReactNode): Record {
}
if (meta.gridOption === 'header') {
- if (props.header !== void 0) {
- optionsFromChildren.header = props.header;
+ if (props.options !== void 0) {
+ optionsFromChildren.header = props.options;
}
return;
}
@@ -241,7 +234,7 @@ export function getChildProps(children: ReactNode): Record {
Object.assign(insertInto, meta.defaultOptions);
}
- Object.assign(insertInto, props);
+ Object.assign(insertInto, mergeComponentOptions(props));
if (typeof childChildren === 'string' || typeof childChildren === 'number') {
if (meta.childOption) {
diff --git a/packages/grid-shared-react/src/utils/mappers/column/columnOptions.ts b/packages/grid-shared-react/src/utils/mappers/column/columnOptions.ts
index f1ae833..c2869cd 100644
--- a/packages/grid-shared-react/src/utils/mappers/column/columnOptions.ts
+++ b/packages/grid-shared-react/src/utils/mappers/column/columnOptions.ts
@@ -8,6 +8,7 @@
*/
import { mapPrefixedProps } from '../mapPrefixedProps';
+import { mergeComponentOptions } from '../../mergeOptions';
/** Flat prop prefix → nested Grid option key for columns. */
const COLUMN_PROP_PREFIXES = {
@@ -20,5 +21,7 @@ const COLUMN_PROP_PREFIXES = {
export function normalizeColumnOptions(
props: Record
): Record {
- return mapPrefixedProps(props, COLUMN_PROP_PREFIXES);
+ return mergeComponentOptions(props, (flat) => (
+ mapPrefixedProps(flat, COLUMN_PROP_PREFIXES)
+ ));
}
diff --git a/packages/grid-shared-react/src/utils/mappers/pagination/paginationOptions.ts b/packages/grid-shared-react/src/utils/mappers/pagination/paginationOptions.ts
index 6730758..d43b193 100644
--- a/packages/grid-shared-react/src/utils/mappers/pagination/paginationOptions.ts
+++ b/packages/grid-shared-react/src/utils/mappers/pagination/paginationOptions.ts
@@ -7,6 +7,8 @@
*
*/
+import { mergeComponentOptions } from '../../mergeOptions';
+
function withClassName(
value: unknown,
className: string | undefined
@@ -30,7 +32,7 @@ function withClassName(
};
}
-export function normalizePaginationOptions(
+function mapPaginationFlat(
props: Record
): Record {
const {
@@ -52,10 +54,11 @@ export function normalizePaginationOptions(
...rest
} = props;
- const result: Record = {
- enabled: enabled ?? true
- };
+ const result: Record = {};
+ if (enabled !== void 0) {
+ result.enabled = enabled;
+ }
if (page !== void 0) {
result.page = page;
}
@@ -128,6 +131,18 @@ export function normalizePaginationOptions(
return { ...result, ...rest };
}
+export function normalizePaginationOptions(
+ props: Record
+): Record {
+ const merged = mergeComponentOptions(props, mapPaginationFlat);
+
+ if (!('enabled' in merged)) {
+ merged.enabled = true;
+ }
+
+ return merged;
+}
+
function asString(value: unknown): string | undefined {
return typeof value === 'string' ? value : void 0;
}
diff --git a/packages/grid-shared-react/src/utils/mergeOptions.ts b/packages/grid-shared-react/src/utils/mergeOptions.ts
new file mode 100644
index 0000000..5b43709
--- /dev/null
+++ b/packages/grid-shared-react/src/utils/mergeOptions.ts
@@ -0,0 +1,50 @@
+/**
+ * Grid React integration.
+ * Copyright (c) 2025, Highsoft
+ *
+ * A valid license is required for using this software.
+ * See highcharts.com/license
+ *
+ */
+
+import { isObject } from './isObject';
+
+/**
+ * Deep-merges plain objects. Arrays and primitives in `override` replace
+ * `base`. `undefined` in `override` is skipped so omitted React props do
+ * not clobber values from `options`.
+ */
+function deepMerge(
+ base: Record,
+ override: Record
+): Record {
+ const result: Record = { ...base };
+
+ for (const [key, value] of Object.entries(override)) {
+ if (value === void 0) {
+ continue;
+ }
+
+ const existing = result[key];
+
+ result[key] = isObject(existing) && isObject(value) ?
+ deepMerge(existing, value) :
+ value;
+ }
+
+ return result;
+}
+
+/**
+ * Merges a Core-shaped `options` bag with flattened props. Flattened
+ * props win. Pass `map` when those props need prefix mapping first.
+ */
+export function mergeComponentOptions(
+ props: Record,
+ map?: (flat: Record) => Record
+): Record {
+ const { options, ...rest } = props;
+ const mapped = map ? map(rest) : rest;
+
+ return isObject(options) ? deepMerge(options, mapped) : mapped;
+}
diff --git a/packages/grid-shared-react/tests/options/Caption.test.tsx b/packages/grid-shared-react/tests/options/Caption.test.tsx
index 832944e..a712e8c 100644
--- a/packages/grid-shared-react/tests/options/Caption.test.tsx
+++ b/packages/grid-shared-react/tests/options/Caption.test.tsx
@@ -6,7 +6,11 @@ describe('Caption', () => {
it('maps caption props and children into options.caption', () => {
expect(
getChildProps(
-
+
Sales table
)
diff --git a/packages/grid-shared-react/tests/options/Column.test.tsx b/packages/grid-shared-react/tests/options/Column.test.tsx
index 408b9d0..36d6a10 100644
--- a/packages/grid-shared-react/tests/options/Column.test.tsx
+++ b/packages/grid-shared-react/tests/options/Column.test.tsx
@@ -8,8 +8,7 @@ describe('Column parser', () => {
expect(
getChildProps(
{
expect(
getChildProps(
<>
-
-
+
+
>
)
).toEqual({
@@ -48,6 +47,23 @@ describe('Column parser', () => {
}
});
});
+
+ it('keeps dataId for unbound columns', () => {
+ expect(
+ getChildProps(
+
+ )
+ ).toEqual({
+ columns: [{
+ id: 'index',
+ dataId: null,
+ width: 40
+ }],
+ data: {
+ autogenerateColumns: false
+ }
+ });
+ });
});
describe('Column normalization', () => {
@@ -56,7 +72,7 @@ describe('Column normalization', () => {
normalizeChildOptions(
getChildProps(
{
}
});
});
+
+ it('merges Core-shaped options under flattened props', () => {
+ expect(
+ normalizeChildOptions(
+ getChildProps(
+
+ )
+ )
+ ).toEqual({
+ columns: [{
+ id: 'price',
+ sorting: {
+ enabled: true,
+ order: 'desc'
+ },
+ header: {
+ className: 'price-header',
+ format: '{value} USD'
+ }
+ }],
+ data: {
+ autogenerateColumns: false
+ }
+ });
+ });
});
diff --git a/packages/grid-shared-react/tests/options/ColumnDefaults.test.tsx b/packages/grid-shared-react/tests/options/ColumnDefaults.test.tsx
index ae83c94..142a38f 100644
--- a/packages/grid-shared-react/tests/options/ColumnDefaults.test.tsx
+++ b/packages/grid-shared-react/tests/options/ColumnDefaults.test.tsx
@@ -58,7 +58,7 @@ describe('ColumnDefaults normalization', () => {
cellClassName="p-4 text-left border-b"
/>
{
- it('maps header prop to options.header', () => {
+ it('maps options prop to options.header', () => {
const header = ['product', { columnId: 'price', format: '{value} USD' }];
- expect(getChildProps()).toEqual({
+ expect(getChildProps()).toEqual({
header
});
});
diff --git a/packages/grid-shared-react/tests/options/Pagination.test.tsx b/packages/grid-shared-react/tests/options/Pagination.test.tsx
index fed4546..224d5b2 100644
--- a/packages/grid-shared-react/tests/options/Pagination.test.tsx
+++ b/packages/grid-shared-react/tests/options/Pagination.test.tsx
@@ -130,4 +130,34 @@ describe('Pagination normalization', () => {
}
});
});
+
+ it('merges Core-shaped options under flattened pagination props', () => {
+ expect(
+ normalizeChildOptions(
+ getChildProps(
+
+ )
+ )
+ ).toEqual({
+ pagination: {
+ enabled: false,
+ pageSize: 25,
+ position: 'top',
+ controls: {
+ pageButtons: {
+ enabled: true,
+ count: 3
+ }
+ }
+ }
+ });
+ });
});