slickgrid-react 1.0.0-beta.1 → 2.0.0

package/.eslintrc

@@ -54,7 +54,7 @@
     "@typescript-eslint/member-ordering": "off",
     "@typescript-eslint/member-delimiter-style": "off",
     "@typescript-eslint/no-empty-function": "off",
-    "@typescript-eslint/no-empty-interface": "error",
+    "@typescript-eslint/no-empty-interface": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-misused-new": "error",
     "@typescript-eslint/no-namespace": "error",
@@ -65,7 +65,7 @@
     "@typescript-eslint/no-this-alias": "error",
     "@typescript-eslint/no-use-before-define": "off",
     "@typescript-eslint/no-var-requires": "off",
-    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-unused-vars": "off",
     "@typescript-eslint/prefer-for-of": "off",
     "@typescript-eslint/prefer-function-type": "error",
     "@typescript-eslint/prefer-namespace-keyword": "error",

package/.hintrc

@@ -0,0 +1,11 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "no-inline-styles": "off",
+    "disown-opener": "off",
+    "axe/forms": "off",
+    "button-type": "off"
+  }
+}

package/.release-it.json

@@ -0,0 +1,25 @@
+{
+    "git": {
+      "commitMessage": "chore: release v${version}"
+    },
+    "github": {
+      "release": true
+    },
+    "hooks": {
+      "before:init": [
+        "npm run lint"
+      ],
+      "after:bump": "npm run build",
+      "after:git:release": "echo After git push, before GitHub Release",
+      "after:release": "echo Successfully released ${name} v${version} to ${repo.repository}."
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "header": "# Change Log \n\nAll notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.",
+        "preset": "angular",
+        "ignoreRecommendedBump": true,
+        "infile": "CHANGELOG.md"
+      }
+    }
+  }
+  

package/CHANGELOG.md

