loon-bulma-react 2026.0.50 → 2026.0.52

package/dist/components/DataTable/DataTable.d.ts

@@ -21,6 +21,8 @@ type DataTableColumnProp<T extends unknown = unknown> = {
     alignment?: AlignmentProp;
     /** className voor de kolom, om een cel te stylen afhankelijk van de waarde */
     columnClass?: string | ((item: T) => string);
+    /** style voor de kolom, om een cel te stylen afhankelijk van de waarde */
+    columnStyle?: React.CSSProperties | ((item: T) => React.CSSProperties);
 };
 type DatatablePaginationOptionsProp = {
     /** tonen we paginatie? */

package/dist/index.js

@@ -13668,8 +13668,11 @@ function T_({ rowClass: e, rowKey: n, columns: r, item: i, onRowSelected: a, onR
 			let r;
 			r = typeof e.cellIdentifier == "function" ? e.cellIdentifier(i) : e.cellIdentifier ? i[e.cellIdentifier] : `${n}-${t}`;
 			let a = typeof e.columnClass == "function" ? e.columnClass(i) : e.columnClass ?? "";
-			return a += cf(e.alignment ?? "l"), /* @__PURE__ */ x("td", {
+			a += cf(e.alignment ?? "l");
+			let s = typeof e.columnStyle == "function" ? e.columnStyle(i) : e.columnStyle ?? void 0;
+			return /* @__PURE__ */ x("td", {
 				className: a.trim(),
+				style: s,
 				children: [typeof e.value == "function" ? e.value(i, l) : i[e.value], t === 0 && o && /* @__PURE__ */ b(Ih, {
 					outerRef: d,
 					children: () => o(i)

package/dist/styles/calendar.scss

@@ -28,24 +28,44 @@ div.lbr-grid-container {
 .calendar-header-cell {
   text-align: center;
   border-bottom: thin solid $cell-border-color;
+  border-left: thin solid $cell-border-color;
+  border-right: thin solid $cell-border-color;
   font-weight: bold;
-  background-color: cv.getVar('scheme-main-ter');
+  // background-color: cv.getVar('scheme-main-ter');
+
+  &:first-child {
+    border-left: none;
+    border-top: none;
+    border-bottom: none;
+  }
 }
 
 .calendar-row-id-cell {
-  background-color: cv.getVar('scheme-main-ter');
+  // background-color: cv.getVar('scheme-main-ter');
   text-align: center;
   font-size: 0.7em;
   padding-top: 1em;
   height: 60px;
+  // border-top: thin solid $cell-border-color;
   border-bottom: thin solid $cell-border-color;
-
+  border-right: thin solid $cell-border-color;
   &.allday-row {
     height: 100%;
   }
+
+  // CSS-truuk: 1e element van deze class
+  &:nth-child(1 of .calendar-row-id-cell) {
+    border-top: thin solid $cell-border-color;
+  }
+}
+
+.calendar-time-cell.allday-row {
+  border: none;
+  border-right: thin solid $cell-border-color;
 }
 
 .calendar-allday-slot {
+  border-left: thin solid $cell-border-color;
   border-right: thin solid $cell-border-color;
   border-bottom: thin solid $cell-border-color;
   text-align: center;
@@ -71,6 +91,7 @@ div.lbr-grid-container {
   overflow: clip;
   border-bottom: thin solid $cell-border-color;
   border-right: thin solid $cell-border-color;
+  border-left: thin solid $cell-border-color;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;

package/dist/styles/table.scss

@@ -331,17 +331,21 @@ table {
   }
 }
 
+// CSS voor de calendar-planning
+
 .#{iv.$class-prefix}is-planning {
   border-spacing: 0;
   border-collapse: separate;
   border-width: thin;
+  margin-bottom: 3em; // scrollbar ONDER de laatste regel in de tabel
+
   thead tr.planning-row {
     border-width: thin;
-    background-color: cv.getVar('scheme-main-bis');
+    background-color: cv.getVar('scheme-main');
     td,
     th {
       padding: 0;
-      border-top: thin solid $table-cell-border-color;
+      // border-top: thin solid $table-cell-border-color;
       border-bottom: thin solid $table-cell-border-color;
       border-right: thin solid $table-cell-border-color;
     }
@@ -351,8 +355,10 @@ table {
       position: sticky;
       padding: 2px;
       left: 0;
-      border-left: thin solid $table-cell-border-color;
-      background-color: cv.getVar('scheme-main-ter');
+      // border-left: thin solid $table-cell-border-color;
+      border-top: none;
+      border-left: none;
+      background-color: cv.getVar('scheme-main');
     }
   }
   tbody tr.planning-row {
@@ -370,8 +376,8 @@ table {
       position: sticky;
       left: 0;
       padding: 2px;
-      border-left: thin solid $table-cell-border-color;
-      background-color: cv.getVar('scheme-main-ter');
+      // border-left: thin solid $table-cell-border-color;
+      background-color: cv.getVar('scheme-main');
     }
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "loon-bulma-react",
   "private": false,
-  "version": "2026.0.50",
+  "version": "2026.0.52",
   "description": "Bulma & React componenten voor Loon Salarissoftware",
   "type": "module",
   "license": "MIT",
@@ -78,7 +78,7 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "@typescript-eslint/parser": "^8.62.0",
     "@vitejs/plugin-react-swc": "^4.3.1",
-    "@vitest/ui": "^4.1.9",
+    "@vitest/ui": "^4.1.10",
     "esbuild": "^0.28.1",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
@@ -99,11 +99,11 @@
     "rollup-plugin-copy": "^3.5.0",
     "sass": "^1.101.0",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.62.1",
+    "typescript-eslint": "^8.63.0",
     "vite": "^8.1.3",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vite-tsconfig-paths": "^6.1.1",
-    "vitest": "^4.1.9"
+    "vitest": "^4.1.10"
   },
   "peerDependencies": {
     "bulma": "^1.0.4",