andry/EMS-ESP32
1
0
Fork 0
mirror of https://github.com/emsesp/EMS-ESP32.git synced 2025-12-07 00:09:51 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix table column resizing #519

Browse Source
This commit is contained in:
Proddy
2022-06-25 14:25:51 +02:00
parent 4af1de4093
commit 9639f9cee6
4 changed files with 201 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
interface/src/framework/security/ManageUsersForm.tsx
View File

@@ -35,43 +35,44 @@ const ManageUsersForm: FC = () => {
const authenticatedContext = useContext(AuthenticatedContext); const authenticatedContext = useContext(AuthenticatedContext);
const table_theme = useTheme({ const table_theme = useTheme({
Table: `
--data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) 90px 120px;
`,
BaseRow: ` BaseRow: `
font-size: 14px; font-size: 14px;
color: white;
padding-left: 8px;
`, `,
HeaderRow: ` HeaderRow: `
text-transform: uppercase; text-transform: uppercase;
background-color: black; background-color: black;
color: #90CAF9; color: #90CAF9;
font-weight: 500; .th {
border-bottom: 1px solid #e0e0e0; padding: 8px;
height: 42px;
font-weight: 500;
border-bottom: 1px solid #565656;
}
`, `,
Row: ` Row: `
&:nth-of-type(odd) { .td {
padding: 8px;
border-top: 1px solid #565656;
border-bottom: 1px solid #565656;
}
&:nth-of-type(odd) .td {
background-color: #303030; background-color: #303030;
} }
&:nth-of-type(even) { &:nth-of-type(even) .td {
background-color: #1e1e1e; background-color: #1e1e1e;
} }
border-top: 1px solid #565656;
border-bottom: 1px solid #565656;
position: relative;
z-index: 1;
&:not(:last-of-type) {
margin-bottom: -1px;
}
&:not(:first-of-type) {
margin-top: -1px;
}
&:hover {
color: white;
}
`, `,
BaseCell: ` BaseCell: `
border-top: 1px solid transparent; &:nth-of-type(2) {
border-right: 1px solid transparent; text-align: center;
border-bottom: 1px solid transparent; }
&:last-of-type {
text-align: right;
}
` `
}); });
@@ -130,22 +131,22 @@ const ManageUsersForm: FC = () => {
return ( return (
<> <>
<Table data={{ nodes: user_table }} theme={table_theme}> <Table data={{ nodes: user_table }} theme={table_theme} layout={{ custom: true }}>
{(tableList: any) => ( {(tableList: any) => (
<> <>
<Header> <Header>
<HeaderRow> <HeaderRow>
<HeaderCell>USERNAME</HeaderCell> <HeaderCell resize>USERNAME</HeaderCell>
<HeaderCell>IS ADMIN</HeaderCell> <HeaderCell stiff>IS ADMIN</HeaderCell>
<HeaderCell /> <HeaderCell stiff />
</HeaderRow> </HeaderRow>
</Header> </Header>
<Body> <Body>
{tableList.map((u: any) => ( {tableList.map((u: any) => (
<Row key={u.id} item={u}> <Row key={u.id} item={u}>
<Cell>{u.username}</Cell> <Cell>{u.username}</Cell>
<Cell>{u.admin ? <CheckIcon /> : <CloseIcon />}</Cell> <Cell stiff>{u.admin ? <CheckIcon /> : <CloseIcon />}</Cell>
<Cell> <Cell stiff>
<IconButton <IconButton
size="small" size="small"
disabled={!authenticatedContext.me.admin} disabled={!authenticatedContext.me.admin}

275
interface/src/project/DashboardData.tsx
View File

@@ -88,185 +88,121 @@ const DashboardData: FC = () => {
const [deviceDialog, setDeviceDialog] = useState<number>(-1); const [deviceDialog, setDeviceDialog] = useState<number>(-1);
const [onlyFav, setOnlyFav] = useState(false); const [onlyFav, setOnlyFav] = useState(false);
const device_theme = useTheme({ const common_theme = useTheme({
BaseRow: ` BaseRow: `
font-size: 14px; font-size: 14px;
color: white;
height: 46px;
&:focus {
z-index: 2;
border-top: 1px solid #177ac9;
border-bottom: 1px solid #177ac9;
}
`, `,
HeaderRow: ` HeaderRow: `
text-transform: uppercase; text-transform: uppercase;
background-color: black; background-color: black;
color: #90CAF9; color: #90CAF9;
border-bottom: 1px solid #e0e0e0;
font-weight: 500; .th {
border-bottom: 1px solid #565656;
}
`, `,
Row: ` Row: `
background-color: #1e1e1e; background-color: #1e1e1e;
border-top: 1px solid #565656;
border-bottom: 1px solid #565656;
position: relative; position: relative;
z-index: 1; cursor: pointer;
&:not(:last-of-type) {
margin-bottom: -1px; .td {
padding: 8px;
border-top: 1px solid #565656;
border-bottom: 1px solid #565656;
} }
&:not(:first-of-type) {
margin-top: -1px; &.tr.tr-body.row-select.row-select-single-selected {
}
&:hover {
z-index: 2;
color: white;
border-top: 1px solid #177ac9;
border-bottom: 1px solid #177ac9;
},
&.tr.tr-body.row-select.row-select-single-selected, &.tr.tr-body.row-select.row-select-selected {
background-color: #3d4752; background-color: #3d4752;
color: white; color: white;
font-weight: normal; font-weight: normal;
z-index: 2; }
&:hover .td {
border-top: 1px solid #177ac9; border-top: 1px solid #177ac9;
border-bottom: 1px solid #177ac9; border-bottom: 1px solid #177ac9;
} }
`, `,
BaseCell: ` Cell: `
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
&:not(.stiff) > div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&:nth-of-type(1) {
padding-left: 8px;
min-width: 42px;
width: 42px;
div {
width: 100%;
}
}
&:nth-of-type(2) {
min-width: 100px;
width: 100px;
}
&:nth-of-type(3) {
flex: 1;
}
&:nth-of-type(4) {
text-align: center;
max-width: 100px;
}
&:last-of-type { &:last-of-type {
padding-left: 0px; text-align: right;
text-align: center; },
width: 32px;
min-width: 32px;
max-width: 32px;
}
` `
}); });
const data_theme = useTheme({ const device_theme = useTheme([
BaseRow: ` common_theme,
font-size: 14px; {
color: white; Table: `
min-height: 32px; --data-table-library_grid-template-columns: 40px 100px repeat(1, minmax(0, 1fr)) 80px 40px;
`, `,
HeaderRow: ` BaseRow: `
text-transform: uppercase; .td {
background-color: black; height: 42px;
color: #90CAF9; }
border-bottom: 1px solid #e0e0e0; `,
font-weight: 500; BaseCell: `
`, &:nth-of-type(2) {
Row: ` text-align: left;
&:nth-of-type(odd) { },
background-color: #303030; &:nth-of-type(4) {
} text-align: center;
&:nth-of-type(even) { }
background-color: #1e1e1e; `,
} HeaderRow: `
border-top: 1px solid #565656; .th {
border-bottom: 1px solid #565656; padding: 8px;
position: relative; height: 42px;
z-index: 1; font-weight: 500;
&:not(:last-of-type) { `
margin-bottom: -1px; }
} ]);
&:not(:first-of-type) {
margin-top: -1px; const data_theme = useTheme([
} common_theme,
&:hover { {
z-index: 2; Table: `
border-top: 1px solid #177ac9; --data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) 200px 40px;
border-bottom: 1px solid #177ac9; `,
color: white; BaseRow: `
} .td {
`, height: 32px;
BaseCell: ` }
padding-left: 16px; `,
cursor: pointer; BaseCell: `
border-top: 1px solid transparent; &:nth-of-type(2) {
border-right: 1px solid transparent; text-align: right;
border-bottom: 1px solid transparent; },
&:not(.stiff) > div { `,
white-space: nowrap; HeaderRow: `
overflow: hidden; .th {
text-overflow: ellipsis; height: 32px;
} }
&:nth-of-type(1) { `,
width: 260px; Row: `
} &:nth-of-type(odd) .td {
&:nth-of-type(2) { background-color: #303030;
flex: 1; }
text-align: right; `
} }
&:last-of-type { ]);
padding-left: 0px;
text-align: center;
width: 32px;
min-width: 32px;
max-width: 32px;
}
`,
HeaderCell: `
&:not(:last-of-type) {
padding-left: 8px;
border-left: 1px solid #565656;
}
&:first-of-type {
border-left: 0px;
}
`
});
const temperature_theme = useTheme([data_theme]); const temperature_theme = useTheme([data_theme]);
const analog_theme = useTheme([ const analog_theme = useTheme([
data_theme, data_theme,
{ {
Table: `
--data-table-library_grid-template-columns: 80px repeat(1, minmax(0, 1fr)) 120px 100px 40px;
`,
BaseCell: ` BaseCell: `
&:nth-of-type(1) {
width: 100px;
min-width: 100px;
}
&:nth-of-type(2) { &:nth-of-type(2) {
text-align: left; text-align: left;
} },
&:nth-of-type(3) {
width: 100px;
min-width: 100px;
}
&:nth-of-type(4) { &:nth-of-type(4) {
text-align: right; text-align: right;
flex: 1;
} }
` `
} }
]); ]);
@@ -536,6 +472,7 @@ const DashboardData: FC = () => {
label={deviceValue.id.slice(2)} label={deviceValue.id.slice(2)}
value={deviceValue.u ? numberValue(deviceValue.v) : deviceValue.v} value={deviceValue.u ? numberValue(deviceValue.v) : deviceValue.v}
autoFocus autoFocus
multiline
sx={{ width: '30ch' }} sx={{ width: '30ch' }}
type={deviceValue.u ? 'number' : 'text'} type={deviceValue.u ? 'number' : 'text'}
onChange={updateValue(setDeviceValue)} onChange={updateValue(setDeviceValue)}
@@ -709,23 +646,23 @@ const DashboardData: FC = () => {
<> <>
<Header> <Header>
<HeaderRow> <HeaderRow>
<HeaderCell /> <HeaderCell stiff />
<HeaderCell>TYPE</HeaderCell> <HeaderCell stiff>TYPE</HeaderCell>
<HeaderCell>DESCRIPTION</HeaderCell> <HeaderCell resize>DESCRIPTION</HeaderCell>
<HeaderCell>ENTITIES</HeaderCell> <HeaderCell stiff>ENTITIES</HeaderCell>
<HeaderCell /> <HeaderCell stiff />
</HeaderRow> </HeaderRow>
</Header> </Header>
<Body> <Body>
{tableList.map((device: Device, index: number) => ( {tableList.map((device: Device, index: number) => (
<Row key={device.id} item={device}> <Row key={device.id} item={device}>
<Cell> <Cell stiff>
<DeviceIcon type={device.t} /> <DeviceIcon type={device.t} />
</Cell> </Cell>
<Cell>{device.t}</Cell> <Cell stiff>{device.t}</Cell>
<Cell>{device.n}</Cell> <Cell>{device.n}</Cell>
<Cell>{device.e}</Cell> <Cell stiff>{device.e}</Cell>
<Cell> <Cell stiff>
<IconButton size="small" onClick={() => setDeviceDialog(index)}> <IconButton size="small" onClick={() => setDeviceDialog(index)}>
<InfoOutlinedIcon color="info" sx={{ fontSize: 16, verticalAlign: 'middle' }} /> <InfoOutlinedIcon color="info" sx={{ fontSize: 16, verticalAlign: 'middle' }} />
</IconButton> </IconButton>
@@ -778,7 +715,7 @@ const DashboardData: FC = () => {
return ( return (
<> <>
<Typography sx={{ pt: 2, pb: 1 }} variant="h6" color="primary"> <Typography sx={{ pt: 2, pb: 1 }} variant="h6" color="secondary">
{deviceData.label} {deviceData.label}
</Typography> </Typography>
<FormControlLabel <FormControlLabel
@@ -814,7 +751,7 @@ const DashboardData: FC = () => {
ENTITY NAME ENTITY NAME
</Button> </Button>
</HeaderCell> </HeaderCell>
<HeaderCell> <HeaderCell reszie>
<Button <Button
fullWidth fullWidth
style={{ fontSize: '14px', justifyContent: 'flex-end' }} style={{ fontSize: '14px', justifyContent: 'flex-end' }}
@@ -824,7 +761,7 @@ const DashboardData: FC = () => {
VALUE VALUE
</Button> </Button>
</HeaderCell> </HeaderCell>
<HeaderCell /> <HeaderCell stiff />
</HeaderRow> </HeaderRow>
</Header> </Header>
<Body> <Body>
@@ -832,7 +769,7 @@ const DashboardData: FC = () => {
<Row key={dv.id} item={dv} onClick={() => sendCommand(dv)}> <Row key={dv.id} item={dv} onClick={() => sendCommand(dv)}>
<Cell>{renderNameCell(dv)}</Cell> <Cell>{renderNameCell(dv)}</Cell>
<Cell>{formatValue(dv.v, dv.u)}</Cell> <Cell>{formatValue(dv.v, dv.u)}</Cell>
<Cell> <Cell stiff>
{dv.c && me.admin && !hasMask(dv.id, DeviceEntityMask.DV_READONLY) && ( {dv.c && me.admin && !hasMask(dv.id, DeviceEntityMask.DV_READONLY) && (
<IconButton size="small" onClick={() => sendCommand(dv)}> <IconButton size="small" onClick={() => sendCommand(dv)}>
{isCmdOnly(dv) ? ( {isCmdOnly(dv) ? (
@@ -867,7 +804,7 @@ const DashboardData: FC = () => {
const renderDallasData = () => ( const renderDallasData = () => (
<> <>
<Typography sx={{ pt: 2, pb: 1 }} variant="h6" color="primary"> <Typography sx={{ pt: 2, pb: 1 }} variant="h6" color="secondary">
Temperature Sensors Temperature Sensors
</Typography> </Typography>
<Table <Table
@@ -890,7 +827,7 @@ const DashboardData: FC = () => {
NAME NAME
</Button> </Button>
</HeaderCell> </HeaderCell>
<HeaderCell> <HeaderCell stiff>
<Button <Button
fullWidth fullWidth
style={{ fontSize: '14px', justifyContent: 'flex-end' }} style={{ fontSize: '14px', justifyContent: 'flex-end' }}
@@ -900,7 +837,7 @@ const DashboardData: FC = () => {
TEMPERATURE TEMPERATURE
</Button> </Button>
</HeaderCell> </HeaderCell>
<HeaderCell /> <HeaderCell stiff />
</HeaderRow> </HeaderRow>
</Header> </Header>
<Body> <Body>
@@ -926,7 +863,7 @@ const DashboardData: FC = () => {
const renderAnalogData = () => ( const renderAnalogData = () => (
<> <>
<Typography sx={{ pt: 2, pb: 1 }} variant="h6" color="primary"> <Typography sx={{ pt: 2, pb: 1 }} variant="h6" color="secondary">
Analog Sensors Analog Sensors
</Typography> </Typography>
@@ -935,7 +872,7 @@ const DashboardData: FC = () => {
<> <>
<Header> <Header>
<HeaderRow> <HeaderRow>
<HeaderCell resize> <HeaderCell stiff>
<Button <Button
fullWidth fullWidth
style={{ fontSize: '14px', justifyContent: 'flex-start' }} style={{ fontSize: '14px', justifyContent: 'flex-start' }}
@@ -955,7 +892,7 @@ const DashboardData: FC = () => {
NAME NAME
</Button> </Button>
</HeaderCell> </HeaderCell>
<HeaderCell resize> <HeaderCell stiff>
<Button <Button
fullWidth fullWidth
style={{ fontSize: '14px', justifyContent: 'flex-start' }} style={{ fontSize: '14px', justifyContent: 'flex-start' }}
@@ -965,18 +902,18 @@ const DashboardData: FC = () => {
TYPE TYPE
</Button> </Button>
</HeaderCell> </HeaderCell>
<HeaderCell>VALUE</HeaderCell> <HeaderCell stiff>VALUE</HeaderCell>
<HeaderCell /> <HeaderCell stiff />
</HeaderRow> </HeaderRow>
</Header> </Header>
<Body> <Body>
{tableList.map((a: Analog) => ( {tableList.map((a: Analog) => (
<Row key={a.id} item={a} onClick={() => updateAnalog(a)}> <Row key={a.id} item={a} onClick={() => updateAnalog(a)}>
<Cell>{a.g}</Cell> <Cell stiff>{a.g}</Cell>
<Cell>{a.n}</Cell> <Cell>{a.n}</Cell>
<Cell>{AnalogTypeNames[a.t]} </Cell> <Cell stiff>{AnalogTypeNames[a.t]} </Cell>
<Cell>{a.t ? formatValue(a.v, a.u) : ''}</Cell> <Cell stiff>{a.t ? formatValue(a.v, a.u) : ''}</Cell>
<Cell> <Cell stiff>
{me.admin && ( {me.admin && (
<IconButton onClick={() => updateAnalog(a)}> <IconButton onClick={() => updateAnalog(a)}>
<EditIcon color="primary" sx={{ fontSize: 16 }} /> <EditIcon color="primary" sx={{ fontSize: 16 }} />

77
interface/src/project/DashboardStatus.tsx
View File

@@ -88,65 +88,40 @@ const DashboardStatus: FC = () => {
const { me } = useContext(AuthenticatedContext); const { me } = useContext(AuthenticatedContext);
const stats_theme = tableTheme({ const stats_theme = tableTheme({
Table: `
--data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) 90px 90px 80px;
`,
BaseRow: ` BaseRow: `
font-size: 14px; font-size: 14px;
color: white;
height: 32px;
`, `,
HeaderRow: ` HeaderRow: `
text-transform: uppercase; text-transform: uppercase;
background-color: black; background-color: black;
color: #90CAF9; color: #90CAF9;
font-weight: 500;
border-bottom: 1px solid #e0e0e0; .th {
padding-left: 8px; height: 42px;
font-weight: 500;
border-bottom: 1px solid #565656;
}
`, `,
Row: ` Row: `
&:nth-of-type(odd) { .td {
padding: 8px;
border-top: 1px solid #565656;
border-bottom: 1px solid #565656;
}
&:nth-of-type(odd) .td {
background-color: #303030; background-color: #303030;
} }
&:nth-of-type(even) { &:nth-of-type(even) .td {
background-color: #1e1e1e; background-color: #1e1e1e;
} }
border-top: 1px solid #565656;
border-bottom: 1px solid #565656;
position: relative;
z-index: 1;
&:not(:last-of-type) {
margin-bottom: -1px;
}
&:not(:first-of-type) {
margin-top: -1px;
}
&:hover {
color: white;
}
`, `,
BaseCell: ` BaseCell: `
border-top: 1px solid transparent; &:not(:first-of-type) {
border-right: 1px solid transparent; text-align: center;
border-bottom: 1px solid transparent;
&:not(.stiff) > div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&:nth-of-type(1) {
padding-left: 8px;
flex: 1;
}
&:nth-of-type(2) {
width: 70px;
text-align: right;
}
&:nth-of-type(3) {
width: 40px;
text-align: right;
}
&:last-of-type {
width: 75px;
text-align: right;
padding-right: 8px;
} }
` `
}); });
@@ -224,19 +199,19 @@ const DashboardStatus: FC = () => {
<> <>
<Header> <Header>
<HeaderRow> <HeaderRow>
<HeaderCell></HeaderCell> <HeaderCell resize></HeaderCell>
<HeaderCell>SUCCESS</HeaderCell> <HeaderCell stiff>SUCCESS</HeaderCell>
<HeaderCell>FAIL</HeaderCell> <HeaderCell stiff>FAIL</HeaderCell>
<HeaderCell>QUALITY</HeaderCell> <HeaderCell stiff>QUALITY</HeaderCell>
</HeaderRow> </HeaderRow>
</Header> </Header>
<Body> <Body>
{tableList.map((stat: Stat) => ( {tableList.map((stat: Stat) => (
<Row key={stat.id} item={stat}> <Row key={stat.id} item={stat}>
<Cell>{stat.id}</Cell> <Cell>{stat.id}</Cell>
<Cell>{Intl.NumberFormat().format(stat.s)}</Cell> <Cell stiff>{Intl.NumberFormat().format(stat.s)}</Cell>
<Cell>{Intl.NumberFormat().format(stat.f)}</Cell> <Cell stiff>{Intl.NumberFormat().format(stat.f)}</Cell>
<Cell>{showQuality(stat)}</Cell> <Cell stiff>{showQuality(stat)}</Cell>
</Row> </Row>
))} ))}
</Body> </Body>

95
interface/src/project/SettingsCustomization.tsx
View File

@@ -63,80 +63,65 @@ const SettingsCustomization: FC = () => {
const [masks, setMasks] = useState(() => ['']); const [masks, setMasks] = useState(() => ['']);
const entities_theme = useTheme({ const entities_theme = useTheme({
Table: `
--data-table-library_grid-template-columns: 120px repeat(1, minmax(0, 1fr)) 120px;
`,
BaseRow: ` BaseRow: `
font-size: 14px; font-size: 14px;
color: white; .td {
height: 32px; height: 32px;
min-height: 32px; }
`,
BaseCell: `
&:last-of-type {
text-align: right;
}
`, `,
HeaderRow: ` HeaderRow: `
text-transform: uppercase; text-transform: uppercase;
background-color: black; background-color: black;
border-bottom: 1px solid #e0e0e0;
color: #90CAF9; color: #90CAF9;
font-weight: 500;
.th {
border-bottom: 1px solid #565656;
font-weight: 500;
}
&:nth-of-type(1) .th {
text-align: center;
}
`, `,
Row: ` Row: `
background-color: #1e1e1e; background-color: #1e1e1e;
border-top: 1px solid #565656;
border-bottom: 1px solid #565656;
position: relative; position: relative;
z-index: 1; cursor: pointer;
&:not(:last-of-type) {
margin-bottom: -1px; .td {
border-top: 1px solid #565656;
border-bottom: 1px solid #565656;
} }
&:not(:first-of-type) {
margin-top: -1px; &.tr.tr-body.row-select.row-select-single-selected {
}
&:hover {
z-index: 2;
color: white;
border-top: 1px solid #177ac9;
border-bottom: 1px solid #177ac9;
},
&.tr.tr-body.row-select.row-select-single-selected, &.tr.tr-body.row-select.row-select-selected {
background-color: #3d4752; background-color: #3d4752;
color: white; color: white;
font-weight: normal; font-weight: normal;
z-index: 2; }
&:hover .td {
border-top: 1px solid #177ac9; border-top: 1px solid #177ac9;
border-bottom: 1px solid #177ac9; border-bottom: 1px solid #177ac9;
} }
&:nth-of-type(odd) .td {
background-color: #303030;
}
`, `,
BaseCell: ` Cell: `
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
&:not(.stiff) > div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&:nth-of-type(1) {
width: 120px;
min-width: 120px;
max-width: 120px;
}
&:nth-of-type(2) { &:nth-of-type(2) {
padding-left: 8px; padding: 8px;
flex: 1;
} }
&:nth-of-type(3) { &:last-of-type {
padding-right: 8px; padding-right: 8px;
text-align: right;
width: 120px;
min-width: 120px;
}
`,
HeaderCell: `
&:nth-of-type(1) {
padding-left: 24px;
}
&:nth-of-type(2) {
padding-left: 0px;
}
&:not(:last-of-type) {
border-right: 1px solid #565656;
} }
` `
}); });
@@ -451,7 +436,7 @@ const SettingsCustomization: FC = () => {
<> <>
<Header> <Header>
<HeaderRow> <HeaderRow>
<HeaderCell>OPTIONS</HeaderCell> <HeaderCell stiff>OPTIONS</HeaderCell>
<HeaderCell resize> <HeaderCell resize>
<Button <Button
fullWidth fullWidth
@@ -462,13 +447,13 @@ const SettingsCustomization: FC = () => {
NAME NAME
</Button> </Button>
</HeaderCell> </HeaderCell>
<HeaderCell>VALUE</HeaderCell> <HeaderCell resize>VALUE</HeaderCell>
</HeaderRow> </HeaderRow>
</Header> </Header>
<Body> <Body>
{tableList.map((de: DeviceEntity) => ( {tableList.map((de: DeviceEntity) => (
<Row key={de.id} item={de}> <Row key={de.id} item={de}>
<Cell> <Cell stiff>
<ToggleButtonGroup <ToggleButtonGroup
size="small" size="small"
color="secondary" color="secondary"