Data List

<DataList
    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" />
    ]}
    items={[
        {id: "987ABCD", desc: "1"},
        {id: "654ABCD", desc: "2"},
        {id: "643ABCD", desc: "3"}
    ].map(i => ({...i, employee:
        <AnvilSelect
            options={[{text: 'John Doe'}, {text: 'Mandy Howard'}, {text: 'Aditya Gupta'}]}
            trigger={{placeholder: 'Technician', size: 'small'}}
        />
    }))}
/>

<DataList
    spacing={1}
    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" />
    ]}
    items={[
        {id: "987ABCD", desc: "1"},
        {id: "654ABCD", desc: "2"},
        {id: "643ABCD", desc: "3"}
    ].map(i => ({...i, employee:
        <AnvilSelect
            options={[{text: 'John Doe'}, {text: 'Mandy Howard'}, {text: 'Aditya Gupta'}]}
            trigger={{placeholder: 'Technician', size: 'small'}}
        />
    }))}
/>

<DataList
    simple
    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" />
    ]}
    items={[
        {id: "987ABCD", desc: "1"},
        {id: "654ABCD", desc: "2"},
        {id: "643ABCD", desc: "3"}
    ].map(i => ({...i, employee:
        <AnvilSelect
            options={[{text: 'John Doe'}, {text: 'Mandy Howard'}, {text: 'Aditya Gupta'}]}
            trigger={{placeholder: 'Technician', size: 'small'}}
        />
    }))}
/>