const Example01 = () => {
    const select = (
        <select>
            <option>John Doe</option>
            <option>Mandy Howard</option>
            <option>Aditya Gupta</option>
        </select>
    );

    const items = [
        { id: "987ABCD", desc: "1", employee: select },
        { id: "654ABCD", desc: "2", employee: select },
        { id: "643ABCD", desc: "3", employee: select }
    ];
    return (
        <DataList
            items={items}
            header={[
                <DataList.HeaderCell key={0} name="id" content="Contact ID" />,
                <DataList.HeaderCell key={1} name="desc" content="Description" />,
                <DataList.HeaderCell key={2} name="employee" content="Employee" />
            ]}
        />
    )
}

render (Example01);

Spacing

For more compact layouts, spacing between Data List rows can be condensed.

const Example02 = () => {
    const select = (
        <select>
            <option>John Doe</option>
            <option>Mandy Howard</option>
            <option>Aditya Gupta</option>
        </select>
    );

    const items = [
        { id: "987ABCD", desc: "1", employee: select },
        { id: "654ABCD", desc: "2", employee: select },
        { id: "643ABCD", desc: "3", employee: select }
    ];

    return (
        <DataList
            spacing={1}
            items={items}
            header={[
                <DataList.HeaderCell key={0} name="id" content="Contact ID" />,
                <DataList.HeaderCell key={1} name="desc" content="Description" />,
                <DataList.HeaderCell key={2} name="employee" content="Employee" />
            ]}
        />
    )
}

render (Example02);

Simpler Look

For table with transparent background and border only on the header.

const Example03 = () => {
    const select = (
        <select>
            <option>John Doe</option>
            <option>Mandy Howard</option>
            <option>Aditya Gupta</option>
        </select>
    );

    const items = [
        { id: "987ABCD", desc: "1", employee: select },
        { id: "654ABCD", desc: "2", employee: select },
        { id: "643ABCD", desc: "3", employee: select }
    ];

    return (
        <DataList
            simple
            items={items}
            header={[
                <DataList.HeaderCell key={0} name="id" content="Contact ID" />,
                <DataList.HeaderCell key={1} name="desc" content="Description" />,
                <DataList.HeaderCell key={2} name="employee" content="Employee" />
            ]}
        />
    )
}

render (Example03)

Importing

import { DataList } from '@servicetitan/design-system';