bolt-table 0.1.34 → 0.1.35

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/dist/index.js CHANGED
@@ -243,7 +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_SEP = "1px solid rgba(128,128,128,0.3)";
246
+ const HEADER_SEP = "1px solid rgba(128,128,128,0.2)";
247
247
  const headerStyle = {
248
248
  position: "sticky",
249
249
  top: stickyTop,
@@ -260,15 +260,16 @@ var DraggableHeader = import_react.default.memo(
260
260
  textOverflow: "ellipsis",
261
261
  whiteSpace: "nowrap",
262
262
  boxSizing: "border-box",
263
- borderTop: "none",
264
- borderLeft: "none",
265
- borderBottom: HEADER_SEP,
266
- borderRight: isLastColumn ? "none" : HEADER_SEP,
267
263
  ...column.pinned === "left" && stickyOffset !== void 0 ? { left: `${stickyOffset}px` } : {},
268
264
  ...column.pinned === "right" && stickyOffset !== void 0 ? { right: `${stickyOffset}px` } : {},
269
265
  ...column.style,
270
266
  ...isPinned ? styles?.pinnedHeader : {},
271
- ...styles?.header
267
+ ...styles?.header,
268
+ // Borders after spreads so styles.header cannot override them
269
+ borderTop: "none",
270
+ borderLeft: "none",
271
+ borderBottom: HEADER_SEP,
272
+ borderRight: isLastColumn ? "none" : HEADER_SEP
272
273
  };
273
274
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
274
275
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
@@ -2973,7 +2974,7 @@ function BoltTable({
2973
2974
  background-color: rgba(128, 128, 128, 0.15);
2974
2975
  }
2975
2976
  [data-bt-header][data-dragging] {
2976
- opacity: 0.3 !important;
2977
+ opacity: 0.2 !important;
2977
2978
  }
2978
2979
  [data-bt-header][data-drag-over] {
2979
2980
  border: 1px dashed ${accentColor} !important;
@@ -3433,14 +3434,14 @@ function BoltTable({
3433
3434
  textOverflow: "ellipsis",
3434
3435
  whiteSpace: "nowrap",
3435
3436
  boxSizing: "border-box",
3436
- borderTop: "none",
3437
- borderLeft: "none",
3438
- borderBottom: "1px solid rgba(128,128,128,0.3)",
3439
- borderRight: groupEndsAtLastCol ? "none" : "1px solid rgba(128,128,128,0.3)",
3440
3437
  fontWeight: 500,
3441
3438
  userSelect: "none",
3442
3439
  ...group.style,
3443
- ...styles.header
3440
+ ...styles.header,
3441
+ borderTop: "none",
3442
+ borderLeft: "none",
3443
+ borderBottom: "1px solid rgba(128,128,128,0.2)",
3444
+ borderRight: groupEndsAtLastCol ? "none" : "1px solid rgba(128,128,128,0.2)"
3444
3445
  },
3445
3446
  children: group.title
3446
3447
  },
@@ -3472,10 +3473,6 @@ function BoltTable({
3472
3473
  textOverflow: "ellipsis",
3473
3474
  whiteSpace: "nowrap",
3474
3475
  boxSizing: "border-box",
3475
- borderTop: "none",
3476
- borderLeft: "none",
3477
- borderBottom: "1px solid rgba(128,128,128,0.3)",
3478
- borderRight: "1px solid rgba(128,128,128,0.3)",
3479
3476
  position: "sticky",
3480
3477
  left: columnOffsets.get("__select__") ?? 0,
3481
3478
  top: 0,
@@ -3483,7 +3480,11 @@ function BoltTable({
3483
3480
  width: "48px",
3484
3481
  gridRow: leafGridRow,
3485
3482
  ...styles.header,
3486
- ...styles.pinnedHeader
3483
+ ...styles.pinnedHeader,
3484
+ borderTop: "none",
3485
+ borderLeft: "none",
3486
+ borderBottom: "1px solid rgba(128,128,128,0.2)",
3487
+ borderRight: "1px solid rgba(128,128,128,0.2)"
3487
3488
  },
3488
3489
  children: rowSelection.type !== "radio" && !rowSelection.hideSelectAll && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
3489
3490
  "input",
@@ -3542,10 +3543,6 @@ function BoltTable({
3542
3543
  textOverflow: "ellipsis",
3543
3544
  whiteSpace: "nowrap",
3544
3545
  boxSizing: "border-box",
3545
- borderTop: "none",
3546
- borderLeft: "none",
3547
- borderBottom: "1px solid rgba(128,128,128,0.3)",
3548
- borderRight: "1px solid rgba(128,128,128,0.3)",
3549
3546
  position: "sticky",
3550
3547
  left: columnOffsets.get("__expand__") ?? 0,
3551
3548
  top: 0,
@@ -3554,7 +3551,11 @@ function BoltTable({
3554
3551
  backgroundColor: styles.pinnedBg,
3555
3552
  gridRow: leafGridRow,
3556
3553
  ...styles.header,
3557
- ...styles.pinnedHeader
3554
+ ...styles.pinnedHeader,
3555
+ borderTop: "none",
3556
+ borderLeft: "none",
3557
+ borderBottom: "1px solid rgba(128,128,128,0.2)",
3558
+ borderRight: "1px solid rgba(128,128,128,0.2)"
3558
3559
  }
3559
3560
  },
3560
3561
  "__expand__"
@@ -3772,7 +3773,7 @@ function BoltTable({
3772
3773
  alignItems: "center",
3773
3774
  justifyContent: "center",
3774
3775
  fontSize: 12,
3775
- opacity: currentPage === 1 ? 0.3 : 1,
3776
+ opacity: currentPage === 1 ? 0.2 : 1,
3776
3777
  background: "none",
3777
3778
  border: "none",
3778
3779
  padding: 0,
@@ -3798,7 +3799,7 @@ function BoltTable({
3798
3799
  alignItems: "center",
3799
3800
  justifyContent: "center",
3800
3801
  fontSize: 12,
3801
- opacity: currentPage === 1 ? 0.3 : 1,
3802
+ opacity: currentPage === 1 ? 0.2 : 1,
3802
3803
  background: "none",
3803
3804
  border: "none",
3804
3805
  padding: 0,
@@ -3870,7 +3871,7 @@ function BoltTable({
3870
3871
  alignItems: "center",
3871
3872
  justifyContent: "center",
3872
3873
  fontSize: 12,
3873
- opacity: currentPage === totalPages ? 0.3 : 1,
3874
+ opacity: currentPage === totalPages ? 0.2 : 1,
3874
3875
  background: "none",
3875
3876
  border: "none",
3876
3877
  padding: 0,
@@ -3896,7 +3897,7 @@ function BoltTable({
3896
3897
  alignItems: "center",
3897
3898
  justifyContent: "center",
3898
3899
  fontSize: 12,
3899
- opacity: currentPage === totalPages ? 0.3 : 1,
3900
+ opacity: currentPage === totalPages ? 0.2 : 1,
3900
3901
  background: "none",
3901
3902
  border: "none",
3902
3903
  padding: 0,
@@ -3971,7 +3972,7 @@ function BoltTable({
3971
3972
  textOverflow: "ellipsis",
3972
3973
  whiteSpace: "nowrap",
3973
3974
  borderRadius: 6,
3974
- border: "1px dashed rgba(128,128,128,0.3)",
3975
+ border: "1px dashed rgba(128,128,128,0.2)",
3975
3976
  boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
3976
3977
  backdropFilter: "blur(16px)",
3977
3978
  WebkitBackdropFilter: "blur(16px)",
package/dist/index.mjs CHANGED
@@ -209,7 +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_SEP = "1px solid rgba(128,128,128,0.3)";
212
+ const HEADER_SEP = "1px solid rgba(128,128,128,0.2)";
213
213
  const headerStyle = {
214
214
  position: "sticky",
215
215
  top: stickyTop,
@@ -226,15 +226,16 @@ var DraggableHeader = React.memo(
226
226
  textOverflow: "ellipsis",
227
227
  whiteSpace: "nowrap",
228
228
  boxSizing: "border-box",
229
- borderTop: "none",
230
- borderLeft: "none",
231
- borderBottom: HEADER_SEP,
232
- borderRight: isLastColumn ? "none" : HEADER_SEP,
233
229
  ...column.pinned === "left" && stickyOffset !== void 0 ? { left: `${stickyOffset}px` } : {},
234
230
  ...column.pinned === "right" && stickyOffset !== void 0 ? { right: `${stickyOffset}px` } : {},
235
231
  ...column.style,
236
232
  ...isPinned ? styles?.pinnedHeader : {},
237
- ...styles?.header
233
+ ...styles?.header,
234
+ // Borders after spreads so styles.header cannot override them
235
+ borderTop: "none",
236
+ borderLeft: "none",
237
+ borderBottom: HEADER_SEP,
238
+ borderRight: isLastColumn ? "none" : HEADER_SEP
238
239
  };
239
240
  return /* @__PURE__ */ jsxs2(Fragment, { children: [
240
241
  /* @__PURE__ */ jsxs2(
@@ -2945,7 +2946,7 @@ function BoltTable({
2945
2946
  background-color: rgba(128, 128, 128, 0.15);
2946
2947
  }
2947
2948
  [data-bt-header][data-dragging] {
2948
- opacity: 0.3 !important;
2949
+ opacity: 0.2 !important;
2949
2950
  }
2950
2951
  [data-bt-header][data-drag-over] {
2951
2952
  border: 1px dashed ${accentColor} !important;
@@ -3405,14 +3406,14 @@ function BoltTable({
3405
3406
  textOverflow: "ellipsis",
3406
3407
  whiteSpace: "nowrap",
3407
3408
  boxSizing: "border-box",
3408
- borderTop: "none",
3409
- borderLeft: "none",
3410
- borderBottom: "1px solid rgba(128,128,128,0.3)",
3411
- borderRight: groupEndsAtLastCol ? "none" : "1px solid rgba(128,128,128,0.3)",
3412
3409
  fontWeight: 500,
3413
3410
  userSelect: "none",
3414
3411
  ...group.style,
3415
- ...styles.header
3412
+ ...styles.header,
3413
+ borderTop: "none",
3414
+ borderLeft: "none",
3415
+ borderBottom: "1px solid rgba(128,128,128,0.2)",
3416
+ borderRight: groupEndsAtLastCol ? "none" : "1px solid rgba(128,128,128,0.2)"
3416
3417
  },
3417
3418
  children: group.title
3418
3419
  },
@@ -3444,10 +3445,6 @@ function BoltTable({
3444
3445
  textOverflow: "ellipsis",
3445
3446
  whiteSpace: "nowrap",
3446
3447
  boxSizing: "border-box",
3447
- borderTop: "none",
3448
- borderLeft: "none",
3449
- borderBottom: "1px solid rgba(128,128,128,0.3)",
3450
- borderRight: "1px solid rgba(128,128,128,0.3)",
3451
3448
  position: "sticky",
3452
3449
  left: columnOffsets.get("__select__") ?? 0,
3453
3450
  top: 0,
@@ -3455,7 +3452,11 @@ function BoltTable({
3455
3452
  width: "48px",
3456
3453
  gridRow: leafGridRow,
3457
3454
  ...styles.header,
3458
- ...styles.pinnedHeader
3455
+ ...styles.pinnedHeader,
3456
+ borderTop: "none",
3457
+ borderLeft: "none",
3458
+ borderBottom: "1px solid rgba(128,128,128,0.2)",
3459
+ borderRight: "1px solid rgba(128,128,128,0.2)"
3459
3460
  },
3460
3461
  children: rowSelection.type !== "radio" && !rowSelection.hideSelectAll && /* @__PURE__ */ jsx5(
3461
3462
  "input",
@@ -3514,10 +3515,6 @@ function BoltTable({
3514
3515
  textOverflow: "ellipsis",
3515
3516
  whiteSpace: "nowrap",
3516
3517
  boxSizing: "border-box",
3517
- borderTop: "none",
3518
- borderLeft: "none",
3519
- borderBottom: "1px solid rgba(128,128,128,0.3)",
3520
- borderRight: "1px solid rgba(128,128,128,0.3)",
3521
3518
  position: "sticky",
3522
3519
  left: columnOffsets.get("__expand__") ?? 0,
3523
3520
  top: 0,
@@ -3526,7 +3523,11 @@ function BoltTable({
3526
3523
  backgroundColor: styles.pinnedBg,
3527
3524
  gridRow: leafGridRow,
3528
3525
  ...styles.header,
3529
- ...styles.pinnedHeader
3526
+ ...styles.pinnedHeader,
3527
+ borderTop: "none",
3528
+ borderLeft: "none",
3529
+ borderBottom: "1px solid rgba(128,128,128,0.2)",
3530
+ borderRight: "1px solid rgba(128,128,128,0.2)"
3530
3531
  }
3531
3532
  },
3532
3533
  "__expand__"
@@ -3744,7 +3745,7 @@ function BoltTable({
3744
3745
  alignItems: "center",
3745
3746
  justifyContent: "center",
3746
3747
  fontSize: 12,
3747
- opacity: currentPage === 1 ? 0.3 : 1,
3748
+ opacity: currentPage === 1 ? 0.2 : 1,
3748
3749
  background: "none",
3749
3750
  border: "none",
3750
3751
  padding: 0,
@@ -3770,7 +3771,7 @@ function BoltTable({
3770
3771
  alignItems: "center",
3771
3772
  justifyContent: "center",
3772
3773
  fontSize: 12,
3773
- opacity: currentPage === 1 ? 0.3 : 1,
3774
+ opacity: currentPage === 1 ? 0.2 : 1,
3774
3775
  background: "none",
3775
3776
  border: "none",
3776
3777
  padding: 0,
@@ -3842,7 +3843,7 @@ function BoltTable({
3842
3843
  alignItems: "center",
3843
3844
  justifyContent: "center",
3844
3845
  fontSize: 12,
3845
- opacity: currentPage === totalPages ? 0.3 : 1,
3846
+ opacity: currentPage === totalPages ? 0.2 : 1,
3846
3847
  background: "none",
3847
3848
  border: "none",
3848
3849
  padding: 0,
@@ -3868,7 +3869,7 @@ function BoltTable({
3868
3869
  alignItems: "center",
3869
3870
  justifyContent: "center",
3870
3871
  fontSize: 12,
3871
- opacity: currentPage === totalPages ? 0.3 : 1,
3872
+ opacity: currentPage === totalPages ? 0.2 : 1,
3872
3873
  background: "none",
3873
3874
  border: "none",
3874
3875
  padding: 0,
@@ -3943,7 +3944,7 @@ function BoltTable({
3943
3944
  textOverflow: "ellipsis",
3944
3945
  whiteSpace: "nowrap",
3945
3946
  borderRadius: 6,
3946
- border: "1px dashed rgba(128,128,128,0.3)",
3947
+ border: "1px dashed rgba(128,128,128,0.2)",
3947
3948
  boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
3948
3949
  backdropFilter: "blur(16px)",
3949
3950
  WebkitBackdropFilter: "blur(16px)",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bolt-table",
3
- "version": "0.1.34",
3
+ "version": "0.1.35",
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",