@luscii-healthtech/web-ui 2.70.6 → 2.71.0

package/dist/components/Table/Table.types.d.ts

@@ -1,11 +1,23 @@
 import { BaseButtonProps } from "../ButtonV2/ButtonProps.type";
 import { TagColorTheme } from "../Tag/Tag";
-export interface TableFieldConfig<Item> {
+declare type TableFieldConfigBase = {
     key: string;
     headerText?: string;
-    content: (item: Item) => TableFieldContent<Item>;
     onlyShowContentOnHovering?: boolean;
-}
+};
+declare type TableFieldConfigWithContent<Item> = TableFieldConfigBase & {
+    content: (item: Item) => TableFieldContent<Item>;
+    render?: never;
+};
+declare type TableFieldConfigWithComponent<Item> = TableFieldConfigBase & {
+    render: (item: Item) => JSX.Element;
+    content?: never;
+};
+/**
+ * By adding the `content` property, it will use an opinionated layout with the <Text /> and optionally the <Tag /> component.
+ * By adding the `render` property, it will render any component returned in the function, based on the item (with type) passed.
+ */
+export declare type TableFieldConfig<Item> = TableFieldConfigWithComponent<Item> | TableFieldConfigWithContent<Item>;
 export declare type TableFieldContent<Item> = TableFieldText | [TableFieldAction<Item>?, TableFieldAction<Item>?];
 export interface TableFieldText {
     text: string;
@@ -27,3 +39,4 @@ export declare type TableFieldAction<Item> = Pick<BaseButtonProps, "isDisabled"
      */
     handleClick: (item: Item) => void;
 };
+export {};

package/dist/web-ui.cjs.development.js

@@ -5069,7 +5069,7 @@ function TableHeader(props) {
     }, /*#__PURE__*/React__default.createElement(Text, {
       text: (_fieldConfig$headerTe = fieldConfig.headerText) != null ? _fieldConfig$headerTe : "",
       type: "strong",
-      className: "py-4 text-left leading-5 truncate uppercase"
+      className: "py-4 leading-5 text-left uppercase truncate"
     }));
   })));
 }
@@ -5129,6 +5129,12 @@ function isTableFieldAction(content) {
 function TableBodyRowDataCell(props) {
   var _props$emptyFieldCont;
 
+  if ("render" in props.fieldConfig && props.fieldConfig.render) {
+    return /*#__PURE__*/React__default.createElement("td", {
+      className: classNames("px-2 first:pl-6 last:pr-6")
+    }, props.fieldConfig.render(props.item));
+  }
+
   var content = props.fieldConfig.content(props.item);
   var emptyFieldContentText = (_props$emptyFieldCont = props.emptyFieldContentText) != null ? _props$emptyFieldCont : "";
   var isTextCellEmpty = isTableFieldText(content) && !content.text && !content.tag;