react-open-source-grid 1.7.17 → 1.7.22

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.
@@ -1 +1 @@
1
- export * from './index-DbTnZTkL.js';
1
+ export * from './index-IX0OJSgg.js';
@@ -1 +1 @@
1
- import{a as e,c as t,i as n,n as r,o as i,r as a,s as o,t as s}from"./index-DbTnZTkL.js";export{e as createPreset};
1
+ import{a as e,c as t,i as n,n as r,o as i,r as a,s as o,t as s}from"./index-IX0OJSgg.js";export{e as createPreset};
package/dist/index.html CHANGED
@@ -70,7 +70,7 @@
70
70
  }
71
71
  })();
72
72
  </script>
73
- <script type="module" crossorigin src="/assets/index-DbTnZTkL.js"></script>
73
+ <script type="module" crossorigin src="/assets/index-IX0OJSgg.js"></script>
74
74
  <link rel="stylesheet" crossorigin href="/assets/index-BzDbdtZY.css">
75
75
  </head>
76
76
  <body>
@@ -568,6 +568,7 @@ export interface DataGridProps {
568
568
  theme?: ThemeName;
569
569
  densityMode?: DensityMode;
570
570
  showDensityToggle?: boolean;
571
+ hideToolbar?: boolean;
571
572
  onDensityChange?: (mode: DensityMode) => void;
572
573
  onRowClick?: (row: Row) => void;
573
574
  onCellEdit?: (rowIndex: number, field: string, value: any) => void;
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ export declare const GroupByDemo: React.FC;
3
+ export default GroupByDemo;
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const HorizontalScrollBugDemo: React.FC;
@@ -3059,7 +3059,7 @@ var GridBody = ({
3059
3059
  }));
3060
3060
  const totalColumnWidth = virtualColumns.reduce((sum, col) => sum + col.width, 0);
3061
3061
  const enableColumnVirtualization = virtualScrollConfig.enableColumnVirtualization ?? true;