@@ -1,3 +1,34 @@
+# Change Log 
+
+All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 2.0.0 (2022-12-08)
+
+
+### Bug Fixes
+
+* add missing grid container for HeaderMenu plugin to work correctly ([ca9887e](https://github.com/ghiscoding/slickgrid-react/commit/ca9887e119e6d3d61acace26197e6e299d536c84))
+* **comp:** switch to reusable Slickgrid-Universal Pagination ([549862f](https://github.com/ghiscoding/slickgrid-react/commit/549862ffff59bac1ad2ad86aae0bfad23ed686b3))
+* Custom Events not working out of the box in React ([1a16ae3](https://github.com/ghiscoding/slickgrid-react/commit/1a16ae3491f4efa533a4b43c4aa8b7c137ca45a4))
+* few more small examples fixes ([4ffc694](https://github.com/ghiscoding/slickgrid-react/commit/4ffc69457633e99aef71c7879087e4e2919af22e))
+* fixing few small issues in Examples after adding Cypress E2E tests ([217bf9d](https://github.com/ghiscoding/slickgrid-react/commit/217bf9d7e72ae40f1a02974e681f26494ae51807))
+* Grid Presets should load all presets including pinning ([3253148](https://github.com/ghiscoding/slickgrid-react/commit/32531486c617d16a8e8a01807438f3499c9d8c53))
+* most Examples should now work with Custom Events and i18n ([d3100b2](https://github.com/ghiscoding/slickgrid-react/commit/d3100b21629369d12bc3446f674242be34496969))
+* **pinning:** cols reorder & freezing shouldn't affect order ([#12](https://github.com/ghiscoding/slickgrid-react/issues/12)) ([b6c806b](https://github.com/ghiscoding/slickgrid-react/commit/b6c806b3a24327ad4c54b1e37f4cd7a31b5acc6a))
+* **sorting:** update Slickgrid-Universal, fixes date sort shuffling ([#21](https://github.com/ghiscoding/slickgrid-react/issues/21)) ([2d35508](https://github.com/ghiscoding/slickgrid-react/commit/2d35508d58de82cbdfdefc25b1df67dbcb7bcfcf))
+* **ui:** use correct grid container on Resizer to fix Pagination ([b00dc98](https://github.com/ghiscoding/slickgrid-react/commit/b00dc98153934922e77b9a113f36eb191ed5ab89))
+
+
+### Features
+
+* add locale support via react-i18next ([c7c86d0](https://github.com/ghiscoding/slickgrid-react/commit/c7c86d00ac7212aa40c25f6d9b998cbbf71e1c75))
+* add new Example 33 (tooltip) and 34 (trading platform) ([aa4ad8b](https://github.com/ghiscoding/slickgrid-react/commit/aa4ad8bc8975a8c2e76b8bb2ef11a46e6c8f3149))
+* add Slots and fix issue to hide header row when provided ([d9bcded](https://github.com/ghiscoding/slickgrid-react/commit/d9bcdedd993d4ccbbca8e1a1759372c89878e3c1))
+* add Tree Data grid functionality ([6422ae0](https://github.com/ghiscoding/slickgrid-react/commit/6422ae0eca678c878ff4311187f78d3879f8b38c))
+* **core:** BREAKING CHANGE replace jQueryUI by SortableJS ([e4052d6](https://github.com/ghiscoding/slickgrid-react/commit/e4052d62bba7f150b68c2e299fe074dd75729246))
+* **OData:** add `$select` and `$expand` query options ([631434c](https://github.com/ghiscoding/slickgrid-react/commit/631434ccb8051ac7fcd896732b1e6ece3e8f23ef))
+* upgrade to latest Slickgrid-Universal version 1.x ([3a12f0f](https://github.com/ghiscoding/slickgrid-react/commit/3a12f0f516dbeae84daec875914f31d2d223f8d0))
+
 # Changelog
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2016-2021, Ghislain B. - slickgrid-react
+Copyright (c) 2022-present, Slickgrid-React - Ghislain B.
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

package/README.md

@@ -1,70 +1,97 @@
-# Getting Started with Create React App
+# Slickgrid-React
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
+[![npm](https://img.shields.io/npm/v/slickgrid-react.svg?logo=npm&logoColor=fff&label=npm)](https://www.npmjs.com/package/slickgrid-react)
 
-## Available Scripts
+[![Actions Status](https://github.com/ghiscoding/slickgrid-react/workflows/CI%20Build/badge.svg)](https://github.com/ghiscoding/slickgrid-react/actions)
+[![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/)
+<!-- [![jest](https://jestjs.io/img/jest-badge.svg)](https://github.com/facebook/jest)
+[![codecov](https://codecov.io/gh/ghiscoding/slickgrid-react/branch/master/graph/badge.svg)](https://codecov.io/gh/ghiscoding/slickgrid-react) -->
 
-In the project directory, you can run:
+## Upcoming Release (stay tuned) 📣
+An offical supported release 2.x is about to land very, very soon (in coming days), checkout the [Releases](https://github.com/ghiscoding/slickgrid-react/releases) and [Discussions](https://github.com/ghiscoding/slickgrid-react/discussions) sections for an update on the subject. You can already see and try out the new [Live Demo](https://ghiscoding.github.io/slickgrid-react/) of the upcoming version.
 
-### `npm start`
+### Brief introduction
+One of the best javascript datagrid [SlickGrid](https://github.com/mleibman/SlickGrid) which was originally developed by @mleibman is now available to React. I have used a few datagrids and SlickGrid beats most of them in terms of functionalities and performance (it can easily deal with even a million row). We will be using the [6pac/SlickGrid](https://github.com/6pac/SlickGrid/) fork, this is the most active fork since the original @mleibman fork was closed some time ago by his author for personal reasons. Also worth to know, that I also contributed a lot to the 6pac/SlickGrid fork for the benefit of Slickgrid-React.
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+## Installation
+Refer to the **[Wiki - HOWTO Step by Step](https://github.com/ghiscoding/slickgrid-react/wiki/HOWTO--Step-by-Step)** and/or clone the [Slickgrid-React-Demos](https://github.com/ghiscoding/slickgrid-react-demos) repository. Please consult all Wikis before opening new issues, also consider asking installation and/or general questions on [Stack Overflow](https://stackoverflow.com/search?tab=newest&q=slickgrid) unless you think there's a bug with the library.
 
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+### License
+[MIT License](LICENSE)
 
-### `npm test`
+### NPM Package
+[slickgrid-react on NPM](https://www.npmjs.com/package/slickgrid-react)
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+### Live Demo page
+`Slickgrid-React` works with all `Bootstrap` versions and/or any other UI framework you wish to use (Bulma, Material Design, ...), you can see a demo of each one below. There are also 2 new styling Themes, Material & Salesforce which are also available. You can also use different SVG icons, you may want to look at the [Wiki - SVG Icons](https://github.com/ghiscoding/slickgrid-react/wiki/SVG-Icons)
+- [Bootstrap 5 demo](https://ghiscoding.github.io/slickgrid-react)
 
-### `npm run build`
+#### Working Demos
+For a complete working set of working demos, you strongly suggest that you clone the [Slickgrid-React Demos](https://github.com/ghiscoding/slickgrid-react-demos) repository (instructions are provided in the demo repo). This repo provides multiple samples and it is also worth to know that these demos are updated frequently.
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+### Like it? :star: it
+You like **Slickgrid-React**? Be sure to upvote :star:, and perhaps support me with cafeine :coffee: and feel free to contribute. 👷👷‍♀️ 
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+<a href='https://ko-fi.com/ghiscoding' target='_blank'><img height='32' style='border:0px;height:32px;' src='https://az743702.vo.msecnd.net/cdn/kofi3.png?v=0' border='0' alt='Buy Me a Coffee at ko-fi.com' />
 
-### `npm run eject`
+## Latest News & Releases
+Check out the [Releases](https://github.com/ghiscoding/slickgrid-react/releases) section for all latest News & Releases.
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+### Fully Tested with [Jest](https://jestjs.io/) (Unit Tests) - [Cypress](https://www.cypress.io/) (E2E Tests)
+Slickgrid-React and Slickgrid-Universal both have **100%** Unit Test Coverage, we are talking about +15,000 lines of code (+3,750 unit tests) that are fully tested with [Jest](https://jestjs.io/). On the UI side, all Slickgrid-React Examples are tested with [Cypress](https://www.cypress.io/), there are over +500 Cypress E2E tests.
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+## Installation
+Refer to the **[Wiki - HOWTO Step by Step](https://github.com/ghiscoding/slickgrid-react/wiki/HOWTO---Step-by-Step)**. Please don't open any issue unless you have followed these steps (from the Wiki), and if any of the steps are incorrect or confusing, then please let me know.
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+**NOTE:** if you have any question, please consider asking installation and/or general questions on [Stack Overflow](https://stackoverflow.com/search?tab=newest&q=slickgrid)
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+## Wiki / Documentation
+The Wiki is where all the documentation and instructions will go, so please consult the [slickgrid-react - Wiki](https://github.com/ghiscoding/slickgrid-react/wiki) before opening any issues. The [Wiki - HOWTO](https://github.com/ghiscoding/slickgrid-react/wiki/HOWTO---Step-by-Step) is a great place to start with. You can also take a look at the [Demo page](https://ghiscoding.github.io/slickgrid-react), it includes sample for most of the features and it keeps growing (so you might want to consult it whenever a new version comes out).
 
-## Learn More
+## Main features
+You can see some screenshots below and the instructions down below and if that is not enough for you to decide, head over to the [Wiki - Main Features](https://github.com/ghiscoding/slickgrid-react/wiki).
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+## Missing features
+What if `Slickgrid-React` is missing feature(s) compare to the original core library [6pac/SlickGrid](https://github.com/6pac/SlickGrid/)?
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+Fear not, and just simply reference the `SlickGrid` and `DataView` objects, just like in the core lib, those are exposed through Event Emitters. For more info continue reading on [Wiki - SlickGrid & DataView objects](/ghiscoding/slickgrid-react/wiki/SlickGrid-&-DataView-Objects) and [Wiki - Grid & DataView Events](https://github.com/ghiscoding/slickgrid-react/wiki/Grid-&-DataView-Events)
 
-### Code Splitting
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+## Screenshots
 
-### Analyzing the Bundle Size
+Screenshots from the demo app with the `Bootstrap` theme.
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+_Note that the styling changed a bit, the best is to simply head over to the [Live Demo](https://ghiscoding.github.io/slickgrid-react) page._
 
-### Making a Progressive Web App
+### Slickgrid example with Formatters (last column shown is a custom Formatter)
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+#### _You can also see the Grid Menu opened (aka hambuger menu)_
 
-### Advanced Configuration
+![Default Slickgrid Example](/screenshots/formatters.png)
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+### Filters and Multi-Column Sort
 
-### Deployment
+![Filter and Sort](/screenshots/filter_and_sort.png)
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+### Inline Editing
 
-### `npm run build` fails to minify
+![Editors](/screenshots/editors.png)
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+### Pinned (aka frozen) Columns/Rows
+
+![Pinned Columns/Rows](/screenshots/frozen.png)
+
+### Draggable Grouping & Aggregators
+
+![Draggable Grouping](/screenshots/draggable-grouping.png)
+
+### Slickgrid Example with Server Side (Filter/Sort/Pagination)
+#### Comes with OData & GraphQL support (you can implement custom ones too)
+
+![Slickgrid Server Side](/screenshots/pagination.png)
+
+### Composite Editor Modal Windows
+![Composite Editor Modal](/screenshots/composite-editor.png)

package/dist/amd/{custom-elements → components}/slickgrid-react.d.ts

@@ -1,79 +1,48 @@
-import 'slickgrid/lib/jquery.event.drag-2.3.0';
-import 'slickgrid/lib/jquery.mousewheel';
-import 'slickgrid/slick.core';
-import 'slickgrid/slick.dataview';
-import 'slickgrid/slick.grid';
-import 'slickgrid/slick.groupitemmetadataprovider';
 import React from 'react';
-import { BackendServiceApi, Column, EventSubscription, ExtensionList, ExternalResource, Locale, Metrics, Pagination, ServicePagination, SlickDataView, SlickEventHandler, SlickGrid, BackendUtilityService, CollectionService, ExtensionService, FilterFactory, FilterService, GridEventService, GridService, GridStateService, GroupingAndColspanService, PaginationService, ResizerService, RxJsFacade, SharedService, SortService, TreeDataService, ExtensionUtility } from '@slickgrid-universal/common';
+import 'slickgrid/dist/slick.core.min';
+import 'slickgrid/dist/slick.interactions.min';
+import 'slickgrid/dist/slick.grid.min';
+import 'slickgrid/dist/slick.dataview.min';
+import { BackendServiceApi, Column, EventSubscription, ExtensionList, ExternalResource, Locale, Metrics, Pagination, ServicePagination, SlickDataView, SlickEventHandler, SlickGrid, BackendUtilityService, CollectionService, ExtensionService, ExtensionUtility, FilterFactory, FilterService, GridEventService, GridService, GridStateService, GroupingAndColspanService, PaginationService, ResizerService, RxJsFacade, SharedService, SlickGroupItemMetadataProvider, SortService, TreeDataService } from '@slickgrid-universal/common';
 import { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
 import { SlickFooterComponent } from '@slickgrid-universal/custom-footer-component';
 import { SlickEmptyWarningComponent } from '@slickgrid-universal/empty-warning-component';
 import { SlickPaginationComponent } from '@slickgrid-universal/pagination-component';
 import { ReactGridInstance, GridOption } from '../models/index';
-import { ReactUtilService, ContainerService, TranslaterService } from '../services/index';
+import { ReactUtilService, TranslaterService } from '../services/index';
 import { Subscription } from 'rxjs';
-import { SlickgridEventAggregator } from '../custom-elements/slickgridEventAggregator';
-interface Props {
-    reactUtilService: ReactUtilService;
-    globalEa: SlickgridEventAggregator;
-    containerService: ContainerService;
-    translaterService: TranslaterService;
-    externalServices?: {
-        backendUtilityService?: BackendUtilityService;
-        collectionService?: CollectionService;
-        eventPubSubService?: EventPubSubService;
-        extensionService?: ExtensionService;
-        extensionUtility?: ExtensionUtility;
-        filterService?: FilterService;
-        gridEventService?: GridEventService;
-        gridService?: GridService;
-        gridStateService?: GridStateService;
-        groupingAndColspanService?: GroupingAndColspanService;
-        paginationService?: PaginationService;
-        resizerService?: ResizerService;
-        rxjs?: RxJsFacade;
-        sharedService?: SharedService;
-        sortService?: SortService;
-        treeDataService?: TreeDataService;
-    };
-    customDataView?: SlickDataView;
-    dataset: any[];
-    datasetHierarchical?: any[] | null;
-    gridId: string;
-    gridOptions: GridOption;
-    columnDefinitions: Column[];
-}
+import { SlickgridReactProps } from './slickgridReactProps';
 interface State {
     showPagination: boolean;
     _gridOptions: GridOption;
     paginationService: PaginationService;
 }
-export declare class ReactSlickgridCustomElement extends React.Component<Props, State> {
-    readonly props: Props;
-    private _mounted;
-    private setStateValue;
-    private _columnDefinitions;
-    private _currentDatasetLength;
-    private _dataset;
-    private _eventHandler;
-    private _eventPubSubService;
-    private _hideHeaderRowAfterPageLoad;
-    private _isGridInitialized;
-    private _isDatasetInitialized;
-    private _isDatasetHierarchicalInitialized;
-    private _isPaginationInitialized;
-    private _isLocalGrid;
-    private _paginationOptions;
-    private _registeredResources;
-    private get _gridOptions();
-    private set _gridOptions(value);
-    groupItemMetadataProvider: any;
+export declare class ReactSlickgrid extends React.Component<SlickgridReactProps, State> {
+    readonly props: SlickgridReactProps;
+    protected _mounted: boolean;
+    protected setStateValue(key: string, value: any, callback?: () => void): void;
+    protected _columnDefinitions: Column[];
+    protected _currentDatasetLength: number;
+    protected _dataset: any[] | null;
+    protected _elm?: HTMLDivElement | null;
+    protected _eventHandler: SlickEventHandler;
+    protected _eventPubSubService: EventPubSubService;
+    protected _hideHeaderRowAfterPageLoad: boolean;
+    protected _isGridInitialized: boolean;
+    protected _isDatasetInitialized: boolean;
+    protected _isDatasetHierarchicalInitialized: boolean;
+    protected _isPaginationInitialized: boolean;
+    protected _isLocalGrid: boolean;
+    protected _paginationOptions: Pagination | undefined;
+    protected _registeredResources: ExternalResource[];
+    protected _gridOptions?: GridOption;
+    protected get gridOptions(): GridOption;
+    protected set gridOptions(options: GridOption);
+    groupItemMetadataProvider?: SlickGroupItemMetadataProvider;
     backendServiceApi: BackendServiceApi | undefined;
     locales: Locale;
     metrics?: Metrics;
-    private get showPagination();
-    private set showPagination(value);
+    showPagination: boolean;
     serviceList: any[];
     subscriptions: Array<EventSubscription | Subscription>;
     paginationData?: {
@@ -83,56 +52,57 @@ export declare class ReactSlickgridCustomElement extends React.Component<Props,
     slickEmptyWarning: SlickEmptyWarningComponent | undefined;
     slickFooter: SlickFooterComponent | undefined;
     slickPagination: SlickPaginationComponent | undefined;
-    extensionUtility: ExtensionUtility;
     backendUtilityService: BackendUtilityService;
     collectionService: CollectionService;
     extensionService: ExtensionService;
+    extensionUtility: ExtensionUtility;
     filterFactory: FilterFactory;
     filterService: FilterService;
     gridEventService: GridEventService;
     gridService: GridService;
     gridStateService: GridStateService;
     groupingService: GroupingAndColspanService;
-    private get paginationService();
-    private set paginationService(value);
+    protected get paginationService(): PaginationService;
+    protected set paginationService(value: PaginationService);
     resizerService: ResizerService;
     rxjs?: RxJsFacade;
     sharedService: SharedService;
     sortService: SortService;
     treeDataService: TreeDataService;
-    dataview: SlickDataView;
+    dataView: SlickDataView;
     grid: SlickGrid;
     totalItems: number;
-    extensions: ExtensionList<any, any>;
+    extensions: ExtensionList<any>;
     instances: ReactGridInstance | null;
-    private elm;
     static defaultProps: {
         reactUtilService: ReactUtilService;
-        globalEa: EventPubSubService;
-        containerService: ContainerService;
+        containerService: import("../services/container.service").ContainerService;
         translaterService: TranslaterService;
         dataset: never[];
         gridId: string;
         columnDefinitions: never[];
     };
-    constructor(props: Props);
+    get dataset(): any[];
+    set dataset(newDataset: any[]);
+    get datasetHierarchical(): any[] | undefined;
+    set datasetHierarchical(newHierarchicalDataset: any[] | undefined);
+    constructor(props: SlickgridReactProps);
     get eventHandler(): SlickEventHandler;
     get isDatasetInitialized(): boolean;
     set isDatasetInitialized(isInitialized: boolean);
+    set isDatasetHierarchicalInitialized(isInitialized: boolean);
     get registeredResources(): ExternalResource[];
     componentDidMount(): void;
     initialization(eventHandler: SlickEventHandler): void;
     componentWillUnmount(shouldEmptyDomElementContainer?: boolean): void;
     emptyGridContainerElm(): void;
     dispose(shouldEmptyDomElementContainer?: boolean): void;
-    componentDidUpdate(prevProps: Props): void;
+    componentDidUpdate(prevProps: SlickgridReactProps): void;
     columnDefinitionsChanged(): void;
     /**
      * Commits the current edit to the grid
      */
     commitEdit(target: Element): void;
-    datasetChanged(newDataset: any[], oldValue: any[]): void;
-    datasetHierarchicalChanged(newHierarchicalDataset: any[] | undefined): void;
     /**
      * Define our internal Post Process callback, it will execute internally after we get back result from the Process backend call
      * For now, this is GraphQL Service ONLY feature and it will basically
@@ -174,63 +144,63 @@ export declare class ReactSlickgridCustomElement extends React.Component<Props,
      * Loop through all column definitions and copy the original optional `width` properties optionally provided by the user.
      * We will use this when doing a resize by cell content, if user provided a `width` it won't override it.
      */
-    private copyColumnWidthsReference;
-    private displayEmptyDataWarning;
+    protected copyColumnWidthsReference(columnDefinitions: Column[]): void;
+    protected displayEmptyDataWarning(showWarning?: boolean): void;
     /** When data changes in the DataView, we'll refresh the metrics and/or display a warning if the dataset is empty */
-    private handleOnItemCountChanged;
+    protected handleOnItemCountChanged(currentPageRowItemCount: number, totalItemCount: number): void;
     /** Initialize the Pagination Service once */
-    private initializePaginationService;
+    protected initializePaginationService(paginationOptions: Pagination): void;
+    /**
+     * Render (or dispose) the Pagination Component, user can optionally provide False (to not show it) which will in term dispose of the Pagination,
+     * also while disposing we can choose to omit the disposable of the Pagination Service (if we are simply toggling the Pagination, we want to keep the Service alive)
+     * @param {Boolean} showPagination - show (new render) or not (dispose) the Pagination
+     * @param {Boolean} shouldDisposePaginationService - when disposing the Pagination, do we also want to dispose of the Pagination Service? (defaults to True)
+     */
+    protected renderPagination(showPagination?: boolean): void;
     /** Load the Editor Collection asynchronously and replace the "collection" property when Promise resolves */
-    private loadEditorCollectionAsync;
+    protected loadEditorCollectionAsync(column: Column): void;
     /** Load any possible Columns Grid Presets */
-    private loadColumnPresetsWhenDatasetInitialized;
+    protected loadColumnPresetsWhenDatasetInitialized(): void;
     /** Load any possible Filters Grid Presets */
-    private loadFilterPresetsWhenDatasetInitialized;
+    protected loadFilterPresetsWhenDatasetInitialized(): void;
     /**
      * local grid, check if we need to show the Pagination
      * if so then also check if there's any presets and finally initialize the PaginationService
      * a local grid with Pagination presets will potentially have a different total of items, we'll need to get it from the DataView and update our total
      */
-    private loadLocalGridPagination;
+    protected loadLocalGridPagination(dataset?: any[]): void;
     /** Load any Row Selections into the DataView that were presets by the user */
-    private loadRowSelectionPresetWhenExists;
-    private mergeGridOptions;
+    protected loadRowSelectionPresetWhenExists(): void;
+    protected mergeGridOptions(gridOptions: GridOption): GridOption;
     /** Pre-Register any Resource that don't require SlickGrid to be instantiated (for example RxJS Resource) */
-    private preRegisterResources;
-    private registerResources;
+    protected preRegisterResources(): void;
+    protected registerResources(): void;
     /** Register the RxJS Resource in all necessary services which uses */
-    private registerRxJsResource;
-    /**
-     * Render (or dispose) the Pagination Component, user can optionally provide False (to not show it) which will in term dispose of the Pagination,
-     * also while disposing we can choose to omit the disposable of the Pagination Service (if we are simply toggling the Pagination, we want to keep the Service alive)
-     * @param {Boolean} showPagination - show (new render) or not (dispose) the Pagination
-     * @param {Boolean} shouldDisposePaginationService - when disposing the Pagination, do we also want to dispose of the Pagination Service? (defaults to True)
-     */
-    private renderPagination;
+    protected registerRxJsResource(resource: RxJsFacade): void;
     /**
      * Takes a flat dataset with parent/child relationship, sort it (via its tree structure) and return the sorted flat array
      * @param {Array<Object>} flatDatasetInput - flat dataset input
      * @param {Boolean} forceGridRefresh - optionally force a full grid refresh
      * @returns {Array<Object>} sort flat parent/child dataset
      */
-    private sortTreeDataset;
+    protected sortTreeDataset<T>(flatDatasetInput: T[], forceGridRefresh?: boolean): T[];
     /**
      * For convenience to the user, we provide the property "editor" as an Slickgrid-React editor complex object
      * however "editor" is used internally by SlickGrid for it's own Editor Factory
      * so in our lib we will swap "editor" and copy it into a new property called "internalColumnEditor"
      * then take back "editor.model" and make it the new "editor" so that SlickGrid Editor Factory still works
      */
-    private swapInternalEditorToSlickGridFactoryEditor;
+    protected swapInternalEditorToSlickGridFactoryEditor(columnDefinitions: Column[]): any[];
     /** translate all columns (including hidden columns) */
-    private translateColumnHeaderTitleKeys;
+    protected translateColumnHeaderTitleKeys(): void;
     /** translate all column groups (including hidden columns) */
-    private translateColumnGroupKeys;
+    protected translateColumnGroupKeys(): void;
     /**
      * Update the "internalColumnEditor.collection" property.
      * Since this is called after the async call resolves, the pointer will not be the same as the "column" argument passed.
      * Once we found the new pointer, we will reassign the "editor" and "collection" to the "internalColumnEditor" so it has newest collection
      */
-    private updateEditorCollection;
+    protected updateEditorCollection<T = any>(column: Column<T>, newCollection: T[]): void;
     render(): JSX.Element;
 }
 export {};