@nethru/ui 1.0.30 → 1.0.32

package/dist/PropertyTable.js

@@ -0,0 +1,68 @@
+import { useMemo, useState } from "react";
+import { DataGrid } from "@mui/x-data-grid";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function PropertyTable({
+  columns,
+  rows,
+  onUpdate,
+  sx,
+  ...props
+}) {
+  const [updatedRows, setUpdatedRows] = useState(rows);
+  const columnsWithClassName = useMemo(() => {
+    return columns.map(column => {
+      const newColumn = {
+        ...column
+      };
+      if (column.fixed) {
+        newColumn.cellClassName = params => {
+          return !params.row.deletable ? 'fixed' : '';
+        };
+      } else if (column.dimmed) newColumn.cellClassName = 'dimmed';
+      return newColumn;
+    });
+  }, [columns]);
+  const processRowUpdate = row => {
+    const newRows = updatedRows.filter(r => r.id !== row.id);
+    newRows.push(row);
+    setUpdatedRows(newRows);
+    if (onUpdate) onUpdate(row, newRows);
+    return row;
+  };
+  return /*#__PURE__*/_jsx(DataGrid, {
+    columns: columnsWithClassName,
+    rows: rows,
+    columnHeaderHeight: 35,
+    rowHeight: 30,
+    isCellEditable: params => {
+      return params.row.deletable || !params.colDef.fixed;
+    },
+    processRowUpdate: processRowUpdate,
+    onProcessRowUpdateError: error => console.log(error),
+    disableColumnMenu: true,
+    hideFooter: true,
+    sx: {
+      ...styles,
+      ...sx
+    },
+    ...props
+  });
+}
+const styles = {
+  '.MuiDataGrid-columnHeaders': {
+    backgroundColor: '#f8f9fa'
+  },
+  '.MuiDataGrid-columnSeparator': {
+    visibility: 'hidden !important'
+  },
+  '.MuiDataGrid-cell.fixed': {
+    fontWeight: 'bold'
+  },
+  '.MuiDataGrid-cell.dimmed': {
+    color: '#666'
+  },
+  '& .Mui-error': {
+    backgroundColor: 'rgb(126,10,15, 0.1)',
+    color: '#750f0f'
+  }
+};

package/dist/index.js

@@ -20,6 +20,7 @@ export { default as ListItemDivider } from "./ListItemDivider";
 export { default as ListItemGrid } from "./ListItemGrid";
 export { default as ListItemText } from "./ListItemText";
 export { default as MainHeader } from "./MainHeader";
+export { default as PropertyTable } from "./PropertyTable";
 export { default as ReferenceChipList } from "./ReferenceChipList";
 export { default as SearchTextField } from "./SearchTextField";
 export { default as Section } from "./Section";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethru/ui",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "main": "dist/index.js",
   "files": [
     "/dist"