3062
- return /* @__PURE__ */ import_react8.default.createElement("div", { ref: bodyRef, role: "rowgroup", style: { position: "relative", flex: 1, display: "flex", flexDirection: "column", width: "100%", backgroundColor: "var(--grid-bg)" } }, renderPinnedTopRows(), /* @__PURE__ */ import_react8.default.createElement(
3062
+ return /* @__PURE__ */ import_react8.default.createElement("div", { ref: bodyRef, role: "rowgroup", style: { position: "relative", flex: 1, display: "flex", flexDirection: "column", minWidth: "100%", width: "fit-content", backgroundColor: "var(--grid-bg)" } }, renderPinnedTopRows(), /* @__PURE__ */ import_react8.default.createElement(
3063
3063
  VirtualScroller,
3064
3064
  {
3065
3065
  items: rows,
@@ -3195,7 +3195,7 @@ var GridBody = ({
3195
3195
  });
3196
3196
  return elements;
3197
3197
  };
3198
- return /* @__PURE__ */ import_react8.default.createElement("div", { ref: bodyRef, role: "rowgroup", style: { overflow: "auto", maxHeight: "500px", position: "relative", backgroundColor: "var(--grid-bg)", width: "100%" } }, renderPinnedTopRows(), (masterDetailConfig == null ? void 0 : masterDetailConfig.enabled) ? renderRowsWithDetails() : rows.map((row, rowIndex) => renderRowContent(row, rowIndex + pinnedRowsTop.length)), renderPinnedBottomRows());
3198
+ return /* @__PURE__ */ import_react8.default.createElement("div", { ref: bodyRef, role: "rowgroup", style: { overflowY: "auto", overflowX: "hidden", maxHeight: "500px", position: "relative", backgroundColor: "var(--grid-bg)", minWidth: "100%", width: "fit-content" } }, renderPinnedTopRows(), (masterDetailConfig == null ? void 0 : masterDetailConfig.enabled) ? renderRowsWithDetails() : rows.map((row, rowIndex) => renderRowContent(row, rowIndex + pinnedRowsTop.length)), renderPinnedBottomRows());
3199
3199
  };
3200
3200
 
3201
3201
  // src/components/DataGrid/GridPagination.tsx
@@ -3241,7 +3241,7 @@ var GridPagination = ({
3241
3241
  }
3242
3242
  return pages;
3243
3243
  };
3244
- return /* @__PURE__ */ import_react9.default.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", paddingLeft: "16px", paddingRight: "16px", paddingTop: "12px", paddingBottom: "12px", backgroundColor: "var(--grid-footer-bg)", borderTop: "var(--grid-border-width, 1px) solid var(--grid-border)" } }, /* @__PURE__ */ import_react9.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ import_react9.default.createElement("span", { style: { fontSize: "var(--grid-font-size, 13px)", color: "var(--grid-text)", fontWeight: "500" } }, "Rows per page:"), /* @__PURE__ */ import_react9.default.createElement(
3244
+ return /* @__PURE__ */ import_react9.default.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", paddingLeft: "16px", paddingRight: "16px", paddingTop: "12px", paddingBottom: "12px", backgroundColor: "var(--grid-footer-bg)", borderTop: "var(--grid-border-width, 1px) solid var(--grid-border)", flexShrink: 0 } }, /* @__PURE__ */ import_react9.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ import_react9.default.createElement("span", { style: { fontSize: "var(--grid-font-size, 13px)", color: "var(--grid-text)", fontWeight: "500" } }, "Rows per page:"), /* @__PURE__ */ import_react9.default.createElement(
3245
3245
  "select",
3246
3246
  {
3247
3247
  style: {
@@ -3455,7 +3455,8 @@ var GroupByPanel = ({
3455
3455
  transitionProperty: "colors",
3456
3456
  transitionDuration: "200ms",
3457
3457
  backgroundColor: isDragOver ? "var(--grid-active)" : "var(--grid-bg-alt)",
3458
- borderBottomColor: isDragOver ? "var(--grid-primary)" : "var(--grid-border)"
3458
+ borderBottomColor: isDragOver ? "var(--grid-primary)" : "var(--grid-border)",
3459
+ flexShrink: 0
3459
3460
  },
3460
3461
  onDragOver: handleDragOver,
3461
3462
  onDragLeave: handleDragLeave,
@@ -8967,6 +8968,7 @@ var DataGrid = (0, import_react25.forwardRef)(({
8967
8968
  theme: _theme = "quartz",
8968
8969
  densityMode: _densityMode = "normal",
8969
8970
  showDensityToggle = false,
8971
+ hideToolbar = false,
8970
8972
  onDensityChange,
8971
8973
  onRowClick,
8972
8974
  onCellEdit,
@@ -9424,12 +9426,15 @@ var DataGrid = (0, import_react25.forwardRef)(({
9424
9426
  overflow: "hidden",
9425
9427
  backgroundColor: "var(--grid-bg)",
9426
9428
  boxShadow: "var(--grid-shadow-light, 0 1px 3px 0 rgba(0, 0, 0, 0.08))",
9427
- fontFamily: 'var(--grid-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif)'
9429
+ fontFamily: 'var(--grid-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif)',
9430
+ height: "100%",
9431
+ display: "flex",
9432
+ flexDirection: "column"
9428
9433
  },
9429
9434
  className: `data-grid density-${densityMode}`
9430
9435
  },
9431
9436
  /* @__PURE__ */ import_react25.default.createElement(ScreenReaderAnnouncer, { message: announcementMessage, priority: "polite" }),
9432
- /* @__PURE__ */ import_react25.default.createElement("div", { style: { position: "relative", display: "flex", alignItems: "center", justifyContent: "space-between", paddingLeft: "16px", paddingRight: "16px", paddingTop: "10px", paddingBottom: "10px", backgroundColor: "var(--grid-bg-alt)", borderBottom: "var(--grid-border-width, 1px) solid var(--grid-border)", zIndex: 30 } }, /* @__PURE__ */ import_react25.default.createElement("div", { style: { position: "relative", display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ import_react25.default.createElement(
9437
+ !hideToolbar && /* @__PURE__ */ import_react25.default.createElement("div", { style: { position: "relative", display: "flex", alignItems: "center", justifyContent: "space-between", paddingLeft: "16px", paddingRight: "16px", paddingTop: "10px", paddingBottom: "10px", backgroundColor: "var(--grid-bg-alt)", borderBottom: "var(--grid-border-width, 1px) solid var(--grid-border)", zIndex: 30, flexShrink: 0 } }, /* @__PURE__ */ import_react25.default.createElement("div", { style: { position: "relative", display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ import_react25.default.createElement(
9433
9438
  ColumnChooser,
9434
9439
  {
9435
9440
  columns: effectiveColumns,
@@ -9457,7 +9462,7 @@ var DataGrid = (0, import_react25.forwardRef)(({
9457
9462
  onResetLayout: () => dispatch({ type: "RESET_COLUMN_LAYOUT" })
9458
9463
  }
9459
9464
  )), showDensityToggle && /* @__PURE__ */ import_react25.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ import_react25.default.createElement("span", { style: { fontSize: "13px", color: "var(--grid-text-secondary)", fontWeight: "500" } }, "Density:"), /* @__PURE__ */ import_react25.default.createElement(DensityToggle, { value: densityMode, onChange: setDensityMode }))),
9460
- /* @__PURE__ */ import_react25.default.createElement(
9465
+ !hideToolbar && /* @__PURE__ */ import_react25.default.createElement(
9461
9466
  GroupByPanel,
9462
9467
  {
9463
9468
  columns: effectiveColumns,
@@ -9465,7 +9470,7 @@ var DataGrid = (0, import_react25.forwardRef)(({
9465
9470
  dispatch
9466
9471
  }
9467
9472
  ),
9468
- /* @__PURE__ */ import_react25.default.createElement("div", { role: "rowgroup", style: { position: "sticky", top: 0, zIndex: 20, width: "100%" } }, /* @__PURE__ */ import_react25.default.createElement(
9473
+ /* @__PURE__ */ import_react25.default.createElement("div", { style: { overflowX: "auto", overflowY: "auto", width: "100%", flex: 1, minHeight: 0 } }, /* @__PURE__ */ import_react25.default.createElement("div", { role: "rowgroup", style: { position: "sticky", top: 0, zIndex: 20, width: "fit-content", minWidth: "100%" } }, /* @__PURE__ */ import_react25.default.createElement(
9469
9474
  GridHeader,
9470
9475
  {
9471
9476
  columns: effectiveColumns,
@@ -9486,7 +9491,7 @@ var DataGrid = (0, import_react25.forwardRef)(({
9486
9491
  event
9487
9492
  })
9488
9493
  }
9489
- ), /* @__PURE__ */ import_react25.default.createElement(
9494
+ ), !hideToolbar && /* @__PURE__ */ import_react25.default.createElement(
9490
9495
  ColumnFilters,
9491
9496
  {
9492
9497
  columns: effectiveColumns,
@@ -9500,8 +9505,7 @@ var DataGrid = (0, import_react25.forwardRef)(({
9500
9505
  masterDetailConfig,
9501
9506
  dragRowConfig
9502
9507
  }
9503
- )),
9504
- /* @__PURE__ */ import_react25.default.createElement(
9508
+ )), /* @__PURE__ */ import_react25.default.createElement(
9505
9509
  GridBody,
9506
9510
  {
9507
9511
  columns: effectiveColumns,
@@ -9542,8 +9546,7 @@ var DataGrid = (0, import_react25.forwardRef)(({
9542
9546
  }),
9543
9547
  ...tooltipHandlers
9544
9548
  }
9545
- ),
9546
- (footerConfig == null ? void 0 : footerConfig.show) && footerConfig.aggregates && /* @__PURE__ */ import_react25.default.createElement(
9549
+ ), (footerConfig == null ? void 0 : footerConfig.show) && footerConfig.aggregates && /* @__PURE__ */ import_react25.default.createElement(
9547
9550
  GridFooter,
9548
9551
  {
9549
9552
  columns: effectiveColumns,
@@ -9554,7 +9557,7 @@ var DataGrid = (0, import_react25.forwardRef)(({
9554
9557
  pinnedLeft: pinnedLeftFields,
9555
9558
  pinnedRight: pinnedRightFields
9556
9559
  }
9557
- ),
9560
+ )),
9558
9561
  !(virtualScrollConfig == null ? void 0 : virtualScrollConfig.enabled) && /* @__PURE__ */ import_react25.default.createElement(
9559
9562
  GridPagination,
9560
9563
  {
package/dist/lib/index.js CHANGED
@@ -2637,7 +2637,7 @@ var GridBody = ({
2637
2637
  }));
2638
2638
  const totalColumnWidth = virtualColumns.reduce((sum, col) => sum + col.width, 0);
2639
2639
  const enableColumnVirtualization = virtualScrollConfig.enableColumnVirtualization ?? true;
2640
- return /* @__PURE__ */ React8.createElement("div", { ref: bodyRef, role: "rowgroup", style: { position: "relative", flex: 1, display: "flex", flexDirection: "column", width: "100%", backgroundColor: "var(--grid-bg)" } }, renderPinnedTopRows(), /* @__PURE__ */ React8.createElement(
2640
+ return /* @__PURE__ */ React8.createElement("div", { ref: bodyRef, role: "rowgroup", style: { position: "relative", flex: 1, display: "flex", flexDirection: "column", minWidth: "100%", width: "fit-content", backgroundColor: "var(--grid-bg)" } }, renderPinnedTopRows(), /* @__PURE__ */ React8.createElement(
2641
2641
  VirtualScroller,
2642
2642
  {
2643
2643
  items: rows,
@@ -2773,7 +2773,7 @@ var GridBody = ({
2773
2773
  });
2774
2774
  return elements;
2775
2775
  };
2776
- return /* @__PURE__ */ React8.createElement("div", { ref: bodyRef, role: "rowgroup", style: { overflow: "auto", maxHeight: "500px", position: "relative", backgroundColor: "var(--grid-bg)", width: "100%" } }, renderPinnedTopRows(), (masterDetailConfig == null ? void 0 : masterDetailConfig.enabled) ? renderRowsWithDetails() : rows.map((row, rowIndex) => renderRowContent(row, rowIndex + pinnedRowsTop.length)), renderPinnedBottomRows());
2776
+ return /* @__PURE__ */ React8.createElement("div", { ref: bodyRef, role: "rowgroup", style: { overflowY: "auto", overflowX: "hidden", maxHeight: "500px", position: "relative", backgroundColor: "var(--grid-bg)", minWidth: "100%", width: "fit-content" } }, renderPinnedTopRows(), (masterDetailConfig == null ? void 0 : masterDetailConfig.enabled) ? renderRowsWithDetails() : rows.map((row, rowIndex) => renderRowContent(row, rowIndex + pinnedRowsTop.length)), renderPinnedBottomRows());
2777
2777
  };
2778
2778
 
2779
2779
  // src/components/DataGrid/GridPagination.tsx
@@ -2819,7 +2819,7 @@ var GridPagination = ({
2819
2819
  }
2820
2820
  return pages;
2821
2821
  };
2822
- return /* @__PURE__ */ React9.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", paddingLeft: "16px", paddingRight: "16px", paddingTop: "12px", paddingBottom: "12px", backgroundColor: "var(--grid-footer-bg)", borderTop: "var(--grid-border-width, 1px) solid var(--grid-border)" } }, /* @__PURE__ */ React9.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ React9.createElement("span", { style: { fontSize: "var(--grid-font-size, 13px)", color: "var(--grid-text)", fontWeight: "500" } }, "Rows per page:"), /* @__PURE__ */ React9.createElement(
2822
+ return /* @__PURE__ */ React9.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", paddingLeft: "16px", paddingRight: "16px", paddingTop: "12px", paddingBottom: "12px", backgroundColor: "var(--grid-footer-bg)", borderTop: "var(--grid-border-width, 1px) solid var(--grid-border)", flexShrink: 0 } }, /* @__PURE__ */ React9.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ React9.createElement("span", { style: { fontSize: "var(--grid-font-size, 13px)", color: "var(--grid-text)", fontWeight: "500" } }, "Rows per page:"), /* @__PURE__ */ React9.createElement(
2823
2823
  "select",
2824
2824
  {
2825
2825
  style: {
@@ -3033,7 +3033,8 @@ var GroupByPanel = ({
3033
3033
  transitionProperty: "colors",
3034
3034
  transitionDuration: "200ms",
3035
3035
  backgroundColor: isDragOver ? "var(--grid-active)" : "var(--grid-bg-alt)",
3036
- borderBottomColor: isDragOver ? "var(--grid-primary)" : "var(--grid-border)"
3036
+ borderBottomColor: isDragOver ? "var(--grid-primary)" : "var(--grid-border)",
3037
+ flexShrink: 0
3037
3038
  },
3038
3039
  onDragOver: handleDragOver,
3039
3040
  onDragLeave: handleDragLeave,
@@ -8542,6 +8543,7 @@ var DataGrid = forwardRef(({
8542
8543
  theme: _theme = "quartz",
8543
8544
  densityMode: _densityMode = "normal",
8544
8545
  showDensityToggle = false,
8546
+ hideToolbar = false,
8545
8547
  onDensityChange,
8546
8548
  onRowClick,
8547
8549
  onCellEdit,
@@ -8999,12 +9001,15 @@ var DataGrid = forwardRef(({
8999
9001
  overflow: "hidden",
9000
9002
  backgroundColor: "var(--grid-bg)",
9001
9003
  boxShadow: "var(--grid-shadow-light, 0 1px 3px 0 rgba(0, 0, 0, 0.08))",
9002
- fontFamily: 'var(--grid-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif)'
9004
+ fontFamily: 'var(--grid-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif)',
9005
+ height: "100%",
9006
+ display: "flex",
9007
+ flexDirection: "column"
9003
9008
  },
9004
9009
  className: `data-grid density-${densityMode}`
9005
9010
  },
9006
9011
  /* @__PURE__ */ React22.createElement(ScreenReaderAnnouncer, { message: announcementMessage, priority: "polite" }),
9007
- /* @__PURE__ */ React22.createElement("div", { style: { position: "relative", display: "flex", alignItems: "center", justifyContent: "space-between", paddingLeft: "16px", paddingRight: "16px", paddingTop: "10px", paddingBottom: "10px", backgroundColor: "var(--grid-bg-alt)", borderBottom: "var(--grid-border-width, 1px) solid var(--grid-border)", zIndex: 30 } }, /* @__PURE__ */ React22.createElement("div", { style: { position: "relative", display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React22.createElement(
9012
+ !hideToolbar && /* @__PURE__ */ React22.createElement("div", { style: { position: "relative", display: "flex", alignItems: "center", justifyContent: "space-between", paddingLeft: "16px", paddingRight: "16px", paddingTop: "10px", paddingBottom: "10px", backgroundColor: "var(--grid-bg-alt)", borderBottom: "var(--grid-border-width, 1px) solid var(--grid-border)", zIndex: 30, flexShrink: 0 } }, /* @__PURE__ */ React22.createElement("div", { style: { position: "relative", display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React22.createElement(
9008
9013
  ColumnChooser,
9009
9014
  {
9010
9015
  columns: effectiveColumns,
@@ -9032,7 +9037,7 @@ var DataGrid = forwardRef(({
9032
9037
  onResetLayout: () => dispatch({ type: "RESET_COLUMN_LAYOUT" })
9033
9038
  }
9034
9039
  )), showDensityToggle && /* @__PURE__ */ React22.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React22.createElement("span", { style: { fontSize: "13px", color: "var(--grid-text-secondary)", fontWeight: "500" } }, "Density:"), /* @__PURE__ */ React22.createElement(DensityToggle, { value: densityMode, onChange: setDensityMode }))),
9035
- /* @__PURE__ */ React22.createElement(
9040
+ !hideToolbar && /* @__PURE__ */ React22.createElement(
9036
9041
  GroupByPanel,
9037
9042
  {
9038
9043
  columns: effectiveColumns,
@@ -9040,7 +9045,7 @@ var DataGrid = forwardRef(({
9040
9045
  dispatch
9041
9046
  }
9042
9047
  ),
9043
- /* @__PURE__ */ React22.createElement("div", { role: "rowgroup", style: { position: "sticky", top: 0, zIndex: 20, width: "100%" } }, /* @__PURE__ */ React22.createElement(
9048
+ /* @__PURE__ */ React22.createElement("div", { style: { overflowX: "auto", overflowY: "auto", width: "100%", flex: 1, minHeight: 0 } }, /* @__PURE__ */ React22.createElement("div", { role: "rowgroup", style: { position: "sticky", top: 0, zIndex: 20, width: "fit-content", minWidth: "100%" } }, /* @__PURE__ */ React22.createElement(
9044
9049
  GridHeader,
9045
9050
  {
9046
9051
  columns: effectiveColumns,
@@ -9061,7 +9066,7 @@ var DataGrid = forwardRef(({
9061
9066
  event
9062
9067
  })
9063
9068
  }
9064
- ), /* @__PURE__ */ React22.createElement(
9069
+ ), !hideToolbar && /* @__PURE__ */ React22.createElement(
9065
9070
  ColumnFilters,
9066
9071
  {
9067
9072
  columns: effectiveColumns,
@@ -9075,8 +9080,7 @@ var DataGrid = forwardRef(({
9075
9080
  masterDetailConfig,
9076
9081
  dragRowConfig
9077
9082
  }
9078
- )),
9079
- /* @__PURE__ */ React22.createElement(
9083
+ )), /* @__PURE__ */ React22.createElement(
9080
9084
  GridBody,
9081
9085
  {
9082
9086
  columns: effectiveColumns,
@@ -9117,8 +9121,7 @@ var DataGrid = forwardRef(({
9117
9121
  }),
9118
9122
  ...tooltipHandlers
9119
9123
  }
9120
- ),
9121
- (footerConfig == null ? void 0 : footerConfig.show) && footerConfig.aggregates && /* @__PURE__ */ React22.createElement(
9124
+ ), (footerConfig == null ? void 0 : footerConfig.show) && footerConfig.aggregates && /* @__PURE__ */ React22.createElement(
9122
9125
  GridFooter,
9123
9126
  {
9124
9127
  columns: effectiveColumns,
@@ -9129,7 +9132,7 @@ var DataGrid = forwardRef(({
9129
9132
  pinnedLeft: pinnedLeftFields,
9130
9133
  pinnedRight: pinnedRightFields
9131
9134
  }
9132
- ),
9135
+ )),
9133
9136
  !(virtualScrollConfig == null ? void 0 : virtualScrollConfig.enabled) && /* @__PURE__ */ React22.createElement(
9134
9137
  GridPagination,
9135
9138
  {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "react-open-source-grid",
3
3
  "private": false,
4
- "version": "1.7.17",
4
+ "version": "1.7.22",
5
5
  "type": "module",
6
6
  "description": "A high-performance React DataGrid component with advanced features like virtual scrolling, infinite scrolling, tree data, market data mode, integrated charts with context menu, and more",
7
7
  "main": "./dist/lib/index.cjs",