Function DataGrid

packages/ui/src/ui-component/grid/DataGrid.jsx:36–128

({ columns, rows, style, disabled = false, hideFooter = false, onChange })

}))

export const DataGrid = ({ columns, rows, style, disabled = false, hideFooter = false, onChange }) => {
    const [rowValues, setRowValues] = useState(formatDataGridRows(rows) ?? [])

    const deleteItem = useCallback(
        (id) => () => {
            let updatedRows = []
            setRowValues((prevRows) => {
                let allRows = [...cloneDeep(prevRows)]
                allRows = allRows.filter((row) => row.id !== id)
                updatedRows = allRows
                return allRows
            })
            onChange(JSON.stringify(updatedRows))
        },
        // eslint-disable-next-line react-hooks/exhaustive-deps
        []
    )

    const addCols = (columns) => {
        return [
            ...columns,
            {
                field: 'actions',
                type: 'actions',
                width: 80,
                getActions: (params) => [
                    <GridActionsCellItem key={'Delete'} icon={<DeleteIcon />} label='Delete' onClick={deleteItem(params.id)} />
                ]
            }
        ]
    }

    const colValues = addCols(columns)

    const handleProcessRowUpdate = (newRow) => {
        let updatedRows = []
        setRowValues((prevRows) => {
            let allRows = [...cloneDeep(prevRows)]
            const indexToUpdate = allRows.findIndex((row) => row.id === newRow.id)
            if (indexToUpdate >= 0) {
                allRows[indexToUpdate] = { ...newRow }
            }
            updatedRows = allRows
            return allRows
        })
        onChange(JSON.stringify(updatedRows))
        return newRow
    }

    const getEmptyJsonObj = () => {
        const obj = {}
        for (let i = 0; i < colValues.length; i += 1) {
            obj[colValues[i]?.field] = ''
        }
        return obj
    }

    const addNewRow = () => {