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