How can I adjust the following implementation of react material-table to customize column width, and to avoid cell wrapping of value?

Question

I use material-table, react, and material-ui.

I've really struggled to get material-table column widths set properly. I've googled a number of stack and git posts (e.g. one example, another example), all of which have made various suggestions.. none have worked for me.

Currently I am creating my table as follows (notice all the attempts to set width, max-width, min-width. I've tried many combinations of these).

I've also tried many combinations of the options parameters in an attempt to customize the table in a fashion consistent with the two questions at the bottom of this post.

return (
        <div className={classes.root} >
            <MaterialTable
                data={data}
                title={title}
                icons={tableIcons}
                onSelectionChange={(rows) => setSelectedRows(rows)}
                options={{
                    headerStyle: {
                        backgroundColor: "#01579b",
                        color: "#FFF"
                    },
                    tableLayout: "fixed",
                    rowStyle: {
                        overflowWrap: 'break-word'
                    },
                    selection: true,
                }}
                columns={[
                    {
                        title: "Id",
                        field: "id",
                        type: "numeric",
                        headerStyle: {
                            backgroundColor: "purple",
                            width: "5%"
                        },
                        cellStyle: {width: "5%", maxWidth: "5%", overflow: "hidden"},
                        width: "5%"
                    },
                    {
                        title: "Label",
                        field: "label",
                        headerStyle: {
                            backgroundColor: "blue",
                            width: "75%"
                        },
                        cellStyle: {width: "75%", maxWidth: "75%", overflow: "hidden"},
                        width: "75%"
                    },
                    {
                        title: "Time",
                        field: "time",
                        type: "string",
                        headerStyle: {
                            backgroundColor: "red",
                            width: "20%"
                        },
                        cellStyle: {width: "20%", maxWidth: "20%", overflow: "hidden"},
                        width: "20%"
                    }
                ]}
                actions={[
                    {
                        icon: () => <SaveAlt />,
                        tooltip: "Save User",
                        onClick: (event, rowData) => alert("You saved " + rowData.name)
                    }
                ]}
                components={{
                    Action: (props) => (
                        <Button
                            onClick={(event) => props.action.onClick(event, props.data)}
                            color="primary"
                            variant="text"
                            style={{ textTransform: "none" }}
                            size="small"
                        >
                            Save
                        </Button>
                    )
                }}

            />
        </div>
    );

where

const useStyles = makeStyles((theme) => ({
    root: {
        maxWidth: "600px",
        paddingTop: "2px"
    },
    margin: {
        margin: theme.spacing(1),
    },
    extendedIcon: {
        marginRight: theme.spacing(1),
    },
}));

My table looks like the following:

The following shows the CSS for the "td" element.

Oddly the width is set to 200px, and nothing I seem to do modifies this. Even when I change the value in the dev tools to something like 40px, this does not change the actual column width.

I am able to change the header width (in developer tools) for that column and then things look ok, but nothing I do in the code has allowed me to change the header width in this same fashion.

If I do the following for the ID column, one would think that it would set the width for the header, but it doesnt. It still shows up as 200px.

{
                        title: "Id",
                        field: "id",
                        type: "numeric",
                        headerStyle: {
                            backgroundColor: "red",
                            width: "80px"
                        },
                    },

Per the suggestion made in one of the comments, I've also tried this code.. to no avail:

export default function MyCustomTable(props) {
    const classes = useStyles();
    const tableRef = React.createRef();

    const tableColumns = [
        { title: "Lorem ipsum", field: "lorem", width: "10%" },
        { title: "Name", field: "name", width: "80%" },
        { title: "Custom status", field: "customStatus", width: "10%" }
    ];

    const tableData = [
        {
            lorem: "lorem",
            name: "name",
            customStatus: "customStatus"
        }
    ];

    return (
        <div className={classes.root} >
        <MaterialTable
            tableRef={tableRef}
            columns={tableColumns}
            data={tableData}
            title="Change Column Width Example"
            options={{
                tableLayout: "fixed"
            }}
        />
        </div>
    );
}

I've also tried to strip out all of my application except for the materialtable.. same styling problem.

Two questions:

1. How do I make the ID column narrower?
2. How do I configure the date so that it does not wrap onto a second row?