Grid

Grid is a component for showing tabular data.

type Grocery = { name: string, quantity: number, symbol: string };
const [groceries, setGroceries] = useState<Grocery[]>([]);

useEffect(() => {
  // simulate getting data from the server
  setGroceries([
    { name: 'apples', quantity: 5, symbol: '🍎' },
    { name: 'oranges', quantity: 3, symbol: '🍊' },
  ]);
}, []);

return (
  <Grid items={groceries}>
    <GridColumn path='name' />
    <GridColumn path='quantity' />
  </Grid>
);

Selection

Selection isn’t enabled by default. Grid supports single and multi-select. Single select the user to select only one item, while multi-select enables multiple items to be selected.

Single selection mode

In single selection mode, the user can select and deselect rows by clicking anywhere on the row.

const [selectedgroceries, setSelectedGroceries] = useState<Grocery[]>([]);

return (
  <Grid
    items={groceries}
    selectedItems={selectedgroceries}
    onActiveItemChanged={({ detail: { value } }) => setSelectedGroceries(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={groceries}
  selectedItems={selectedgroceries}
  onSelectedItemsChanged={({ detail: { value } }) => setSelectedGroceries(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 alphabetically, numerically, by date, etc.

<Grid items={groceries}>
  <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={groceries}>
  <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 more information in a more legible fashion. Including other components is also supported.

<Grid items={groceries}>
  <GridColumn
    header='Item Name'
    renderer={({ item }) => <Button>{item.name.toUpperCase()}</Button>}
  />
  <GridColumn
    header='#'
    renderer={({ item }) => <span>{item.symbol.repeat(item.quantity)}</span>}
  />
</Grid>

Docs