react-better-html 1.1.108 → 1.1.110

package/dist/index.d.mts

@@ -665,10 +665,13 @@ type ElementColumn<DataItem> = {
 type ImageColumn<DataItem> = {
     type: "image";
     keyName?: keyof DataItem;
-} & ImageProps;
+    getImageSrc?: (item: DataItem, index: number) => string;
+    imageProps?: ImageProps;
+};
 type CheckboxColumn = {
     type: "checkbox";
-} & ToggleInputProps<boolean>;
+    toggleInputProps?: ToggleInputProps<boolean>;
+};
 type NumberFilter<DataItem> = {
     filter?: "number";
     getValue?: (item: DataItem) => number;

package/dist/index.d.ts

@@ -665,10 +665,13 @@ type ElementColumn<DataItem> = {
 type ImageColumn<DataItem> = {
     type: "image";
     keyName?: keyof DataItem;
-} & ImageProps;
+    getImageSrc?: (item: DataItem, index: number) => string;
+    imageProps?: ImageProps;
+};
 type CheckboxColumn = {
     type: "checkbox";
-} & ToggleInputProps<boolean>;
+    toggleInputProps?: ToggleInputProps<boolean>;
+};
 type NumberFilter<DataItem> = {
     filter?: "number";
     getValue?: (item: DataItem) => number;

package/dist/index.js

@@ -6860,7 +6860,7 @@ var ColorThemeSwitch_default = ColorThemeSwitch2;
 var import_react23 = require("react");
 var import_styled_components11 = __toESM(require("styled-components"));
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var defaultImageWidth = 120;
+var defaultImageWidth = 160;
 var maximumVisiblePages = 11;
 var TableStyledComponent = import_styled_components11.default.table.withConfig({
   shouldForwardProp: (prop) => !["isStriped", "withHover", "withStickyHeader", "colorTheme", "theme"].includes(prop)
@@ -7005,12 +7005,11 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
           return column.render?.(item, index) ?? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, {});
         }
         case "image": {
-          const { type, keyName, ...props2 } = column;
-          const src = keyName ? item[keyName] : void 0;
-          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Image_default, { src, width: defaultImageWidth, borderRadius: theme2.styles.borderRadius / 2, ...props2 });
+          const src = column.getImageSrc?.(item, index) ?? (column.keyName ? item[column.keyName] : void 0);
+          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Image_default, { src, width: "100%", borderRadius: theme2.styles.borderRadius / 2, ...column.imageProps });
         }
         case "checkbox": {
-          const { type, onChange, ...props2 } = column;
+          const { onChange, ...toggleInputProps } = column.toggleInputProps ?? {};
           const checkedValue = checkedItems[index];
           return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             ToggleInput_default.checkbox,
@@ -7022,7 +7021,7 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
                 );
                 onChange?.(checked, value);
               },
-              ...props2
+              ...toggleInputProps
             }
           );
         }
@@ -7287,7 +7286,7 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
               /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { className: "isHeader", children: columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 ThStyledComponent,
                 {
-                  width: column.type === "image" ? defaultImageWidth : column.type === "checkbox" ? 26 : column.width,
+                  width: column.width ?? (column.type === "image" ? defaultImageWidth : column.type === "checkbox" ? 26 : void 0),
                   minWidth: column.minWidth,
                   maxWidth: column.maxWidth,
                   textAlign: column.align,