sliftutils 0.17.0 → 0.19.0

package/index.d.ts

@@ -317,7 +317,7 @@ declare module "sliftutils/render-utils/Table" {
         lineLimit?: number;
         characterLimit?: number;
         excludeEmptyColumns?: boolean;
-        rowClassName?: (row: RowT) => string;
+        getRowFields?: (row: RowT) => preact.JSX.HTMLAttributes<HTMLTableRowElement>;
     }> {
         state: {
             limit: number;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sliftutils",
-    "version": "0.17.0",
+    "version": "0.19.0",
     "main": "index.js",
     "license": "MIT",
     "files": [

package/render-utils/Table.d.ts

@@ -24,7 +24,7 @@ export declare class Table<RowT extends RowType> extends preact.Component<TableT
     lineLimit?: number;
     characterLimit?: number;
     excludeEmptyColumns?: boolean;
-    rowClassName?: (row: RowT) => string;
+    getRowFields?: (row: RowT) => preact.JSX.HTMLAttributes<HTMLTableRowElement>;
 }> {
     state: {
         limit: number;

package/render-utils/Table.tsx

@@ -4,6 +4,7 @@ import { formatValue, JSXFormatter, toSpaceCase } from "./GenericFormat";
 import { observer } from "./observer";
 import { canHaveChildren } from "socket-function/src/types";
 import { showFullscreenModal } from "./FullscreenModal";
+import { observable } from "mobx";
 
 // Null means the column is removed
 export type ColumnType<T = unknown, Row extends RowType = RowType> = undefined | null | {
@@ -33,11 +34,11 @@ export class Table<RowT extends RowType> extends preact.Component<TableType<RowT
 
     excludeEmptyColumns?: boolean;
 
-    rowClassName?: (row: RowT) => string
+    getRowFields?: (row: RowT) => preact.JSX.HTMLAttributes<HTMLTableRowElement>;
 }> {
-    state = {
+    state = observable({
         limit: this.props.initialLimit || 100,
-    };
+    });
     render() {
         let { columns, rows, excludeEmptyColumns } = this.props;
 
@@ -65,9 +66,11 @@ export class Table<RowT extends RowType> extends preact.Component<TableType<RowT
                         <th className={css.pad2(8, 4) + cellClass}>{column?.title || toSpaceCase(columnName)}</th>
                     )}
                 </tr>
-                {rows.map((row, index) => (
-                    <tr
-                        className={(this.props.rowClassName?.(row) || "") + (index % 2 === 1 && css.hsla(0, 0, 100, 0.25) || "")}
+                {rows.map((row, index) => {
+                    let rowFields = this.props.getRowFields?.(row) || {};
+                    return <tr
+                        {...rowFields}
+                        className={rowFields.className + " " + (index % 2 === 1 && css.hsla(0, 0, 100, 0.25) || "")}
                     >
                         <td className={css.center}>{index + 1}</td>
                         {Object.entries(columns).filter(x => x[1] !== null).map(([columnName, column]: [string, ColumnType]) => {
@@ -116,8 +119,8 @@ export class Table<RowT extends RowType> extends preact.Component<TableType<RowT
                                 {innerContent}
                             </td>;
                         })}
-                    </tr>
-                ))}
+                    </tr>;
+                })}
                 {allRows.length > rows.length && <tr>
                     <td
                         colSpan={1 + Object.keys(columns).length}