@revolist/revogrid-react 3.0.0 → 4.11.19

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Revolist OU
+Copyright (c) 2024 Revolist OU
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,128 +1,323 @@
-# RevoGrid React Adapter
+# React Data Grid minimalist adapter
+
+
+> [!NOTE]
+>  Repository Notice: This repo is read-only. Create new issues at the [revogrid repo](https://github.com/revolist/revogrid)
 
-Minimalistic RevoGrid adapter for React. 
 
 <p align="center">
-  <a href="https://revolist.github.io/revogrid">
-    <img src="https://raw.githubusercontent.com/revolist/revogrid/master/assets/logo.svg" alt="RevoGrid" height="150" />
+  <a href="https://rv-grid.com">
+    <img src="./assets/logo.svg" alt="React Data Grid" height="150" />
   </a>
 </p>
 
-##
 <p align="center">
-  <a href="https://www.npmjs.com/package/@revolist/revogrid"><img src="https://img.shields.io/npm/v/@revolist/vue3-datagrid" alt="Latest Version on NPM"/></a>
+  <a href="https://www.npmjs.com/package/@revolist/revogrid"><img src="https://img.shields.io/npm/v/@revolist/revogrid" alt="Latest Version on NPM"/></a>
   <a href="https://github.com/revolist/revogrid/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/@revolist/revogrid" alt="Software License"/></a>
+  <img src="https://badgen.net/bundlephobia/dependency-count/@revolist/revogrid" alt="Dependency count"/>
+  <img src="https://badgen.net/bundlephobia/tree-shaking/@revolist/revogrid" alt="Tree shaking"/>
+  <img src="https://img.shields.io/bundlephobia/min/@revolist/revogrid" alt="Bundle size"/>
+  <img src="https://sonarcloud.io/api/project_badges/measure?project=revolist_revogrid&metric=alert_status" alt="Sonar Quality Gate"/>
 </p>
-<h4 align="center">Powerful data grid component built on top of <a href="https://github.com/revolist/revogrid" target="_blank">RevoGrid</a>.</h4>
+
+
+<h3 align="center">Powerful React Data Grid component built on top of <a href="https://github.com/revolist/revogrid" target="_blank">RevoGrid</a>.</h3>
 <p align="center">
-Millions of cells and thousands columns easy and efficiently.
-  
+Support Millions of cells and thousands of columns easy and efficiently for fast data rendering. Easy to use.
 </p>
 
 <p align="center">
-  <a href="https://revolist.github.io/revogrid">Demo and API</a> •
+  <a href="https://rv-grid.com">Demo and API</a> •
   <a href="#key-features">Key Features</a> •
-  <a href="#how-to-use">How To Use</a> •
-  <a href="https://github.com/revolist/revogrid/blob/master/src/components/revo-grid/readme.md">Docs</a> •
+  <a href="#basic-usage">How To Use</a> •
+  <a href="#installation">Installation</a> •
+  <a href="https://rv-grid.com/guide/">Docs</a> •
   <a href="#license">License</a>
 </p>
 
-<img src="https://raw.githubusercontent.com/revolist/revogrid/master/assets/material.jpg" alt="Material grid preview" width="100%" />
+<img src="./assets/material.jpg" alt="Material grid preview" width="100%" />
 <i>RevoGrid material theme.</i>
 <br>
 
 
 ## Key Features
 
-- Millions of cells viewport with a powerful core in-build by default;
-- Keayboard support with excel like focus;
-- Super light initial starter <img src="https://badgen.net/bundlephobia/min/@revolist/revogrid@latest" alt="Min size"/>. Can be imported with polifill or as module for modern browsers;
-- Intelligent Virtual DOM and smart row recombination in order to achieve less redraws;
-- Sorting (multiple options, can be customized per column and advanced with events);
-- Filtering
-  - Predefined system filters;
-  - Preserve existing collection;
-  - Custom filters (extend existing system filters with your own set);
-- Export to file;
-- Custom sizes per Column and Row;
-- Column resizing;
-- Autosize support (Column size based on content);
-- Pinned/Sticky/Freezed:
-  - Columns (define left or right);
-  - Rows (define top or bottom);
-- Grouping:
-  - Column grouping (Nester headers);
-  - Row grouping (Nested rows);
-- Cell editing;
-- Customizations:
-  - Header template;
-  - Cell template (build your own cell view);
-  - Cell editor (apply your own editors and cell types);
-  - Cell properties (build you own properties around rendered cells);
-- [Column types](https://revolist.github.io/revogrid/guide/column.types.html);
-  - Text/String (default);
-  - Number;
-  - Select;
-  - Date;
-  - Custom (take any type as template and create your own extended style);
-- Drag and drop rows;
-- Range operations:
-  - Selection;
-  - Edit;
-- Theme packages:
-  - Excel like (default)
-  - Material (compact, dark or light);
-- Copy/Paste (copy/paste from Excel, Google Sheets or any other sheet format);
-- Easy extenation and support with modern VNode features and tsx support;
-- Trimmed rows (hide rows on demand);
-- Plugin system (create your own plugins or extend existing one, it's transparent and easy);
-- Hundred others small customizations and improvements [RevoGrid](https://revolist.github.io/revogrid).
-
-## How to use
+- **High Performance**: Handles millions of cells in the viewport with a powerful core built by default.
+
+- **[Accessibility](https://rv-grid.com/guide/wcag)**: Follows WAI-ARIA best practices.
+
+- **[Keyboard Support](https://rv-grid.com/guide/defs#Keyboard)**:
+  - Excel-like focus for efficient navigation and editing.
+  - Seamless copy/paste from Excel, Google Sheets, or any other sheet format.
+
+
+- **Lightweight**: Minimal initial bundle size ![Min size](https://badgen.net/bundlephobia/min/@revolist/revogrid@latest). Can be imported with polyfills or as a module for modern browsers.
+
+- **[Intelligent Virtual DOM](https://rv-grid.com/guide/overview#VNode-Reactive-DOM)**: Smart row recombination to minimize redraws.
+
+- **[Virtual Scroll](https://rv-grid.com/guide/viewports)**: Handles large datasets with infinite scroll.
+
+- **[Drag and Drop](https://rv-grid.com/guide/row/order)**: Drag and drop in [rows](https://rv-grid.com/guide/row/order) and [columns](https://rv-grid.com/guide/column/order).
+
+- **[Sorting](https://rv-grid.com/guide/sorting)**: Multiple options, customizable per column, with advanced event handling.
+
+- **[Filtering](https://rv-grid.com/guide/filters)**:
+  - Predefined system filters.
+  - Multi column filters.
+  - Conditional filters.
+  - Preserve existing collections.
+  - Custom filters to extend system filters with your own set.
+
+- **[Export](https://rv-grid.com/guide/export.plugin)**: Export data to file.
+
+- **Custom Sizes**: Define custom sizes for [columns](https://rv-grid.com/guide/column/#Column-Size) and [rows](https://rv-grid.com/guide/row/height). Automatic sizing based on content.
+
+- **[Column Resizing](https://rv-grid.com/guide/column/resize)**: Adjust column widths.
+
+- **Pinned/Sticky/Freezed Elements**:
+  - [Columns](https://rv-grid.com/guide/column/pin) (define left or right).
+  - [Rows](https://rv-grid.com/guide/row/pin) (define top or bottom).
+
+- **Grouping**:
+  - [Column grouping](https://rv-grid.com/guide/column/grouping) (nested headers).
+  - [Row grouping](https://rv-grid.com/guide/row/grouping) (nested rows).
+
+- **Column Types**: [More details](https://rv-grid.com/guide/column/#Column-Formats)
+  - [Text/String](https://rv-grid.com/guide/column/types#String) (default).
+  - [Number](https://rv-grid.com/guide/column/types#Number).
+  - [Select/Dropdown](https://rv-grid.com/guide/column/types#Select-Dropdown).
+  - [Date](https://rv-grid.com/guide/column/types#Date).
+  - Custom (create extended styles using any template).
+
+- **Range Operations**:
+  - [Selection](https://rv-grid.com/guide/defs#Range).
+  - [Editing](https://rv-grid.com/guide/defs#Range-Autofill).
+
+- **[Theme Packages](https://rv-grid.com/guide/theme)**:
+  - Excel-like (default).
+  - Material (compact, dark, or light).
+
+- **[Extensibility](https://rv-grid.com/guide/jsx.template)**: Modern VNode features and tsx support for easy extension.
+
+- **[Trimmed Rows](https://rv-grid.com/guide/row/#Trimmed-Rows)**: Hide rows on demand.
+
+- **[Plugin System](https://rv-grid.com/guide/plugin/)**: Create custom plugins or extend existing ones easily.
+
+- **[Formula Support](https://rv-grid.com/guide/cell/formula)**: Evaluate formulas in cell data.
+
+- **[Master Detail/Subtables/Forms](https://rv-grid.com/guide/row/master.pro)**: Expand rows to reveal child data.
+- **[Cell/Column/Row Span/Merge](https://rv-grid.com/guide/cell/merge)**: Merge cells to form groups.
+
+- **Customizations**:
+  - [Column header template](https://rv-grid.com/guide/column/header.template).
+  - [Row header template](https://rv-grid.com/guide/row/headers).
+  - [Cell properties](https://rv-grid.com/guide/cell/) (define custom properties for rendered cells).
+
+  - [Cell template](https://rv-grid.com/guide/react/renderer) (create your own cell views).
+  - [Cell editor](https://rv-grid.com/guide/react/editor) (use predefined or apply your own custom editors and cell types).
+
+- **Rich API & Additional Improvements**: Explore hundreds of other small customizations and improvements in [RevoGrid](https://rv-grid.com/).
+
+## Installation
+
 
 With NPM:
+
 ```bash
-npm i @revolist/revogrid-react --save;
+npm i @revolist/react-datagrid
+```
+
+With PNPM:
+
+```bash
+pnpm add @revolist/react-datagrid
 ```
 
 With Yarn:
 
 ```bash
-yarn add @revolist/revogrid-react;
+yarn add @revolist/react-datagrid
+```
+
+With Bun:
+
+```bash
+bun add @revolist/react-datagrid
 ```
 
+> [!NOTE]
+> Previous package name: `@revolist/revogrid-react` was renamed to `@revolist/react-datagrid`.
+
+
+
+## Basic Usage
+
+### Simplest Usage
+
+```tsx
+import { useState } from 'react'
+import { RevoGrid } from '@revolist/react-datagrid'
+
+/**
+ * note: columns & source need a "stable" reference in order to prevent infinite re-renders
+ */
+const columns = [
+  { prop: 'name', name: 'First' },
+  { prop: 'details', name: 'Second' },
+]
 
-```jsx
-import React from "react";
-import { defineCustomElements } from "@revolist/revogrid/loader"; // webcomponent definition loader 
-import { RevoGrid } from "@revolist/revogrid-react";
-
-export default class App extends React.Component {
-  constructor(props) {
-    super(props);
-    // you have to define webcomponent before you can use the wrapper
-    defineCustomElements();
-    this.state = {
-      columns: [{ prop: "name" }],
-      source: [{ name: "1" }, { name: "2" }]
-    };
-  }
-
-  afterEdit({ detail }) {}
-
-  render() {
-    return (
-      <div>
-        <RevoGrid
-          theme="compact"
-          columns={this.state.columns}
-          source={this.state.source}
-          onAfterEdit={(e) => this.afterEdit(e)}
-        />
-      </div>
-    );
-  }
+function App() {
+  const [source] = useState([
+    { name: '1', details: 'Item 1' },
+    { name: '2', details: 'Item 2' },
+  ]);
+  return (<RevoGrid columns={columns} source={source} />)
 }
+export default App
+
+```
+
+### Cell Template Usage
+
+```tsx
+import { useState } from 'react';
+import { RevoGrid, Template, type ColumnDataSchemaModel } from '@revolist/react-datagrid';
+
+/**
+ * Custom cell component
+ */
+const Cell = ({ model, prop, value }: ColumnDataSchemaModel) => {
+  return <div><strong>{value}</strong></div>;
+};
+/**
+ * note: columns & source need a "stable" reference in order to prevent infinite re-renders
+ */
+const columns = [
+  { prop: 'name', name: 'First', cellTemplate: Template(Cell) },
+];
+
+function App() {
+  const [source] = useState([{ name: '1' }, { name: '2' }]);
+  return (<RevoGrid columns={columns} source={source} />)
+}
+export default App
+
 ```
 
-Check [Sandbox](https://codesandbox.io/s/revogrid-react-g3ygo?file=/src/App.js) for real live sample.
+### Editor Usage
+
+```tsx
+// App.tsx
+import { useState } from 'react';
+import { RevoGrid, Editor, type EditorType, type Editors } from '@revolist/react-datagrid';
+
+/**
+ * Custom editor component
+ */
+const Button = ({ close } : EditorType) => {
+  return <button onClick={close}>Close</button>
+};
+
+const gridEditors: Editors = { ['custom-editor']: Editor(Button) };
+
+/**
+ * note: columns & source need a "stable" reference in order to prevent infinite re-renders
+ */
+const columns = [
+  {
+    prop: 'name',
+    name: 'Custom editor',
+    editor: 'custom-editor',
+  },
+];
+
+function App() {
+  const [source] = useState([
+    { name: '1', details: 'Item 1' },
+    { name: '2', details: 'Item 2' },
+  ]);
+  return (<RevoGrid columns={columns} source={source} editors={gridEditors} />)
+}
+
+export default App
+
+```
+
+
+[Example and guide](https://rv-grid.com/guide/react/)
+
+
+
+## Versions
+
+- **2.0+**: Introduced the plugin system, grouping, sorting, and filtering.
+- **3.0+**: Breaking changes introduced:
+    -   Removed the redundant viewport component.
+    -   Renamed classes to support Bootstrap and other libraries:
+        -   `row` -> `rgRow`
+        -   `col` -> `rgCol`
+        -   `data-cell` -> `rgCell`
+        -   `data-header-cell` -> `rgHeaderCell`
+    -   Migrated all method names to lowercase to align with modern event naming conventions. For example, `afterEdit` is now `afteredit`. Check the API for details.
+    -   Added support for pure ESM modules to enable the use of the grid in all modern frontend tooling like Vite, Parcel, etc. You can now import custom elements without lazy loading. Note that you are responsible for polyfills.
+
+
+- **4.0+**: Breaking changes introduced. See the [migration guide](https://rv-grid.com/guide/migration). 
+
+-   Redesigned type support:
+        - Removed deprecated namespaces:
+            - **Before**: `RevoGrid.ColumnRegular`
+            - **Now**: `ColumnRegular`;
+        - Improved type import:
+            - **Before**: `import { RevoGrid } from '@revolist/revogrid/dist/types/interfaces'`
+            - **Now**: `import { ColumnRegular } from '@revolist/revogrid'`.
+        - Changed viewport type names everywhere. For example, before: `rowDefinitions: [{ type: "row", index: 0, size: 145 }]`, after: `rowDefinitions: [{ type: "rgRow", index: 0, size: 145 }]`.
+    -   Updated [event](https://rv-grid.com/guide/api/revoGrid.html#Events) naming convention. Review your [event](https://rv-grid.com/guide/api/revoGrid.html#Events) usage. [Event names](https://rv-grid.com/guide/api/revoGrid.html#Events) are all lowercase now and are aligned with modern event naming conventions. For example, `afterEdit` -> `afteredit`.
+    - Multiple event breaking changes introduced: beforerowrender now returns `BeforeRowRenderEvent`. Check all events for details.
+
+-   **Major improvements**:
+    -   Rethought the entire framework approach. Introduced Pro version with advance support and pro features.
+    -   Introduced slot support.
+    -   Updated scrolling system for better mobile support.
+    -   Advance template support. Introduced `additionalData` for templates and editors. `Prop` gives access to parent/root app context.
+    -   Redesigned the documentation.
+    -   Fixed major issues and significantly improved overall performance, making the grid multiple time faster.
+    -   Enhanced plugin support - now with full access to grid providers.
+    -   Updated documentation.
+    -   Provided full framework support and native render for  Angular, React, Svelte and Vue.
+ 
+-   **What next?**
+    -   Check our [Roadmap](https://github.com/users/revolist/projects/3)
+
+
+## Our Sponsors
+
+We would like to extend our heartfelt gratitude to our sponsors for their generous support. Their contributions help us maintain and develop RevoGrid.
+
+[![Altruistiq](https://cdn.prod.website-files.com/62cd69e08130a1a33f5ef900/6310b4d500e971695db5e9c3_615b5db69ce8931a276e5ed2_Social_Icons_AQ_3_32x32.png)](https://altruistiq.com)
+
+
+### Become a Sponsor
+
+If you or your company would like to support the ongoing development of RevoGrid, please consider [![Sponsor Us](https://img.shields.io/badge/Sponsor%20Us-%F0%9F%92%96-brightgreen)](https://opencollective.com/revogrid) or use a [Pro version](https://rv-grid.com/pro/). Your support will help us continue to improve the project and provide the best possible tool for the community.
+
+Thank you for supporting RevoGrid! 🙏
+
+
+## Contributing
+
+By getting involved, you'll have the opportunity to enhance your skills, gain valuable experience, and make a significant impact on an innovative project. Your contribution, no matter how big or small, is valuable.
+
+### Why Contribute?
+
+- **Expand Your Knowledge**: Working on complex libraries allows you to dive deep into modern web technologies, improve your coding skills, and learn best practices in performance optimization, data handling, and component-based architecture.
+- **Experience**: Contributing to an open-source project like provides you with practical experience that can be a great addition to your portfolio. It demonstrates your ability to work collaboratively, solve complex problems, and contribute to a project's success.
+- **Professional Growth**: By contributing, you become part of a network of talented developers. This can lead to mentorship opportunities, collaborations, and professional connections that can benefit your career. 
+
+
+## License
+
+MIT
+
+---
+

package/dist/index.d.ts

@@ -0,0 +1,73 @@
+import { ColumnDataSchemaModel } from '@revolist/revogrid';
+import { ColumnTemplateProp } from '@revolist/revogrid';
+import { ComponentType } from 'react';
+import { EditCell } from '@revolist/revogrid';
+import { EditorBase } from '@revolist/revogrid';
+import { EditorCtr } from '@revolist/revogrid';
+import { ForwardRefExoticComponent } from 'react';
+import { HTMLAttributes } from 'react';
+import { HyperFunc } from '@revolist/revogrid';
+import { JSX as JSX_2 } from '@revolist/revogrid';
+import { RefAttributes } from 'react';
+import { Root } from 'react-dom/client';
+import { VNode } from '@revolist/revogrid';
+
+/**
+ * Create editor constructor.
+ * This function creates editor constructor by wrapping it with EditorAdapter
+ * which is responsible for connecting editor with grid.
+ */
+export declare const Editor: (EditorComponent: ComponentType<EditorType>) => EditorCtr;
+
+export declare class EditorAdapter implements EditorBase {
+    private EditorComponent;
+    column: ColumnDataSchemaModel;
+    private save;
+    private close;
+    element: ReactElement | null;
+    editCell?: EditCell;
+    private renderedComponent;
+    constructor(EditorComponent: ComponentType<EditorType>, column: ColumnDataSchemaModel, save: (value: any, preventFocus?: boolean) => void, close: (focusNext?: boolean) => void);
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    render(h: HyperFunc<VNode>): VNode;
+}
+
+/**
+ * Data passed to editor
+ */
+export declare type EditorType = {
+    column: ColumnDataSchemaModel;
+    save: (value: any, preventFocus?: boolean) => void;
+    close: (focusNext?: boolean) => void;
+} & Partial<EditCell>;
+
+export declare interface ReactElement extends HTMLElement {
+    _root?: Root;
+}
+
+export declare interface RenderedComponent<T> {
+    update: (newProps: T) => void;
+    destroy: () => void;
+}
+
+export declare const RevoGrid: ForwardRefExoticComponent<JSX_2.RevoGrid & Omit<HTMLAttributes<HTMLRevoGridElement>, "style"> & StyleReactProps & RefAttributes<HTMLRevoGridElement>>;
+
+declare interface StyleReactProps {
+    class?: string;
+    className?: string;
+    style?: {
+        [key: string]: any;
+    };
+}
+
+/**
+ * Render React component in Grid column template.
+ */
+export declare const Template: (ReactComponent: ComponentType<ColumnDataSchemaModel | ColumnTemplateProp>, customProps?: any) => (h: HyperFunc<VNode>, p: ColumnDataSchemaModel | ColumnTemplateProp, addition?: any) => VNode;
+
+
+export * from "@revolist/revogrid";
+export * from "@revolist/revogrid/loader";
+
+export { }