Search code examples
javascriptmaterial-table

How to make characters between , and : bold in a string

I have a column in Material-Table which contains a vvery long string. I want to format this string such that when it is rendered, text in the column will be displayed like this: DomainName: Corporate, DomainLeader: Doe, John, EmployeeNumber: 123456, .......

I have this code which is used in another column to split a string into separate lines to improve readability:

render: (rowData) => (
    <Box style={{ flexDirection: "row" }}>
        {rowData.Taxonomy.split(", ").map((b) => (
            <Box style={{ display: "flex" }}>
                <Box style={{ fontWeight: "bold" }}>{b.split(":")[0]}:</Box>
                <Box>&nbsp;{b.split(":")[1]}</Box>
            </Box>
        ))}
    </Box>
),
Solution

  • I have changed the code in my question to get the desired outcome.

    render: (rowData) => (
    <Box style={{ flexDirection: "row" }}>
        {rowData.details.split(",").map((b) => (
            <>
                <b>{b.split(":")[0]}:</b>&nbsp;{b.split(":")[1]},&nbsp;&nbsp;
            </>
        ))}
    </Box>          
),