react-open-source-grid 1.7.18 → 1.7.23

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.
Files changed (10) hide show
  1. package/dist/assets/{index-DY5UPTqS.js → index-DHtd8tTR.js} +301 -4
  2. package/dist/assets/index.js +1 -1
  3. package/dist/assets/{layoutPersistence-kMUHjw0E.js → layoutPersistence-C509RwQB.js} +1 -1
  4. package/dist/index.html +1 -1
  5. package/dist/lib/components/GroupByDemo.d.ts +3 -0
  6. package/dist/lib/components/HorizontalScrollBugDemo.d.ts +2 -0
  7. package/dist/lib/components/ServerSideFeaturesDemo.d.ts +10 -0
  8. package/dist/lib/index.cjs +14 -12
  9. package/dist/lib/index.js +14 -12
  10. package/package.json +1 -1
package/dist/assets/index.js CHANGED
@@ -1 +1 @@
1
- export * from './index-DY5UPTqS.js';
1
+ export * from './index-DHtd8tTR.js';
package/dist/assets/{layoutPersistence-kMUHjw0E.js → layoutPersistence-C509RwQB.js} RENAMED
@@ -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-DY5UPTqS.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-DHtd8tTR.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-DY5UPTqS.js"></script>
73
+ <script type="module" crossorigin src="/assets/index-DHtd8tTR.js"></script>
74
74
  <link rel="stylesheet" crossorigin href="/assets/index-BzDbdtZY.css">
75
75
  </head>
76
76
  <body>
package/dist/lib/components/GroupByDemo.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ export declare const GroupByDemo: React.FC;
3
+ export default GroupByDemo;
package/dist/lib/components/HorizontalScrollBugDemo.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const HorizontalScrollBugDemo: React.FC;
package/dist/lib/components/ServerSideFeaturesDemo.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ /**
2
+ * ServerSideFeaturesDemo Component
3
+ *
4
+ * Showcases server-side sorting, pagination, and column filtering
5
+ * with a traditional paginated grid. Includes a live request log
6
+ * so users can observe each server request/response.
7
+ */
8
+ import React from 'react';
9
+ export declare const ServerSideFeaturesDemo: React.FC;
10
+ export default ServerSideFeaturesDemo;
package/dist/lib/index.cjs CHANGED
@@ -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,
@@ -9425,12 +9426,15 @@ var DataGrid = (0, import_react25.forwardRef)(({
9425
9426
  overflow: "hidden",
9426
9427
  backgroundColor: "var(--grid-bg)",
9427
9428
  boxShadow: "var(--grid-shadow-light, 0 1px 3px 0 rgba(0, 0, 0, 0.08))",
9428
- 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"
9429
9433
  },
9430
9434
  className: `data-grid density-${densityMode}`
9431
9435
  },
9432
9436
  /* @__PURE__ */ import_react25.default.createElement(ScreenReaderAnnouncer, { message: announcementMessage, priority: "polite" }),
9433
- !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 } }, /* @__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(
9434
9438
  ColumnChooser,
9435
9439
  {
9436
9440
  columns: effectiveColumns,
@@ -9466,7 +9470,7 @@ var DataGrid = (0, import_react25.forwardRef)(({
9466
9470
  dispatch
9467
9471
  }
9468
9472
  ),
9469
- /* @__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(
9470
9474
  GridHeader,
9471
9475
  {
9472
9476
  columns: effectiveColumns,
@@ -9501,8 +9505,7 @@ var DataGrid = (0, import_react25.forwardRef)(({
9501
9505
  masterDetailConfig,
9502
9506
  dragRowConfig
9503
9507
  }
9504
- )),
9505
- /* @__PURE__ */ import_react25.default.createElement(
9508
+ )), /* @__PURE__ */ import_react25.default.createElement(
9506
9509
  GridBody,
9507
9510
  {
9508
9511
  columns: effectiveColumns,
@@ -9543,8 +9546,7 @@ var DataGrid = (0, import_react25.forwardRef)(({
9543
9546
  }),
9544
9547
  ...tooltipHandlers
9545
9548
  }
9546
- ),
9547
- (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(
9548
9550
  GridFooter,
9549
9551
  {
9550
9552
  columns: effectiveColumns,
@@ -9555,7 +9557,7 @@ var DataGrid = (0, import_react25.forwardRef)(({
9555
9557
  pinnedLeft: pinnedLeftFields,
9556
9558
  pinnedRight: pinnedRightFields
9557
9559
  }
9558
- ),
9560
+ )),
9559
9561
  !(virtualScrollConfig == null ? void 0 : virtualScrollConfig.enabled) && /* @__PURE__ */ import_react25.default.createElement(
9560
9562
  GridPagination,
9561
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,
@@ -9000,12 +9001,15 @@ var DataGrid = forwardRef(({
9000
9001
  overflow: "hidden",
9001
9002
  backgroundColor: "var(--grid-bg)",
9002
9003
  boxShadow: "var(--grid-shadow-light, 0 1px 3px 0 rgba(0, 0, 0, 0.08))",
9003
- 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"
9004
9008
  },
9005
9009
  className: `data-grid density-${densityMode}`
9006
9010
  },
9007
9011
  /* @__PURE__ */ React22.createElement(ScreenReaderAnnouncer, { message: announcementMessage, priority: "polite" }),
9008
- !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 } }, /* @__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(
9009
9013
  ColumnChooser,
9010
9014
  {
9011
9015
  columns: effectiveColumns,
@@ -9041,7 +9045,7 @@ var DataGrid = forwardRef(({
9041
9045
  dispatch
9042
9046
  }
9043
9047
  ),
9044
- /* @__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(
9045
9049
  GridHeader,
9046
9050
  {
9047
9051
  columns: effectiveColumns,
@@ -9076,8 +9080,7 @@ var DataGrid = forwardRef(({
9076
9080
  masterDetailConfig,
9077
9081
  dragRowConfig
9078
9082
  }
9079
- )),
9080
- /* @__PURE__ */ React22.createElement(
9083
+ )), /* @__PURE__ */ React22.createElement(
9081
9084
  GridBody,
9082
9085
  {
9083
9086
  columns: effectiveColumns,
@@ -9118,8 +9121,7 @@ var DataGrid = forwardRef(({
9118
9121
  }),
9119
9122
  ...tooltipHandlers
9120
9123
  }
9121
- ),
9122
- (footerConfig == null ? void 0 : footerConfig.show) && footerConfig.aggregates && /* @__PURE__ */ React22.createElement(
9124
+ ), (footerConfig == null ? void 0 : footerConfig.show) && footerConfig.aggregates && /* @__PURE__ */ React22.createElement(
9123
9125
  GridFooter,
9124
9126
  {
9125
9127
  columns: effectiveColumns,
@@ -9130,7 +9132,7 @@ var DataGrid = forwardRef(({
9130
9132
  pinnedLeft: pinnedLeftFields,
9131
9133
  pinnedRight: pinnedRightFields
9132
9134
  }
9133
- ),
9135
+ )),
9134
9136
  !(virtualScrollConfig == null ? void 0 : virtualScrollConfig.enabled) && /* @__PURE__ */ React22.createElement(
9135
9137
  GridPagination,
9136
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.18",
4
+ "version": "1.7.23",
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",