<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'}}
/>
}))}
/>
Spacing
For more compact layouts, spacing between Data List rows can be condensed.
<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'}}
/>
}))}
/>
Simpler Look
For table with transparent background and border only on the header.
<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'}}
/>
}))}
/>
Importing
import { DataList } from '@servicetitan/design-system';
