Grid
<Grid items={fruits}>
<GridColumn path="name" />
<GridColumn path="quantity" />
</Grid>
Selection
Selection isnβt enabled by default. However, Grid supports single and multi-select. Single-select allows the user to select only one item, while multi-select permits multiple items to be selected. These are described in the subsections that follow.
Single-Selection Mode
In single-selection mode, the user can select and deselect rows by clicking anywhere on the row.
<Grid
items={fruits}
selectedItems={selectedFruits}
onActiveItemChanged={({ detail: { value } }) =>
setSelectedFruits(value ? [value] : [])
}
>
<GridColumn path="name" />
<GridColumn path="quantity" />
</Grid>
Multiple-Selection Mode
In multi-select mode, the user can use a checkbox column to select and deselect rows.
<Grid
items={fruits}
selectedItems={selectedFruits}
onSelectedItemsChanged={({ detail: { value } }) =>
setSelectedFruits(value)
}
>
<GridSelectionColumn />
<GridColumn path="name" />
<GridColumn path="quantity" />
</Grid>
Sorting
Any column can be made sortable. Enable sorting to allow the user to sort items by multiple factors: alphabetically, numerically, chronologically, etc.
<Grid items={fruits}>
<GridSortColumn path="name" />
<GridSortColumn path="quantity" />
</Grid>
Filtering
Filtering allows the user to find a specific item or subset of items. You can add filters to Grid columns or use external filter fields.
<Grid items={fruits}>
<GridFilterColumn path="name" />
<GridFilterColumn path="quantity" />
</Grid>
Renderers
A basic Grid uses plain text to display information in rows and columns. Rich content can be used to offer additional information in more legibly fashion. Including other components is also supported.
<Grid items={fruits}>
<GridColumn header="Item Name">
{({ item }) => <Button>{item.name.toUpperCase()}</Button>}
</GridColumn>
<GridColumn header="#">
{({ item }) => <span>{item.symbol.repeat(item.quantity)}</span>}
</GridColumn>
</Grid>
You can test these example grids with this data:
type Fruit = { name: string; quantity: number; symbol: string };
export function useFruits() {
const fruits = [
{ name: "apples", quantity: 5, symbol: "π" },
{ name: "oranges", quantity: 3, symbol: "π" },
{ name: "bananas", quantity: 9, symbol: "π" },
{ name: "grapes", quantity: 7, symbol: "π" },
{ name: "cherries", quantity: 10, symbol: "π" },
{ name: "pineapples", quantity: 2, symbol: "π" },
{ name: "peaches", quantity: 6, symbol: "π" },
{ name: "watermelons", quantity: 1, symbol: "π" },
{ name: "strawberries", quantity: 4, symbol: "π" },
{ name: "blueberries", quantity: 8, symbol: "π«" },
];
const [selectedFruits, setSelectedFruits] = useState<Fruit[]>([]);
return { fruits, selectedFruits, setSelectedFruits };
}
Important
| You can find more information in the corresponding article on vaadin.com. |