GridNexa Core | Data Grid Contracts

Framework-neutral TypeScript contracts for GridNexa data grid packages.

@gridnexa/core contains the shared models used by the React, Angular, Vue, and JavaScript packages. Most applications should install a framework package directly; install core when you need shared types for library wrappers, backend contracts, or cross-framework tooling.

Quick Links

• Website: https://www.gridnexa.in/
• Docs and playground: https://www.gridnexa.in/docs/basic-grid
• Help: https://www.gridnexa.in/help
• Repository: https://github.com/mhalungekar9/SmartGrid

Install

npm install @gridnexa/core

Most apps should install one of these instead:

npm install @gridnexa/react
npm install @gridnexa/angular
npm install @gridnexa/vue
npm install @gridnexa/javascript

Included Contracts

• Column
• GridOptions
• ColumnFilterModel
• AdvancedFilterModel
• MergedHeader
• GridTransaction
• ServerSideOperationState
• GridNexaToolbarOptions
• GridNexaFooterOptions
• GridNexaSidePanelOptions
• GridNexaFillWidthOptions
• GridNexaPreset
• GridNexaStateStorageOptions
• GridNexaColumnToolOptions
• GridNexaIconSet
• GridNexaApi
• PivotAggregation
• GridNexaAiRequest
• GridNexaCommandPlan
• GridNexaCommandAction
• GridNexaAiOptions

AI Action Plan Contract

import type { GridNexaAiRequest, GridNexaCommandPlan } from "@gridnexa/core";

export async function gridAiProvider(
  request: GridNexaAiRequest,
): Promise<GridNexaCommandPlan> {
  return {
    title: "Focus engineering performance",
    actions: [
      {
        type: "setColumnFilter",
        columnId: "department",
        filter: { type: "set", operator: "in", values: ["Engineering"] },
      },
      { type: "sort", columnId: "score", direction: "desc" },
    ],
  };
}

GridNexa AI actions are explicit and allow-listed. Providers return JSON plans; the grid decides how to apply them.

Shared Configuration Contracts

Core includes the typed contracts used by all framework packages:

• columnTools controls header buttons globally, with per-column overrides through column.tools.
• footer controls row count, selected rows, selected cell, selected range, filter count, sort status, pagination, or a custom renderer.
• sidePanel controls the right-side Columns/Pivot and Filters tools, including disabled state and default active panel.
• fillWidth controls whether visible columns stop at their real total width or stretch to fill remaining container width with flex columns or the last visible data column.
• preset provides typed shortcuts for common grid modes such as basic, admin, spreadsheet, and analytics.
• stateStorage describes saved-view persistence for column, filter, sort, pagination, and side-panel state.
• summaries controls footer and selected-range numeric summaries.
• views describes named saved views and localStorage keys.
• commandPalette enables a command launcher contract for discoverable grid actions.
• changeReview describes pre-save review of edits, row additions, and deletions.
• validation describes fast cell validation rules and save blocking.
• diagnostics describes developer-facing runtime diagnostics.
• icons provides global icon replacement, while column.icons can override icons for a specific column.
• toolbar enables or hides quick filter, find, filters, advanced filter, columns, exports, add/delete rows, undo/redo, fill, and save-all tools.

React consumers should import @gridnexa/react/index.css once in the app entry. That exported CSS carries the shared header layout, drag/reorder indicators, pinned-column rules, popovers, scrollbars, and theme variables needed for installed apps to match the playground.

Framework Packages

• @gridnexa/react for React UI applications
• @gridnexa/angular for Angular UI applications
• @gridnexa/vue for Vue UI applications
• @gridnexa/javascript for framework-free JavaScript and TypeScript applications

License

MIT