Table

<Table data={[
    { id: 1, name: 'Chai', price: 18 },
    { id: 2, name: 'Chang', price: 19 },
    { id: 3, name: 'Aniseed Syrup', price: 10 },
    { id: 4, name: 'Chef Anton’s Cajun Seasoning', price: 22 },
    { id: 5, name: 'Chef Anton’s Gumbo Mix', price: 21.35 }
]}>
    <TableColumn field="id" title="Id" width="60px" />
    <TableColumn field="name" title="Name" />
    <TableColumn field="price" title="Price" width="180px" format="{0:c}" />
</Table>

<Table data={[
    { id: 1, name: 'Chai', price: 18 },
    { id: 2, name: 'Chang', price: 19 },
    { id: 3, name: 'Aniseed Syrup', price: 10 },
    { id: 4, name: 'Chef Anton’s Cajun Seasoning', price: 22 },
    { id: 5, name: 'Chef Anton’s Gumbo Mix', price: 21.35 }
]}>
    <TableColumn field="id" title="Id" width="60px" />
    <TableColumn field="name" title="Name" />
    <TableColumn field="price" title="Price" width="180px" format="{0:c}" />
</Table>

Loading

Spinner could be shown in the case of loading data.

<Table
    loading
    data={[
        { id: 1, name: 'Chai', price: 18 },
        { id: 2, name: 'Chang', price: 19 },
        { id: 3, name: 'Aniseed Syrup', price: 10 },
        { id: 4, name: 'Chef Anton’s Cajun Seasoning', price: 22 },
        { id: 5, name: 'Chef Anton’s Gumbo Mix', price: 21.35 }
    ]}
>
    <TableColumn field="id" title="Id" width="60px" />
    <TableColumn field="name" title="Name" />
    <TableColumn field="price" title="Price" width="180px" format="{0:c}" />
</Table>

<Table
    loading
    data={[
        { id: 1, name: 'Chai', price: 18 },
        { id: 2, name: 'Chang', price: 19 },
        { id: 3, name: 'Aniseed Syrup', price: 10 },
        { id: 4, name: 'Chef Anton’s Cajun Seasoning', price: 22 },
        { id: 5, name: 'Chef Anton’s Gumbo Mix', price: 21.35 }
    ]}
>
    <TableColumn field="id" title="Id" width="60px" />
    <TableColumn field="name" title="Name" />
    <TableColumn field="price" title="Price" width="180px" format="{0:c}" />
</Table>

No Stripes

Zebra stripes are useful when a Table is read-only or has simple content inside the cells. When content is more complex, the stripes can create too much noise in the UI.