engine table config

main component

import React, {useCallback, useState} from 'react'
import {ConfigTable} from "../../libraries"
import {orderBy} from "lodash"
import ExampleRow from "./ExampleRow/ExampleRow"
import {Box, Button} from "@mui/material"
import ExampleDialog from "../ExampleDialog/ExampleDialog"

function Example() {
    const config = [
        {field: "machine.mcid", width: '2%', title: '', type: 'selection'},
        {field: "machine.mcid", width: '6%', title: '#'},
        {field: "machine.mcSname", width: '22%', title: 'Short name'},
        {field: "machine.mcLname", width: '20%', title: 'Long name'},
        {field: "machineType.mtSname", width: '10%', title: 'Type'},
        {field: "machine.asUptimeStd", width: '10%', title: 'Uptime Standard'},
        {field: "breakGroup.name", width: '20%', title: 'Break Group'},
        {field: "machine.active", width: '5%', title: 'Active'},
        {field: "breakGroup.name", width: '5%', title: 'Break Group', type: 'custom'},
    ]
    const [sortField, setSortField] = useState(config[1].field)
    const [isAscSort, setIsAscSort] = useState(true)
    const [, setLatestUpdate] = useState(new Date())

    const headerRowClick = useCallback((field) => {
        setSortField(field)
        setIsAscSort(!isAscSort)
    }, [setSortField, setIsAscSort, isAscSort])

    let data = [
        {
            "machine": {
                "rowNumber": "1",
                "mcid": 1,
                "mtid": 2,
                "mcSname": "TEST",
                "mcLname": "TEST 01",
                "brkgid": 1,
                "active": true,
                "asUptimeStd": 50
            },
            "breakGroup": {
                "brkgid": 1,
                "name": "test breakgroup"
            },
            "machineType": {
                "mtid": 2,
                "mtLname": "test machine type"
            }
        },
        {
            "machine": {
                "rowNumber": "1",
                "mcid": 2,
                "mtid": 2,
                "mcSname": "TEST",
                "mcLname": "TEST 02",
                "brkgid": 1,
                "active": false,
                "asUptimeStd": 50
            },
            "breakGroup": {
                "brkgid": 1,
                "name": "test breakgroup"
            },
            "machineType": {
                "mtid": 2,
                "mtLname": "test machine type"
            }
        },
    ]

    let tableContent = orderBy(data, sortField, isAscSort ? 'asc' : 'desc').map((item, key) => {
        return <ExampleRow setLatestUpdate={setLatestUpdate} key={`content-row-${item.machine.mcid}`} data={item}/>
    })

    return (
        <Box width="99vw" height="98vh">
            <ConfigTable selectableRow="selected-column" name="MACHINE CONFIG" config={config} content={tableContent} headerRowClick={headerRowClick} setLatestUpdate={setLatestUpdate} sortField={sortField} isAscSort={isAscSort}>
                <Button variant="contained" size="small">Add</Button>
                <Button variant="contained" size="small">Delete</Button>
            </ConfigTable>
            <ExampleDialog/>
        </Box>
    )
}

export default Example

table component

import React, {useCallback, useRef, useState} from 'react'
import {Button, TableRow} from "@mui/material"
import './ExampleRow.scss'
import {CheckBoxColumn, ComboBoxColumn, CustomColumn, FirstColumn, NumberColumn, SelectableColumn, TextColumn} from "../../../libraries/Column/Column"
import {includes} from "lodash"
import {checkIsSelectableColumnClicked, getAllCheckedRows} from "../../../libraries/Helpers/Helper"

function ExampleRow({data, setLatestUpdate}) {
    const [isInEditMode, setIsInEditMode] = useState(false)
    const [content] = useState(data)

    const mcSnameRef = useRef()
    const mcLnameRef = useRef()
    const mtidRef = useRef()
    const asUptimeStdRef = useRef()
    const brkgidRef = useRef()
    const activeRef = useRef()

    const machineType = [{
        "mtid": 1,
        "mtLname": "test machine type"
    }]

    const breakGroup = [{
        "brkgid": 1,
        "name": "test breakgroup"
    }]

    const enableEditMode = useCallback((e) => {
        if (checkIsSelectableColumnClicked(e)) {
            e.preventDefault()
        } else {
            setIsInEditMode(true)
        }
    }, [setIsInEditMode])

    const updateData = useCallback(async () => {
        alert('submit')
        setIsInEditMode(false)
    }, [])

    const checkKeyboardEvent = useCallback((e) => {
        if (e.code === 'Enter') {
            updateData()
        } else if (e.code === 'Escape') {
            setIsInEditMode(false)
        }
    }, [updateData])

    const onCheckBoxUpdate = useCallback((e) => {
        console.log(`update checkbox ${e.target.value}`)
    }, [])

    let allChecked = getAllCheckedRows('selected-column')
    const isSelected = includes(allChecked, `${content.machine.mcid}`)

    return (
        <TableRow className={isInEditMode || isSelected ? "content-row selected-row" : "content-row"} sx={{typography: 'body1'}} onDoubleClick={enableEditMode}>
            <SelectableColumn className="selected-column" align="center" setLatestUpdate={setLatestUpdate}>{content.machine.mcid}</SelectableColumn>
            <FirstColumn isInEditMode={isInEditMode} setIsInEditMode={setIsInEditMode} updateData={updateData} align="right">{content.machine.mcid}</FirstColumn>
            <TextColumn refVar={mcSnameRef} isInEditMode={isInEditMode} checkKeyboardEvent={checkKeyboardEvent} align="left">{content.machine.mcSname}</TextColumn>
            <TextColumn refVar={mcLnameRef} isInEditMode={isInEditMode} checkKeyboardEvent={checkKeyboardEvent} align="left">{content.machine.mcLname}</TextColumn>
            <ComboBoxColumn refVar={mtidRef} isInEditMode={isInEditMode} comboValue="mtid" comboLabel="mtLname" data={machineType} selectedValue={content.machine.mtid} align="left">{content.machineType.mtLname}</ComboBoxColumn>
            <NumberColumn refVar={asUptimeStdRef} align="right" isInEditMode={isInEditMode}>{content.machine.asUptimeStd}</NumberColumn>
            <ComboBoxColumn refVar={brkgidRef} isInEditMode={isInEditMode} comboValue="brkgid" comboLabel="name" data={breakGroup} selectedValue={content.machine.brkgid} align="left">{content.breakGroup.name}</ComboBoxColumn>
            <CheckBoxColumn refVar={activeRef} onUpdate={onCheckBoxUpdate} align="center">{content.machine.active}</CheckBoxColumn>
            <CustomColumn align="center">
                <Button variant="contained">
                    Dialog
                </Button>
            </CustomColumn>
        </TableRow>
    )
}

export default ExampleRow

.content-row {
  cursor: pointer;
  user-select: none;

  &:nth-of-type(even) {
    background: #f9f9f9;
  }
}

.selected-row {
  background: #FFEFBB !important;

  input, .MuiSelect-select {
    background: #fff;
  }
}