beautiful-grid 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/cjs/BGrid.js +2 -2
- package/cjs/components/Table.js +204 -147
- package/cjs/components/selection/CellSelectionOverlayLayer.js +5 -5
- package/cjs/utils/coordinate.js +10 -10
- package/cjs/utils/index.js +1 -0
- package/cjs/utils/virtualScrollWindow.js +67 -0
- package/esm/BGrid.js +2 -2
- package/esm/components/Table.js +163 -109
- package/esm/components/selection/CellSelectionOverlayLayer.js +5 -5
- package/esm/utils/coordinate.js +4 -4
- package/esm/utils/index.js +1 -0
- package/esm/utils/virtualScrollWindow.js +59 -0
- package/package.json +1 -1
- package/types/BGrid.d.ts +1 -1
- package/types/components/Table.d.ts +1 -0
- package/types/components/selection/CellSelectionOverlay.d.ts +1 -0
- package/types/components/selection/CellSelectionOverlayLayer.d.ts +2 -1
- package/types/types.d.ts +13 -0
- package/types/utils/coordinate.d.ts +5 -1
- package/types/utils/index.d.ts +1 -0
- package/types/utils/virtualScrollWindow.d.ts +24 -0
package/README.md
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
[](https://npmjs.org/package/beautiful-grid)
|
|
6
6
|
[](https://npmjs.org/package/beautiful-grid)
|
|
7
7
|
[](LICENSE)
|
|
8
|
-
[](https://github.com/axisj/beautiful-grid/actions/workflows/tests.yml)
|
|
9
9
|
|
|
10
10
|
BeautifulGrid is a high-performance, feature-packed, and beautifully designed open-source React Data Grid for data-heavy business applications. It combines zero-runtime-CSS styling with virtual scrolling, spreadsheet-like cell selection and clipboard operations, built-in and plugin cell editing, multi-level grouped headers, filtering & sorting toolboxes, server/client pagination, pivot table transforms, row reordering, and flexible theming.
|
|
11
11
|
|
package/cjs/BGrid.js
CHANGED
|
@@ -79,7 +79,7 @@ var utils_1 = require("./utils");
|
|
|
79
79
|
var store_1 = require("./store");
|
|
80
80
|
function BGrid(_a) {
|
|
81
81
|
var _b, _c, _d;
|
|
82
|
-
var width = _a.width, height = _a.height, _e = _a.headerHeight, headerHeight = _e === void 0 ? 30 : _e, footerHeight = _a.footerHeight, _f = _a.summaryHeight, summaryHeight = _f === void 0 ? 30 : _f, _g = _a.itemHeight, itemHeight = _g === void 0 ? 15 : _g, _h = _a.itemPadding, itemPadding = _h === void 0 ? 7 : _h, columns = _a.columns, columnsGroup = _a.columnsGroup, columnGroups = _a.columnGroups, onChangeColumns = _a.onChangeColumns, _j = _a.frozenColumnIndex, frozenColumnIndex = _j === void 0 ? 0 : _j, _k = _a.frozenRowCount, frozenRowCount = _k === void 0 ? 0 : _k, _l = _a.data, data = _l === void 0 ? [] : _l, page = _a.page, scrollbar = _a.scrollbar, status = _a.status, pagination = _a.pagination, bottomBarHeight = _a.bottomBarHeight, _m = _a.scrollTop, scrollTop = _m === void 0 ? 0 : _m, _o = _a.scrollLeft, scrollLeft = _o === void 0 ? 0 : _o, className = _a.className, style = _a.style, rowChecked = _a.rowChecked, sort = _a.sort, onClick = _a.onClick, _p = _a.loading, loading = _p === void 0 ? false : _p, spinning = _a.spinning, rowKey = _a.rowKey, selectedRowKey = _a.selectedRowKey, editable = _a.editable, onChangeData = _a.onChangeData, showLineNumber = _a.showLineNumber, msg = _a.msg, getRowClassName = _a.getRowClassName, _q = _a.editTrigger, editTrigger = _q === void 0 ? 'dblclick' : _q, cellMergeOptions = _a.cellMergeOptions, cellSelectionOptions = _a.cellSelectionOptions, cellNavigationOptions = _a.cellNavigationOptions, variant = _a.variant, summary = _a.summary, columnSortable = _a.columnSortable, reorder = _a.reorder, pivot = _a.pivot, dataControl = _a.dataControl, icons = _a.icons, searchOptions = _a.searchOptions, contextMenuOptions = _a.contextMenuOptions;
|
|
82
|
+
var ref = _a.ref, width = _a.width, height = _a.height, _e = _a.headerHeight, headerHeight = _e === void 0 ? 30 : _e, footerHeight = _a.footerHeight, _f = _a.summaryHeight, summaryHeight = _f === void 0 ? 30 : _f, _g = _a.itemHeight, itemHeight = _g === void 0 ? 15 : _g, _h = _a.itemPadding, itemPadding = _h === void 0 ? 7 : _h, columns = _a.columns, columnsGroup = _a.columnsGroup, columnGroups = _a.columnGroups, onChangeColumns = _a.onChangeColumns, _j = _a.frozenColumnIndex, frozenColumnIndex = _j === void 0 ? 0 : _j, _k = _a.frozenRowCount, frozenRowCount = _k === void 0 ? 0 : _k, _l = _a.data, data = _l === void 0 ? [] : _l, page = _a.page, scrollbar = _a.scrollbar, status = _a.status, pagination = _a.pagination, bottomBarHeight = _a.bottomBarHeight, _m = _a.scrollTop, scrollTop = _m === void 0 ? 0 : _m, _o = _a.scrollLeft, scrollLeft = _o === void 0 ? 0 : _o, className = _a.className, style = _a.style, rowChecked = _a.rowChecked, sort = _a.sort, onClick = _a.onClick, _p = _a.loading, loading = _p === void 0 ? false : _p, spinning = _a.spinning, rowKey = _a.rowKey, selectedRowKey = _a.selectedRowKey, editable = _a.editable, onChangeData = _a.onChangeData, showLineNumber = _a.showLineNumber, msg = _a.msg, getRowClassName = _a.getRowClassName, _q = _a.editTrigger, editTrigger = _q === void 0 ? 'dblclick' : _q, cellMergeOptions = _a.cellMergeOptions, cellSelectionOptions = _a.cellSelectionOptions, cellNavigationOptions = _a.cellNavigationOptions, variant = _a.variant, summary = _a.summary, columnSortable = _a.columnSortable, reorder = _a.reorder, pivot = _a.pivot, dataControl = _a.dataControl, icons = _a.icons, searchOptions = _a.searchOptions, contextMenuOptions = _a.contextMenuOptions;
|
|
83
83
|
var warnedSearchControlledRef = React.useRef({ open: false, query: false, pivotContextMenu: false });
|
|
84
84
|
var pivotData = React.useMemo(function () {
|
|
85
85
|
return (0, utils_1.createPivotData)({
|
|
@@ -475,7 +475,7 @@ function BGrid(_a) {
|
|
|
475
475
|
initialShowBottomBar,
|
|
476
476
|
]);
|
|
477
477
|
return (React.createElement(store_1.AppStoreProvider, { initialState: initialStoreState },
|
|
478
|
-
React.createElement(Table_1.default, { columns: computedColumns,
|
|
478
|
+
React.createElement(Table_1.default, { ref: ref, columns: computedColumns,
|
|
479
479
|
columnsGroup: resolvedColumnsGroup,
|
|
480
480
|
columnGroups: resolvedColumnGroups,
|
|
481
481
|
onChangeColumns: resolvedOnChangeColumns, width: width, height: height, className: className, style: style, loading: loading, spinning: spinning, scrollLeft: scrollLeft, scrollTop: scrollTop, headerHeight: headerHeight, footerHeight: footerHeight, bottomBarHeight: resolvedBottomBarHeight,
|