Grid

Grid is a component for showing tabular data.

<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.

Docs