m9-react-data-grid 7.0.0-beta.7.11

package/lib/index.d.ts

@@ -0,0 +1,336 @@
+import { JSX as JSX_2 } from 'react';
+import type { Key } from 'react';
+import type { ReactElement } from 'react';
+import type { RefAttributes } from 'react';
+
+export declare interface CalculatedColumn<TRow, TSummaryRow = unknown> extends Column<TRow, TSummaryRow> {
+    readonly idx: number;
+    readonly resizable: boolean;
+    readonly sortable: boolean;
+    readonly frozen: boolean;
+    readonly isLastFrozenColumn: boolean;
+    readonly rowGroup: boolean;
+    readonly formatter: React.ComponentType<FormatterProps<TRow, TSummaryRow>>;
+}
+
+export declare type CellNavigationMode = 'NONE' | 'CHANGE_ROW' | 'LOOP_OVER_ROW';
+
+export declare interface CellRendererProps<TRow, TSummaryRow> extends Pick<RowRendererProps<TRow, TSummaryRow>, 'onRowClick' | 'onRowDoubleClick' | 'selectCell'>, Omit_2<React.HTMLAttributes<HTMLDivElement>, 'style' | 'children'> {
+    column: CalculatedColumn<TRow, TSummaryRow>;
+    colSpan: number | undefined;
+    row: TRow;
+    rowIdx: number;
+    isCopied: boolean;
+    isDraggedOver: boolean;
+    isCellSelected: boolean;
+    dragHandle: ReactElement<React.HTMLAttributes<HTMLDivElement>> | undefined;
+    onRowChange: (newRow: TRow) => void;
+}
+
+export declare type ColSpanArgs<R, SR> = {
+    type: 'HEADER';
+} | {
+    type: 'ROW';
+    row: R;
+} | {
+    type: 'SUMMARY';
+    row: SR;
+};
+
+export declare interface Column<TRow, TSummaryRow = unknown> {
+    /** The name of the column. By default it will be displayed in the header cell */
+    readonly name: string | ReactElement;
+    /** A unique key to distinguish each column */
+    readonly key: string;
+    /** Column width. If not specified, it will be determined automatically based on grid width and specified widths of other columns */
+    readonly width?: Maybe<number | string>;
+    /** Minimum column width in px. */
+    readonly minWidth?: Maybe<number>;
+    /** Maximum column width in px. */
+    readonly maxWidth?: Maybe<number>;
+    readonly cellClass?: Maybe<string | ((row: TRow) => Maybe<string>)>;
+    readonly headerCellClass?: Maybe<string>;
+    readonly summaryCellClass?: Maybe<string | ((row: TSummaryRow) => Maybe<string>)>;
+    /** Formatter to be used to render the cell content */
+    readonly formatter?: Maybe<React.ComponentType<FormatterProps<TRow, TSummaryRow>>>;
+    /** Formatter to be used to render the summary cell content */
+    readonly summaryFormatter?: Maybe<React.ComponentType<SummaryFormatterProps<TSummaryRow, TRow>>>;
+    /** Formatter to be used to render the group cell content */
+    readonly groupFormatter?: Maybe<React.ComponentType<GroupFormatterProps<TRow, TSummaryRow>>>;
+    /** Enables cell editing. If set and no editor property specified, then a textinput will be used as the cell editor */
+    readonly editable?: Maybe<boolean | ((row: TRow) => boolean)>;
+    readonly colSpan?: Maybe<(args: ColSpanArgs<TRow, TSummaryRow>) => Maybe<number>>;
+    /** Determines whether column is frozen or not */
+    readonly frozen?: Maybe<boolean>;
+    /** Enable resizing of a column */
+    readonly resizable?: Maybe<boolean>;
+    /** Enable sorting of a column */
+    readonly sortable?: Maybe<boolean>;
+    /** Sets the column sort order to be descending instead of ascending the first time the column is sorted */
+    readonly sortDescendingFirst?: Maybe<boolean>;
+    /** Editor to be rendered when cell of column is being edited. If set, then the column is automatically set to be editable */
+    readonly editor?: Maybe<React.ComponentType<EditorProps<TRow, TSummaryRow>>>;
+    readonly editorOptions?: Maybe<{
+        /** @default false */
+        readonly renderFormatter?: Maybe<boolean>;
+        /** @default false */
+        readonly editOnClick?: Maybe<boolean>;
+        /** @default true */
+        readonly commitOnOutsideClick?: Maybe<boolean>;
+        /** Prevent default to cancel editing */
+        readonly onCellKeyDown?: Maybe<(event: React.KeyboardEvent<HTMLDivElement>) => void>;
+        /** Control the default cell navigation behavior while the editor is open */
+        readonly onNavigation?: Maybe<(event: React.KeyboardEvent<HTMLDivElement>) => boolean>;
+    }>;
+    /** Header renderer for each header cell */
+    readonly headerRenderer?: Maybe<React.ComponentType<HeaderRendererProps<TRow, TSummaryRow>>>;
+}
+
+export declare interface DataGridHandle {
+    element: HTMLDivElement | null;
+    scrollToColumn: (colIdx: number) => void;
+    scrollToRow: (rowIdx: number) => void;
+    selectCell: (position: Position, enableEditor?: Maybe<boolean>) => void;
+}
+
+export declare interface DataGridProps<R, SR = unknown, K extends Key = Key> extends SharedDivProps {
+    /**
+     * Grid and data Props
+     */
+    /** An array of objects representing each column on the grid */
+    columns: readonly Column<R, SR>[];
+    /** A function called for each rendered row that should return a plain key/value pair object */
+    rows: readonly R[];
+    /**
+     * Rows to be pinned at the bottom of the rows view for summary, the vertical scroll bar will not scroll these rows.
+     * Bottom horizontal scroll bar can move the row left / right. Or a customized row renderer can be used to disabled the scrolling support.
+     */
+    summaryRows?: Maybe<readonly SR[]>;
+    /** The getter should return a unique key for each row */
+    rowKeyGetter?: Maybe<(row: R) => K>;
+    onRowsChange?: Maybe<(rows: R[], data: RowsChangeData<R, SR>) => void>;
+    /**
+     * Dimensions props
+     */
+    /**
+     * The height of each row in pixels
+     * @default 35
+     */
+    rowHeight?: Maybe<number | ((args: RowHeightArgs<R>) => number)>;
+    /**
+     * The height of the header row in pixels
+     * @default 35
+     */
+    headerRowHeight?: Maybe<number>;
+    /**
+     * The height of each summary row in pixels
+     * @default 35
+     */
+    summaryRowHeight?: Maybe<number>;
+    /**
+     * Feature props
+     */
+    /** Set of selected row keys */
+    selectedRows?: Maybe<ReadonlySet<K>>;
+    /** Function called whenever row selection is changed */
+    onSelectedRowsChange?: Maybe<(selectedRows: Set<K>) => void>;
+    /** Used for multi column sorting */
+    sortColumns?: Maybe<readonly SortColumn[]>;
+    onSortColumnsChange?: Maybe<(sortColumns: SortColumn[]) => void>;
+    defaultColumnOptions?: Maybe<DefaultColumnOptions<R, SR>>;
+    groupBy?: Maybe<readonly string[]>;
+    rowGrouper?: Maybe<(rows: readonly R[], columnKey: string) => Record<string, readonly R[]>>;
+    expandedGroupIds?: Maybe<ReadonlySet<unknown>>;
+    onExpandedGroupIdsChange?: Maybe<(expandedGroupIds: Set<unknown>) => void>;
+    onFill?: Maybe<(event: FillEvent<R>) => R>;
+    onPaste?: Maybe<(event: PasteEvent<R>) => R>;
+    /**
+     * Event props
+     */
+    /** Function called whenever a row is clicked */
+    onRowClick?: Maybe<(row: R, column: CalculatedColumn<R, SR>) => void>;
+    /** Function called whenever a row is double clicked */
+    onRowDoubleClick?: Maybe<(row: R, column: CalculatedColumn<R, SR>) => void>;
+    /** Called when the grid is scrolled */
+    onScroll?: Maybe<(event: React.UIEvent<HTMLDivElement>) => void>;
+    /** Called when a column is resized */
+    onColumnResize?: Maybe<(idx: number, width: number) => void>;
+    /**
+     * Toggles and modes
+     */
+    /** @default 'NONE' */
+    cellNavigationMode?: Maybe<CellNavigationMode>;
+    /** @default true */
+    enableVirtualization?: Maybe<boolean>;
+    /**
+     * Miscellaneous
+     */
+    rowRenderer?: Maybe<React.ComponentType<RowRendererProps<R, SR>>>;
+    noRowsFallback?: React.ReactNode;
+    rowClass?: Maybe<(row: R) => Maybe<string>>;
+    'data-testid'?: Maybe<string>;
+    editableRowIdxs?: Array<number>;
+}
+
+declare const _default: <R, SR = unknown, K extends Key = Key>(props: DataGridProps<R, SR, K> & RefAttributes<DataGridHandle>) => JSX.Element;
+export default _default;
+
+declare type DefaultColumnOptions<R, SR> = Pick<Column<R, SR>, 'formatter' | 'minWidth' | 'resizable' | 'sortable'>;
+
+export declare interface EditorProps<TRow, TSummaryRow = unknown> {
+    column: CalculatedColumn<TRow, TSummaryRow>;
+    row: TRow;
+    onRowChange: (row: TRow, commitChanges?: boolean) => void;
+    onClose: (commitChanges?: boolean) => void;
+}
+
+export declare interface FillEvent<TRow> {
+    columnKey: string;
+    sourceRow: TRow;
+    targetRow: TRow;
+}
+
+export declare interface FormatterProps<TRow, TSummaryRow = unknown> {
+    column: CalculatedColumn<TRow, TSummaryRow>;
+    row: TRow;
+    rowIdx: number;
+    isCellSelected: boolean;
+    onRowChange: (row: TRow) => void;
+}
+
+export declare interface GroupFormatterProps<TRow, TSummaryRow = unknown> {
+    groupKey: unknown;
+    column: CalculatedColumn<TRow, TSummaryRow>;
+    row: GroupRow<TRow>;
+    childRows: readonly TRow[];
+    isExpanded: boolean;
+    isCellSelected: boolean;
+    toggleGroup: () => void;
+}
+
+declare interface GroupRow<TRow> {
+    readonly childRows: readonly TRow[];
+    readonly id: string;
+    readonly parentId: unknown;
+    readonly groupKey: unknown;
+    readonly isExpanded: boolean;
+    readonly level: number;
+    readonly posInSet: number;
+    readonly setSize: number;
+    readonly startRowIndex: number;
+}
+
+export declare interface HeaderRendererProps<TRow, TSummaryRow = unknown> {
+    column: CalculatedColumn<TRow, TSummaryRow>;
+    sortDirection: SortDirection | undefined;
+    priority: number | undefined;
+    onSort: (ctrlClick: boolean) => void;
+    allRowsSelected: boolean;
+    onAllRowsSelectionChange: (checked: boolean) => void;
+    isCellSelected: boolean;
+}
+
+declare type Maybe<T> = T | undefined | null;
+
+declare type Omit_2<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+
+export declare interface PasteEvent<TRow> {
+    sourceColumnKey: string;
+    sourceRow: TRow;
+    targetColumnKey: string;
+    targetRow: TRow;
+}
+
+declare interface Position {
+    readonly idx: number;
+    readonly rowIdx: number;
+}
+
+declare interface Props<R, SR> extends SharedHeaderCellProps<R, SR> {
+    children: React.ReactNode;
+}
+
+export declare const Row: <R, SR>(props: RowRendererProps<R, SR> & RefAttributes<HTMLDivElement>) => JSX.Element;
+
+export declare type RowHeightArgs<R> = {
+    type: 'ROW';
+    row: R;
+} | {
+    type: 'GROUP';
+    row: GroupRow<R>;
+};
+
+export declare interface RowRendererProps<TRow, TSummaryRow = unknown> extends Omit_2<React.HTMLAttributes<HTMLDivElement>, 'style' | 'children'> {
+    viewportColumns: readonly CalculatedColumn<TRow, TSummaryRow>[];
+    row: TRow;
+    rowIdx: number;
+    selectedCellIdx: number | undefined;
+    copiedCellIdx: number | undefined;
+    draggedOverCellIdx: number | undefined;
+    lastFrozenColumnIndex: number;
+    isRowSelected: boolean;
+    top: number;
+    height: number;
+    selectedCellEditor: ReactElement<EditorProps<TRow>> | undefined;
+    selectedCellDragHandle: ReactElement<React.HTMLAttributes<HTMLDivElement>> | undefined;
+    onRowChange: (rowIdx: number, newRow: TRow) => void;
+    onRowClick: Maybe<(row: TRow, column: CalculatedColumn<TRow, TSummaryRow>) => void>;
+    onRowDoubleClick: Maybe<(row: TRow, column: CalculatedColumn<TRow, TSummaryRow>) => void>;
+    rowClass: Maybe<(row: TRow) => Maybe<string>>;
+    setDraggedOverRowIdx: ((overRowIdx: number) => void) | undefined;
+    selectCell: (row: TRow, column: CalculatedColumn<TRow, TSummaryRow>, enableEditor?: Maybe<boolean>) => void;
+}
+
+export declare interface RowsChangeData<R, SR = unknown> {
+    indexes: number[];
+    column: CalculatedColumn<R, SR>;
+}
+
+export declare const SELECT_COLUMN_KEY = "select-row";
+
+export declare function SelectCellFormatter({ value, isCellSelected, disabled, onClick, onChange, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }: SelectCellFormatterProps): JSX_2.Element;
+
+declare interface SelectCellFormatterProps extends SharedInputProps {
+    isCellSelected: boolean;
+    value: boolean;
+    onChange: (value: boolean, isShiftClick: boolean) => void;
+}
+
+export declare const SelectColumn: Column<any, any>;
+
+export declare interface SelectRowEvent<TRow> {
+    row: TRow;
+    checked: boolean;
+    isShiftClick: boolean;
+}
+
+declare type SharedDivProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'className' | 'style'>;
+
+declare type SharedHeaderCellProps<R, SR> = Pick<HeaderRendererProps<R, SR>, 'sortDirection' | 'onSort' | 'priority' | 'isCellSelected'>;
+
+declare type SharedInputProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'disabled' | 'onClick' | 'aria-label' | 'aria-labelledby'>;
+
+export declare function SortableHeaderCell<R, SR>({ onSort, sortDirection, priority, children, isCellSelected }: Props<R, SR>): JSX_2.Element;
+
+export declare interface SortColumn {
+    readonly columnKey: string;
+    readonly direction: SortDirection;
+}
+
+export declare type SortDirection = 'ASC' | 'DESC';
+
+export declare interface SummaryFormatterProps<TSummaryRow, TRow = unknown> {
+    column: CalculatedColumn<TRow, TSummaryRow>;
+    row: TSummaryRow;
+    isCellSelected: boolean;
+}
+
+export declare function TextEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose }: EditorProps<TRow, TSummaryRow>): JSX_2.Element;
+
+export declare function ToggleGroupFormatter<R, SR>({ groupKey, isExpanded, isCellSelected, toggleGroup }: GroupFormatterProps<R, SR>): JSX_2.Element;
+
+export declare function useRowSelection<R>(): [boolean, (selectRowEvent: SelectRowEvent<R>) => void];
+
+export declare function ValueFormatter<R, SR>(props: FormatterProps<R, SR>): JSX_2.Element | null;
+
+export { }

