bolt-table 0.1.33 → 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.
Files changed (3) hide show
  1. package/dist/index.js +29 -26
  2. package/dist/index.mjs +29 -26
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -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)(
@@ -2948,6 +2949,8 @@ function BoltTable({
2948
2949
  }
2949
2950
  :where([data-bt-header]) {
2950
2951
  background-color: rgba(128,128,128,0.06);
2952
+ backdrop-filter: blur(8px);
2953
+ -webkit-backdrop-filter: blur(8px);
2951
2954
  }
2952
2955
  :where([data-bt-pinned]) {
2953
2956
  background-color: ${styles.pinnedBg ?? "Canvas"};
@@ -2971,7 +2974,7 @@ function BoltTable({
2971
2974
  background-color: rgba(128, 128, 128, 0.15);
2972
2975
  }
2973
2976
  [data-bt-header][data-dragging] {
2974
- opacity: 0.3 !important;
2977
+ opacity: 0.2 !important;
2975
2978
  }
2976
2979
  [data-bt-header][data-drag-over] {
2977
2980
  border: 1px dashed ${accentColor} !important;
@@ -3431,14 +3434,14 @@ function BoltTable({
3431
3434
  textOverflow: "ellipsis",
3432
3435
  whiteSpace: "nowrap",
3433
3436
  boxSizing: "border-box",
3434
- borderTop: "none",
3435
- borderLeft: "none",
3436
- borderBottom: "1px solid rgba(128,128,128,0.2)",
3437
- borderRight: groupEndsAtLastCol ? "none" : "1px solid rgba(128,128,128,0.2)",
3438
3437
  fontWeight: 500,
3439
3438
  userSelect: "none",
3440
3439
  ...group.style,
3441
- ...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)"
3442
3445
  },
3443
3446
  children: group.title
3444
3447
  },
@@ -3470,10 +3473,6 @@ function BoltTable({
3470
3473
  textOverflow: "ellipsis",
3471
3474
  whiteSpace: "nowrap",
3472
3475
  boxSizing: "border-box",
3473
- borderTop: "none",
3474
- borderLeft: "none",
3475
- borderBottom: "1px solid rgba(128,128,128,0.2)",
3476
- borderRight: "1px solid rgba(128,128,128,0.2)",
3477
3476
  position: "sticky",
3478
3477
  left: columnOffsets.get("__select__") ?? 0,
3479
3478
  top: 0,
@@ -3481,7 +3480,11 @@ function BoltTable({
3481
3480
  width: "48px",
3482
3481
  gridRow: leafGridRow,
3483
3482
  ...styles.header,
3484
- ...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)"
3485
3488
  },
3486
3489
  children: rowSelection.type !== "radio" && !rowSelection.hideSelectAll && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
3487
3490
  "input",
@@ -3540,10 +3543,6 @@ function BoltTable({
3540
3543
  textOverflow: "ellipsis",
3541
3544
  whiteSpace: "nowrap",
3542
3545
  boxSizing: "border-box",
3543
- borderTop: "none",
3544
- borderLeft: "none",
3545
- borderBottom: "1px solid rgba(128,128,128,0.2)",
3546
- borderRight: "1px solid rgba(128,128,128,0.2)",
3547
3546
  position: "sticky",
3548
3547
  left: columnOffsets.get("__expand__") ?? 0,
3549
3548
  top: 0,
@@ -3552,7 +3551,11 @@ function BoltTable({
3552
3551
  backgroundColor: styles.pinnedBg,
3553
3552
  gridRow: leafGridRow,
3554
3553
  ...styles.header,
3555
- ...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)"
3556
3559
  }
3557
3560
  },
3558
3561
  "__expand__"
@@ -3770,7 +3773,7 @@ function BoltTable({
3770
3773
  alignItems: "center",
3771
3774
  justifyContent: "center",
3772
3775
  fontSize: 12,
3773
- opacity: currentPage === 1 ? 0.3 : 1,
3776
+ opacity: currentPage === 1 ? 0.2 : 1,
3774
3777
  background: "none",
3775
3778
  border: "none",
3776
3779
  padding: 0,
@@ -3796,7 +3799,7 @@ function BoltTable({
3796
3799
  alignItems: "center",
3797
3800
  justifyContent: "center",
3798
3801
  fontSize: 12,
3799
- opacity: currentPage === 1 ? 0.3 : 1,
3802
+ opacity: currentPage === 1 ? 0.2 : 1,
3800
3803
  background: "none",
3801
3804
  border: "none",
3802
3805
  padding: 0,
@@ -3868,7 +3871,7 @@ function BoltTable({
3868
3871
  alignItems: "center",
3869
3872
  justifyContent: "center",
3870
3873
  fontSize: 12,
3871
- opacity: currentPage === totalPages ? 0.3 : 1,
3874
+ opacity: currentPage === totalPages ? 0.2 : 1,
3872
3875
  background: "none",
3873
3876
  border: "none",
3874
3877
  padding: 0,
@@ -3894,7 +3897,7 @@ function BoltTable({
3894
3897
  alignItems: "center",
3895
3898
  justifyContent: "center",
3896
3899
  fontSize: 12,
3897
- opacity: currentPage === totalPages ? 0.3 : 1,
3900
+ opacity: currentPage === totalPages ? 0.2 : 1,
3898
3901
  background: "none",
3899
3902
  border: "none",
3900
3903
  padding: 0,
@@ -3969,7 +3972,7 @@ function BoltTable({
3969
3972
  textOverflow: "ellipsis",
3970
3973
  whiteSpace: "nowrap",
3971
3974
  borderRadius: 6,
3972
- border: "1px dashed rgba(128,128,128,0.3)",
3975
+ border: "1px dashed rgba(128,128,128,0.2)",
3973
3976
  boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
3974
3977
  backdropFilter: "blur(16px)",
3975
3978
  WebkitBackdropFilter: "blur(16px)",
package/dist/index.mjs CHANGED
@@ -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(
@@ -2920,6 +2921,8 @@ function BoltTable({
2920
2921
  }
2921
2922
  :where([data-bt-header]) {
2922
2923
  background-color: rgba(128,128,128,0.06);
2924
+ backdrop-filter: blur(8px);
2925
+ -webkit-backdrop-filter: blur(8px);
2923
2926
  }
2924
2927
  :where([data-bt-pinned]) {
2925
2928
  background-color: ${styles.pinnedBg ?? "Canvas"};
@@ -2943,7 +2946,7 @@ function BoltTable({
2943
2946
  background-color: rgba(128, 128, 128, 0.15);
2944
2947
  }
2945
2948
  [data-bt-header][data-dragging] {
2946
- opacity: 0.3 !important;
2949
+ opacity: 0.2 !important;
2947
2950
  }
2948
2951
  [data-bt-header][data-drag-over] {
2949
2952
  border: 1px dashed ${accentColor} !important;
@@ -3403,14 +3406,14 @@ function BoltTable({
3403
3406
  textOverflow: "ellipsis",
3404
3407
  whiteSpace: "nowrap",
3405
3408
  boxSizing: "border-box",
3406
- borderTop: "none",
3407
- borderLeft: "none",
3408
- borderBottom: "1px solid rgba(128,128,128,0.2)",
3409
- borderRight: groupEndsAtLastCol ? "none" : "1px solid rgba(128,128,128,0.2)",
3410
3409
  fontWeight: 500,
3411
3410
  userSelect: "none",
3412
3411
  ...group.style,
3413
- ...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)"
3414
3417
  },
3415
3418
  children: group.title
3416
3419
  },
@@ -3442,10 +3445,6 @@ function BoltTable({
3442
3445
  textOverflow: "ellipsis",
3443
3446
  whiteSpace: "nowrap",
3444
3447
  boxSizing: "border-box",
3445
- borderTop: "none",
3446
- borderLeft: "none",
3447
- borderBottom: "1px solid rgba(128,128,128,0.2)",
3448
- borderRight: "1px solid rgba(128,128,128,0.2)",
3449
3448
  position: "sticky",
3450
3449
  left: columnOffsets.get("__select__") ?? 0,
3451
3450
  top: 0,
@@ -3453,7 +3452,11 @@ function BoltTable({
3453
3452
  width: "48px",
3454
3453
  gridRow: leafGridRow,
3455
3454
  ...styles.header,
3456
- ...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)"
3457
3460
  },
3458
3461
  children: rowSelection.type !== "radio" && !rowSelection.hideSelectAll && /* @__PURE__ */ jsx5(
3459
3462
  "input",
@@ -3512,10 +3515,6 @@ function BoltTable({
3512
3515
  textOverflow: "ellipsis",
3513
3516
  whiteSpace: "nowrap",
3514
3517
  boxSizing: "border-box",
3515
- borderTop: "none",
3516
- borderLeft: "none",
3517
- borderBottom: "1px solid rgba(128,128,128,0.2)",
3518
- borderRight: "1px solid rgba(128,128,128,0.2)",
3519
3518
  position: "sticky",
3520
3519
  left: columnOffsets.get("__expand__") ?? 0,
3521
3520
  top: 0,
@@ -3524,7 +3523,11 @@ function BoltTable({
3524
3523
  backgroundColor: styles.pinnedBg,
3525
3524
  gridRow: leafGridRow,
3526
3525
  ...styles.header,
3527
- ...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)"
3528
3531
  }
3529
3532
  },
3530
3533
  "__expand__"
@@ -3742,7 +3745,7 @@ function BoltTable({
3742
3745
  alignItems: "center",
3743
3746
  justifyContent: "center",
3744
3747
  fontSize: 12,
3745
- opacity: currentPage === 1 ? 0.3 : 1,
3748
+ opacity: currentPage === 1 ? 0.2 : 1,
3746
3749
  background: "none",
3747
3750
  border: "none",
3748
3751
  padding: 0,
@@ -3768,7 +3771,7 @@ function BoltTable({
3768
3771
  alignItems: "center",
3769
3772
  justifyContent: "center",
3770
3773
  fontSize: 12,
3771
- opacity: currentPage === 1 ? 0.3 : 1,
3774
+ opacity: currentPage === 1 ? 0.2 : 1,
3772
3775
  background: "none",
3773
3776
  border: "none",
3774
3777
  padding: 0,
@@ -3840,7 +3843,7 @@ function BoltTable({
3840
3843
  alignItems: "center",
3841
3844
  justifyContent: "center",
3842
3845
  fontSize: 12,
3843
- opacity: currentPage === totalPages ? 0.3 : 1,
3846
+ opacity: currentPage === totalPages ? 0.2 : 1,
3844
3847
  background: "none",
3845
3848
  border: "none",
3846
3849
  padding: 0,
@@ -3866,7 +3869,7 @@ function BoltTable({
3866
3869
  alignItems: "center",
3867
3870
  justifyContent: "center",
3868
3871
  fontSize: 12,
3869
- opacity: currentPage === totalPages ? 0.3 : 1,
3872
+ opacity: currentPage === totalPages ? 0.2 : 1,
3870
3873
  background: "none",
3871
3874
  border: "none",
3872
3875
  padding: 0,
@@ -3941,7 +3944,7 @@ function BoltTable({
3941
3944
  textOverflow: "ellipsis",
3942
3945
  whiteSpace: "nowrap",
3943
3946
  borderRadius: 6,
3944
- border: "1px dashed rgba(128,128,128,0.3)",
3947
+ border: "1px dashed rgba(128,128,128,0.2)",
3945
3948
  boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
3946
3949
  backdropFilter: "blur(16px)",
3947
3950
  WebkitBackdropFilter: "blur(16px)",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bolt-table",
3
- "version": "0.1.33",
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",