@syncfusion/react-grid-chart 35.1.37

package/README.md

@@ -0,0 +1,136 @@
+# Syncfusion React Data Grid Component
+
+The **Syncfusion React Data Grid** is a high-performance, feature-rich component designed for building scalable, responsive, and data-intensive web applications. Engineered to meet the requirements of enterprise-grade solutions, it provides a robust architecture that supports dynamic data handling, seamless integration with modern react frameworks, and a highly customizable interface.
+
+Ideal for react applications requiring structured data presentation, real-time interaction, and flexible configuration, the grid supports essential functionalities such as sorting, filtering, paging, and editing. Extensibility is achieved through custom templates and a comprehensive API surface, enabling integration with complex business logic and external systems.
+
+**Key Features**
+
+- **[Sorting](https://react.syncfusion.com/react-ui/data-grid/sorting):**
+  Enables column-based sorting with support for single and multi-column configurations. Sorting operations are optimized for performance and consistency, allowing structured data to be organized efficiently across large datasets.
+
+- **[Filtering](https://react.syncfusion.com/react-ui/data-grid/filtering/configuration):**
+  Provides a built-in filter bar with customizable filter types per column. Supports text, number, date, and dropdown filters, enabling precise data segmentation and contextual filtering based on business logic.
+
+- **[Editing](https://react.syncfusion.com/react-ui/data-grid/editing/configuration):**
+  Facilitates inline CRUD operations including add, edit, and delete actions. Editing is integrated with toolbar controls and supports validation, making it suitable for transactional data entry and real-time updates.
+
+- **[Toolbar](https://react.syncfusion.com/react-ui/data-grid/editing/configuration#adding-a-toolbar-for-editing):**
+  Offers a configurable toolbar with built-in actions such as Add, Edit, Delete, and Search. Toolbar elements can be extended or replaced with custom components to align with specific operational workflows.
+
+- **[Searching](https://react.syncfusion.com/react-ui/data-grid/searching):**
+  Includes a responsive search box within the toolbar for quick data lookup. Supports keyword-based filtering across multiple columns, improving accessibility to relevant records in large datasets.
+
+- **[Paging](https://react.syncfusion.com/react-ui/data-grid/paging):**
+  Manages large volumes of data using built-in pagination. Supports both client-side and server-side paging strategies to ensure scalable performance and efficient data navigation in distributed environments.
+
+- **[Grouping](https://react.syncfusion.com/react-ui/data-grid/grouping/configuration):** Organizes data into hierarchical groups for better analysis.
+
+- **[Stacked Headers](https://react.syncfusion.com/react-ui/data-grid/columns/configuration#stacked-headers):** Organizes related columns under multiple levels of headers for clearer data presentation and improved column structure.
+
+- **[Clipboard](https://react.syncfusion.com/react-ui/data-grid/clipboard):** Supports copying and pasting cell and row selections through the Grid clipboard API for efficient data transfer and editing.
+
+- **[Row & Column Spanning](https://react.syncfusion.com/react-ui/data-grid/row/row-spanning):** Supports merging cells across rows and columns for advanced layouts.
+
+- **[Master-Detail](https://react.syncfusion.com/react-ui/data-grid/master-detail/detail-grid):** Displays hierarchical data using expandable detail rows.
+
+- **[DOM Virtualization & Virtual Scrolling](https://react.syncfusion.com/react-ui/data-grid/scrolling/virtual-scroll/):**
+  Enables efficient rendering of large datasets with improved performance and responsiveness through intelligent DOM virtualization and virtual scrolling techniques.
+
+- **[Infinite Scrolling](https://react.syncfusion.com/react-ui/data-grid/scrolling/infinite-scroll/):**
+  Enables continuous data loading during scroll actions without pagination. Designed for scenarios where the total record count is unknown, it dynamically retrieves additional data from the server data source as the user scrolls, ensuring a seamless and uninterrupted browsing experience.
+
+- **[Excel Mode & CheckBox Filtering](https://react.syncfusion.com/react-ui/data-grid/filtering/checkbox-filtering/):**
+  Provides advanced filtering options with intuitive, checkbox-based selection for precise data segmentation. Includes Excel-mode filtering for enhanced user experience.
+
+- **[PDF Export](https://react.syncfusion.com/react-ui/data-grid/pdf-export):** Exports Grid data to PDF while preserving layout and styling.
+
+- **[Print](https://react.syncfusion.com/react-ui/data-grid/print):** Supports direct printing of Grid content with structured formatting.
+
+- **[Checkbox Selection](https://react.syncfusion.com/react-ui/data-grid/selection/checkbox-selection/):**
+  Supports multi-row selection, allowing users to select multiple rows efficiently using checkboxes integrated within the grid interface.
+
+- **[Column Chooser](https://react.syncfusion.com/react-ui/data-grid/columns/column-chooser/):** Allows users to dynamically show or hide columns.
+
+- **[Context Menu](https://react.syncfusion.com/react-ui/data-grid/context-menu):** Provides customizable right-click actions for enhanced interaction.
+
+- **[Customization](https://react.syncfusion.com/react-ui/data-grid/columns/cell-customization):**
+  Allows custom cell rendering, conditional styling, and layout adjustments. Enables integration with design systems and branding guidelines, supporting tailored visual experiences and functional enhancements.
+
+- **[Template Extensibility](https://react.syncfusion.com/react-ui/data-grid/columns/templates):**
+  Supports column and row templates for embedding custom components, applying conditional formatting, and creating rich, interactive visual layouts. Template logic can be used to integrate charts, buttons, or nested views within grid cells.
+
+- **[Aggregates](https://react.syncfusion.com/react-ui/data-grid/aggregates):**
+  Displays summary values such as totals, averages, minimums, and maximums using built-in aggregate functions. Aggregation logic can be customized to support analytical dashboards and reporting interfaces.
+
+- **[Interactivity](https://react.syncfusion.com/react-ui/data-grid/accessibility#keyboard-shortcuts):**
+  Supports clickable headers, row & cell selection, and keyboard navigation. Enhances engagement through responsive UI behavior and intuitive controls, suitable for complex data exploration scenarios.
+
+- **[Accessibility](https://react.syncfusion.com/react-ui/data-grid/accessibility):**
+  Compliant with WCAG 2.1 standards, ensuring compatibility with screen readers, keyboard navigation, and assistive technologies. Designed to meet accessibility requirements for public sector and regulated environments.
+
+- **[Globalization](https://react.syncfusion.com/react-ui/data-grid/globalization):**
+  Adapts dates, numbers, currencies, and text formats for international audiences. Includes built-in support for localization and internationalization (i18n), enabling deployment across multilingual and multicultural platforms.
+
+- **[Robust API](https://react.syncfusion.com/api/data-grid/overview):**
+  Provides a comprehensive and extensible API for programmatic control over grid behavior, data updates, and event handling. Supports integration with external systems, custom business logic, and advanced workflow automation.
+
+**Setup**
+
+To install `grid` and its dependent packages, use the following command,
+
+```sh
+npm install @syncfusion/react-grid
+```  
+
+**Usage**
+
+```tsx
+import { Grid, Columns, Column } from '@syncfusion/react-grid';
+
+export default function App() {
+  return (
+    <Grid dataSource={data} pageSettings={{ enabled: true }}>
+      <Columns>
+        <Column field="OrderID" headerText="Order ID" width="120" textAlign="Right"/>
+        <Column field="CustomerName" headerText="Customer Name" width="120"/>
+        <Column field="Freight" format="C2" width="120" textAlign="Right"/>
+        <Column field="OrderDate" headerText="Order Date" format="yMd" width="120" textAlign="Right"/>
+        <Column field="ShipCountry" headerText="Ship Country" width="140"/>
+      </Columns>
+    </Grid>     
+  );
+};
+```
+
+**Resources**
+
+- [Data Grid Demo/Docs](https://react.syncfusion.com/react-ui/data-grid/overview)
+- [Data Grid API](https://react.syncfusion.com/api/data-grid/overview)
+
+<p align="center">
+Trusted by the world's leading companies
+  <a href="https://www.syncfusion.com/">
+    <img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted-companies.webp" alt="Syncfusion logo">
+  </a>
+</p>
+
+## Support
+
+Product support is available through following mediums.
+
+* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
+* Live chat
+
+## Changelog
+Check the changelog [here](https://github.com/syncfusion/react-ui-components/blob/master/components/grid/CHANGELOG.md). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
+
+## License and copyright
+
+> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
+
+> A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
+
+See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info.
+
+&copy; Copyright 2026 Syncfusion®, Inc. All Rights Reserved. The Syncfusion® Essential Studio® license and copyright applies to this distribution.

package/grid-chart.d.ts

@@ -0,0 +1,4 @@
+/**
+ * grid-chart
+ */
+export * from './src/grid-chart/index';

package/grid-chart.js

@@ -0,0 +1,4 @@
+/**
+ * grid-chart
+ */
+export * from './src/grid-chart/index';

package/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * index
+ */
+export * from './src/index';

package/index.js

@@ -0,0 +1,4 @@
+/**
+ * index
+ */
+export * from './src/index';

package/license

@@ -0,0 +1,13 @@
+Syncfusion® License
+
+Copyright (c) Syncfusion®, Inc. All rights reserved.
+
+Essential® JS 2 library is available through the Syncfusion® Essential Studio® program and can be licensed under either the Syncfusion® Community License Program or the Syncfusion® Commercial License.
+
+To qualify for the Syncfusion® Community License Program, your organization must have annual gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and fewer than five (5) developers. Additionally, you must agree to Syncfusion®’s terms and conditions.
+
+If you do not meet the requirements for the community license, please reach out to sales@syncfusion.com for commercial licensing options.
+
+You are required to obtain either a Community License or a Commercial License before using this product and must agree to comply with Syncfusion®'s terms and conditions.
+
+The full Syncfusion® license, including terms and conditions, can be found at: https://www.syncfusion.com/content/downloads/syncfusion_license.pdf

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@syncfusion/react-grid-chart",
+  "version": "35.1.37",
+  "description": "Syncfusion React Data Grid Chart, a high-performance component designed for modern web applications.",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "keywords": [
+    "web-components",
+    "react",
+    "syncfusion-react",
+    "react-grid-chart",
+    "grid-chart",
+    "grid-chart-component",
+    "react-grid-chart-component",
+    "react-grid-chart-layout"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/syncfusion/react-ui-components.git"
+  },
+  "homepage": "https://www.syncfusion.com/react-ui-components",
+  "module": "./index.js",
+  "readme": "README.md",
+  "dependencies": {
+    "@syncfusion/react-buttons": "~35.1.37",
+    "@syncfusion/react-charts": "~35.1.37",
+    "@syncfusion/react-dropdowns": "~35.1.37",
+    "@syncfusion/react-grid": "~35.1.37",
+    "@syncfusion/react-inputs": "~35.1.37",
+    "@syncfusion/react-navigations": "~35.1.37",
+    "@syncfusion/react-popups": "~35.1.37",
+    "@syncfusion/react-splitbuttons": "~35.1.37"
+  },
+  "devDependencies": {},
+  "typings": "index.d.ts",
+  "sideEffects": false
+}

package/src/grid-chart/components/ColorPicker.d.ts

@@ -0,0 +1,30 @@
+import { JSX } from 'react';
+interface ColorPickerProps {
+    value?: string;
+    onChange?: (color: string) => void;
+    className?: string;
+}
+/**
+ * Color picker component providing both visual and text-based color selection.
+ * Displays a native HTML color input alongside a text field for hex code entry.
+ * Used in the Format tab for selecting colors for titles, axes, legends, and series.
+ *
+ * @param {ColorPickerProps} props - Component props
+ * @param {string} [props.value] - Current hex color value (e.g., '#FF6B6B')
+ * @param {Function} [props.onChange] - Callback fired when color changes, receives new hex value
+ * @param {string} [props.className] - CSS class name for styling the container
+ * @returns {JSX.Element} Color picker component with visual and text input
+ *
+ * @example
+ * ```tsx
+ * const [color, setColor] = useState('#FF6B6B');
+ *
+ * <ColorPicker
+ *   value={color}
+ *   onChange={(newColor) => setColor(newColor)}
+ *   className="sf-color-picker"
+ * />
+ * ```
+ */
+export declare const ColorPicker: ({ value, onChange, className }: ColorPickerProps) => JSX.Element;
+export {};

package/src/grid-chart/components/ColorPicker.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Color picker component providing both visual and text-based color selection.
+ * Displays a native HTML color input alongside a text field for hex code entry.
+ * Used in the Format tab for selecting colors for titles, axes, legends, and series.
+ *
+ * @param {ColorPickerProps} props - Component props
+ * @param {string} [props.value] - Current hex color value (e.g., '#FF6B6B')
+ * @param {Function} [props.onChange] - Callback fired when color changes, receives new hex value
+ * @param {string} [props.className] - CSS class name for styling the container
+ * @returns {JSX.Element} Color picker component with visual and text input
+ *
+ * @example
+ * ```tsx
+ * const [color, setColor] = useState('#FF6B6B');
+ *
+ * <ColorPicker
+ *   value={color}
+ *   onChange={(newColor) => setColor(newColor)}
+ *   className="sf-color-picker"
+ * />
+ * ```
+ */
+export const ColorPicker = ({ value, onChange, className }) => {
+    return (_jsxs("div", { className: className, style: { display: 'flex', gap: '8px', alignItems: 'center' }, children: [_jsx("input", { type: "color", value: value, onChange: (e) => onChange?.(e.target.value), style: {
+                    width: '50px',
+                    height: '40px',
+                    border: '1px solid #ccc',
+                    borderRadius: '4px',
+                    cursor: 'pointer'
+                } }), _jsx("input", { type: "text", value: value, onChange: (e) => onChange?.(e.target.value), style: {
+                    padding: '8px',
+                    border: '1px solid #ccc',
+                    borderRadius: '4px',
+                    width: '100px',
+                    fontFamily: 'monospace',
+                    fontSize: '12px'
+                } })] }));
+};

package/src/grid-chart/components/index.d.ts

@@ -0,0 +1 @@
+export * from './ColorPicker';

package/src/grid-chart/components/index.js

@@ -0,0 +1 @@
+export * from './ColorPicker';

package/src/grid-chart/contexts/GridChartContext.d.ts

@@ -0,0 +1,64 @@
+import { JSX } from 'react';
+import { GridChartContextType, GridChartProviderProps } from '../types/grid-chart.interfaces';
+/**
+ * Provider component that wraps children with GridChart context.
+ * Initializes and manages centralized state for chart configuration, formatting, and UI state.
+ * Must wrap any component using the useGridChartSettings hook.
+ *
+ * @param {GridChartProviderProps} props - Component props
+ * @param {ReactElement} props.children - Child components to wrap with context
+ * @param {RefObject<GridChartSettings>} props.settings - Reference to GridChart settings
+ * @returns {JSX.Element} The provider component wrapping children with context
+ *
+ * @example
+ * ```tsx
+ * const settingsRef = useRef<GridChartSettings>({
+ *   chart: 'Column',
+ *   dataSource: data,
+ *   category: ['Date'],
+ *   series: ['Sales']
+ * });
+ *
+ * <GridChartProvider settings={settingsRef}>
+ *   <GridChartPanel />
+ * </GridChartProvider>
+ * ```
+ */
+export declare const GridChartProvider: ({ children, settings }: GridChartProviderProps) => JSX.Element;
+/**
+ * Hook to access GridChart context from any child component.
+ * Must be called within a component tree wrapped by GridChartProvider.
+ * Provides access to chart state, formatting, and axis configuration.
+ *
+ * @returns {GridChartContextType} The GridChart context object containing:
+ *   - settings: Current chart settings reference
+ *   - chartInfo, setChartInfo: Chart type and classification
+ *   - categoryAxis, setCategoryAxis: Category field selection
+ *   - series, setSeries: Series field selection
+ *   - valueAxis, setValueAxis: Value field selection
+ *   - chartRef, pieChartRef: References to chart components
+ *   - showSidePanel, setShowSidePanel: Property panel visibility
+ *   - format, setFormat: Chart formatting configuration
+ * @throws {Error} If called outside of GridChartProvider
+ *
+ * @example
+ * ```tsx
+ * function MyChartComponent() {
+ *   const { chartInfo, setChartInfo, format, setFormat } = useGridChartSettings();
+ *
+ *   const handleChartChange = (newChart: ChartType) => {
+ *     setChartInfo(getChartInfo(newChart));
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <p>Current Chart: {chartInfo.chart}</p>
+ *       <button onClick={() => handleChartChange('Pie')}>
+ *         Switch to Pie Chart
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare const useGridChartSettings: () => GridChartContextType;

package/src/grid-chart/contexts/GridChartContext.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useRef } from 'react';
+import { getChartInfo } from '../utils/utils';
+const GridChartContext = createContext(undefined);
+/* eslint-disable jsdoc/no-undefined-types */
+/**
+ * Provider component that wraps children with GridChart context.
+ * Initializes and manages centralized state for chart configuration, formatting, and UI state.
+ * Must wrap any component using the useGridChartSettings hook.
+ *
+ * @param {GridChartProviderProps} props - Component props
+ * @param {ReactElement} props.children - Child components to wrap with context
+ * @param {RefObject<GridChartSettings>} props.settings - Reference to GridChart settings
+ * @returns {JSX.Element} The provider component wrapping children with context
+ *
+ * @example
+ * ```tsx
+ * const settingsRef = useRef<GridChartSettings>({
+ *   chart: 'Column',
+ *   dataSource: data,
+ *   category: ['Date'],
+ *   series: ['Sales']
+ * });
+ *
+ * <GridChartProvider settings={settingsRef}>
+ *   <GridChartPanel />
+ * </GridChartProvider>
+ * ```
+ */
+/* eslint-enable jsdoc/no-undefined-types */
+export const GridChartProvider = ({ children, settings }) => {
+    const [chartInfo, setChartInfo] = useState(getChartInfo(settings.current.chart));
+    const [categoryAxis, setCategoryAxis] = useState(settings.current.category[0]);
+    const [series, setSeries] = useState(settings.current.series);
+    const [valueAxis, setValueAxis] = useState(settings.current.series[0]);
+    const [showSidePanel, setShowSidePanel] = useState(true);
+    const chartRef = useRef(null);
+    const pieChartRef = useRef(null);
+    const [format, setFormat] = useState(() => {
+        const chartSeriesStyle = settings.current.series.map((data) => {
+            return { series: data, fill: '', enableDataLabel: false };
+        });
+        chartSeriesStyle.push({ series: 'All', fill: '', enableDataLabel: false });
+        return {
+            marginLeft: 10,
+            marginRight: 10,
+            marginTop: 10,
+            marginBottom: 10,
+            background: '#FFFFFF',
+            // Title Style defaults
+            titleText: '',
+            titleFontFamily: 'Default',
+            titleFontSize: '15',
+            titleColor: '#000000',
+            // Subtitle Style defaults
+            subtitleText: '',
+            subtitleFontFamily: 'Default',
+            subtitleFontSize: '12',
+            subtitleColor: '#333333',
+            // Legend Style defaults
+            enableLegend: true,
+            legendPosition: 'Auto',
+            legendFontFamily: 'Default',
+            legendFontSize: '12',
+            legendColor: '#000000',
+            // Series
+            enableTooltip: true,
+            enablePieChartDataLabel: true,
+            chartSeriesStyle,
+            categoryInverted: false,
+            valueInverted: false,
+            categoryTitleText: '',
+            categoryTitleFontFamily: 'Default',
+            categoryTitleFontSize: '16',
+            categoryTitleColor: '#000000',
+            valueTitleText: '',
+            valueTitleFontFamily: 'Default',
+            valueTitleFontSize: '11',
+            valueTitleColor: '#000000',
+            categoryLabelFontFamily: 'Default',
+            categoryLabelFontSize: '12',
+            categoryLabelColor: '#000000',
+            categoryLabelRotation: 315,
+            valueLabelFontFamily: 'Default',
+            valueLabelFontSize: '12',
+            valueLabelColor: '#000000',
+            valueLabelRotation: 0
+        };
+    });
+    return (_jsx(GridChartContext.Provider, { value: {
+            settings,
+            chartInfo, setChartInfo,
+            categoryAxis, setCategoryAxis,
+            series, setSeries,
+            valueAxis, setValueAxis,
+            chartRef, pieChartRef,
+            showSidePanel, setShowSidePanel,
+            format, setFormat
+        }, children: children }));
+};
+/**
+ * Hook to access GridChart context from any child component.
+ * Must be called within a component tree wrapped by GridChartProvider.
+ * Provides access to chart state, formatting, and axis configuration.
+ *
+ * @returns {GridChartContextType} The GridChart context object containing:
+ *   - settings: Current chart settings reference
+ *   - chartInfo, setChartInfo: Chart type and classification
+ *   - categoryAxis, setCategoryAxis: Category field selection
+ *   - series, setSeries: Series field selection
+ *   - valueAxis, setValueAxis: Value field selection
+ *   - chartRef, pieChartRef: References to chart components
+ *   - showSidePanel, setShowSidePanel: Property panel visibility
+ *   - format, setFormat: Chart formatting configuration
+ * @throws {Error} If called outside of GridChartProvider
+ *
+ * @example
+ * ```tsx
+ * function MyChartComponent() {
+ *   const { chartInfo, setChartInfo, format, setFormat } = useGridChartSettings();
+ *
+ *   const handleChartChange = (newChart: ChartType) => {
+ *     setChartInfo(getChartInfo(newChart));
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <p>Current Chart: {chartInfo.chart}</p>
+ *       <button onClick={() => handleChartChange('Pie')}>
+ *         Switch to Pie Chart
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export const useGridChartSettings = () => {
+    const context = useContext(GridChartContext);
+    return context;
+};

package/src/grid-chart/contexts/index.d.ts

@@ -0,0 +1 @@
+export * from './GridChartContext';

package/src/grid-chart/contexts/index.js

@@ -0,0 +1 @@
+export * from './GridChartContext';

package/src/grid-chart/index.d.ts

@@ -0,0 +1,5 @@
+export * from './components';
+export * from './contexts';
+export * from './types';
+export * from './utils';
+export * from './views';

package/src/grid-chart/index.js

@@ -0,0 +1,5 @@
+export * from './components';
+export * from './contexts';
+export * from './types';
+export * from './utils';
+export * from './views';