package/package.json

@@ -0,0 +1,117 @@
+{
+  "name": "m9-react-data-grid",
+  "version": "7.0.0-beta.7.11",
+  "license": "MIT",
+  "description": "Feature-rich and customizable data grid React component",
+  "keywords": [
+    "react",
+    "data grid"
+  ],
+  "repository": "github:adazzle/react-data-grid",
+  "bugs": "https://github.com/adazzle/react-data-grid/issues",
+  "type": "module",
+  "exports": {
+    ".": {
+      "module": "./lib/bundle.js",
+      "require": "./lib/bundle.cjs",
+      "default": "./lib/bundle.js"
+    }
+  },
+  "browser": "./lib/bundle.js",
+  "main": "./lib/bundle.cjs",
+  "module": "./lib/bundle.js",
+  "types": "./lib/index.d.ts",
+  "files": [
+    "lib"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "start": "webpack serve --mode=development",
+    "build:website": "webpack --mode=production",
+    "build": "rollup --config --no-stdin",
+    "build:types": "tsc && api-extractor run --local --verbose",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "eslint": "eslint --ext js,ts,tsx --max-warnings 0 -f codeframe --cache --color src test website",
+    "eslint:fix": "npm run eslint -- --fix",
+    "prettier:check": "prettier --check .",
+    "prettier:format": "prettier --write .",
+    "typecheck": "tsc -p tsconfig.all.json",
+    "prepublishOnly": "npm install && npm run build && npm run build:types",
+    "postpublish": "git push --follow-tags origin HEAD"
+  },
+  "dependencies": {
+    "clsx": "^1.1.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.14.6",
+    "@babel/plugin-transform-runtime": "^7.14.5",
+    "@babel/preset-env": "^7.14.7",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.14.5",
+    "@babel/runtime": "^7.14.6",
+    "@linaria/babel-preset": "^3.0.0-beta.12",
+    "@linaria/core": "^3.0.0-beta.4",
+    "@linaria/rollup": "^3.0.0-beta.12",
+    "@linaria/shaker": "^3.0.0-beta.12",
+    "@linaria/webpack5-loader": "^3.0.0-beta.12",
+    "@microsoft/api-extractor": "^7.16.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^13.1.9",
+    "@types/faker": "^5.5.6",
+    "@types/hoist-non-react-statics": "^3.3.1",
+    "@types/jest": "^27.0.1",
+    "@types/lodash": "^4.14.172",
+    "@types/react": "^17.0.11",
+    "@types/react-dom": "^17.0.8",
+    "@types/react-router-dom": "^5.1.8",
+    "@typescript-eslint/eslint-plugin": "^4.28.0",
+    "@typescript-eslint/parser": "^4.28.0",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-optimize-clsx": "^2.6.2",
+    "css-loader": "^6.2.0",
+    "css-minimizer-webpack-plugin": "^3.0.2",
+    "eslint": "^7.29.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-jest": "^24.3.6",
+    "eslint-plugin-jest-dom": "^3.9.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-sonarjs": "^0.10.0",
+    "faker": "^5.5.3",
+    "html-webpack-plugin": "^5.3.2",
+    "jest": "^27.0.5",
+    "jspdf": "^2.3.1",
+    "jspdf-autotable": "^3.5.14",
+    "lodash-es": "^4.17.21",
+    "mini-css-extract-plugin": "^2.2.2",
+    "postcss": "^8.3.6",
+    "postcss-loader": "^6.1.1",
+    "postcss-nested": "^5.0.6",
+    "prettier": "2.4.0",
+    "react": "^17.0.2",
+    "react-contextmenu": "^2.14.0",
+    "react-dnd": "^14.0.2",
+    "react-dnd-html5-backend": "^14.0.0",
+    "react-dom": "^17.0.2",
+    "react-refresh": "^0.10.0",
+    "react-router-dom": "^5.3.0",
+    "rollup": "^2.52.3",
+    "rollup-plugin-postcss": "^4.0.0",
+    "style-loader": "^3.2.1",
+    "typescript": "~4.4.2",
+    "webpack": "^5.52.1",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.2.0",
+    "xlsx": "^0.17.0"
+  },
+  "peerDependencies": {
+    "react": "^16.14 || ^17.0",
+    "react-dom": "^16.14 || ^17.0"
+  }
+}