diff --git a/README.md b/README.md
index a30e5ba..3ae298c 100644
--- a/README.md
+++ b/README.md
@@ -90,8 +90,8 @@ export function App() {
age: [23, 34, 45]
}}
/>
-
-
+
+
);
}
@@ -135,8 +135,8 @@ export function App() {
age: [23, 34, 45]
}}
/>
-
-
+
+
);
}
diff --git a/packages/grid-lite-react/README.md b/packages/grid-lite-react/README.md
index 0131af7..24a37cd 100644
--- a/packages/grid-lite-react/README.md
+++ b/packages/grid-lite-react/README.md
@@ -78,7 +78,7 @@ export function App() {
### Using components
```jsx
-import { Grid, Caption, Data, Column, Pagination } from '@highcharts/grid-lite-react';
+import { Grid, Caption, Data, Column, Header, Pagination } from '@highcharts/grid-lite-react';
export function App() {
return (
@@ -91,15 +91,18 @@ export function App() {
city: ['New York', 'Oslo', 'Paris']
}}
/>
-
-
-
+
+
+
+
);
}
```
+Each option component also accepts an `options` prop with the same JSON as the Grid JS API. Flattened props override that object.
+
## Grid props
The grid is rendered inside a container. You can pass layout and theme props directly to `Grid`:
diff --git a/packages/grid-lite-react/src/Grid.tsx b/packages/grid-lite-react/src/Grid.tsx
index d6aec44..d14dec8 100644
--- a/packages/grid-lite-react/src/Grid.tsx
+++ b/packages/grid-lite-react/src/Grid.tsx
@@ -17,6 +17,11 @@ import type { Options } from '@highcharts/grid-lite/es-modules/Grid/Core/Options
import type { GridProps } from '@highcharts/grid-shared-react';
import { buildGridOptions } from './utils/buildGridOptions';
+/**
+ * Grid Lite React component.
+ *
+ * Links to Grid.Options
+ */
export default function GridLite(props: GridProps) {
const {
gridRef,
diff --git a/packages/grid-pro-react/README.md b/packages/grid-pro-react/README.md
index 900396c..1bd1404 100644
--- a/packages/grid-pro-react/README.md
+++ b/packages/grid-pro-react/README.md
@@ -84,6 +84,7 @@ import {
Caption,
Data,
Column,
+ Header,
Pagination
} from '@highcharts/grid-pro-react';
@@ -98,15 +99,18 @@ export function App() {
city: ['New York', 'Oslo', 'Paris']
}}
/>
-
-
-
+
+
+
+
);
}
```
+Each option component also accepts an `options` prop with the same JSON as the Grid JS API. Flattened props override that object.
+
## Grid props
The grid is rendered inside a container. You can pass layout, theme, and Pro event props directly to `Grid`:
diff --git a/packages/grid-pro-react/src/Grid.tsx b/packages/grid-pro-react/src/Grid.tsx
index 7400e61..4c5d134 100644
--- a/packages/grid-pro-react/src/Grid.tsx
+++ b/packages/grid-pro-react/src/Grid.tsx
@@ -19,6 +19,11 @@ import {
} from './utils/mappers/grid';
import { buildGridOptions } from './utils/buildGridOptions';
+/**
+ * Grid Pro React component.
+ *
+ * Links to Grid.Options
+ */
export default function GridPro(props: GridProProps) {
const { gridRef, children, options, callback, className } = props;
const { gridOptions, columnKey } = useDeclarativeGridOptions(
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 55ff4d7..b574e03 100644
--- a/packages/grid-pro-react/src/utils/mappers/column/columnOptions.ts
+++ b/packages/grid-pro-react/src/utils/mappers/column/columnOptions.ts
@@ -17,33 +17,72 @@ import type {
} from '@highcharts/grid-pro/es-modules/Grid/Pro/GridEvents.js';
/**
- * Column-level event props mapped to `columns[].events`.
+ * Column-level event props mapped to `columns[].events`. Grid Pro.
*/
export interface ColumnLevelEventProps {
+ /**
+ * Links to Grid.Options.columns.events.afterResize
+ */
onAfterResize?: ColumnEventCallback;
+ /**
+ * Links to Grid.Options.columns.events.beforeSort
+ */
onBeforeSort?: ColumnEventCallback;
+ /**
+ * Links to Grid.Options.columns.events.afterSort
+ */
onAfterSort?: ColumnEventCallback;
+ /**
+ * Links to Grid.Options.columns.events.beforeFilter
+ */
onBeforeFilter?: ColumnEventCallback;
+ /**
+ * Links to Grid.Options.columns.events.afterFilter
+ */
onAfterFilter?: ColumnEventCallback;
}
/**
- * Cell-level event props mapped to `columns[].cells.events`.
+ * Cell-level event props mapped to `columns[].cells.events`. Grid Pro.
*/
export interface CellLevelEventProps {
+ /**
+ * Links to Grid.Options.columns.cells.events.click
+ */
onCellClick?: CellEventCallback;
+ /**
+ * Links to Grid.Options.columns.cells.events.dblClick
+ */
onCellDblClick?: CellEventCallback;
+ /**
+ * Links to Grid.Options.columns.cells.events.mouseOver
+ */
onCellMouseOver?: CellEventCallback;
+ /**
+ * Links to Grid.Options.columns.cells.events.mouseOut
+ */
onCellMouseOut?: CellEventCallback;
+ /**
+ * Links to Grid.Options.columns.cells.events.afterRender
+ */
onCellAfterRender?: CellEventCallback;
+ /**
+ * Links to Grid.Options.columns.cells.events.afterEdit
+ */
onCellAfterEdit?: CellEventCallback;
}
/**
- * Header-level event props mapped to `columns[].header.events`.
+ * Header-level event props mapped to `columns[].header.events`. Grid Pro.
*/
export interface HeaderLevelEventProps {
+ /**
+ * Links to Grid.Options.columns.header.events.click
+ */
onHeaderClick?: ColumnEventCallback;
+ /**
+ * Links to Grid.Options.columns.header.events.afterRender
+ */
onHeaderAfterRender?: ColumnEventCallback;
}
diff --git a/packages/grid-pro-react/src/utils/mappers/grid/gridOptions.ts b/packages/grid-pro-react/src/utils/mappers/grid/gridOptions.ts
index 4d62502..e9989a6 100644
--- a/packages/grid-pro-react/src/utils/mappers/grid/gridOptions.ts
+++ b/packages/grid-pro-react/src/utils/mappers/grid/gridOptions.ts
@@ -29,25 +29,54 @@ export type GridProOptions = GridPro.Options & {
export type GridOptions = GridProOptions;
/**
- * Grid-level event props mapped to `options.events`.
+ * Grid-level event props mapped to `options.events`. Grid Pro.
*/
export interface GridLevelEventProps {
+ /**
+ * Links to Grid.Options.events.beforeLoad
+ */
onBeforeLoad?: GridEventCallback;
+ /**
+ * Links to Grid.Options.events.afterLoad
+ */
onAfterLoad?: GridEventCallback;
+ /**
+ * Links to Grid.Options.events.beforeUpdate
+ */
onBeforeUpdate?: GridEventCallback;
+ /**
+ * Links to Grid.Options.events.afterUpdate
+ */
onAfterUpdate?: GridEventCallback;
+ /**
+ * Links to Grid.Options.events.beforeRedraw
+ */
onBeforeRedraw?: GridEventCallback;
+ /**
+ * Links to Grid.Options.events.afterRedraw
+ */
onAfterRedraw?: GridEventCallback;
+ /**
+ * Links to Grid.Options.events.beforeTreeRowToggle
+ */
onBeforeTreeRowToggle?: (e: BeforeTreeRowToggleEvent) => void;
+ /**
+ * Links to Grid.Options.events.afterTreeRowToggle
+ */
onAfterTreeRowToggle?: (e: AfterTreeRowToggleEvent) => void;
}
/**
- * Row pinning event props mapped to
- * `options.rendering.rows.pinning.events`.
+ * Row pinning event props. Grid Pro.
*/
export interface RowPinningEventProps {
+ /**
+ * Links to Grid.Options.rendering.rows.pinning.events.beforeRowPin
+ */
onBeforeRowPin?: RowPinningChangeEventCallback;
+ /**
+ * Links to Grid.Options.rendering.rows.pinning.events.afterRowPin
+ */
onAfterRowPin?: RowPinningChangeEventCallback;
}
@@ -60,6 +89,8 @@ export interface GridProProps
extends BaseGridProps, GridEventProps {
/**
* Grid Pro license key.
+ *
+ * Links to Grid.Options.gridKey
*/
gridKey: string;
}
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 87972dc..1adab0c 100644
--- a/packages/grid-pro-react/src/utils/mappers/pagination/paginationOptions.ts
+++ b/packages/grid-pro-react/src/utils/mappers/pagination/paginationOptions.ts
@@ -19,12 +19,24 @@ import type {
} from '@highcharts/grid-pro/es-modules/Grid/Pro/Pagination/PaginationComposition.js';
/**
- * Pagination event props mapped to `pagination.events`.
+ * Pagination event props mapped to `pagination.events`. Grid Pro.
*/
export interface PaginationEventProps {
+ /**
+ * Links to Grid.Options.pagination.events.beforePageChange
+ */
onBeforePageChange?: (e: BeforePageChangeEvent) => void;
+ /**
+ * Links to Grid.Options.pagination.events.afterPageChange
+ */
onAfterPageChange?: (e: AfterPageChangeEvent) => void;
+ /**
+ * Links to Grid.Options.pagination.events.beforePageSizeChange
+ */
onBeforePageSizeChange?: (e: BeforePageSizeChangeEvent) => void;
+ /**
+ * Links to Grid.Options.pagination.events.afterPageSizeChange
+ */
onAfterPageSizeChange?: (e: AfterPageSizeChangeEvent) => void;
}
diff --git a/packages/grid-shared-react/src/components/BaseGrid.tsx b/packages/grid-shared-react/src/components/BaseGrid.tsx
index 5874a07..00d6a2c 100644
--- a/packages/grid-shared-react/src/components/BaseGrid.tsx
+++ b/packages/grid-shared-react/src/components/BaseGrid.tsx
@@ -15,21 +15,23 @@ import {
} from '../hooks/useGrid';
/**
- * Ref handle exposed by Grid components
+ * Ref handle exposed by Grid components.
*/
export interface GridRefHandle {
/**
- * Access to the underlying grid instance
+ * Access to the underlying grid instance.
*/
readonly grid: GridInstance | null;
}
/**
- * Props for Grid component
+ * Props for the Grid component.
*/
export interface GridProps {
/**
* Options JSON, same as in the Grid JS API.
+ *
+ * Links to Grid.Options
*/
options?: TOptions;
/**
@@ -40,12 +42,15 @@ export interface GridProps {
/**
* Optional CSS class names mapped to Core `rendering.table.className` on
* `.hcg-table`. Independent of `className` / `theme`.
+ *
+ * Links to Grid.Options.rendering.table.className
*/
tableClassName?: string;
/**
- * Optional theme name passed to Grid Core as `rendering.theme`.
- * Omitted → Core default (`hcg-theme-default`).
- * Defined (including `''`) → that value only.
+ * Omitted uses the Core default (`hcg-theme-default`). An empty string
+ * disables the theme.
+ *
+ * Links to Grid.Options.rendering.theme
*/
theme?: string;
/**
@@ -53,11 +58,11 @@ export interface GridProps {
*/
children?: ReactNode;
/**
- * Optional ref to access the grid instance
+ * Ref to access the grid instance.
*/
gridRef?: ForwardedRef>;
/**
- * Optional callback to be called when the grid is initialized
+ * Callback to be called when the grid is initialized.
*/
callback?: (grid: GridInstance) => void;
}
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 629be79..f908b1c 100644
--- a/packages/grid-shared-react/src/components/options/caption/Caption.tsx
+++ b/packages/grid-shared-react/src/components/options/caption/Caption.tsx
@@ -11,20 +11,32 @@ import { ReactNode } from 'react';
export interface CaptionProps {
/**
- * The custom CSS class name for the table caption.
+ * Links to Grid.Options.caption.className
*/
className?: string;
/**
- * The HTML tag to use for the caption.
+ * Links to Grid.Options.caption.htmlTag
*/
htmlTag?: string;
/**
* Options JSON, same as in the Grid JS API (`caption`).
+ *
+ * Links to Grid.Options.caption
*/
options?: TOptions;
+ /**
+ * Caption text, passed as the component children.
+ *
+ * Links to Grid.Options.caption.text
+ */
children?: ReactNode;
}
+/**
+ * Table caption. Pass the caption text as children.
+ *
+ * Links to Grid.Options.caption
+ */
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 0c96a7d..84e4811 100644
--- a/packages/grid-shared-react/src/components/options/columns/Column.tsx
+++ b/packages/grid-shared-react/src/components/options/columns/Column.tsx
@@ -9,6 +9,11 @@
import type { ColumnProps } from './columnProps';
+/**
+ * Per-column configuration. Flattened React props map onto `columns[]`.
+ *
+ * Links to Grid.Options.columns
+ */
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 9bdf822..5912871 100644
--- a/packages/grid-shared-react/src/components/options/columns/ColumnDefaults.tsx
+++ b/packages/grid-shared-react/src/components/options/columns/ColumnDefaults.tsx
@@ -12,21 +12,26 @@ import type { ColumnOptionsProps } from './columnProps';
export interface ColumnDefaultsProps
extends ColumnOptionsProps {
/**
- * CSS class names on every body ``.
- * Maps to Core `rendering.rows.className`.
+ * Links to Grid.Options.rendering.rows.className
*/
rowClassName?: string;
/**
- * CSS class names on even body `
` (Core `.hcg-row-even` parity).
- * Maps to Core `rendering.rows.evenClassName`.
+ * Links to Grid.Options.rendering.rows.evenClassName
*/
evenRowClassName?: string;
/**
* Options JSON, same as in the Grid JS API (`columnDefaults`).
+ *
+ * Links to Grid.Options.columnDefaults
*/
options?: TOptions;
}
+/**
+ * Default options applied to every column.
+ *
+ * Links to Grid.Options.columnDefaults
+ */
export function ColumnDefaults(
_props: ColumnDefaultsProps
) {
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 937cd94..bc08539 100644
--- a/packages/grid-shared-react/src/components/options/columns/columnProps.ts
+++ b/packages/grid-shared-react/src/components/options/columns/columnProps.ts
@@ -24,36 +24,107 @@ export interface CellValueGetterContext {
* Shared column options (`columnDefaults` and per-column overrides).
*/
export interface ColumnOptionsProps {
+ /**
+ * Links to Grid.Options.columnDefaults.dataType
+ */
dataType?: ColumnDataType;
+ /**
+ * Links to Grid.Options.columnDefaults.width
+ */
width?: number | string;
+ /**
+ * Links to Grid.Options.columnDefaults.sorting.enabled
+ */
sortingEnabled?: boolean;
+ /**
+ * Links to Grid.Options.columns.sorting.order
+ */
sortingOrder?: ColumnSortingOrder;
+ /**
+ * Links to Grid.Options.columns.sorting.priority
+ */
sortingPriority?: number;
+ /**
+ * Links to Grid.Options.columnDefaults.sorting.orderSequence
+ */
sortingOrderSequence?: ColumnSortingOrder[];
+ /**
+ * Links to Grid.Options.columnDefaults.sorting.compare
+ */
sortingCompare?: (a: unknown, b: unknown) => number;
+ /**
+ * Links to Grid.Options.columnDefaults.filtering.enabled
+ */
filteringEnabled?: boolean;
+ /**
+ * Links to Grid.Options.columnDefaults.filtering.inline
+ */
filteringInline?: boolean;
+ /**
+ * Links to Grid.Options.columnDefaults.filtering.condition
+ */
filteringCondition?: string;
+ /**
+ * Links to Grid.Options.columnDefaults.filtering.value
+ */
filteringValue?: string | number | boolean | null;
+ /**
+ * Links to Grid.Options.columnDefaults.header.className
+ */
headerClassName?: string;
+ /**
+ * Links to Grid.Options.columnDefaults.header.format
+ */
headerFormat?: string;
+ /**
+ * Links to Grid.Options.columnDefaults.header.formatter
+ */
headerFormatter?: (this: unknown) => string;
+ /**
+ * Links to Grid.Options.columnDefaults.header.style
+ */
headerStyle?: unknown;
+ /**
+ * Links to Grid.Options.columnDefaults.cells.rowHeader
+ */
cellRowHeader?: boolean;
+ /**
+ * Links to Grid.Options.columnDefaults.cells.className
+ */
cellClassName?: string;
+ /**
+ * Links to Grid.Options.columnDefaults.cells.format
+ */
cellFormat?: string;
+ /**
+ * Links to Grid.Options.columnDefaults.cells.formatter
+ */
cellFormatter?: (this: unknown) => string;
/**
* Custom cell value resolver. `this` is the Grid table cell (`row.index`
* is the row index in the presentation data).
+ *
+ * Links to Grid.Options.columnDefaults.cells.valueGetter
*/
cellValueGetter?: (this: CellValueGetterContext) => unknown;
+ /**
+ * Links to Grid.Options.columnDefaults.cells.contextMenu
+ */
cellContextMenu?: {
enabled?: boolean;
items?: unknown[];
};
+ /**
+ * Links to Grid.Options.columnDefaults.cells.style
+ */
cellStyle?: unknown;
+ /**
+ * Links to Grid.Options.columnDefaults.style
+ */
style?: unknown;
+ /**
+ * Links to Grid.Options.columnDefaults.exportable
+ */
exportable?: boolean;
}
@@ -61,17 +132,29 @@ export interface ColumnProps extends ColumnOptionsProps {
/**
* Column identity in Grid. Maps to Core `columns[].id`.
* Not an HTML id — this component does not render a DOM node.
+ *
+ * Links to Grid.Options.columns.id
*/
id: string;
/**
* Data-source column id. `undefined` defaults to `id`. `null` forces
* the column to be unbound (virtual / computed).
+ *
+ * Links to Grid.Options.columns.dataId
*/
dataId?: string | null;
+ /**
+ * Links to Grid.Options.columns.className
+ */
className?: string;
+ /**
+ * Links to Grid.Options.columns.enabled
+ */
enabled?: boolean;
/**
* Options JSON, same as in the Grid JS API (`columns[]`).
+ *
+ * Links to Grid.Options.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 6299b66..b211869 100644
--- a/packages/grid-shared-react/src/components/options/data/Data.tsx
+++ b/packages/grid-shared-react/src/components/options/data/Data.tsx
@@ -13,50 +13,49 @@ export type DataColumns = Record>;
export interface DataProps {
/**
- * The type of the data provider.
- *
- * @default 'local'
+ * Links to Grid.Options.data.providerType
*/
providerType?: 'local' | string;
/**
- * Whether columns should be generated automatically from data source
- * column ids.
- *
- * Defaults to `true`. When declarative `` components are used,
- * the React wrapper sets this to `false` unless you pass this prop
- * explicitly.
+ * When declarative `` components are used, the React wrapper sets
+ * this to `false` unless the prop is passed explicitly.
*
- * @default true
+ * Links to Grid.Options.data.autogenerateColumns
*/
autogenerateColumns?: boolean;
/**
- * Columns data to initialize the Grid with.
+ * Links to Grid.Options.data.columns
*/
columns?: DataColumns;
/**
- * Data table as a source of data for the grid.
+ * Links to Grid.Options.data.dataTable
*/
dataTable?: unknown;
/**
- * Connector instance or options used to populate the data table.
+ * Links to Grid.Options.data.connector
*/
connector?: unknown;
/**
- * Automatically update the grid when the data table changes.
- *
- * @default false
+ * Links to Grid.Options.data.updateOnChange
*/
updateOnChange?: boolean;
/**
- * The column ID that contains the stable, unique row IDs.
+ * Links to Grid.Options.data.idColumn
*/
idColumn?: string;
/**
* Options JSON, same as in the Grid JS API (`data`).
+ *
+ * Links to Grid.Options.data
*/
options?: TOptions;
}
+/**
+ * Data source for the grid.
+ *
+ * Links to Grid.Options.data
+ */
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 d3d32ba..52c1135 100644
--- a/packages/grid-shared-react/src/components/options/description/Description.tsx
+++ b/packages/grid-shared-react/src/components/options/description/Description.tsx
@@ -11,16 +11,28 @@ import { ReactNode } from 'react';
export interface DescriptionProps {
/**
- * The custom CSS class name for the description.
+ * Links to Grid.Options.description.className
*/
className?: string;
/**
* Options JSON, same as in the Grid JS API (`description`).
+ *
+ * Links to Grid.Options.description
*/
options?: TOptions;
+ /**
+ * Description text, passed as the component children.
+ *
+ * Links to Grid.Options.description.text
+ */
children?: ReactNode;
}
+/**
+ * Table description. Pass the description text as children.
+ *
+ * Links to Grid.Options.description
+ */
export function Description(
_props: DescriptionProps
) {
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 bd96ca4..7a4a0f0 100644
--- a/packages/grid-shared-react/src/components/options/header/Header.tsx
+++ b/packages/grid-shared-react/src/components/options/header/Header.tsx
@@ -9,6 +9,11 @@
import type { HeaderProps } from './headerProps';
+/**
+ * Header tree: column order, inclusion, and grouping.
+ *
+ * Links to Grid.Options.header
+ */
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 72d9d35..20a65ac 100644
--- a/packages/grid-shared-react/src/components/options/header/headerProps.ts
+++ b/packages/grid-shared-react/src/components/options/header/headerProps.ts
@@ -11,24 +11,48 @@
* Accessibility options for a header cell in the header tree.
*/
export interface HeaderCellAccessibilityProps {
+ /**
+ * Links to Grid.Options.header.accessibility.description
+ */
description?: string;
}
/**
* Header node in the `header` tree. A group (with `columns`) or a leaf
- * (with `columnId`). Mirrors Grid Core `GroupedHeaderOptions`.
+ * (with `columnId`).
*/
export interface GroupedHeaderOptions {
+ /**
+ * Links to Grid.Options.header.accessibility
+ */
accessibility?: HeaderCellAccessibilityProps;
+ /**
+ * Links to Grid.Options.header.format
+ */
format?: string;
+ /**
+ * Links to Grid.Options.header.className
+ */
className?: string;
+ /**
+ * Links to Grid.Options.header.columnId
+ */
columnId?: string;
+ /**
+ * Nested header entries. A string is a column id.
+ *
+ * Links to Grid.Options.header.columns
+ */
columns?: Array;
}
export interface HeaderProps {
/**
- * Options JSON, same as in the Grid JS API (`header`).
+ * Options JSON, same as in the Grid JS API (`header`). Header tree:
+ * column order, inclusion, and grouping. Each entry is a column id
+ * (`string`) or a {@link GroupedHeaderOptions} object.
+ *
+ * Links to Grid.Options.header
*/
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 b4ada71..eda09d8 100644
--- a/packages/grid-shared-react/src/components/options/pagination/Pagination.tsx
+++ b/packages/grid-shared-react/src/components/options/pagination/Pagination.tsx
@@ -9,6 +9,12 @@
import type { PaginationProps } from './paginationProps';
+/**
+ * Page size and pagination controls. Position in the JSX tree sets
+ * `pagination.position` (`top` before other components, `bottom` after).
+ *
+ * Links to Grid.Options.pagination
+ */
export function Pagination(
_props: PaginationProps
) {
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 bae839b..a6211d7 100644
--- a/packages/grid-shared-react/src/components/options/pagination/paginationProps.ts
+++ b/packages/grid-shared-react/src/components/options/pagination/paginationProps.ts
@@ -9,73 +9,72 @@
export interface PaginationProps {
/**
- * Whether pagination should be rendered.
- * Defaults to `true` when the `` component is used.
- * Pass `false` to disable pagination while keeping other options.
+ * Defaults to `true` when the `` component is used. Pass
+ * `false` to disable pagination while keeping other options.
+ *
+ * Links to Grid.Options.pagination.enabled
*/
enabled?: boolean;
/**
- * Additional CSS class name(s) for the pagination container
- * (`.hcg-pagination`).
+ * Links to Grid.Options.pagination.className
*/
className?: string;
/**
- * Additional CSS class name(s) for the page info element
- * (`.hcg-pagination-info`).
+ * Links to Grid.Options.pagination.controls.pageInfo.className
*/
infoClassName?: string;
/**
- * Additional CSS class name(s) for the controls container
- * (`.hcg-pagination-controls`).
+ * Links to Grid.Options.pagination.controls.className
*/
controlsClassName?: string;
/**
- * Additional CSS class name(s) for the page size container
- * (`.hcg-pagination-page-size`).
+ * Links to Grid.Options.pagination.controls.pageSizeSelector.className
*/
sizeClassName?: string;
/**
- * The current page number.
+ * Links to Grid.Options.pagination.page
*/
page?: number;
/**
- * Number of rows per page.
+ * Links to Grid.Options.pagination.pageSize
*/
pageSize?: number;
/**
- * Alignment of pagination elements within the wrapper.
+ * Links to Grid.Options.pagination.align
*/
align?: 'left' | 'center' | 'right' | 'distributed';
/**
- * Whether to show the page information text.
+ * Links to Grid.Options.pagination.controls.pageInfo
*/
pageInfo?: boolean;
/**
- * Whether to show the page size selector.
+ * Links to Grid.Options.pagination.controls.pageSizeSelector
*/
pageSizeSelector?: boolean;
/**
- * Available options for the page size selector dropdown.
+ * Links to Grid.Options.pagination.controls.pageSizeSelector.options
*/
pageSizeOptions?: number[];
/**
- * Whether to show numbered page buttons.
+ * Links to Grid.Options.pagination.controls.pageButtons
*/
pageButtons?: boolean;
/**
- * Maximum number of page number buttons to show before using ellipsis.
+ * Links to Grid.Options.pagination.controls.pageButtons.count
*/
pageButtonsCount?: number;
/**
- * Whether to show the first and last page navigation buttons.
+ * Links to Grid.Options.pagination.controls.firstLastButtons
*/
firstLast?: boolean;
/**
- * Whether to show the previous and next page navigation buttons.
+ * Links to Grid.Options.pagination.controls.previousNextButtons
*/
previousNext?: boolean;
/**
* Options JSON, same as in the Grid JS API (`pagination`).
+ *
+ * Links to Grid.Options.pagination
*/
options?: TOptions;
}