DataTable

Demo

Simple table

<DataTable
    shadow={0}
    rows={[
        {material: 'Acrylic (Transparent)', quantity: 25, price: 2.90},
        {material: 'Plywood (Birch)', quantity: 50, price: 1.25},
        {material: 'Laminate (Gold on Blue)', quantity: 10, price: 2.35}
    ]}
>
    <TableHeader name="material" tooltip="The amazing material name">Material</TableHeader>
    <TableHeader numeric name="quantity" tooltip="Number of materials">Quantity</TableHeader>
    <TableHeader numeric name="price" cellFormatter={(price) => `\$${price.toFixed(2)}`} tooltip="Price pet unit">Price</TableHeader>
</DataTable>

Selectable Table with checkboxes

<DataTable
    selectable
    shadow={0}
    rowKeyColumn="id"
    rows={[
        {id: 1001, material: 'Acrylic (Transparent)', quantity: 25, price: 2.90},
        {id: 1002, material: 'Plywood (Birch)', quantity: 50, price: 1.25},
        {id: 1003, material: 'Laminate (Gold on Blue)', quantity: 10, price: 2.35}
    ]}
>
    <TableHeader name="material" tooltip="The amazing material name">Material</TableHeader>
    <TableHeader numeric name="quantity" tooltip="Number of materials">Quantity</TableHeader>
    <TableHeader numeric name="price" cellFormatter={(price) => `\$${price.toFixed(2)}`} tooltip="Price pet unit">Price</TableHeader>
</DataTable>

Sortable table

<Table
    sortable
    shadow={0}
    rows={[
        {material: 'Acrylic (Transparent)', quantity: 25, price: 2.90},
        {material: 'Plywood (Birch)', quantity: 50, price: 1.25},
        {material: 'Laminate (Gold on Blue)', quantity: 10, price: 2.35}
    ]}
>
    <TableHeader
        name="material"
        sortFn={(a, b, isAsc) => (isAsc ? a : b).match(/\((.*)\)/)[1].localeCompare((isAsc ? b : a).match(/\((.*)\)/)[1])}
        tooltip="The amazing material name"
    >
        Material
    </TableHeader>
    <TableHeader
        numeric
        name="quantity"
        tooltip="Number of materials"
    >
        Quantity
    </TableHeader>
    <TableHeader
        numeric
        name="price"
        cellFormatter={(price) => `\$${price.toFixed(2)}`}
        tooltip="Price pet unit"
    >
        Price
    </TableHeader>
</Table>

Configuration

Prop	Type	Effect	Remarks
columns	Array of {label, name, numeric, tooltip}	Set the columns	Required
onSelectionChanged	Function	Handler to get the selected rows	Optional. Required when selectable is set
rowKeyColumn	String	Will define the key for each row based on the content of the column specified (will often be id or uid)	Optional, but recommended
rows	Array of object	Set the rows data	Required. The properties of each object should be the “name” of each column
selectable	Boolean	Adds checkboxes in front of each rows to select it	Optional.
shadow	Number	Defines the shadow depth	Optional. If provided, must be between 0 and 6 inclusive. If omitted, table will not have any shadow.