Basic data table made with carbon and tanstack.

MessageLog.jsx

import {
    DataTable,
    Loading,
    Tag, Toggletip, ToggletipButton, ToggletipContent, Layer
} from "@carbon/react";
import {Fragment} from "react";
import {useQuery} from "@tanstack/react-query";
import {Information} from "@carbon/icons-react";

const {
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableHead,
    TableHeader,
    TableRow,
} = DataTable;

export function MessageLog() {
    const { isPending: pending, error, data } = useQuery({
        queryKey: ['repoData'],
        queryFn: () =>
            fetch('/nbiot/audit',{
                headers: {
                    "Accept": "application/json",
                },
            }).then((res) => {
                return res.json();
            }, (error) => {
                console.log(`Error ${error}`)
            }),
    })
    console.log(`Request monitor ${pending}, ${error}, ${data}`)

    if (error || typeof error === Error) return (
        <TableContainer>
            <h1>Error</h1>
            <p>Failed loading data: {error}</p>
        </TableContainer>
    )

    if (pending) return (
        <Loading />
    )
    const headers = ['#', 'Time', 'Server', 'IMEI', 'Sender IP', 'Distance', 'X', 'Y', 'Z', '..'];
    return (
        <TableContainer title="Audit log" description="Messages received by all servers">
            <Table size="lg" useZebraStyles={false} aria-label="sample table">
                <TableHead>
                    <TableRow>
                        {headers.map((header, id) => <TableHeader key={header}>{header}</TableHeader>)}
                    </TableRow>
                </TableHead>
                <TableBody>
                    {data.map((row, idx) => {
                        return (
                            <TableRow key={idx + 1}>
                                <TableCell>{idx + 1}</TableCell>
                                <TableCell>{row.dateTime}</TableCell>
                                <TableCell>
                                    <Tag>{row.kind}</Tag>
                                </TableCell>
                                <TableCell>TBD</TableCell>
                                <TableCell>{row.ip}</TableCell>
                                {row.tilt ? (
                                    <>
                                    <TableCell>{row.tilt?.distance}</TableCell>
                                    <TableCell>{row.tilt?.tiltX}</TableCell>
                                    <TableCell>{row.tilt?.tiltY}</TableCell>
                                    <TableCell>{row.tilt?.tiltZ}</TableCell>
                                    </>
                                    )
                                    : ( <TableCell colSpan="4" aria-disabled={true} style={{textAlign: "center"}}></TableCell> )
                                }
                                <TableCell>
                                    {row.payload && (
                                        <Toggletip>
                                            <ToggletipButton label="Frame payload">
                                                <Information />
                                            </ToggletipButton>
                                            <ToggletipContent>
                                                <p>{row.payload}</p>
                                            </ToggletipContent>
                                        </Toggletip>
                                    )}
                                </TableCell>
                            </TableRow>
                        )
                    })}
                </TableBody>
            </Table>
        </TableContainer>
    )
}