@gridkitjs/react 0.8.0 → 0.9.0

package/dist/index.d.ts

@@ -68,7 +68,12 @@ type CellSelectionChangeEvent<Row> = CellSelectionChangeEvent$1<Row, ReactNode>;
 interface DataGridApi<Row> {
     /** The grid's scrollable viewport element. */
     readonly element: HTMLDivElement | null;
-    /** The grid's `<table>` element. */
+    /**
+     * The grid's row-area `<table>` element — the one holding `<tbody>`. The
+     * header and, when aggregates are active, footer render as their own
+     * sibling `<table>`s outside this one; use `element` to reach the whole
+     * scrollable viewport instead.
+     */
     readonly table: HTMLTableElement | null;
     /** Rows as currently filtered and sorted — what's rendered, ungrouped. */
     getRows(): readonly ResolvedRow<Row>[];
@@ -193,6 +198,31 @@ interface PagerConfig {
     /** Replaces the built-in pager entirely when given. `variant` is ignored. */
     template?: ((context: PagerTemplateContext) => ReactNode) | undefined;
 }
+/**
+ * Loads more rows as the user scrolls near the bottom, in place of paging.
+ * Appends only — there is no equivalent of `paginated`'s reset-to-page-0 for
+ * a result set that shrinks out from under the current position.
+ */
+interface InfiniteScrollConfig {
+    /** Whether a further `onLoadMore` could still return more rows. `false` removes the sentinel entirely, so no further scrolling can trigger a load. */
+    readonly hasMore: boolean;
+    /**
+     * Called at most once per genuine threshold-crossing: fires when the
+     * sentinel comes within `rootMargin` of the body's viewport, and not again
+     * until `isLoadingMore` has gone back to `false`.
+     */
+    readonly onLoadMore: () => void;
+    /** Whether a load triggered by `onLoadMore` is still in flight. Suppresses further calls to it until this goes back to `false`. */
+    readonly isLoadingMore?: boolean | undefined;
+    /**
+     * `IntersectionObserver`'s `rootMargin` — how far from the bottom of the
+     * scrollable body `onLoadMore` fires, ahead of the sentinel actually
+     * scrolling into view. Defaults to `"200px"`.
+     */
+    readonly rootMargin?: string | undefined;
+    /** Replaces the built-in "Loading more…" row. */
+    readonly loadingTemplate?: (() => ReactNode) | undefined;
+}
 interface DataGridProps<Row> extends SelectionCallbacks<Row> {
     columns?: readonly ColumnDefinition<Row>[] | undefined;
     dataSource?: readonly Row[] | undefined;
@@ -330,6 +360,14 @@ interface DataGridProps<Row> extends SelectionCallbacks<Row> {
     pager?: PagerConfig | undefined;
     /** Called once when the user changes the page or the page size. */
     onPaginationChange?: ((event: PaginationChangeEvent) => void) | undefined;
+    /**
+     * Loads more rows as the user scrolls near the bottom, instead of paging.
+     * Mutually exclusive with `paginated` — setting both logs a dev-time
+     * `console.error` and only `paginated` takes effect. Recommended (not
+     * required) alongside `virtualized` for a dataset that grows without
+     * bound, so the mounted row count never grows with it either.
+     */
+    infiniteScroll?: InfiniteScrollConfig | undefined;
     /**
      * Aggregates to compute — a subtotal per group (rendered in that group's
      * header) plus a grand total over the whole filtered/grouped dataset
@@ -349,6 +387,35 @@ interface DataGridProps<Row> extends SelectionCallbacks<Row> {
      * effect when `aggregates` is empty or omitted.
      */
     groupAggregateDisplay?: GroupAggregateDisplay | undefined;
+    /**
+     * Bounds the row area's height, independently scrollable — the grid's own
+     * chrome (group-by bar, header, footer, pager) stays outside it and
+     * always visible. A number is pixels; a string is passed through as a CSS
+     * length (e.g. "60vh"). Omitted, the body's height stays content-driven,
+     * same as today.
+     */
+    height?: number | string | undefined;
+    /**
+     * Renders only the rows near the current scroll position rather than every
+     * row at once — for a dataset too large to mount in full. Requires
+     * `height` to be set; a grid without a bounded body has no viewport to
+     * window rows against (a dev-time console warning fires when it's
+     * missing). Off by default, matching every other opt-in behavior here.
+     */
+    virtualized?: boolean | undefined;
+    /**
+     * Rows rendered outside the visible range on each side, to reduce
+     * blank-frame flashes on fast scrolling. Only meaningful with `virtualized`
+     * on.
+     */
+    overscan?: number | undefined;
+    /**
+     * Assumed height for a row never yet measured — only matters for the very
+     * first paint and for `scrollToRow`'s initial jump before it corrects
+     * itself against that row's real, measured height. Only meaningful with
+     * `virtualized` on.
+     */
+    estimatedRowHeight?: number | undefined;
     /**
      * The grid's accessible name, announced when it takes focus. A grid without
      * one is read only as "grid", which says nothing about which grid.
@@ -362,7 +429,7 @@ interface DataGridProps<Row> extends SelectionCallbacks<Row> {
     /** Imperative handle for reading live grid state and triggering actions. */
     ref?: Ref<DataGridApi<Row>> | undefined;
 }
-declare function DataGridComponent<Row>({ dataSource, columns, getRowId, borders, hoverable, selectable, defaultRowSelection, defaultColumnSelection, defaultCellSelection, resizableColumns, reorderableColumns, resizeMode, defaultColumnSizing, defaultColumnOrder, columnSizeDefaults, onColumnResize, onColumnOrderChange, sortableColumns, defaultColumnSort, onColumnSortChange, groupableColumns, groupToggleIconColumns, groupByDraggableColumns, groupByBarVisibility, defaultGroupBy, onGroupByChange, defaultGroupExpansion, onGroupExpansionChange, defaultFilter, paginated, defaultPagination, pager, onPaginationChange, aggregates, groupAggregateDisplay, label, labelledBy, ref, ...callbacks }: DataGridProps<Row>): react.JSX.Element;
+declare function DataGridComponent<Row>({ dataSource, columns, getRowId, borders, hoverable, selectable, defaultRowSelection, defaultColumnSelection, defaultCellSelection, resizableColumns, reorderableColumns, resizeMode, defaultColumnSizing, defaultColumnOrder, columnSizeDefaults, onColumnResize, onColumnOrderChange, sortableColumns, defaultColumnSort, onColumnSortChange, groupableColumns, groupToggleIconColumns, groupByDraggableColumns, groupByBarVisibility, defaultGroupBy, onGroupByChange, defaultGroupExpansion, onGroupExpansionChange, defaultFilter, paginated, defaultPagination, pager, onPaginationChange, infiniteScroll, aggregates, groupAggregateDisplay, height, virtualized, overscan, estimatedRowHeight, label, labelledBy, ref, ...callbacks }: DataGridProps<Row>): react.JSX.Element;
 
 interface PaginationStateApi {
     pagination: PaginationState;
@@ -470,4 +537,4 @@ declare function useColumnSizingState<Row>(gridRef: RefObject<DataGridApi<Row> |
  */
 declare function useColumnOrderState<Row>(gridRef: RefObject<DataGridApi<Row> | null>): ColumnOrderState;
 
-export { type Borders, type CellSelectEvent, type CellSelectionChangeEvent, type ColumnDefinition, type ColumnSelectEvent, type ColumnSelectionChangeEvent, type ColumnsSelectEvent, type DataGridApi, DataGridComponent, type DataGridProps, type GroupByBarVisibility, type GroupByStateApi, type HoverableConfig, type PagerConfig, type PagerTemplateContext, type PaginationStateApi, type ResizeMode, type ResolvedColumn, type SelectedCell, type SelectedColumn, type SelectionStateApi, useAggregateState, useColumnOrderState, useColumnSizingState, useColumnSortState, useGroupByState, usePaginationState, useSelectionState };
+export { type Borders, type CellSelectEvent, type CellSelectionChangeEvent, type ColumnDefinition, type ColumnSelectEvent, type ColumnSelectionChangeEvent, type ColumnsSelectEvent, type DataGridApi, DataGridComponent, type DataGridProps, type GroupByBarVisibility, type GroupByStateApi, type HoverableConfig, type InfiniteScrollConfig, type PagerConfig, type PagerTemplateContext, type PaginationStateApi, type ResizeMode, type ResolvedColumn, type SelectedCell, type SelectedColumn, type SelectionStateApi, useAggregateState, useColumnOrderState, useColumnSizingState, useColumnSortState, useGroupByState, usePaginationState, useSelectionState };