add tools marketplace

packages/ui/src/ui-component/grid/Grid.js

@@ -3,7 +3,7 @@ import { DataGrid } from '@mui/x-data-grid'
 import { IconPlus } from '@tabler/icons'
 import { Button } from '@mui/material'
 
-export const Grid = ({ columns, rows, style, onRowUpdate, addNewRow }) => {
+export const Grid = ({ columns, rows, style, disabled = false, onRowUpdate, addNewRow }) => {
     const handleProcessRowUpdate = (newRow) => {
         onRowUpdate(newRow)
         return newRow
@@ -11,13 +11,18 @@ export const Grid = ({ columns, rows, style, onRowUpdate, addNewRow }) => {
 
     return (
         <>
-            <Button variant='outlined' onClick={addNewRow} startIcon={<IconPlus />}>
-                Add Item
-            </Button>
+            {!disabled && (
+                <Button variant='outlined' onClick={addNewRow} startIcon={<IconPlus />}>
+                    Add Item
+                </Button>
+            )}
             {rows && columns && (
                 <div style={{ marginTop: 10, height: 300, width: '100%', ...style }}>
                     <DataGrid
                         processRowUpdate={handleProcessRowUpdate}
+                        isCellEditable={() => {
+                            return !disabled
+                        }}
                         onProcessRowUpdateError={(error) => console.error(error)}
                         rows={rows}
                         columns={columns}
@@ -32,6 +37,7 @@ Grid.propTypes = {
     rows: PropTypes.array,
     columns: PropTypes.array,
     style: PropTypes.any,
+    disabled: PropTypes.bool,
     addNewRow: PropTypes.func,
     onRowUpdate: PropTypes.func
 }