bolt-table 0.1.31 → 0.1.33

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 +17 -11
  2. package/dist/index.mjs +17 -11
  3. package/package.json +1 -1
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_BORDER_COLOR = "rgba(128,128,128,0.35)";
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,8 +260,10 @@ var DraggableHeader = import_react.default.memo(
260
260
  textOverflow: "ellipsis",
261
261
  whiteSpace: "nowrap",
262
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}`,
263
+ borderTop: "none",
264
+ borderLeft: "none",
265
+ borderBottom: HEADER_SEP,
266
+ borderRight: isLastColumn ? "none" : HEADER_SEP,
265
267
  ...column.pinned === "left" && stickyOffset !== void 0 ? { left: `${stickyOffset}px` } : {},
266
268
  ...column.pinned === "right" && stickyOffset !== void 0 ? { right: `${stickyOffset}px` } : {},
267
269
  ...column.style,
@@ -2946,8 +2948,6 @@ function BoltTable({
2946
2948
  }
2947
2949
  :where([data-bt-header]) {
2948
2950
  background-color: rgba(128,128,128,0.06);
2949
- backdrop-filter: blur(8px);
2950
- -webkit-backdrop-filter: blur(8px);
2951
2951
  }
2952
2952
  :where([data-bt-pinned]) {
2953
2953
  background-color: ${styles.pinnedBg ?? "Canvas"};
@@ -3431,8 +3431,10 @@ function BoltTable({
3431
3431
  textOverflow: "ellipsis",
3432
3432
  whiteSpace: "nowrap",
3433
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
+ 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)",
3436
3438
  fontWeight: 500,
3437
3439
  userSelect: "none",
3438
3440
  ...group.style,
@@ -3468,8 +3470,10 @@ function BoltTable({
3468
3470
  textOverflow: "ellipsis",
3469
3471
  whiteSpace: "nowrap",
3470
3472
  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)",
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)",
3473
3477
  position: "sticky",
3474
3478
  left: columnOffsets.get("__select__") ?? 0,
3475
3479
  top: 0,
@@ -3536,8 +3540,10 @@ function BoltTable({
3536
3540
  textOverflow: "ellipsis",
3537
3541
  whiteSpace: "nowrap",
3538
3542
  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)",
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)",
3541
3547
  position: "sticky",
3542
3548
  left: columnOffsets.get("__expand__") ?? 0,
3543
3549
  top: 0,
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_BORDER_COLOR = "rgba(128,128,128,0.35)";
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,8 +226,10 @@ var DraggableHeader = React.memo(
226
226
  textOverflow: "ellipsis",
227
227
  whiteSpace: "nowrap",
228
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}`,
229
+ borderTop: "none",
230
+ borderLeft: "none",
231
+ borderBottom: HEADER_SEP,
232
+ borderRight: isLastColumn ? "none" : HEADER_SEP,
231
233
  ...column.pinned === "left" && stickyOffset !== void 0 ? { left: `${stickyOffset}px` } : {},
232
234
  ...column.pinned === "right" && stickyOffset !== void 0 ? { right: `${stickyOffset}px` } : {},
233
235
  ...column.style,
@@ -2918,8 +2920,6 @@ function BoltTable({
2918
2920
  }
2919
2921
  :where([data-bt-header]) {
2920
2922
  background-color: rgba(128,128,128,0.06);
2921
- backdrop-filter: blur(8px);
2922
- -webkit-backdrop-filter: blur(8px);
2923
2923
  }
2924
2924
  :where([data-bt-pinned]) {
2925
2925
  background-color: ${styles.pinnedBg ?? "Canvas"};
@@ -3403,8 +3403,10 @@ function BoltTable({
3403
3403
  textOverflow: "ellipsis",
3404
3404
  whiteSpace: "nowrap",
3405
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
+ 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)",
3408
3410
  fontWeight: 500,
3409
3411
  userSelect: "none",
3410
3412
  ...group.style,
@@ -3440,8 +3442,10 @@ function BoltTable({
3440
3442
  textOverflow: "ellipsis",
3441
3443
  whiteSpace: "nowrap",
3442
3444
  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)",
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)",
3445
3449
  position: "sticky",
3446
3450
  left: columnOffsets.get("__select__") ?? 0,
3447
3451
  top: 0,
@@ -3508,8 +3512,10 @@ function BoltTable({
3508
3512
  textOverflow: "ellipsis",
3509
3513
  whiteSpace: "nowrap",
3510
3514
  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)",
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)",
3513
3519
  position: "sticky",
3514
3520
  left: columnOffsets.get("__expand__") ?? 0,
3515
3521
  top: 0,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bolt-table",
3
- "version": "0.1.31",
3
+ "version": "0.1.33",
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",