bolt-table 0.1.28 → 0.1.31

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 (3) hide show
  1. package/dist/index.js +14 -8
  2. package/dist/index.mjs +14 -8
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -243,6 +243,7 @@ var DraggableHeader = import_react.default.memo(
243
243
  const widthPx = `${columnWidth}px`;
244
244
  const isPinned = Boolean(column.pinned);
245
245
  const zIndex = isPinned ? 12 : 10;
246
+ const HEADER_BORDER_COLOR = "rgba(128,128,128,0.35)";
246
247
  const headerStyle = {
247
248
  position: "sticky",
248
249
  top: stickyTop,
@@ -258,10 +259,9 @@ var DraggableHeader = import_react.default.memo(
258
259
  overflow: "hidden",
259
260
  textOverflow: "ellipsis",
260
261
  whiteSpace: "nowrap",
261
- borderTop: "none",
262
- borderRight: "0.5px solid rgba(128,128,128,0.2)",
263
- borderBottom: "1px solid rgba(128,128,128,0.2)",
264
- borderLeft: isFirstColumn ? "none" : "0.5px solid rgba(128,128,128,0.2)",
262
+ boxSizing: "border-box",
263
+ border: "none",
264
+ boxShadow: isLastColumn ? `inset 0 -1px 0 0 ${HEADER_BORDER_COLOR}` : `inset -1px 0 0 0 ${HEADER_BORDER_COLOR}, inset 0 -1px 0 0 ${HEADER_BORDER_COLOR}`,
265
265
  ...column.pinned === "left" && stickyOffset !== void 0 ? { left: `${stickyOffset}px` } : {},
266
266
  ...column.pinned === "right" && stickyOffset !== void 0 ? { right: `${stickyOffset}px` } : {},
267
267
  ...column.style,
@@ -308,7 +308,6 @@ var DraggableHeader = import_react.default.memo(
308
308
  whiteSpace: "nowrap",
309
309
  paddingLeft: 8,
310
310
  paddingRight: 8,
311
- borderLeft: isFirstColumn ? "none" : "1px solid rgba(128,128,128,0.2)",
312
311
  fontWeight: 500,
313
312
  cursor: isPinned ? "default" : "grab"
314
313
  },
@@ -3412,6 +3411,7 @@ function BoltTable({
3412
3411
  }
3413
3412
  });
3414
3413
  if (minIdx === Infinity) return null;
3414
+ const groupEndsAtLastCol = maxIdx === orderedColumns.length - 1;
3415
3415
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
3416
3416
  "div",
3417
3417
  {
@@ -3430,7 +3430,9 @@ function BoltTable({
3430
3430
  overflow: "hidden",
3431
3431
  textOverflow: "ellipsis",
3432
3432
  whiteSpace: "nowrap",
3433
- borderBottom: "1px solid rgba(128,128,128,0.2)",
3433
+ boxSizing: "border-box",
3434
+ border: "none",
3435
+ boxShadow: groupEndsAtLastCol ? "inset 0 -1px 0 0 rgba(128,128,128,0.35)" : "inset -1px 0 0 0 rgba(128,128,128,0.35), inset 0 -1px 0 0 rgba(128,128,128,0.35)",
3434
3436
  fontWeight: 500,
3435
3437
  userSelect: "none",
3436
3438
  ...group.style,
@@ -3465,7 +3467,9 @@ function BoltTable({
3465
3467
  overflow: "hidden",
3466
3468
  textOverflow: "ellipsis",
3467
3469
  whiteSpace: "nowrap",
3468
- borderBottom: "1px solid rgba(128,128,128,0.2)",
3470
+ boxSizing: "border-box",
3471
+ border: "none",
3472
+ boxShadow: "inset -1px 0 0 0 rgba(128,128,128,0.35), inset 0 -1px 0 0 rgba(128,128,128,0.35)",
3469
3473
  position: "sticky",
3470
3474
  left: columnOffsets.get("__select__") ?? 0,
3471
3475
  top: 0,
@@ -3531,7 +3535,9 @@ function BoltTable({
3531
3535
  overflow: "hidden",
3532
3536
  textOverflow: "ellipsis",
3533
3537
  whiteSpace: "nowrap",
3534
- borderBottom: "1px solid rgba(128,128,128,0.2)",
3538
+ boxSizing: "border-box",
3539
+ border: "none",
3540
+ boxShadow: "inset -1px 0 0 0 rgba(128,128,128,0.35), inset 0 -1px 0 0 rgba(128,128,128,0.35)",
3535
3541
  position: "sticky",
3536
3542
  left: columnOffsets.get("__expand__") ?? 0,
3537
3543
  top: 0,
package/dist/index.mjs CHANGED
@@ -209,6 +209,7 @@ var DraggableHeader = React.memo(
209
209
  const widthPx = `${columnWidth}px`;
210
210
  const isPinned = Boolean(column.pinned);
211
211
  const zIndex = isPinned ? 12 : 10;
212
+ const HEADER_BORDER_COLOR = "rgba(128,128,128,0.35)";
212
213
  const headerStyle = {
213
214
  position: "sticky",
214
215
  top: stickyTop,
@@ -224,10 +225,9 @@ var DraggableHeader = React.memo(
224
225
  overflow: "hidden",
225
226
  textOverflow: "ellipsis",
226
227
  whiteSpace: "nowrap",
227
- borderTop: "none",
228
- borderRight: "0.5px solid rgba(128,128,128,0.2)",
229
- borderBottom: "1px solid rgba(128,128,128,0.2)",
230
- borderLeft: isFirstColumn ? "none" : "0.5px solid rgba(128,128,128,0.2)",
228
+ boxSizing: "border-box",
229
+ border: "none",
230
+ boxShadow: isLastColumn ? `inset 0 -1px 0 0 ${HEADER_BORDER_COLOR}` : `inset -1px 0 0 0 ${HEADER_BORDER_COLOR}, inset 0 -1px 0 0 ${HEADER_BORDER_COLOR}`,
231
231
  ...column.pinned === "left" && stickyOffset !== void 0 ? { left: `${stickyOffset}px` } : {},
232
232
  ...column.pinned === "right" && stickyOffset !== void 0 ? { right: `${stickyOffset}px` } : {},
233
233
  ...column.style,
@@ -274,7 +274,6 @@ var DraggableHeader = React.memo(
274
274
  whiteSpace: "nowrap",
275
275
  paddingLeft: 8,
276
276
  paddingRight: 8,
277
- borderLeft: isFirstColumn ? "none" : "1px solid rgba(128,128,128,0.2)",
278
277
  fontWeight: 500,
279
278
  cursor: isPinned ? "default" : "grab"
280
279
  },
@@ -3384,6 +3383,7 @@ function BoltTable({
3384
3383
  }
3385
3384
  });
3386
3385
  if (minIdx === Infinity) return null;
3386
+ const groupEndsAtLastCol = maxIdx === orderedColumns.length - 1;
3387
3387
  return /* @__PURE__ */ jsx5(
3388
3388
  "div",
3389
3389
  {
@@ -3402,7 +3402,9 @@ function BoltTable({
3402
3402
  overflow: "hidden",
3403
3403
  textOverflow: "ellipsis",
3404
3404
  whiteSpace: "nowrap",
3405
- borderBottom: "1px solid rgba(128,128,128,0.2)",
3405
+ boxSizing: "border-box",
3406
+ border: "none",
3407
+ boxShadow: groupEndsAtLastCol ? "inset 0 -1px 0 0 rgba(128,128,128,0.35)" : "inset -1px 0 0 0 rgba(128,128,128,0.35), inset 0 -1px 0 0 rgba(128,128,128,0.35)",
3406
3408
  fontWeight: 500,
3407
3409
  userSelect: "none",
3408
3410
  ...group.style,
@@ -3437,7 +3439,9 @@ function BoltTable({
3437
3439
  overflow: "hidden",
3438
3440
  textOverflow: "ellipsis",
3439
3441
  whiteSpace: "nowrap",
3440
- borderBottom: "1px solid rgba(128,128,128,0.2)",
3442
+ boxSizing: "border-box",
3443
+ border: "none",
3444
+ boxShadow: "inset -1px 0 0 0 rgba(128,128,128,0.35), inset 0 -1px 0 0 rgba(128,128,128,0.35)",
3441
3445
  position: "sticky",
3442
3446
  left: columnOffsets.get("__select__") ?? 0,
3443
3447
  top: 0,
@@ -3503,7 +3507,9 @@ function BoltTable({
3503
3507
  overflow: "hidden",
3504
3508
  textOverflow: "ellipsis",
3505
3509
  whiteSpace: "nowrap",
3506
- borderBottom: "1px solid rgba(128,128,128,0.2)",
3510
+ boxSizing: "border-box",
3511
+ border: "none",
3512
+ boxShadow: "inset -1px 0 0 0 rgba(128,128,128,0.35), inset 0 -1px 0 0 rgba(128,128,128,0.35)",
3507
3513
  position: "sticky",
3508
3514
  left: columnOffsets.get("__expand__") ?? 0,
3509
3515
  top: 0,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bolt-table",
3
- "version": "0.1.28",
3
+ "version": "0.1.31",
4
4
  "description": "Virtualized React table with column drag & drop, pinning, resizing, sorting, filtering, and pagination.",
5
5
  "license": "MIT",
6
6
  "main": "./dist/index.js",